brand-typography-systems

ブランドのタイポグラフィシステムと戦略的な書体選定

ブランドパーソナリティ、階層構造、実用性に基づいた戦略的なブランドタイポグラフィシステムを開発するためのクイックリファレンスです。

「タイポグラフィはコンテンツを尊重するために存在します。」— Robert Bringhurst、『The Elements of Typographic Style』

「タイポグラフィとデザインは、魅力的に見せるだけでなく、コミュニケーションを高めるものであるべきです。」— Erik Spiekermann

「優れたタイポグラフィなら、誰にでも2、3日で教えられます。技術自体はとてもシンプルで、あとは練習するだけです。」— Erik Spiekermann

---

主な原則

1. パーソナリティから始める：タイポグラフィの選定は、ブランドパーソナリティから書体の選択へと進みます。逆ではありません。
2. コンテンツを尊重する：コンテンツに役立たない美しい書体は、その目的を果たせません。
3. 書体分類でコントラストを生み出す：セリフ体とサンセリフ体を組み合わせると、対立を招かずに自然な階層構造を作れます。
4. 形態は機能に従う：本文では読みやすさを優先し、ディスプレイ用の文字ではパーソナリティを優先できます。
5. 一貫性が認知を高める：あらゆる顧客接点が、ブランドイメージを強化（または損なう）します。
6. アクセシビリティは譲れない要件：可能な限り幅広い人々に向けてデザインします。
7. システムは拡張できる：あらゆる用途や状況で機能する階層構造を作成します。

---

基本フレームワーク

1. ブランドを起点とするタイポグラフィ選定プロセス

タイポグラフィの選定は、審美的な好みではなく、ブランド戦略から始める必要があります。

プロセス：

手順	アクション	目的
1	ブランドパーソナリティを定義する	ブランドの声とイメージを形作る特性を3～5個特定する
2	ターゲットオーディエンスを理解する	属性、好み、業界の期待を把握する
3	インスピレーションを集める	競合を分析し、差別化の機会を特定する
4	フォントを選び、組み合わせる	顧客接点（印刷物、ウェブ、モバイル）ごとにモックアップを作成する
5	階層構造を確立する	明確な目的を持つプライマリー、セカンダリー、ターシャリーを定義する
6	ガイドラインを作成する	例や仕様とともにすべてを文書化する

重要な洞察：「ブランドがトーン、パーソナリティ、原則を捉えた表現で自らを定義できれば、それをタイポグラフィの形に置き換えられます。」

---

2. モジュラースケールのタイポグラフィシステム

一貫した比率を用いて、調和の取れた文字の階層構造を作る数学的なアプローチです。

一般的な比率：

比率	値	特徴	最適な用途
マイナーセカンド	1.067	わずかな段階差	高密度のレイアウト、データ量の多いUI
メジャーセカンド	1.125	やや目立つ差	実用的なインターフェース
マイナースリード	1.200	中程度の差別化	バランスの取れたコンテンツの階層構造
メジャースリード	1.250	明確な階層構造	一般的なUIデザイン
パーフェクトフォース	1.333	はっきりとした視覚的階層	エディトリアル、マーケティング
黄金比	1.618	劇的で高級感のある印象	プレミアムブランド、ディスプレイ文字が中心のデザイン

プロセス：

1. ベースサイズを定義する：ウェブでは16pxから始めます（ブラウザーのデフォルト値であり、アクセシビリティの基準です）。
2. 比率を選ぶ：ブランドパーソナリティとコンテンツの種類に合わせます。
3. サイズを計算する：段階を上げるごとにベースサイズに比率を掛け、段階を下げる場合は割ります。
4. 階層構造に適用する：算出したサイズをH1～H6、本文、キャプションに割り当てます。
5. レスポンシブにテストする：画面サイズに応じて比率またはベースサイズを調整します。

重要な原則：異なるサイズは6～8種類に抑えます。大画面ではより大胆な比率を使えますが、小さな画面では控えめな比率が適しています。

ツール：Typescale.io | Type Scale Tool

---

3. Ellen Lupton の「Thinking with Type」フレームワーク

相互に関連する3つのシステムを扱うアプローチです。

システム	焦点	主な要素
文字	個々の文字	書体の構造、分類、個性
テキスト	単語と段落	配置、間隔、カーニング、トラッキング、行送り
グリッド	ページ構成	カラム、マージン、空間的な関係

