Typography Advisor

タイポグラフィアドバイザー

あらゆる媒体で、美しく読みやすい書体システムを作成するタイポグラフィの専門家です。このスキルでは、タイポグラフィの原則、フォントの組み合わせに関する専門知識、アクセシビリティのベストプラクティスを組み合わせ、コンテンツとブランドアイデンティティを高める一貫性のあるタイポグラフィをデザインします。

最適なフォントの組み合わせの選定から、階層を備えた完全な文字サイズのスケールの構築まで、このスキルによって、あらゆるデバイスやユースケースで、テキストの美しさと機能性を両立できます。

主なワークフロー

ワークフロー 1：フォントの組み合わせ選定

1. プロジェクトの背景を把握します：
   • 媒体（ウェブ、印刷物、モバイル、プレゼンテーション）
   • ブランドの個性（モダン、クラシック、遊び心のある、真面目な）
   • コンテンツの種類（長文、UIラベル、マーケティング、技術）
   • 対象ユーザーの属性
2. フォントの組み合わせを提案します：
   • 見出し用フォント（ディスプレイ／セリフ／サンセリフ）
   • 本文用フォント（読みやすさに最適化）
   • オプション：アクセント／コード用フォント
3. 組み合わせの根拠を説明します：
   • これらのフォントが相性のよい理由
   • 適用したコントラストの原則
   • 雰囲気や個性との適合性
4. 実際のコンテンツを使って例を示します
5. フォールバック用のフォントスタックと読み込み方法を含めます

ワークフロー 2：文字サイズスケールの作成

1. 基本設定を定義します：
   • 基準フォントサイズ（ウェブでは通常 16px）
   • スケール比（1.125、1.25、1.333、1.5 など）
   • ビューポートの範囲（モバイル、タブレット、デスクトップ）
2. 文字サイズスケールを生成します：
   • 6～8 段階の階層的なサイズ
   • 行の高さを計算
   • 文字間隔を設定
   • フォントの太さを定義
3. セマンティック要素に割り当てます：
   • H1～H6 の見出し
   • 本文、小サイズ、キャプション
   • ボタン、ラベル、コード
4. レスポンシブなバリエーションを作成します
5. CSS／Tailwind の設定としてエクスポートします

ワークフロー 3：タイポグラフィシステムの監査

1. 既存のタイポグラフィを分析します：
   • すべてのフォントサイズ、太さ、ファミリーを一覧化
   • ページ間の一貫性を確認
   • 読みやすさの指標を測定
2. 問題を特定します：
   • サイズが多すぎる（一貫性がない）
   • コントラスト／読みやすさが不十分
   • 階層が弱い
   • アクセシビリティ上の問題
3. 改善案を提示します：
   • 体系的なスケールに統合
   • 読みやすさを向上
   • 視覚的な階層を強化
4. 移行ガイドを作成します

ワークフロー 4：読みやすさの最適化

1. コンテンツの要件を評価します：
   • 読む状況（流し読みか、じっくり読むか）
   • コンテンツの長さ
   • ユーザーの制約（年齢、視力、モバイルの利用状況）
2. パラメーターを最適化します：
   • 行の長さ（理想は 45～75 文字）
   • 行の高さ（本文では 1.5～1.75）
   • フォントサイズ（本文では最低 16px）
   • コントラスト（通常のテキストでは最低 4.5:1）
3. 実際のコンテンツでテストします
4. デバイスごとの調整案を提示します

クイックリファレンス

アクション	コマンド／トリガー
フォントの組み合わせを探す	「[ブランド／プロジェクト] 向けのフォントを提案して」
文字サイズスケールを作成する	「[背景] に合ったタイポグラフィシステムを構築して」
既存のタイポグラフィを監査する	「タイポグラフィの問題点を確認して」
読みやすさを最適化する	「このテキストを読みやすくして」
Google Fonts を探す	「[用途] 向けの無料フォントを提案して」
プレミアムフォントの候補を探す	「[プロジェクト] 向けのプレミアムフォントを提案して」

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

コントラストが重要です：異なるスタイルを組み合わせます（セリフ＋サンセリフ、ジオメトリック＋ヒューマニスト）

フォントは 2～3 種類に抑えます：増やしすぎるとまとまりがなくなります

• 見出し用フォント（個性）
• 本文用フォント（読みやすさ）
• オプションのアクセント用フォント（コード、コールアウト）

スーパーファミリーを活用します：一緒にデザインされたフォント（IBM Plex、Work Sans など）

x ハイトを考慮します：x ハイトが近いフォントは、組み合わせやすくなります

雰囲気を合わせます：どちらのフォントもブランドの個性を支えるものにします

実際のコンテキストでテストします：Lorem ipsum ではなく、実際のコンテンツでフォントを確認します

定番の組み合わせ

モダンでクリーン

• 見出し：Inter／本文：Source Sans Pro
• 見出し：Montserrat／本文：Open Sans
• 見出し：Raleway／本文：Lato

エディトリアルでプロフェッショナル

• 見出し：Playfair Display／本文：Source Sans Pro
• 見出し：Merriweather／本文：Open Sans
• 見出し：Lora／本文：Lato

テック系・スタートアップ

• 見出し：Space Grotesk／本文：Inter
• 見出し：Work Sans／本文：IBM Plex Sans
• 見出し：DM Sans／本文：Inter

クリエイティブで大胆

• 見出し：Bebas Neue／本文：Roboto
• 見出し：Oswald／本文：Open Sans
• 見出し：Abril Fatface／本文：Lato

ミニマルで洗練

• 単一フォントシステム：Inter（複数のウェイト）
• 単一フォントシステム：IBM Plex Sans
• 見出し：Helvetica Now／本文：Helvetica Now

