Figma でスクロール可能なアセットを作成する方法

Figma でコンテンツをスクロール可能にするには、サイド タブに移動する必要があります。残念ながら、メイン ユーザー インターフェイスには自動的に表示されません。スクロール可能なコンテンツは、デザインのフレーム内に多くの情報を表示したい場合に便利です。例としては、ランディング ページ、アプリ インターフェイス、ポップアップ ウィンドウなどがあります。

この記事では、Figma のデザインをスクロール可能にする方法について説明します。

スクロール可能なテキストを図形内にフィットさせる

まずは、単純な図形内にスクロール可能なテキストを作成してみましょう。これはスクロール可能なテキストの最も一般的な例であり、色、フォント、アウトラインなどの他のプロパティを後で追加できます。

その方法は次のとおりです。

1. 基本的な形状を作成します。この例では、縦長の長方形を作成することをお勧めします。これを行うには、左側のサイドバーで長方形ツールを選択するか、「R」コマンドを使用します。左を押したままキャンバスの点をクリックし、形状を描画します。

   

2. 右側のサイドバーの「デザイン」タブで、「コンテンツをクリップ」オプションの横にチェックを入れます。

   

3. テキスト ツールを選択してテキスト ボックスを作成し、スクロール可能なフレーム内に配置します。使用しているコンテンツを入力するか、コピーして貼り付けます。

   

4. フレームを選択し、インターフェイスの右側にあるプロトタイプ タブに移動します。次に、「オーバーフロー スクロール」オプションと好みのスタイルを選択します。ここでは「縦スクロール」を選択します。

   

プロトタイプ タブのオーバーフロー スクロール オプションをクリックすると、複数のスタイルが表示されます。例として縦長の長方形を使用しているため、縦長のものを選択します。これにより、テキストを上から下まで読むことができます。他のスタイルには次のようなものがあります。

• 水平スクロール – いくつかの例では、ユーザーはテキストを左から右にスクロールできます。このオプションは、造園形式でデザインを作成する場合に推奨されます。
• スクロールなし – コンテンツを所定の位置に固定したい場合は、スクロールなしのオプションを選択します。
• 両方向 – 多くのコンテンツを含むデザインを作成し、垂直方向と水平方向の両方にスクロールします。

読者がコンテンツを操作する際にかかる労力 (クリック) を最小限に抑えるために、デザイン内でスクロール可能な機能を使用する必要があります。大量のテキストをクリックまたはタップする代わりに、スワイプまたはマウス ホイールを使用できます。

スクロール可能なコンポーネントを設計する方法

製品によっては、コンテンツ フレームとコンテンツ自体をデザインする必要があります。このプロセスには、色、フォント、および場合によってはその他のコンポーネントをデザイン全体に追加することが含まれます。これらの要素を変更するのは簡単ですが、適切な外観を選択するには慎重な検討が必要です。

スクロール可能なデザインのフォントを変更する方法

最初に行う必要があるのは、スクロール可能なデザインのフォントを変更することです。Figma では、幅広いスタイルからお選びいただけます。最も簡単な方法は次のとおりです。

1. 変更したいスクロール可能なフレーム内のコンテンツを選択します。

   

2. 左上にあるドロップダウン メニューに移動して選択します。

   

3. 使用したいフォントが見つかるまで、フォントをスクロールします。

   

デザインしているブランドに特定のタイポグラフィーがある場合は、ブランド イメージと一致するように同じものを選択する可能性があります。もっと自由に調整できる場合は、適切な例を選択する前に、さまざまな例を試してみてください。

いくつかの考慮事項は次のとおりです。

• デザインの意図 – タイポグラフィの選択は、デザインの意図と一致している必要があります。多くの情報を明確に伝えたい場合は、装飾が少なくエレガントなフォントを目指してください。
• その他のコンポーネント – フォントは、デザイン内の他のコンポーネントと同様に視覚的な要素です。含めるフレームやその他のコンポーネントと一致する必要があります。
• 全体的な美学とブランディング – ブランドの全体的な雰囲気も、選択したフォントに影響を与えるはずです。たとえば、花の配達サービスには SAAS ランディング ページと同じフォントは使用されません。