主な原則：

• 「ルールを学び、破り方も学ぶ」
• 歴史的背景が現代の実践に活かされる
• 視覚的なバランスとゲシュタルト的なグループ化が、効果的なレイアウトを導く
• アクセシビリティと読みやすさは必須です

---

フォントの分類と個性のマトリックス

分類	個性の特徴	最適な用途	業界の例
セリフ	伝統的、古典的、信頼できる、権威ある、洗練された	長文の読書、伝統を重視するポジショニング、信頼	法律事務所、金融、高級ブランド、出版
サンセリフ	モダン、すっきり、ミニマル、親しみやすい、現代的	デジタルインターフェース、スタートアップ、アクセシビリティ	テクノロジー、SaaS、ヘルスケア、現代的な小売
スクリプト	エレガント、個性的、パーソナル、フェミニン	特別な機会、高級感を添えるアクセント	ファッション、ウェディング、高級美容
手書き風	芸術的、カジュアル、楽しい、遊び心のある、誠実な	パーソナルなつながり、カジュアルなブランド	クリエイティブエージェンシー、子ども向け製品、職人の食品
ディスプレイ／装飾	大胆、目を引く、個性的	見出しのみ、アクセントとして限定的に使用	エンターテインメント、イベント、クリエイティブキャンペーン
スラブセリフ	力強い、頑丈、機械的、モダンクラシック	伝統を重んじるテクノロジー、現代的な出版	建設、自動車、ジャーナリズム
モノスペース	技術的、正確、開発者向け	コード、データ、技術文書	開発者向けツール、フィンテック、データプラットフォーム

---

セリフ体とサンセリフ体の選択フレームワーク

セリフ体を選ぶ場合：

• ブランドが職人的、権威的、またはエディトリアルな方向性である
• 業界：ブティックホテル、法律事務所、投資顧問、クラフト製品メーカー、伝統を重視するブランド
• 印刷物の長文コンテンツが主要なタッチポイントである
• 伝統、信頼、プレミアムなポジショニングを伝えたい
• ターゲット層が確立された信頼性を期待している

サンセリフ体を選ぶ場合：

• タッチポイントの70％以上がデジタル UI（アプリ、ダッシュボード、小さな画面）である
• 業界：テクノロジー、スタートアップ、デジタル製品、現代的な小売、ヘルスケア
• すばやく読み取れることが最も重要である
• モダンさ、アクセシビリティ、革新性を伝えたい
• オーディエンスが現代的で先進的なブランドを期待している

**注：**高解像度ディスプレイにより、セリフ体とサンセリフ体の画面上での読みやすさの差は縮小しています。分類だけでなく、コンテキストと個々の書体がより重要です。

---

書体の評価基準

あらゆる書体を評価するための7つの観点：

基準	確認する質問	重要な理由
網羅性	必要な文字、ウェイト、スタイルがすべて揃っていますか？	ブランドのニーズは変化するため、書体もそれに合わせて拡張できる必要があります
読みやすさ	小さなサイズでも読みやすいですか？文字を区別しやすいですか？	コンテンツを無理なく読める必要があります
汎用性	見出し、本文、キャプション、さまざまなメディアに対応できますか？	1つのシステムで多様な状況に対応する必要があります
相性	ロゴ、色、画像とよく合いますか？	タイポグラフィはビジュアルシステムの一部です
独自性	競合との差別化に役立ちますか？	タイポグラフィはブランディングの機会です
技術的な準備状況	Web フォントとして利用できますか？適切なライセンスがありますか？バリアブルフォントですか？	実装上の制約が重要です
xハイトの適切さ	想定するサイズに適していますか？	xハイトが高いほど画面上で読みやすくなりますが、極端に高いと単語の形を認識しにくくなります

---

フォントの組み合わせの原則

従来のアプローチ：分類によるコントラスト

最も古くから信頼されているルールは、セリフ体とサンセリフ体を組み合わせることです。形による明確なコントラストを生み出しながら、それぞれの書体に異なる役割を持たせられます。

5つの重要な原則

1. 衝突ではなく、コントラストを生み出す

   「ほとんど同じだけれど、少しだけ違うスタイルを2つ組み合わせると、わずかに異なるチェック柄を2つ同時に着るように、ちぐはぐになり始めます。」— Ellen Lupton