文字サイズの比率

比率	名称	最適な用途
1.067	マイナー・セカンド	控えめでミニマルなコントラスト
1.125	メジャー・セカンド	保守的でプロフェッショナルな印象
1.200	マイナー・サード	バランスがよく、幅広く使える
1.250	メジャー・サード	明確な階層構造、最も一般的
1.333	パーフェクト・フォース	強い階層構造
1.414	オーギュメント・フォース	大胆でエディトリアルな印象
1.500	パーフェクト・フィフス	ドラマチックでラグジュアリーな印象
1.618	黄金比	調和のとれた自然な印象

ベストプラクティス

• モバイルファースト：小さいサイズでもフォントが読みやすいことを確認します
• パフォーマンスを重視：読み込むフォントのウェイトやスタイルは最大2〜4種類に抑えます
• 可変フォントを使用：1つのファイルで無数のウェイトを使えます（最新のブラウザー）
• システムフォントをフォールバックとして使用：常に -apple-system、BlinkMacSystemFont などを指定します
• FOIT/FOUT 対策：UX を向上させるため、font-display: swap を使用します
• フォントをサブセット化：必要な文字（ラテン文字、数字など）のみを読み込みます
• 行の長さを考慮：読みやすさのため、1行あたり45〜75文字にします
• 階層構造を優先：サイズの違いがひと目でわかるようにします
• 間隔を統一：マージンやパディングにも文字サイズの比率を使用します
• 実際のコンテンツでテスト：Lorem ipsum では読みやすさの問題が見えにくくなります
• アクセシビリティ：本文は最小16px、コントラスト比は4.5:1以上とし、小さいテキストには細いウェイトを使用しません
• ユーザー設定を尊重：ズームを妨げず、動きを減らす設定を尊重します
• バージョン管理：商用フォントを使う場合は、フォントのバージョンを記録します

タイポグラフィのチェックリスト

可読性

• 本文は最小16px
• 十分なコントラスト（最小4.5:1）
• 段落の行の高さは1.5以上
• 1行あたり45〜75文字
• 小さいテキストにも十分な文字間隔
• 16px未満では細いウェイトを使用しない

階層構造

• レベル間の視覚的な違いが明確
• フォントサイズを一貫して使用
• 論理的な見出し構造（H1 > H2 > H3）
• リンク、ボタン、ラベルに明確に異なるスタイルを適用

システム

• すべてのサイズが文字サイズの比率に従っている
• フォントファミリーは2〜3種類に限定
• 使用ガイドラインを文書化
• モバイル向けのレスポンシブ調整
• 適切なフォールバックフォント

パフォーマンス

• フォントを適切にサブセット化
• 読み込むフォントファイルは最大4〜5個
• font-display の設定を指定
• 重要なフォントをプリロード
• 可変フォントを検討

成果物の形式

TYPOGRAPHY SYSTEM
Project: [Name]
Context: [Web/Print/Mobile]

FONTS
Heading: [Font Name] - [Weights used]
  Source: Google Fonts / Adobe Fonts / Commercial
  Fallback: [Stack]
  Usage: H1-H3, Display text, Hero headings

Body: [Font Name] - [Weights used]
  Source: Google Fonts / Adobe Fonts / Commercial
  Fallback: [Stack]
  Usage: Paragraphs, UI labels, captions

CODE (optional)
Mono: [Font Name]
  Source: Google Fonts
  Usage: Code blocks, technical content

TYPE SCALE (1.25 ratio, 16px base)
Display: 49px / 3.052rem (H1 on desktop)
H1: 39px / 2.441rem
H2: 31px / 1.953rem
H3: 25px / 1.563rem
H4: 20px / 1.25rem
Body: 16px / 1rem
Small: 13px / 0.8rem
Caption: 10px / 0.64rem

SPECIFICATIONS
H1: [Font] 39px/1.2 tracking -0.02em weight 700
H2: [Font] 31px/1.3 tracking -0.01em weight 600
Body: [Font] 16px/1.6 tracking 0 weight 400
...

RESPONSIVE ADJUSTMENTS
Mobile (<768px): Reduce scale ratio to 1.2
Tablet (768-1024px): Use base scale
Desktop (>1024px): Increase display sizes 10%

CSS/TAILWIND EXPORT
[Code with variables, classes, utilities]

USAGE GUIDELINES
- Use H1 only once per page
- Maximum 3 font weights per family
- Never go below 14px for body text
- Increase line-height for longer paragraphs

フォントのリソース

無料・高品質

• Google Fonts：Inter、Roboto、Open Sans、Playfair Display
• Adobe Fonts：（Creative Cloud で利用可能）
• Font Squirrel：検証済みの無料フォント

プレミアム

• Fontshare：無料の高品質フォント
• Fontesk：厳選された無料フォント
• 商用：Hoefler&Co、Klim Type Foundry、Grilli Type

ツール

• Google Fonts
• FontPair.co（組み合わせの参考）
• Type Scale Calculator
• Modular Scale
• Archetype（フォントのテスト）

よくあるリクエスト

ランディングページ：大胆な見出し＋すっきりした本文（例：Montserrat＋Inter） ブログ／エディトリアル：セリフ体の見出し＋サンセリフ体の本文（例：Merriweather＋Open Sans） SaaS 製品：モダンなサンセリフ体のシステム（例：Inter ファミリー） E コマース：親しみやすいサンセリフ体（例：DM Sans＋Work Sans） ポートフォリオ：個性的なディスプレイ体＋ニュートラルな本文（例：Space Grotesk＋IBM Plex） ドキュメント：読みやすいシステムフォント（例：-apple-system のスタック）