タイポグラフィを指示する
読了 5分 ＋ 実践 20分
対象読者: フォント選びに迷う方、AIに「いい感じのフォント」と伝えてしまっている方
前提知識: 特になし
タイポグラフィはデザインの印象を最も大きく左右する要素です。フォントを「なんとなく見やすいもので」と指示するのではなく、分類・ウェイト・サイズ・文字間隔を具体的に伝えることで、AIは意図通りの文字組みを実現します。
フォントの分類を理解する
Section titled “フォントの分類を理解する”AIにフォントを指示するとき、分類名を使うと意図が正確に伝わります。
サンセリフ（Sans-Serif）
Section titled “サンセリフ（Sans-Serif）”飾り線のない、シンプルでモダンな書体。デジタルUIに最も多く使われます。
- Inter — スクリーン向けに設計された汎用性の高い書体。見出しから本文まで幅広く使える
- Geist — Vercel が開発した現代的なサンセリフ。コンパクトな字幅と柔らかいアーチが特徴
- Plus Jakarta Sans — デジタルインターフェース向けに設計されたフレンドリーな書体
- Bricolage Grotesque — 独自のディテールを持つ現代的なグロテスク体。見出しに映える
セリフ（Serif）
Section titled “セリフ（Serif）”文字の端に飾り線があるクラシックな書体。エディトリアルやブランドサイトに適しています。
- Merriweather — 長文コンテンツへの可読性が高い伝統的なセリフ体
- Playfair Display — 太細のコントラストが強く、見出しに劇的な印象を与えるディスプレイセリフ
- IBM Plex Serif — テクニカルで精密な印象を持つコンテンポラリーセリフ
モノスペース（Monospace）
Section titled “モノスペース（Monospace）”全文字が同じ幅を持つ書体。コードブロックや技術コンテンツに使います。
- Geist Mono — Geist Sans のモノスペース版。コードブロックとの相性が良い
- IBM Plex Mono — 技術的なコンテンツに適した高可読性のモノスペース
ディスプレイ（Display）
Section titled “ディスプレイ（Display）”大きな見出し専用の装飾的な書体。本文には使いません。
コンデンスド（Condensed）
Section titled “コンデンスド（Condensed）”標準より文字幅が狭い書体。スペースが限られたレイアウトや見出しに向いています。
エクスパンデッド（Expanded）
Section titled “エクスパンデッド（Expanded）”標準より文字幅が広い書体。ゆったりとした開放的な印象を与えます。
タイポグラフィの重要な用語
Section titled “タイポグラフィの重要な用語”| 用語 | 意味 | 指示の例 |
|---|---|---|
| フォントウェイト | 文字の太さ（100〜900） | font-weight: 700（Bold） |
| フォントサイズ | 文字の大きさ（px / rem） | font-size: 48px |
| 行間（Line Height） | 行と行の間隔 | line-height: 1.5 |
| 文字間隔（Letter Spacing） | 文字同士の間隔 | letter-spacing: -0.02em |
フォントペアリングの4つの戦略
Section titled “フォントペアリングの4つの戦略”2つのフォントを組み合わせるとき、コントラストと統一感を同時に実現するのが目標です。
1. 分類の違いでコントラストを作る
Section titled “1. 分類の違いでコントラストを作る”セリフ × サンセリフの組み合わせ。最も定番で使いやすいペアリング。
見出しに Playfair Display、本文に Inter を使ってください。
見出しは 64px、本文は 16px で、サイズの差でコントラストを出します。2. ウェイトの違いでコントラストを作る
Section titled “2. ウェイトの違いでコントラストを作る”同じフォントファミリー内で太さを変える方法。統一感を保ちながら階層を作れます。
Inter Black（ウェイト900）を見出しに、Inter Regular（ウェイト400）を本文に使ってください。3. サイズの違いでコントラストを作る
Section titled “3. サイズの違いでコントラストを作る”フォントが同じでも、サイズ差を大きくすることでメリハリが生まれます。
見出しを 3rem（48px）、本文を 1rem（16px）に設定してください。4. 歴史的・様式的な繋がりで合わせる
Section titled “4. 歴史的・様式的な繋がりで合わせる”同じデザイン時代や思想を持つフォント同士はペアにしやすいです。
ミッドセンチュリーモダンなデザインで、見出しに Futura、本文に Gill Sans を使ってください。用途別タイポグラフィのプロンプト例
Section titled “用途別タイポグラフィのプロンプト例”ビジネスサイト（Inter）
Section titled “ビジネスサイト（Inter）”Inter を使って以下のタイポグラフィスケールでビジネスホームページを作ってください：
- 見出し：48px、font-weight: 700、letter-spacing: -0.02em
- サブ見出し：24px、font-weight: 600、letter-spacing: -0.01em
- 本文：16px、font-weight: 400、line-height: 1.5
- ボタンテキスト：16px、font-weight: 600
- キャプション：12px、font-weight: 400、letter-spacing: 0.02em
- テキストカラーは白背景に対してダークグレー（#333）エディトリアルブログ（Playfair Display + Merriweather）
Section titled “エディトリアルブログ（Playfair Display + Merriweather）”エレガントなタイポグラフィのブログレイアウトを作ってください：
- 記事タイトル：Playfair Display、56px、font-weight: 700、line-height: 1.1
- セクション見出し：Playfair Display、32px、font-weight: 600
- 本文：Merriweather、18px、font-weight: 400、line-height: 1.6
- 引用文：Playfair Display イタリック、24px
- カテゴリラベル：Merriweather Bold、12px、大文字、letter-spacing: 0.05em
- 本文コンテナの最大幅は680pxで可読性を確保テックスタートアップ（Bricolage Grotesque + Inter）
Section titled “テックスタートアップ（Bricolage Grotesque + Inter）”SaaSランディングページのタイポグラフィを設定してください：
- ヒーロー見出し：Bricolage Grotesque、64px、font-weight: 700、letter-spacing: -0.03em
- 機能タイトル：Bricolage Grotesque、28px、font-weight: 600
- UIテキスト：Inter、16px、font-weight: 400、line-height: 1.5
- ボタン：Inter、14px、font-weight: 600、letter-spacing: 0.01em
- インタラクティブ要素はビビッドブルー（#3B82F6）Eコマース（Plus Jakarta Sans）
Section titled “Eコマース（Plus Jakarta Sans）”アクセシブルなECサイトのタイポグラフィを設定してください：
- ページタイトル：Plus Jakarta Sans、40px、font-weight: 800
- 商品名：Plus Jakarta Sans、24px、font-weight: 700、line-height: 1.2
- 商品説明：Plus Jakarta Sans、16px、font-weight: 400、line-height: 1.5
- 価格：Plus Jakarta Sans、18px、font-weight: 700
- ボタンテキスト：14px、font-weight: 600
- 価格とCTAは強いカラーコントラストを確保してアクセシビリティを保つレスポンシブタイポグラフィ
Section titled “レスポンシブタイポグラフィ”画面サイズに応じてフォントサイズを変える2つの方法を覚えておきましょう。
流体タイポグラフィ（Fluid Typography）
Section titled “流体タイポグラフィ（Fluid Typography）”画面幅に連動してなめらかにサイズが変わります。
以下のclampを使った流体タイポグラフィでランディングページを作ってください：
- 見出し：clamp(32px, 5vw, 64px)
- サブ見出し：clamp(24px, 3vw, 36px)
- 本文：clamp(16px, 1vw, 18px)ブレークポイントベースのタイポグラフィ
Section titled “ブレークポイントベースのタイポグラフィ”特定の画面幅を境にサイズが段階的に変わります。
ブレークポイントベースのタイポグラフィでランディングページを作ってください：
- 見出し：デスクトップ48px、タブレット36px、モバイル24px
- サブ見出し：デスクトップ36px、タブレット28px、モバイル18px
- 本文：デスクトップ18px、タブレット16px、モバイル14pxAIへのフォント指示のベストプラクティス
Section titled “AIへのフォント指示のベストプラクティス”- フォント名は正確に記述する（「エレガントなセリフ」より「Playfair Display」）
- ウェイトは数値で指定する（「Bold」より「font-weight: 700」）
- 代替フォントを添える（「Interまたは類似のモダンサンセリフ」）
- 本文テキストには必ず
line-heightを指定する（可読性の確保） - 見出しと大文字テキストには
letter-spacingを明示する
クイズ