Figmaで検討したいフォント10選：本文・見出しの選び方

UIのフォントは、製品の印象と読みやすさの両方に関わります。見出しで目を引く書体が、長い本文や小さなラベルにも適しているとは限りません。画面で使うサイズと文章量に合わせて選びましょう。

ここでは、Figmaでのデザインに検討したい10の書体を、本文・操作ラベル・短い見出しの用途から見ていきます。欧文の見本がきれいでも、日本語を同じ書体で表示できるとは限りません。和文を含む画面は、日本語フォントの選び方と合わせて、漢字・かな・英数字が混ざった状態で判断してください。

第1部：フォントを選ぶ前に、画面での役割を決める

フォントを比較するときは、製品の印象、ブランドとの関係、運用のしやすさを確認します。「好みの書体を一つ選ぶ」のではなく、「どの文字を、どの場面で読んでもらうか」から考えると候補を絞りやすくなります。

1. UIのトーン＆マナーを定義する

フォントの形や太さは、画面の印象を左右します。落ち着きや親しみやすさなど、製品で伝えたい印象を整理したうえで、文字の読みやすさと合わせて判断しましょう。

たとえば、予約サービスなら「Reserve a table」という見出しだけでなく、「予約内容を変更する」というボタンや、時刻の「18:30」も比較します。印象が合っていても、頻繁に読む時刻や操作名を判別しにくければ、UI全体の書体には向きません。

2. ブランドアイデンティティを文字の役割へ落とし込む

一貫した書体の使い方は、ブランドを覚えてもらう手がかりになります。ロゴの個性を本文にそのまま持ち込むのではなく、見出し、本文、操作ラベルの役割に合わせて書体を選びましょう。

装飾的な欧文をファーストビューの短い見出しへ使い、説明と操作には読みやすい書体を使う方法もあります。すべてを同じ書体にすることと、一貫性があることは同じではありません。役割と組み合わせ方が画面ごとに変わらないことが重要です。

3. 設計プロセスの効率化

本文と見出しに使う書体、サイズ、行間をあらかじめ定めると、画面ごとの判断を減らせます。小さなラベルや長い文章、多言語の表示も確認し、チームで共有する文字スタイルにまとめましょう。

候補の比較では、先に同じ文字列、同じ枠幅、同じ文字サイズを使います。その後に各書体へ合う行間や太さを調整すると、「書体の違い」と「設定の違い」を分けて見られます。見本ごとに文章やサイズまで変えると、どの候補が適しているか判断しにくくなります。

第2部：Figmaで検討したいフォント10選

以下は、用途を分けて比較するための候補です。Figmaにすべて標準搭載されているという意味ではありません。外部で入手した書体は、配布元、利用条件、必要なスタイル、収録文字を確認します。ローカルフォントの導入方法は、Figma公式のフォント追加手順を参照してください。

1. Lato：本文と操作ラベルを同じ画面で比べる

Latoはサンセリフ体です。本文や操作ラベルで使う場合は、細いウェイトでも小さな文字を読み取れるか、実際の画面で比較しましょう。

予約サービスなら、説明文と「Continue」のボタンを並べ、文章の読み進めやすさと操作の見つけやすさを別々に見ます。見出しを太くするだけで階層を作れるか、本文にまで強い太さが必要になっていないかを確認します。

2. Great Sailor：短い見出しで個性を出す

Great Sailorは、ブランドの雰囲気を表現する候補として検討できます。装飾性のある書体を選ぶときは、短い見出しと本文で役割を分けると使いやすくなります。

下の見本では、大きな欧文の輪郭やセリフが目を引きます。この印象を生かすなら、キャンペーン名や短いページ見出しから試します。同じ見出しをスマートフォン幅に収めたとき、改行で言葉が読みにくくならないかも確認してください。小さなエラー文まで同じ書体にそろえる必要はありません。

3. Woodman：強い見出しと本文の役割を分ける

Woodmanは、見出しやブランド表現で個性を出したいときの候補です。文字数の多い箇所に使う前に、字間と行間を調整して読みやすさを確認しましょう。

見本の太いスラブセリフを使う場合、見出しの面積が大きくなりやすいため、その下の説明まで太くすると視線の置き場がなくなります。見出しは短く、本文は別の落ち着いた書体にするなど、情報の強弱を設計します。

4. Avalon：書体名だけでなく配布元も指定する

Avalonを使う場合は、見出しと操作ラベルで印象を比較してみましょう。数字や似た形の文字の見分けやすさも、UIでは重要な選定基準です。

ただし、Avalonという名前には異なる配布元の書体があります。FontSiteのAvalonと、Lipton Letter DesignのAvalonは、同じものとして扱えません。後者は筆記体の書体です。チームへ渡すときは「Avalonを使用」とだけ書かず、配布元とスタイルまで記録します。

この確認をしてから、選んだ書体で画面の文字を比較してください。名前が一致するだけで、共同編集者の環境にも同じ字形があると考えないことが大切です。

