ジャンプ率は、見出しと本文など、要素間の大きさの差を指す言葉です。差が大きいことを高い、小さいことを低いと表現します。
この差は印象と読みやすさの両方に影響します。差が大きいほど目を引き、勢いが出ます。小さいほど落ち着き、上品な印象になります。どちらが良いというものではなく、目的によって使い分けます。
この記事では、差による印象の違い、目的別の使い分け、媒体ごとの傾向、そして文字以外への応用を整理します。
この記事でわかること
・差が大きいほど目を引き、小さいほど落ち着く
・訴求と落ち着きは両立しない
・媒体によって適した差が違う
・階層は3段階程度に収める
・文字以外にも同じ考え方が使える
・スマートフォンでは差が出にくい
差が大きいほど目を引き、小さいほど落ち着く
同じ内容でも、要素間の差によって受ける印象が変わります。
| 差の大きさ | 印象 | 読みやすさ | 向く内容 |
|---|---|---|---|
| 大きい | 勢い、活発、訴求が強い | 拾い読みしやすい | 販促、告知 |
| 中程度 | 標準的、読みやすい | バランスが良い | 一般的な記事 |
| 小さい | 落ち着き、上品、静か | 通読向き | 企業情報、読み物 |
差を大きくすると訴求は強まりますが、落ち着いた印象は失われます。この2つは同時に成立しません。どちらを取るかを先に決めてください。
差が大きいと訴求が強まり、小さいと落ち着く。
この2つは両立しないため、目的で選ぶ。
目的別の使い分け
ページの目的によって、適した差が変わります。
| ページの目的 | 推奨する差 | 理由 |
|---|---|---|
| 購入や申込を促す | 大きい | 要点を素早く拾わせる |
| サービスの説明 | 中程度 | 読み進めてもらう |
| 企業情報、代表挨拶 | 小さい | 落ち着いた印象を優先 |
| 記事、解説 | 中程度 | 構造を示しつつ通読させる |
| 採用情報 | 中程度 | 情報量が多く構造が要る |
同じサイト内でも、ページによって差を変えて構いません。ただし本文の大きさは統一し、見出しの側で調整するほうが管理しやすくなります。
ページの目的による設計はLPと通常サイト、広告の遷移先はどちらにすべきかも参考になります。
同じサイト内でも、ページの目的で差を変えてよい。
本文は統一し、見出しの側で調整する。
階層は3段階程度に収める
見出しの階層を増やすと、それぞれの差が小さくなり、区別できなくなります。
- 本文の大きさを決める
- 最も大きい見出しの大きさを決める
- その間を2段階程度に分ける
- 各段階の差が視覚的に区別できるか確認する
- 区別できないなら、階層を減らす
階層が5段階以上あると、隣り合う段階の差が判別できません。その場合、大きさ以外の要素（太さ、色、余白、線）で区別を補ってください。
情報の構造そのものが深すぎる可能性もあります。構造の見直しは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
階層が多いと、隣り合う段階の差が判別できない。
3段階程度に収め、足りない場合は太さや余白で補う。
媒体によって適した差が違う
同じ考え方でも、媒体によって前提が変わります。
| 媒体 | 傾向 | 理由 |
|---|---|---|
| チラシ、ポスター | 差が大きい | 遠くから瞬間的に判断される |
| Webの販促ページ | 差が大きい | スクロールしながら拾い読み |
| Webの記事 | 中程度 | 読み進める前提 |
| 会社案内、印刷物 | 小さい | 手元でじっくり読む |
| 名刺、封筒 | 小さい | 情報量が少なく落ち着きを優先 |
読まれる距離と時間で決まります。遠くから短時間で判断される媒体ほど差を大きく、手元でじっくり読む媒体ほど差を小さくします。
紙媒体での考え方は反響が出るチラシデザインの作り方｜捨てられる前の2秒で決まることを参照してください。
読まれる距離と時間で、適した差が決まる。
遠く短時間なら大きく、手元でじっくりなら小さく。
文字以外にも同じ考え方が使える
差をつけるという考え方は、文字以外の要素にも適用できます。
| 対象 | 差をつける方法 | 効果 |
|---|---|---|
| 写真 | 主要な1枚を大きく | 何を見せたいかが伝わる |
| 余白 | 区切りの大小を変える | 情報のまとまりが分かる |
| 色 | 強調色を1箇所に限定 | 行動を促す箇所が明確になる |
| 線の太さ | 階層で変える | 構造が視覚的に伝わる |
写真をすべて同じ大きさで並べると、どれが重要か分かりません。1枚を大きくするだけで、伝えたいことが明確になります。
余白の設計は余白のデザインが与える印象｜詰め込みが読みにくさを生む理由を参照してください。
写真、余白、色、線にも同じ考え方が使える。
すべて同じ大きさだと、何が重要か伝わらない。
スマートフォンでは差が出にくい
画面が狭いため、大きな差をつけると見出しが何行にもなります。
- 画面幅に対して見出しが長すぎると、可読性が下がる
- 差を保つために本文を小さくすると、読みにくくなる
- 画面幅ごとに、差の大きさを変える設計にする
- 太さや色で差を補い、大きさへの依存を減らす
画面が広いときの差を、そのまま狭い画面に持ち込まないでください。画面幅ごとに調整が必要です。設計の考え方はモバイルファーストデザインとは？重要視される理由と設計のコツを参照してください。
狭い画面では、大きな差が可読性を下げる。
画面幅ごとに差を調整し、太さや色で補う。
確認は実際の内容で行う
見本の文字列で調整すると、実際の内容で破綻します。
| 確認する内容 | 起きやすい問題 |
|---|---|
| 最も長い見出し | 行数が増えて印象が変わる |
| 最も短い見出し | 余白が不自然になる |
| 見出しが連続する箇所 | 階層が判別しにくい |
| 本文が短いセクション | 見出しのほうが目立ちすぎる |
| スマートフォンでの表示 | 折り返しの位置 |
特に長い見出しでの確認が必要です。短い見本ではちょうど良く見えても、実際の見出しで何行にもなることがあります。
実際の最も長い見出しで確認する。
見本ではちょうど良くても、実データで破綻する。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
落ち着きと訴求の両方を求める
この2つは同時に成立しません。目的を先に決めてください。
階層を増やしすぎる
隣り合う段階の差が判別できなくなります。3段階程度に収めてください。
画面幅を問わず同じ差にする
狭い画面では見出しが何行にもなり、可読性が下がります。
写真をすべて同じ大きさで並べる
どれが重要か伝わりません。主要な1枚を大きくしてください。
見本の文字列で調整する
実際の最も長い見出しで確認してください。行数が変わると印象も変わります。
よくある質問
具体的な倍率の基準はありますか
媒体と目的によって変わるため、一律の数値は示せません。重要なのは、隣り合う階層が視覚的に区別できることです。数値を決めるより、実際の内容で並べて判断してください。
本文の大きさは変えてよいですか
同じサイト内では統一するほうが管理しやすくなります。差を調整したい場合は、見出しの側で行ってください。本文を小さくして差を作ると、読みにくくなります。
差が小さいと素人っぽく見えませんか
差が小さいこと自体は問題ではありません。素人っぽく見える原因は、差が中途半端で意図が読めない場合です。小さくするなら明確に小さく、大きくするなら明確に大きくしてください。
見出しを太くすれば差は不要ですか
太さも差をつける手段の1つです。ただし太さだけでは階層が3段階以上になると区別が難しくなります。大きさと組み合わせてください。
既存サイトで見直すべき箇所はどこですか
見出しが連続する箇所と、本文が短いセクションです。前者は階層が判別しにくく、後者は見出しが目立ちすぎることがあります。
まとめ
ジャンプ率は、見出しと本文など要素間の大きさの差を指します。差が大きいほど目を引いて勢いが出て、小さいほど落ち着いた上品な印象になります。重要なのは、この2つが同時に成立しないことです。訴求を強めれば落ち着きは失われ、落ち着きを優先すれば訴求は弱まります。どちらを取るかを先に決めてください。
適した差は媒体によっても変わります。判断の軸は、読まれる距離と時間です。チラシやポスターのように遠くから瞬間的に判断される媒体では差を大きく、会社案内のように手元でじっくり読む媒体では小さくします。同じサイト内でも、購入を促すページと企業情報のページで差を変えて構いません。
階層を増やす際は注意が必要です。5段階以上あると隣り合う段階の差が判別できなくなり、構造が伝わりません。3段階程度に収め、足りない場合は太さや色や余白で区別を補ってください。また画面が狭い端末では、大きな差をつけると見出しが何行にもなって可読性が下がります。画面幅ごとに調整が必要です。
当社ではデザイン制作において、目的に応じた文字設計をご相談いただけます。Web実装を含めた検討はホームページ制作とあわせてご相談ください。
