UI/UXデザインのフォントサイズ完全ガイド

UI/UXデザインにおけるフォントサイズの使い方:ウェブ、モバイル、タブレット 💻📱

タイポグラフィは、あらゆるユーザーインターフェースの根幹を成す要素です。フォントサイズは、ウェブ、モバイル、タブレットといった異なるデバイス間でのユーザー体験を形作る上で極めて重要な役割を果たします。適切なフォントサイズを選択することで、可読性、アクセシビリティ、視覚的な調和が保証されますが、不適切な選択は、どれほど美しいUIであっても使いづらく、フラストレーションを引き起こすものになってしまいます。

デバイス別のフォントサイズのベストプラクティスを、基本原則や理論的背景とともに探っていきましょう。

🖥️ ウェブ:デスクトップUI向けのフォントサイズ

推奨サイズ

• 本文テキスト: 16px(基準サイズ)
• 見出し:
  • H1: 32–36px
  • H2: 24–30px
  • H3: 20–24px
• ボタン: 14–16px
• キャプション/ヒント: 12–14px

ベストプラクティス 💡

• 見出しにはモジュラースケール(例:1.250、1.333の比率)を活用しましょう。
• 視覚的なリズムと余白を伴う階層構造を維持してください。
• 可読性を高めるために行の高さ(通常1.4–1.6)を考慮しましょう。

デスクトップ環境では、ユーザーは画面から適度な距離を保って閲覧するため、より細かいディテールを表現できます。しかし、読みやすさを損なわないように、基準となる本文サイズは必ず16px以上を維持することが重要です。

📱 モバイル:小型画面向けのフォントサイズ

推奨サイズ

• 本文テキスト: 14–16px
• 見出し:
  • H1: 24–30px
  • H2: 20–24px
  • H3: 18–20px
• ボタン: 14–16px
• キャプション/サブテキスト: 12–14px

ベストプラクティス 💡

• タッチ操作に最適化しましょう — 素早い読み取りのために、大きく読みやすいフォントを使用します。
• テキストと背景の間に高いコントラストを保ちましょう。
• 密集した配置や極端に小さなフォントは避けてください — モバイルでは可読性が急速に低下します。

モバイルデバイスでは、ユーザーは動きながら、片手で操作することが多いため、文字は一目で理解できる大きさと明瞭さが求められます。

タブレット:中型画面向けのフォントサイズ 🖥️

推奨サイズ

• 本文テキスト: 16px(デスクトップと同じ)
• 見出し:
  • H1: 28–32px
  • H2: 22–28px
  • H3: 20–24px
• ボタン: 14–16px
• キャプション: 12–14px

ベストプラクティス 💡

• フォントがスマートフォンとデスクトップの表示の間で適切にスケールすることを確認しましょう。
• 一貫したサイズルールを用いたレスポンシブタイポグラフィに従いましょう。
• ブレークポイント間でデザインシステムのルールに一貫性を持たせましょう。

タブレットは、ポートレートモードとランドスケープモードで使用されることが多く、それぞれのモードで最適な読みやすさを確保する必要があります。

サポートする原則と理論 📚

1. 視覚的階層

タイポグラフィは、ユーザーをコンテンツに誘導する流れを作り出します。適切なサイズ設定により、主要なアクションや見出しが注目を集め、補助情報は控えめに保たれます。

2. ゲシュタルトの法則

ユーザーは、グループ化された要素を関連性があるものとして認識します。タイポグラフィは、近接性、類似性、図と地の原則に沿って、UIの意味を強化すべきです。

3. アクセシビリティ(WCAG) ⚠️

フォントサイズは以下を保証する必要があります:

• 本文コピーの最小テキストサイズは16px
• 読みやすい行の高さ(少なくともフォントサイズの1.5倍)
• ズーム条件下および様々な視覚障害下での可読性

アクセシビリティは、単なるチェックボックスではなく、より多くのユーザーにリーチするための設計哲学です。

4. 黄金比とモジュラースケール

デザイナーはしばしば数学的比率(例:1.618)やモジュラースケールを使用して、デバイス間で調和のとれたタイプ階層を作成します。

推奨リソース 🔗

参考ウェブサイト

• Material Design Typography
• Apple Human Interface Guidelines
• Tailwind CSS Typography Guide
• Modular Scale Calculator
• Type Scale by Google
• WebAIM (Accessibility Guidelines)

読む価値のある書籍 📘

• 「Refactoring UI」Adam Wathan & Steve Schoger著
• 「Don't Make Me Think」Steve Krug著
• 「The Elements of Typographic Style」Robert Bringhurst著

レスポンシブ対応のための追加考慮事項

レスポンシブデザインでは、ビューポートの幅に応じてフォントサイズを動的に調整することが推奨されます。CSSのclamp()関数やcalc()を使用して、最小値と最大値の間で滑らかにスケーリングされるフォントサイズを実装できます。

body {
  font-size: clamp(14px, 2.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 40px);
}

この手法により、極端に小さいまたは大きい画面でも、テキストが適切なサイズで表示されます。

最後に 🎯

タイポグラフィは単なる美的要素ではありません — それは、ユーザーがあなたの製品とどのように関わるかに直接影響を与えます。プラットフォーム間でデザインする際には、スケーラビリティ、可読性、コンテキストを考慮しましょう。

モバイルデバイスであれ、ワイドスクリーンモニターであれ、ユーザーが読むことに苦労することがあってはなりません。フォントサイズは小さなディテールに見えるかもしれませんが、実際には素晴らしいユーザー体験を生み出す最大の貢献者の一つなのです。