フレームワーク活用ガイドひとことで言うと#
書体（フォント）の選び方、サイズ・行間・字間の設定、テキストの階層構造の作り方を体系的に理解して、読みやすく美しい文字表現を実現する技術。デザインの70%以上はテキストなので、タイポグラフィを制する者がデザインを制する。
押さえておきたい用語#
- セリフ体（Serif）
- 文字の端に「ひげ（セリフ）」がある書体。明朝体やTimes New Romanが代表。フォーマルで長文向き。
- サンセリフ体（Sans-serif）
- ひげのないすっきりした書体。ゴシック体やHelveticaが代表。モダンで画面表示向き。
- 行間（Line-height）
- テキスト行と行の間の垂直方向の余白。本文は1.5〜1.8倍が読みやすいとされる。
- タイプスケール（Type Scale）
- 見出し・本文・キャプションなどのフォントサイズを一定の比率で段階的に定義する体系。
タイポグラフィの全体像#
こんな悩みに効く#
- フォントの選び方がわからず、いつもデフォルトのまま
- 文章を読んでもらえない（読みにくい）と言われる
- 見出しと本文のメリハリがなく、単調に見える
基本の使い方#
書体の大分類を理解して、目的に合ったものを選ぶ。
- セリフ体（明朝体 / Times New Roman等）: 伝統的、フォーマル、長文の可読性が高い
- サンセリフ体（ゴシック体 / Helvetica等）: モダン、クリーン、画面での視認性が高い
- 表示用書体: 見出しやロゴ向け。個性が強く、本文には不向き
ルール: 1つのデザインで使う書体は2つまで。見出し用と本文用を1つずつ選ぶのが安全。
テキストに**視覚的な階層（ヒエラルキー）**を作ることで、読者の目を誘導する。
- 見出し（H1）: 24〜32px。ページの主題を一目で伝える
- 小見出し（H2）: 18〜24px。セクションの区切りを明確に
- 本文: 16px（Webの標準）。これより小さいと読みにくい
- キャプション: 12〜14px。補足情報に
サイズ比率は1.25〜1.5倍刻みで設定すると、自然なリズムが生まれる（例: 16px → 20px → 25px → 32px）。
フォントサイズだけでなく、余白が読みやすさを決定的に左右する。
- 行間（line-height）: 本文は1.5〜1.8倍。狭すぎると窮屈、広すぎると文のつながりが途切れる
- 字間（letter-spacing）: 本文はデフォルトでOK。見出しや大文字は少し詰めると引き締まる
- 行長（1行の文字数）: 日本語は25〜40文字、英語は45〜75文字が読みやすいとされる
これらを適切に設定するだけで、同じフォント・同じ文章でも読みやすさが劇的に変わる。
具体例#
Before:
- フォント: デフォルトのシステムフォント
- 全テキスト14px、行間1.2、1行80文字
- 見出しと本文のサイズ差がほとんどない
After:
- フォント: 見出しに「Noto Sans JP Bold」、本文に「Noto Sans JP Regular」
- 階層: H1=28px / H2=22px / 本文=16px / キャプション=13px（比率1.3倍刻み）
- 行間: 本文1.7、見出し1.3
- 行長: max-width: 720pxで1行約35文字に制限
- 余白: 見出し上に48px、見出し下に16px。段落間に24px
結果: 同じ文章なのに平均滞在時間が1分40秒から3分20秒に倍増。 「読みやすい」「プロっぽい」と評価が一変。
Before: ヘルプページの文字が13pxで行間1.3。1行が60文字以上で画面いっぱいに広がる。ユーザーの35%が「ヘルプを読んでも解決しない」と回答。
After:
- 本文16px、行間1.7に拡大
- max-width: 680pxで行長を制限（約32文字/行）
- コードブロックはMonoフォント14px、背景色付き
- ステップ説明に番号付きリストと見出しを追加
結果: ヘルプページ経由のサポート問い合わせが30%減少。 「読んだら解決した」の回答が35%から68%に向上。
Before: 採用サイトのメインフォントがデザイン性重視の細字書体（ウェイト300）。モバイルでは文字が細すぎて可読性が低い。エントリーページまでの到達率は22%。
After:
- 本文をウェイト400（Regular）に変更
- 見出しはウェイト700（Bold）でコントラストを強調
- モバイルでは本文を17pxに拡大（PC版は16px）
- CTAボタン上のテキストを14px→16pxに拡大
結果: エントリーページ到達率が22%から26%に向上（+18%）。 フォントのウェイトを1段階上げただけで可読性が改善された。
やりがちな失敗パターン#
- フォントを3つ以上使う — 書体が増えるほど画面がうるさくなる。**2つで十分。**どうしても3つ使うなら、1つは装飾用に限定する
- 行間が狭すぎる — 特に日本語は漢字が密集するため、行間1.5未満だと圧迫感がある。迷ったら1.7にしておけば間違いない
- サイズだけで階層を作ろうとする — ウェイト（太さ）、色、余白も組み合わせることで、より明確な階層が作れる
- モバイルとPCで同じ設定を使う — モバイルは画面が近いため、PC用のサイズでは小さすぎることがある。デバイスごとに微調整する
まとめ#
タイポグラフィは 「書体選び」 「サイズの階層設計」「行間・字間・行長の調整」 の3つが基本。デザインの大部分を占めるテキストを適切にコントロールするだけで、デザイン全体の品質が格段に上がる。迷ったら「本文16px、行間1.7、1行35文字、フォント2つまで」から始めよう。