5. Nunito：丸みと情報の密度を見比べる

Nunitoは、丸みのあるサンセリフ体です。親しみやすい印象を持たせたいUIで検討できます。ウェイトを変えても文字の大きさや階層が伝わるか確認しましょう。

一覧の行数が多い画面では、親しみやすさだけでなく、ラベルと数値を繰り返し読めるかも重要です。予約名、人数、時刻を一つの行へ配置し、強調する値だけを変えて比べます。下の見本のように別の本文書体と組み合わせる場合も、どちらが見出しを担当するかを明確にします。

6. Lunatoire：欧文見出しと和文本文の差を調整する

Lunatoireは、ブランド表現やエディトリアルの見出しで検討できる書体です。本文用の書体と組み合わせる際は、文字の高さや太さの差を見て調整します。

欧文見出しの下に日本語の説明を置くなら、見出しが小さく見えないか、本文が過度に黒く見えないかを比べます。同じ数値の文字サイズでも、書体が違うと見た目の大きさはそろいません。数字を機械的に一致させるより、実際の階層が伝わる組み合わせを探します。

7. Roboto：ラベルと数字を含めて比較する

Robotoは、UIで広く使われるサンセリフ体です。本文、ラベル、数字などを同じ画面に並べ、必要なサイズとウェイトを選びましょう。

英字の文章だけで判断せず、時刻、金額、注文番号も入れます。「0」と「O」、「1」と「I」などが混ざる識別子では、何を読めればよいかが文章と異なります。見分けづらい場合は、太さだけでなく、文字列の区切り方や表示方法も検討します。

8. Montagu Slab：見出しの折り返しまで設計する

Montagu Slabは、太いセリフが特徴の書体です。見出しに使う場合は、本文とのコントラストと小さな画面での折り返しを確認します。

見出しを一行に収めるために極端に小さくすると、選んだ書体の個性も伝わりにくくなります。短い表現へ整えるか、意味のまとまりで二行にするかを検討しましょう。画面幅が変わっても本文の開始位置がわかるよう、見出しの下の余白も合わせて比較します。

9. Laro：太い文字を使う範囲を決める

Laroは、ロゴやバナーなどの短い文字列で検討できる書体です。太いウェイトを使うときは、字間が詰まりすぎず、文字の輪郭を読み取れるか確認しましょう。

大きな「LARO」の見本で感じる力強さと、小さな操作ラベルでの読みやすさは別に評価します。予約サービスなら、ブランド名には強いウェイトを試しても、「キャンセル」や補足説明は別の太さで比べます。太いほど重要に見えるからこそ、画面内で使う範囲を絞ると効果が明確になります。

10. Resist Sans：見出し用と本文用を分けて試す

Resist Sansはサンセリフ体です。見出しと本文の両方で使う場合は、サイズやウェイトの違いで情報の階層を作ります。

制作者による紹介では、DisplayとTextという異なる用途の系列が説明されています。大きな見出しの印象だけで本文用を決めず、必要な系列とスタイルを確認しましょう。下の大きな文字の見本は見出しの参考になり、細かな説明文の評価には別の実際の文章が必要です。

第3部：Pixsoで同じ画面を使って文字スタイルを整える

Pixsoでは、画面の文字を編集し、チームで共有する文字スタイルを整理できます。Figmaファイルを取り込んだ場合も、使用するフォントと改行、行間を確認しましょう。ローカルフォントを使う場合はFont Assistantを利用し、採用する書体を利用できる状態にします。

予約確認カードを比較用に作る

たとえば、予約確認カードに次の文字を配置します。候補ごとに同じカードを複製し、書体だけを変えて比較すると、見た目の印象に加えて、実際の情報を読めるか判断できます。

和文と欧文を別の書体で組む場合は、どちらかを選べば自動的に適切な組み合わせになると考えず、それぞれの表示を確認します。欧文の見本画像は字形や雰囲気の参考であり、日本語の収録文字を示すものではありません。

採用した組み合わせをチームで再現できるようにする

決まったら、見出し、本文、ラベルの文字スタイルへまとめます。書体名だけでなく、配布元、スタイル名、使う場面、組み合わせる日本語書体を記録してください。ファイルを開く人が同じスタイルを使えるかも、共有前に確認します。

また、デザイン制作で使えることと、公開するサイトやアプリへフォントファイルを組み込めることは別に確認します。制作段階で配布元の利用条件を共有しておくと、実装直前に書体を変更し、全画面の改行を調整し直す事態を避けやすくなります。

見本の印象を、実際に読める画面へつなげる

10の候補から一つを選ぶ前に、その書体が担当する役割を決めましょう。本文・ラベル・見出しを同じ画面に置き、日本語、数字、長い文字列まで比べると、見本ではわからなかった長所や弱点が見えてきます。Pixsoで比較画面を作り、採用する文字スタイルをチームと共有してみてください。

Pixsoでフォントの組み合わせを比較する