正しいフォントを選択するには多少の実験が必要になる場合がありますが、いくつかの具体的なフォントの例が最も信頼できるオプションです。

• Roboto – 安全に行動したい場合は、Roboto を使用してください。多くの用途に使用できる、多用途でニュートラルなフォントと考えられています。非常に理解しやすいため、多くの人が手順やランディング ページとして Roboto を選択します。
• ポピンズ – フレンドリーでありながらモダンでクリーンな魅力を求めるなら、ポピンズをお選びください。このフォントはより丸みを帯びており、テキストを魅力的で読みやすくします。
• Raleway – 洗練された高級ブランドのデザインを行う場合は、Raleway を検討することをお勧めします。全体的に薄いですが、重さのバリエーションがあり、全体的にエレガントな外観です。
• Lato – フレンドリー、信頼できる、真面目という言葉がこのフォントを表すのにぴったりです。デザイナーは、読みやすさと明瞭さが最大の関心事である見出しや段落テキストに Lato を使用できます。

選択したフォント サイズとテキスト スタイルも考慮する必要があります。一般に、太字は見出しや強調部分に使用され、斜体は引用に使用されます。

フレーム形状の色を変更する

フォントを変更するだけでなく、フレームの形状の色も変更する必要があります。繰り返しになりますが、正確な色合いは、デザインしているブランドやあなたの美学によって異なります。幸いなことに、Figma のインターフェイスでは色の選択が簡単です。

フレームの色を変更する方法は次のとおりです。

1. 編集したいフレームを選択します。

   

2. レイヤーが右側のサイドバーに表示されます。「塗りつぶし」セクションに移動します。

   

3. 「+」を選択して塗りつぶしを追加します。

   

4. カラーピッカーウィンドウが開きます。塗りつぶしの色とグラデーションを選択します。正確な色相がわかっている場合は、16 進コードを入力することもできます。

   

他のデザイン要素と同様に、さまざまな色を試し、選択したフォントでどのように見えるかを試す必要がある場合があります。

よくある質問

Figma にはスクロール可能なテキスト コマンドはありますか?

残念ながら、Figma 内でテキストをスクロール可能にするコマンドはありません。ただし、上記の方法を使用すると、数回クリックするだけでプロセスを完了できます。

どのオーバーフロー オプションが必要かを決めるにはどうすればよいですか?

それは、使用しているテキストの種類、全体的なデザイン、およびその機能によって異なります。縦書きスタイルは通常、大きなテキストをざっと読むのに適しています。

通常、スクロール可能なテキスト デザインが必要となるのはどのデバイス インターフェイスですか?

良い例は、アプリのデザインのモックアップです。ユーザーは一般的なフレームとして電話を作成でき、スクロール可能なテキストをアプリのインターフェイスにすることができます。

Figma はスクロール可能なデザインを作成するのに最適な選択肢ですか?

Figma は、スクロール可能なデザインを含む幅広いフォームを作成するための最良のツールの 1 つです。さらに良いことに、Figma は無料です。ただし、特定の個人的な好みがあるかもしれません。最適なツールが見つかるまで、Adobe Illustrator などのいくつかのプラットフォームを試してみてください。

デザインをスクロール可能で使いやすいものにする

Figma のフレーム内にテキストを作成するのは簡単です。フレームを選択して、クリップ コンテンツ オプションに移動するだけです。完了したら、オーバーフロー スクロール オプションを選択できます。同様に、フレームの色や形、テキストのフォントなど、他の重要なデザイン要素も無視してはなりません。デザインをスクロール可能にすることは、ランディング ページ、アプリ インターフェイス、ポップアップ ウィンドウにとって優れた選択肢です。これにより、テキストをクリックする代わりに流し読みしやすくなり、最終的にユーザー エクスペリエンスが向上します。

Figma でコンテンツをスクロール可能にするのは簡単だと思いましたか? 適切なフォントを選択するとどうなるでしょうか? 以下のコメントセクションでお知らせください。