2. 「タイポグラフィの泥濘」を避ける：同じ分類に属する異なるファミリーの書体は、意味のある違いを生み出せないまま、互いに混ざり合って見えることがあります。

3. 意味のある階層を作る：ウェイト、サイズ、スタイルのコントラストを使って、読者を導きます。

4. 個性の強い書体は控える：個性の強いタイポグラフィを2つ組み合わせても、うまくいくことはほとんどありません。互いに注目を奪い合います。

5. ウェイトのコントラストを考慮する：タイトルには太いウェイト、本文には細いウェイトを使います（または、特定の効果を狙って逆にします）。

実践的なヒント

• 個性的なディスプレイフォントを使うときは、もう一方のフォントをシンプルにします
• セリフ体の見出し＋サンセリフ体の本文（またはその逆）は信頼できる組み合わせです
• 共通する特徴（xハイト、プロポーション、歴史的な時代など）を探します
• 決定する前に、実際のコンテンツで十分にテストします

---

タイポグラフィの間隔に関するガイドライン

行の高さ（行送り）

テキストの種類	行の高さ	理由
見出し	1.1 - 1.25	インパクトを出すために詰める
小見出し	1.25 - 1.35	中程度
本文	1.5 - 1.7	最適な読みやすさ
長文コンテンツ	1.6 - 1.8	ゆとりを持たせる

字間（トラッキング）

コンテキスト	トラッキング	理由
大見出し（>36px）	-0.02em to -0.01em	インパクトを出すために詰める
中サイズの見出し	0	デフォルト
本文	0	最適な間隔になるよう設計済み
小さい文字（<14px）	0.01em to 0.02em	読みやすくするために広げる
すべて大文字	0.05em to 0.1em	必ず字間を加える
ボタン／ラベル	0.05em	読みやすさを高める

行長（字詰め）

• 最適：1行あたり50～75文字（66文字が理想とよく言われます）
• 最小：45文字（これを下回ると、読み進めにくくなります）
• 最大：80文字（これを超えると、目が疲れます）

---

デジタルタイポグラフィの詳細

バリアブルフォント

概要：連続的な補間によって、すべてのウェイト、幅、スタイルを含む単一のフォントファイルです。

利点：

• パフォーマンス：複数の静的ファイルではなく1つのファイルで済みます（例：Source Sans Proファミリー全体で405KB対1,170KB）
• デザインの柔軟性：任意のウェイトを指定できます（例：400や500だけでなく450）
• レスポンシブタイポグラフィ：ビューポートに応じてウェイトや幅を調整できます
• アニメーション：スタイル間をスムーズに切り替えられます

主な軸：

軸	コード	範囲	効果
ウェイト	wght	ThinからBlack	ストロークの太さ
幅	wdth	CondensedからExtended	文字幅
イタリック	ital	UprightからItalic	ローマン体／イタリック体の切り替え
スラント	slnt	傾斜角	斜体の角度
オプティカルサイズ	opsz	サイズごとの調整	サイズに応じて細部を自動調整

Webフォントのパフォーマンス

問題点：カスタムフォントのダウンロードによって、テキストの表示が遅れることがあります。

FOITとFOUT：

• FOIT（Flash of Invisible Text）：フォントが読み込まれるまでブラウザーがテキストを非表示にするため、UXが損なわれます
• FOUT（Flash of Unstyled Text）：最初にフォールバックフォントを表示し、準備ができると切り替える方式で、こちらが推奨されます

推奨される方法：

1. font-display: swapを使います
2. 重要なフォントをプリロードします
3. 最大限のパフォーマンスを得るには、font-display: optionalを使います
4. フォールバックフォントのメトリクスを合わせて、レイアウトシフトを抑えます

レスポンシブタイポグラフィ

clamp()を使った流動的なタイポグラフィ：

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

• 最小値：2rem（これより小さくなりません）
• 推奨値：5vw（ビューポートに合わせて拡大縮小します）
• 最大値：4rem（これより大きくなりません）

システムフォントスタック

使用場面：中立性とパフォーマンスが重要なアプリケーション、ダッシュボード、コンテンツ中心のツール。

モダンなシステムフォントスタック：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

