タイポグラフィ - フォント選びと文字組み

タイポグラフィ — テキストスタイルとフォント設計

タイポグラフィはデザインの中で最も情報量が多いにもかかわらず、最も軽視されがちな要素です。優れたタイポグラフィは「見えない」——つまり、読者はデザインを意識せず、自然にコンテンツに集中できます。逆に、タイポグラフィが乱れていると、内容が良くてもデザイン全体が素人っぽく見えます。

このレッスンでは、フォントの選び方からFigmaのテキストスタイル設定、行間・字間の実践的な調整方法まで、体系的に習得します。

タイポグラフィスケール — テキストスタイル設計

---

フォントの基礎知識

フォントの種類

UIデザインではサンセリフ体が主流です。画面解像度でもきれいに表示され、読みやすさが高いためです。

日本語フォントの選び方

日本語テキストを含むデザインでは、日本語フォントの選択が特に重要です。

💡 Figmaは Google Fonts と直接連携しており、インストール不要でNoto Sans JPなどを使用できます。フォントピッカーでフォント名を入力するだけで適用できます。

---

タイポグラフィスケールの設計

スケールとは

タイポグラフィスケールとは、デザイン内で使用するフォントサイズの段階的な設定です。スケールが明確だと、どこにどのサイズを使うかの判断が迷いなくできます。

推奨スケール（8pt グリッドベース）:

⚠️ 見出しのレベル間（Display〜H3）は最低でも4px以上の差をつけてください。H2=24px、H3=22pxのような近すぎるサイズは視覚的な階層が認識できません。本文以下の小さいサイズ帯は2px前後の差で段階を刻み、ウェイトや用途の違いで使い分けます。

---

行間と字間の科学

行間（Line Height）

行間は「読みやすさ」に直結する最重要設定です。

日本語テキストの推奨行間:

• ◆見出し（2行以内）: 1.2〜1.3
• ◆本文（長文）: 1.7〜1.8（日本語は英語より広めが読みやすい）
• ◆キャプション・ラベル: 1.4〜1.5

なぜ日本語は行間を広くするのか: 日本語の文字は漢字・ひらがな・カタカナ・記号が混在し、視覚的な密度が高いです。英文より広い行間を取ることで、視線が次の行に自然に移動できます。

字間（Letter Spacing）

字間の調整は繊細な作業ですが、効果は大きいです。

---

FigmaでGoogle Fontsを使う

セットアップ手順

FigmaはデフォルトでGoogle Fontsに対応しています。特別な設定は不要で、フォントピッカーに名前を入力するだけで使えます。

1. ◆テキスト要素を選択
2. ◆右パネルのフォントファミリー欄をクリック
3. ◆「Noto Sans JP」や「Inter」などと入力
4. ◆ウェイト（Regular, Bold等）を選択

💡 英語と日本語の2フォント戦略: 英数字に「Inter」、日本語に「Noto Sans JP」を組み合わせるのが現在のUIデザインのスタンダードです。InterはNoto Sans JPとの親和性が高く、混在テキストでも違和感がありません。

---

Figmaでテキストスタイルを設定する

ステップ1: ベーステキストを作成して設定

1. ◆テキストツール（T）でテキストを作成
2. ◆フォント・サイズ・ウェイト・行間・字間を設定

ステップ2: スタイルとして保存

1. ◆テキストを選択した状態で右パネルのTextセクションを確認
2. ◆セクション名右の「4つの点」アイコンをクリック
3. ◆「Create style」をクリック
4. ◆名前をつけて保存（例: Heading/H1、Body/Regular）

ステップ3: 階層を統一して全スタイルを作成

Display / H1 / H2 / H3 / Body L / Body M / Caption / Overline の8スタイルを作成したら、スタイルライブラリが完成です。以降はテキストを選択してスタイルを適用するだけです。

⚠️ テキストスタイルを作成した後は、個別にサイズを変更する習慣をやめてください。変更はスタイルの定義を編集することで行います。そうすれば、そのスタイルを使っているすべてのテキストが一括更新されます。

---

🏋️実践ワーク

1. ◆新しいフレームを作成し、フォントを「Noto Sans JP」に設定してください。
2. ◆以下の8つのテキストスタイルをFigmaに登録してください。
   • ◆Display: 48px / Bold / 行間1.2
   • ◆Heading/H1: 32px / Bold / 行間1.25
   • ◆Heading/H2: 24px / SemiBold / 行間1.3
   • ◆Heading/H3: 18px / Medium / 行間1.4
   • ◆Body/Large: 16px / Regular / 行間1.75
   • ◆Body/Medium: 14px / Regular / 行間1.7
   • ◆Caption: 12px / Regular / 行間1.5
   • ◆Overline: 11px / Medium / 行間1.4
3. ◆登録したスタイルを使って、架空のブログ記事のサムネイルを作成してください（タイトル・サブタイトル・カテゴリタグ・日付を含む）。

📝まとめ

タイポグラフィは感覚ではなく、スケール・行間・字間という具体的な数値で設計するものです。FigmaのText Stylesを活用することで、反復の原則が自然と守られ、後からのデザインシステム変更が劇的に楽になります。次のレッスンでは、コンポーネントとバリアントを使ったデザインシステムの核心を学びます。