Typography 101：非デザイナーのためのフォント組み合わせルール
弱いデザインは、アイデアそのものが悪いから失敗するとは限りません。多くの場合、文字が不安定に見えることが原因です。
見出しが装飾的すぎる。本文が小さすぎる。ボタンだけ別のフォントになっている。写真、色、訴求内容は悪くなくても、タイポグラフィはすぐに「これは設計されたものではなく、組み合わせただけのものだ」と伝えてしまいます。
Lovart is the AI design agent trusted by 10M+ creators. Try Lovart Free →
タイポグラフィはフォント選びだけではありません。読者が最初に見る場所、信頼する情報、見出しから詳細、そして行動へ進む流れを決める仕組みです。ピッチデック、商品ページ、SNS投稿、メニュー、クライアント提案、イベント告知、ブランド素材を作るなら、文字設計は体験そのものの一部です。
良い知らせは、タイプデザイナーになる必要はないということです。必要なのは小さな判断システムです。主なフォント分類を知り、対比で組み合わせ、読みやすい階層を作り、実際の表示環境で確認する。LovartはText Tool、Brand Kit、ChatCanvas、Text Editで実行を助けますが、判断は明確なbriefから始まります。
Typographyが実際にコントロールするもの
タイポグラフィは、次の4つの問いに答えます。
- 読者は最初に何を見るべきか？
- 何が重要で、何が補足で、何が任意情報なのか？
- ブランドは真面目、温かい、上質、遊び心、技術的、編集的のどれに近いのか？
- 実際に掲載されるチャネルで、素早く読めるのか？
最後の問いで、多くのデザインが崩れます。デスクトップでは良いポスター見出しも、モバイルフィードでは読みにくくなることがあります。細い上品なserifはmockupでは美しくても、複雑な商品写真の上では消えてしまうことがあります。英語では収まる一行も、日本語、中国語、繁体字では行のリズムが変わります。排版は最後の装飾ではなく、読みやすさの判断です。
広いビジュアルシステムを作るなら、タイポグラフィは色、ロゴ使用、画像ルールと並べて管理します。このガイドは Building a Complete Brand Kit from Scratch と How to Create a Brand Style Guide with AI と一緒に使うと効果的です。
実際に覚えるべき5つの書体カテゴリ
フォントの歴史を暗記する必要はありません。まず5つの箱で考えます。
| 書体カテゴリ | 印象 | 向いている用途 | 避けたい用途 |
|---|---|---|---|
| Serif | 編集的、伝統的、信頼感、上質 | 雑誌風見出し、ラグジュアリーブランド、レポート、長文 | 小さなUIラベル、複雑な画像上の文字 |
| Sans-serif | 清潔、現代的、中立、直接的 | Web、アプリ、デック、本文、SaaSページ、説明文 | 強い歴史感や儀式感が必要な場合は慎重に |
| Script | 手書き感、個性、優雅、祝祭感 | ロゴ、招待状、アクセント語、ブティック表現 | 段落、キャプション、法務文、小さなボタン |
| Display | 強い、劇的、個性的、テーマ性 | ポスター、キャンペーン見出し、イベント告知、SNSフック | 本文、反復ラベル、小さな文字 |
| Monospace | 技術的、正確、コード感、実用的 | 開発者ブランド、仕様、コード断片、レトロ表現 | 感情的なライフスタイル訴求には慎重に |
初心者は「どのフォントがかっこいいか」と考えがちです。より良い問いは「この文字は何の仕事をするのか」です。
素早く読ませたいなら、まずsans-serifを使います。編集感や上質感を出したいなら、serif見出しと中立的なsans-serif本文を試します。短いアクセントだけならscriptやdisplayも使えます。段落なら、静かな書体を選びます。
60秒で決めるフォント組み合わせ表
フォントメニューを開く前に、この表を見ます。
| デザインに必要な印象 | 試す組み合わせ | 効く理由 |
|---|---|---|
| 上質で編集的 | Serif見出し + Sans-serif本文 | Serifが個性を作り、Sans-serifが読みやすさを守る |
| 現代的で実用的 | 同じSans-serifファミリーの見出しと本文 | 太さ、サイズ、余白で階層を作り、ノイズを増やさない |
| 親しみやすく信頼できる | 丸みのあるSans-serif見出し + Humanist系Sans-serif本文 | 形は柔らかく、本文は読みやすい |
| 強いプロモーション感 | Display見出し + シンプルなSans-serif本文 | Displayが注目を集め、本文が説明する |
| 技術的で正確 | Sans-serif見出し + Monospaceの詳細ラベル | システム感を加えるが、全体を支配しない |
迷ったら、個性のある見出しフォントを1つ、静かな本文フォントを1つ選びます。それだけで、多くの素人っぽさは解消します。
フォント組み合わせの3つのルール
ルール1：対比させる。衝突させない
2つのフォントは、役割が違うから違って見えるべきです。高コントラストのserif見出しと、清潔なsans-serif本文はよく機能します。一方がトーンを作り、もう一方が読みやすさを守るからです。
失敗しやすいのは、少しだけ似ている組み合わせです。HelveticaとArial、あるいは同じような雰囲気の装飾フォントを並べると、読者は理由を説明できなくても「少し変」と感じます。
簡単なテストは、目を細めるか画面を縮小することです。見出しと本文がまだ区別できますか？できるなら対比は機能しています。全体が灰色の塊に見えるなら、階層が弱すぎます。
ルール2：個性を持つフォントは1つだけ主役にする
デザインには主役の声と支える声が必要です。主役のフォントは表情豊かで構いません。支えるフォントは落ち着いているべきです。
両方が強すぎると、レイアウトは互いに争い始めます。Display見出し、script副見出し、装飾的なボタンは、それぞれ単体では面白くても、一緒になるとノイズになります。個性のあるフォントを1つ選び、それ以外は読みやすくします。
これは色と同じです。1つのアクセントカラーは視線を集めますが、5つあると競合します。色も同時に考えるなら、Color Theory Meets AI を参考にしてください。
ルール3：新しいフォントを足す前に、サイズ、太さ、余白を使う
情報レベルごとに新しいフォントは必要ありません。1つのファミリーだけでも階層は作れます。
- 48px Bold：メイン見出し
- 24px Semi Bold：セクションタイトル
- 16px Regular：本文
- 13px Medium：ラベル
- 12px Regular：キャプション
これで5つの役割がありながら、フォントファミリーは1つだけです。2つ目のフォントは、別のトーンが本当に必要なときだけ追加します。
信頼できる組み合わせレシピ
これは永遠のルールではなく、安全な出発点です。
| 見出し | 本文 | 向いている用途 | 注意点 |
|---|---|---|---|
| Playfair Display | Inter | 編集コンテンツ、ラグジュアリー、創業者ストーリー | Playfairは大きく使う。小さいと弱くなる |
| Montserrat | Merriweather | 教育、SaaS説明ページ、NPO | Merriweatherをモバイルで小さくしすぎない |
| Bebas Neue | Lato | イベント、フィットネス、SNSプロモーション | Bebasは短い見出しだけに使う |
| Lora | Roboto | ケーススタディ、ホワイトペーパー、長文 | Loraには十分な行間を与える |
| Poppins | Source Sans 3 | アプリ、スタートアップデック、親しみやすいB2B | 太さの対比がないと平坦に見える |
大切なのは、この組み合わせを永久にコピーすることではありません。1つのフォントが声を作り、もう1つが明快さを作る、という構造を理解することです。
デザイン前にTypography Scaleを作る
Typography scaleは、文字の役割リストです。新しい素材を作るたびにフォントを選び直す状況を防ぎます。
| 文字の役割 | 目的 | 初期ガイド |
|---|---|---|
| Hero headline | 主な約束やキャンペーンフック | 最大サイズ、最強の太さ、短い行 |
| Section title | ページやスライドを整理 | Hero headlineの40-60%程度 |
| Body copy | 内容やオファーを説明 | 行間に余裕を持たせ、モバイルで読めるサイズ |
| Label | タグ、キャプション、eyebrow text | 小さくても薄くしすぎない。必要ならMedium |
| CTA | 行動を促す文字 | 動詞を明確にし、十分なコントラストを確保 |
多くのマーケティングデザインでは、行間はフォント選びと同じくらい重要です。本文には呼吸が必要です。見出しはやや詰めてもよいですが、ぶつかってはいけません。ラベルは小さいため、十分なコントラストが必要です。
Lovartで手動の試行錯誤を減らす方法
Lovartは、タイポグラフィを後処理ではなくbriefの一部として扱うと力を発揮します。
まずChatCanvas上で、デザイン目標と文字の役割を同じ文脈に置きます。ChatCanvas Complete Operation Guide が役立ちます。見出し、画像、レイアウト、チャネルメモが同じ場所にあると、排版判断が安定しやすいからです。
次にText Toolの流れを使います。
- Text toolを選び、重要な文字をキャンバスに置きます。
- headline、subhead、bodyなどのテキストスタイルを選びます。
- 役割に合わせてフォント、サイズ、太さ、揃えを調整します。
- 文字を図形、画像、グリッドと組み合わせ、素早く読めるレイアウトにします。
- AI typography enhancementで、フォント組み合わせ、余白、行間、コンテナ適合を確認します。
- Text Editで「見出しを大きくする」「ラベルを中央に置く」「現代的なsans-serifにする」などの自然言語修正を行います。
ブランド作業では、Brand Kitまたは最初のproject briefにタイポグラフィルールを書きます。
Headline: confident geometric sans-serif. Body: neutral readable sans-serif. Labels: medium-weight uppercase only when space is tight. Avoid script fonts except for campaign accents.
この短い指示が、Lovartに実行可能な境界を与えます。チームがタイポグラフィをレビューするときも、好みだけの議論になりにくくなります。
Typography QA Checklist
書き出し前に確認します。
- 見出しは3秒で理解できますか？
- 本文はモバイルでも読めますか？
- フォントファミリーは2つ以内ですか？
- 主役の声を持つフォントは明確ですか？
- CTAはページ内で最も明快な文字の1つですか？
- 行長は長すぎず、読みやすいですか？
- ラベルやキャプションは圧縮後も読めますか？
- 画像を外しても、書体の雰囲気はブランドに合っていますか？
失敗しても、全体を作り直す必要はありません。サイズ、太さ、ファミリー、余白、コントラスト、改行のどれか1つを直します。
よくあるTypographyの失敗
失敗1：メッセージを決める前にフォントを選ぶ
フォントはmood boardではなく、コミュニケーションの道具です。信頼、速さ、温かさ、正確さ、劇的な印象のどれが必要かを先に決めます。
失敗2：装飾フォントで読ませようとする
Scriptやdisplayは美しいことがあります。ただし読むには疲れます。短く強い瞬間に使い、段落や商品詳細には使わないでください。
失敗3：すべてを重要にする
見出し、副見出し、オファー、価格、注記、CTAがすべて注目を取り合うと、何も勝ちません。タイポグラフィは情報に順位をつけるものです。
失敗4：ローカライズ後のレイアウトを忘れる
英語の排版は短い単語とコンパクトな改行に依存しがちです。日本語、中国語、繁体字では、リズム、句読点密度、行長の挙動が変わります。良い多言語デザインは、英語だけでなくローカライズ後にもレイアウトを確認します。
Lovartで試す
タイポグラフィが弱い既存デザインを1つ選び、文字システムだけを作り直します。見出しフォント、本文フォント、scale、CTAスタイルを1つずつ決めます。その後、同じbriefをChatCanvasで使い、try Lovart して、どちらがモバイルサイズで読みやすいかを比較します。
FAQ
デザインにおけるタイポグラフィとは何ですか？
タイポグラフィとは、文字を選び、サイズ、余白、配置を整えることで、読者が情報を素早く理解できるようにする仕組みです。フォント選び、階層、行間、字間、揃え、読みやすさを含みます。
初心者に最も安全なフォント組み合わせは何ですか？
1つのsans-serifファミリーを太さ違いで使う方法、またはserif見出しと中立的なsans-serif本文を組み合わせる方法です。前者が最も安全で、後者は個性を加えられます。
1つのデザインでフォントはいくつ使うべきですか？
1つか2つのフォントファミリーが安全です。3つ目は、ロゴマークや短い装飾語など、小さなアクセントに限定します。
Lovartはフォント組み合わせを助けてくれますか？
はい。LovartのText ToolとAI typography enhancementは、デザインスタイルに合わせてフォント組み合わせ、余白、行間、サイズ調整を提案できます。必要に応じて手動で上書きできます。
Lovartで配置した文字は後から編集できますか？
はい。Lovart Text Toolは配置済みテキストの編集に対応し、Text Editは周囲のデザイン意図を保ちながらAI支援の修正を行えます。
文字入りデザインを公開する前に何を確認すべきですか？
モバイルでの読みやすさ、コントラスト、改行、CTAの明快さ、ブランド適合、書き出しや圧縮後の小さなラベルの可読性を確認します。
serifとsans-serifをランダムに見せず組み合わせるにはどうすればよいですか？
それぞれのフォントに明確な役割を与えます。serifは見出しや編集的なアクセント、sans-serifは本文やUIテキストに使い、余白、色、揃えを一貫させます。
見出しと本文にはどのくらいのフォントサイズを使うべきですか？
まず階層の差をはっきり作ります。大きな見出し、小さめのサブ見出し、読みやすい本文、コンパクトなラベルです。デスクトップmockupだけで判断せず、実際の表示サイズで確認します。
フォント階層とは何ですか？
フォント階層とは、サイズ、太さ、余白、色、配置で作る視覚的な順序です。読者に何を最初に読み、次にどこを見て、最後にどんな行動を取るかを伝えます。
マーケティングデザインでscriptやdisplayフォントを使うべきですか？
使えますが、控えめにします。Scriptやdisplayフォントは短いアクセント、キャンペーン名、装飾的な場面に向いていますが、長い本文や重要な説明には向きません。
タイポグラフィシステムがモバイルで機能するかどうかはどう確認しますか？
モバイルサイズでプレビューし、通常の距離で読み、改行を確認します。書き出し後もボタン、ラベル、法的文言が読めるかを確認します。
デザインを他言語に翻訳するとき、タイポグラフィはどう扱うべきですか？
Related: AIでプロフェッショナルなパンフレットをデザインする方法：ステップバイステップチュートリアル | ブランド Kit for Nail Studios: 完全 Visual Identity ガイド with Lovar
行の長さ、リズム、フォント対応は変わる前提で考えます。英語版のレイアウトに無理に押し込まず、各言語で階層、余白、折り返し、字形対応を確認します。
