見出し・サブ見出し・本文それぞれの役割を理解し、サイズや配置で優先順位を作る方法を学びます。短時間の課題で実践して、すぐに使えるテクニックを身につけましょう。
デザインで伝えたいことを一瞬で伝えるには、文字のサイズ差—ジャンプ率—が強力な武器になります。本記事では、ジャンプ率の基礎、FパターンとZパターンを使った目線誘導、右上から左下へ視線を流す実践的なレイアウト例、そしてすぐに試せる課題まで、実務で使える具体的なテクニックを丁寧に解説します。
ジャンプ率を設計する意味
視覚デザインでは、何を最初に見せたいかを決め、それを最も目立たせる必要があります。ジャンプ率は「どれだけ目立たせるか」を数値的に設計する考え方で、見出し・サブ見出し・本文それぞれに明確なサイズ差をつくることで、自然に情報の読み順を作れます。
目安の比率と実務での使い方
- 大胆：見出し : サブ : 本文 = 1 : 0.5 : 0.25（強い訴求、告知向け）
- 穏やか：1 : 0.75 : 0.5（説明重視のコンテンツ）
実務では媒体（印刷物・SNS・Web）に合わせて数値を調整しますが、重要なのは「明確な階層がある」ことです。
FパターンとZパターンをどう活かすか
Fパターンはテキスト中心の情報整理に適し、Zパターンは視線を大きく動かす広告やバナーに向きます。どちらも「自然な視線の癖」を利用する点で共通しており、ジャンプ率と組み合わせることで強い案内動線を作れます。
Fパターンの活用例
- ブログ記事や読み物：左上にキャッチ、段落見出しを強めにして横への視線移動を促す。
Zパターンの活用例
- 告知バナーやチラシ：右上にキャッチを置き、対角線で左下へ誘導する配置が有効。
右上→左下へ視線を流す実践テクニック
- 右上に最強の要素（大見出し＋強い色）を置く。
- 右上で視線を止めるため、近くに大きな写真やイラストを配置する。
- メインビジュアルの対角線に沿ってテキストブロックを配置し、斜めの視線経路を作る。
- 左下に行動喚起（日時・会場・CTA）をまとめて置き、視線の終点にする。
この流れは「注目→理解→行動」の順を自然に満たします。
実践ルールとチェックリスト
- 見出しは周囲の要素より2倍以上大きく（ジャンプ率 >= 2）
- サブ見出しは見出しの60〜70%にする
- 本文は14〜18px相当で可読性を確保
- 行間を調整して本文の可読性を高める
- モバイルでは縦方向の順序を整え、相対的なジャンプ率を保つ
具体レイアウト例（夏祭り告知）
- 右上：大見出し「夏祭り in まち」—最大、太字、アクセントカラー
- 右中：写真で視線を引き止める
- 中央〜斜め下：日時・一言説明（サブ見出し）
- 左下：会場・申込（本文サイズで読みやすく）
このレイアウトは視線を右上に集め、斜めに移動して左下で行動に導きます。
今日の課題（20分）
- 右上に大見出しを置き、ジャンプ率を意識してサイズを設定する（例：見出し40px、サブ18px、本文14px）。
- 見出し近くにビジュアルを置き、斜めの視線経路をつくる。
- 左下に日時・会場・申込をまとめ、視線の終点を作る。
課題後の確認ポイント：
- 右上の見出しが一番目を引いているか
- 視線が右上→中央斜め→左下へ動くか
- 左下で行動に導く情報が明確か
補足：モバイル対応
小画面では対角線の効果が薄れるため、縦並びでジャンプ率を保つ。見出しを相対的に大きくして階層を明確にすること。
内部リンク：
64歳からデザインを学び始め、現在はWebと印刷物のデザインを制作しています。このシリーズでは、デザイン経験がない方にも分かる言葉で、デザインの基本と作り方をお伝えします。