リソース：Modern Font Stacks

---

WCAG のタイポグラフィ要件

コントラスト比

基準	比率	用途
レベル AA（最低）	4.5:1	通常のテキスト
レベル AA（最低）	3:1	大きなテキスト（24px 以上、または 18.5px の太字）
レベル AAA（強化）	7:1	通常のテキスト
レベル AAA（強化）	4.5:1	大きなテキスト

テキストの拡大縮小（WCAG 1.4.4）

• コンテンツや機能を損なうことなく、テキストを 200% まで拡大できる必要があります
• 固定ピクセルではなく、相対単位（rem、em、%）を使用してください

テキスト間隔（WCAG 1.4.12）

次のユーザーによる上書きに対応する必要があります：

• 行の高さ：フォントサイズの 1.5 倍
• 段落の間隔：フォントサイズの 2 倍
• 文字間隔：フォントサイズの 0.12 倍
• 単語間隔：フォントサイズの 0.16 倍

---

ディスレクシアに配慮したタイポグラフィ

主な特徴：

• シンプルな文字の形（一般にサンセリフが推奨されます）
• 広めの文字間隔と単語間隔
• 区別しやすい字形（b/d、p/q を明確に見分けられること）
• 直立体（本文ではイタリック体を避けます）
• 十分なサイズ（本文は 16px 以上）

推奨フォント：

フォント	適している理由
Lexend	読みやすさとディスレクシアへの配慮を目的に設計されています
Open Sans	明確な字形とゆとりのある間隔
Verdana	明確な字形と均一性
Atkinson Hyperlegible	弱視の読者向けに設計され、すべての人に役立ちます
Inter	明確な字形で、デジタル表示に最適です

主な知見：ディスレクシアのある読者にとって最も読みやすいのは、サンセリフ体、等幅体、ローマン体です。イタリック体は可読性を大幅に低下させます。

---

印刷とデジタルの考慮事項

要素	印刷	デジタル
解像度	300 dpi	72～100 ppi（画面によって異なります）
本文のフォントサイズ	一般的には 10～12pt	一般的には 15～25px
フォントの選択肢	印刷できればどのフォントでも使用できます	利用可能性やライセンスによる制限があります
レンダリング	印刷物間で一貫しています	デバイスやブラウザーによって異なります
セリフ体の可読性	長文に適しています	画面の品質によって異なります

チャネル横断のベストプラクティス

• 両方の環境向けに設計された書体を選んでください
• 選んだフォントを印刷とデジタルの両方のモックアップでテストしてください
• 書体のスーパーファミリー（各媒体向けに最適化されたバージョン）を検討してください
• ライセンスが予定しているすべての用途を対象としていることを確認してください
• 媒体ごとに必要なサイズやウェイトの調整を記録してください

---

フォントライセンス

ライセンスの種類

種類	用途	一般的な制限
デスクトップ	デザインソフトウェア、印刷物	ユーザー数やデバイス数
Web	CSS を使用したウェブサイト	ページビュー数、ドメイン数
アプリ	モバイル／デスクトップアプリケーション	アプリのダウンロード数、プラットフォーム
ePub	デジタル出版物	タイトル数
サーバー／API	動的な画像生成	表示回数

主な考慮事項

1. EULA を読む：各ファウンドリーの規約は異なります
2. ロゴでの使用：ライセンスによっては、ロゴでの使用を明示的に禁止しています
3. クライアントの仕事：クライアントは独自のライセンスを取得する必要があります。自分のライセンスを譲渡することはできません
4. 変更：ほとんどのライセンスでは、フォントファイルの変更が禁止されています
5. 埋め込み：PDF や動画への埋め込みには、それぞれ固有のルールがあります

オープンソースの選択肢

• SIL Open Font License（OFL）：個人利用と商用利用は無料で、変更も可能です
• Google Fonts：すべてのフォントが商用利用向けにライセンスされています
• The League of Moveable Type：品質の高いオープンソースフォント

---

おすすめの無料フォント（Google Fonts）

サンセリフ

• Inter：デジタルインターフェースに最適で、9 ウェイト
• DM Sans：すっきりとした幾何学的なデザインで、9 ウェイト
• Source Sans Pro：Adobe 初のオープンソースフォント
• Work Sans：汎用性が高く、9 ウェイト
• Fira Sans：省スペースで、もともとは Mozilla 向けに開発されました

