ジャンプ率で目線を誘導する

文字の大きさの差、いわゆる「ジャンプ率」を大胆に使うと、見る人の視線を確実に誘導できます。見出しを強く出して右上に視線を集め、斜めに流して左下で行動を促す――この動きは、告知や短い案内文で非常に有効です。本稿では、ジャンプ率の考え方、F/Zパターンの応用、右上から左下へ視線を流す具体的な手法、そしてすぐ試せる課題を丁寧に解説します。

1. ジャンプ率を大胆にする理由

小さな差では伝わりにくい階層が、明確なサイズ差で「一瞬で分かる」ようになります。

見出しが大きければ、装飾を減らしても注目点が損なわれません。

サイズ差が視線の優先度を決めるため、見る人の行動につなげやすくなります。

例えば、見出し：サブ見出し：本文を1：0.5：0.25の比率にすると、視線はまず見出しに集まり、次にサブ見出し、最後に本文へと自然に移動します。

2. FパターンとZパターンの基本

Fパターン：テキスト主体のページでよく見られる読み方。左上→右へ横移動→下へ移る、という流れ。

Zパターン：視線がジグザグに動くレイアウト。左上→右上→左下→右下と流れる。

これらは「自然な視線の動き」を表すモデルですが、デザインはこれを利用して意図的に目線を導くことができます。

3. 右上から左下へ視線を誘導する具体法

普段とは逆の流れ（右上→左下）に視線を流したい場合、次を組み合わせます。

右上に最も強い要素（大見出し＋色）を置く。

見出し付近に大きめのビジュアルで視線を留める。

ビジュアルやテキストブロックを対角線上に配置して、斜めの道筋をつくる。

左下に行動に直結する情報（日時・会場・CTA）を置き、視線の終点にする。

この配置は、見出しで注意を掴み、斜めの線に沿って案内を読ませ、最後にアクションを促すために有効です。

4. 実践ルール（すぐ使えるチェックリスト）

見出しは周囲の要素より2倍以上大きくする（ジャンプ率 >= 2）

サブ見出しは見出しの60〜70%にする

本文は可読性重視で14〜18px相当を目安に

行間は本文を読みやすく、見出し周りには余白をしっかりとる

配置ははっきりとした段差や対角線を作る（微妙な揃えは視線が迷う）

5. 具体例：夏祭り告知の作り方

右上（大）：「夏祭り in まち」—最大の見出し、太字、強い色

右中（中）：写真やイラストで視線を引き止める

中央〜斜め下（小）：日時・一言説明（サブ見出し）

左下（本文/CTA）：会場、参加方法、申込リンク（読みやすい本文）

この順で配置すると、見る人はまず何の告知かを認識し、斜めに視線を移して詳細と申込へたどり着きます。

6. 小さい画面での注意点

スマホでは対角線の効果が弱くなるため、縦方向の順序を整えつつジャンプ率を保ちます。例：見出し24px、本文12–14pxのように相対的な差を維持してください。

7. 今日の課題（20分）

右上に大見出しを置き、ジャンプ率を意識してサイズを決める（例：見出し40px、サブ18px、本文14px）。

見出し付近にビジュアルを置き、斜めの視線経路を作る。

左下に日時・会場・申込をまとめる。

完成後の確認：

右上の見出しが一番目を引いているか

視線が右上→中央斜め→左下へ自然に移動するか

左下で行動に導く情報が一目で分かるか

本稿は、短時間で実践できるテクニックに絞って解説しました。次回は余白とグリッドでレイアウト全体を整える方法を紹介します。

ハッシュタグ

#デザイン初心者 #タイポグラフィ #目線誘導

ジャンプ率（文字サイズの差）を大胆に使うと、見る人の目線を確実に誘導できます。本稿では、見出しを強く出して右上に視線を集め、斜めに流して左下で行動を促すテクニックを解説します。Canvaでも紙でも実践可能な20分課題つきです。