フレームワーク活用ガイド
押さえておきたい用語
- 書体（Typeface）: 文字デザインのファミリー全体。Helvetica、Noto Sans等が書体名にあたる
- フォント: 書体の特定のウェイト・スタイルの組み合わせ。Helvetica Bold Italic等
- セリフ体: 文字の端に装飾（セリフ）がある書体。権威・伝統・信頼の印象を与える
- サンセリフ体: セリフのない書体。モダン・クリーン・親しみやすい印象
1
利用場面の整理
本文・見出し・UI・ブランドの用途を定義 → 印象の方向性を決定
こんな悩みに効く#
- 「フォント選びが感覚的で、選定理由を説明できない」
- 「本文の読みやすさとブランドの個性を両立できない」
- 「日本語と英語の混植でバランスが崩れる」
使い方#
利用場面と目的を整理する
「本文用」「見出し用」「UI用」「ブランドロゴ用」など、書体を使う場面をリストアップする。場面ごとに最も重要な要件（可読性、個性、簡潔さ）が異なるため、すべてを1つの書体で賄う必要はない。2〜3書体の組み合わせが一般的だ。
ブランドの印象に合う分類を選ぶ
ブランドが伝えたい印象と書体の分類を照合する。法律事務所にはセリフ体、テック企業にはジオメトリックサンセリフ、子供向けサービスには丸ゴシックのように、印象と用途を合わせる。
可読性と技術要件で候補を絞る
候補の書体を実際の使用サイズ（本文なら14〜16px）で表示し、可読性を確認する。ウェイトの豊富さ（Regular/Medium/Bold以上）、ファイルサイズ（ウェブフォントの場合）、ライセンス条件も確認。日本語を使う場合は和欧混植の相性を検証する。
書体規定をデザインシステムに記載する
選定した書体の名前、使用場面、フォールバック、サイズ・ウェイトの指定をデザインシステムに明文化する。「見出しはNoto Sans JP Bold 24px」「本文はNoto Sans JP Regular 16px/1.7」のように具体的に記載する。
具体例#
法律事務所サイト — 信頼感の書体設計
状況: 法律事務所のウェブサイトリニューアルで、「信頼感」と「親しみやすさ」の両立が求められていた。既存サイトはゴシック体のみで、競合と差別化できていなかった。
適用プロセス:
- 印象の方向性：「格式があるが堅すぎない」→英語見出しにセリフ体（Garamond系）、日本語本文に明朝体
- 候補3書体で比較：游明朝、Noto Serif JP、筑紫明朝。実サイズ（16px）で可読性テスト
- Noto Serif JPを本文に採用（無料・ウェイト豊富・可読性良好）。見出し英語にEB Garamondを組み合わせ
成果: リニューアル後の信頼感スコアが5段階中3.2→4.5に向上。問い合わせ数が23%増加し、「安心感がある」というフィードバックが最多に。
テックスタートアップ — 軽量で個性的な書体選定
状況: SaaSプロダクトのウェブサイトで、ページ読み込み速度を維持しつつブランドの個性を出したいという要件。既存はシステムフォントのみで無個性だった。
適用プロセス:
- 技術要件：ウェブフォントのファイルサイズ合計100KB以内、バリアブルフォント対応が望ましい
- ジオメトリックサンセリフ3候補（Inter、Space Grotesk、Outfit）をCore Web Vitalsへの影響込みで比較
- Inter Variable（バリアブルフォント、100KB以内で全ウェイト対応）を採用。見出しのみSpace Groteskで差別化
成果: ページ読み込み速度を維持しつつ、ブランドスコアの「先進性」が32%向上。デザインシステムにフォント規定を追加し、チーム全体で統一運用を開始した。
多言語ECサイト — 和欧混植の最適化
状況: 日本語・英語・中国語の3言語対応ECサイトで、言語切り替え時にレイアウトが崩れ、特に日英混在のテキストでベースラインがズレていた。
適用プロセス:
- 各言語で共通のNotoファミリー（Noto Sans JP、Noto Sans SC、Noto Sans）を統一採用。文字の高さとウェイトの統一性を確保
- 日英混在テキストのベースライン調整：CSSで
font-feature-settingsとline-heightを言語別に微調整 - フォールバック順序を「指定フォント→Notoファミリー→システムフォント」に統一
成果: 言語切り替え時のレイアウト崩れがゼロに。3言語でのブランド一貫性が確保され、海外ユーザーの離脱率が15%改善した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| 書体の数が多すぎる | 統一感がなくなり読み手が疲れる | 2〜3書体に抑え、ウェイトで変化をつける |
| デザインツール上だけで判断する | 実デバイスでの表示と異なる | 実機・実ブラウザで表示を必ず確認する |
| ライセンスの未確認 | 商用利用不可のフォントを使ってしまう | 利用前にライセンスを必ず確認する |
| 日英の相性を無視する | ベースラインや太さのバランスが崩れる | 混植テストを実サイズで行い調整する |
まとめ#
書体選定は「目的」「印象」「可読性」「技術要件」 の4軸で判断する。感覚だけに頼らず、ブランドの人格と使用場面から論理的に絞り込み、実サイズでの比較テストで最終決定する。選定した書体はデザインシステムに使用ルールとして文書化し、チーム全体で一貫した運用を行うことが、ブランドの印象と可読性の両立を持続させる。