セリフ体

• Lora：モダンとクラシックの要素を備え、非常に読みやすい
• Cormorant：エレガントなディスプレイ用セリフ体
• Playfair Display：コントラストが強く、エディトリアルな印象
• Merriweather：画面表示向けに設計され、非常に読みやすい

ディスプレイ体

• Montserrat：幾何学的で、現代的
• Raleway：細身で、洗練された印象
• Oswald：太字で、構造的

---

よくある間違い

間違い	問題点	解決策
プラットフォーム間でフォントの使い方に一貫性がない	ブランド認知を損なう	タイポグラフィシステムを文書化し、徹底する
フォントを使いすぎる	視覚的に混乱する	最大でも2〜3種類に絞る
スタイルを優先して読みやすさを犠牲にする	読者がコンテンツを読めない	実際に使うサイズで読みやすさをテストする
ライセンスを無視する	法的責任を負うおそれがある	すべてのフォントを監査し、適切なライセンスを確保する
ブランドの個性と一致しない	タイポグラフィがブランドメッセージを損なう	個性を明確にしてから、それに合う書体を選ぶ
テキストのコントラストが低い	アクセシビリティに問題があり、読みにくい	コントラストチェッカーを使い、WCAG AA を満たす
装飾しすぎる	影やグラデーションがプロらしさを損なう	タイポグラフィはすっきりと、目的を持たせる
モバイルを考慮しない	主要なデバイスカテゴリで適切に表示されない	すべてのデバイスサイズでテストする
流行のフォントを使う	すぐに古くなり、ブランド変更が必要になる	時代に左右されないものを選ぶ
階層を設けない	ユーザーがコンテンツ内を移動できない	サイズやウェイトの違いを明確に定義する
メディアごとのテストをしない	印刷とデジタルで表示が異なる	どちらの環境でもテストする
ロゴにデフォルトフォントを使う	独自性に欠ける	カスタム書体、または慎重に選んだ書体のみを使う

---

重要な考え方

分類によるコントラスト：セリフ体とサンセリフ体を組み合わせると、互いにぶつかることなく、自然な階層と視覚的な面白さが生まれます。

形態は機能に従う：本文では読みやすさを優先し、ディスプレイ用テキストでは個性を優先できます。

一貫性が認知を築く：あらゆるタッチポイントが、ブランドの印象を強める（または損なう）要因になります。

アクセシビリティは妥協できない要件：できるだけ幅広い人々に向けてデザインしましょう。優れたアクセシビリティは、優れたデザインです。

個性から始める：タイポグラフィの選定は、ブランドの個性を起点に書体の選択へと進めます。逆の順序にしてはいけません。

選択肢が少ない場合：「必ずしも暮らしが難しくなるわけではありません。多くの場合、むしろ楽になります。」— Erik Spiekermann

---

テンプレート

記入済みのワークシート、文書化した決定事項、最終的なまとめなど、ユーザーが手元に残す成果物を作成する場合は、reference/templates.md を読んでください。概念的な質問や簡単な推奨事項の場合は、このファイルで説明しているため、読み込む必要はありません。目次から始まるので、必要なテンプレートだけを読み込んでください。

• タイポグラフィシステムの文書化テンプレート（出力構成全体）
• モジュラースケール計算の参考資料
• アクセシビリティテストのチェックリスト
• フォントライセンスのチェックリスト

---

この知識を適用するタイミング

戦略フェーズ

• ブランドを最優先するタイポグラフィ選定プロセスを適用する
• フォントの分類と個性のマトリックスを使う
• セリフ体とサンセリフ体の選択フレームワークを検討する

フォントの選定時

• 書体の評価基準（7つの観点）を適用する
• フォントの組み合わせ原則を使う
• フォントの選択肢を調査する（Google Fonts、プレミアム書体ファウンドリー）

階層の構築時

• モジュラースケールシステムを適用する
• 余白のガイドラインを設定する（行の高さ、字間、行長）
• タイポグラフィトークンを定義する

検証時

• WCAG のアクセシビリティ要件をテストする
• ディスレクシアに配慮した要件を確認する
• 印刷とデジタルの両方でテストする
• フォントライセンスを確認する