ジャンプ率

同じ内容なのに、高級ブランドの広告は落ち着いて見えて、スーパーのチラシはにぎやかに見える。この差を作っているものの1つがジャンプ率です。

前のレッスンで学んだ4原則の対比を、数字で扱えるようにする回です。「差をはっきりつける」と言われても迷いますが、倍率で考えると決められます。

ジャンプ率とは

ジャンプ率は、いちばん大きい要素と、いちばん小さい要素の比率です。文字なら「見出しの文字サイズ ÷ 本文の文字サイズ」で出します。

本文16px・見出し32pxなら、ジャンプ率は2.0倍。
本文16px・見出し20pxなら、1.25倍です。

この数字が大きいほど元気に、小さいほど落ち着いて見えます。デザインの印象を、感覚ではなく数字で決められるところがジャンプ率の便利さです💡

高いとどう見えるか、低いとどう見えるか

どちらが良いという話ではありません。伝えたい印象で選びます。

ジャンプ率	印象	よく使う場面
低い（1.0〜1.5倍）	落ち着き・上品・信頼	高級ブランド、士業、医療、コーポレートサイト
標準（1.5〜2.5倍）	読みやすい・素直	ブログ記事、サービスサイト、資料
高い（3.0倍以上）	にぎやか・勢い・お得感	セールのバナー、チラシ、キャンペーンLP

高級ブランドのサイトを見ると、文字が小さくて驚くことがあります。あれは意図的です。差をつけないことで、静かで上品に見せています。
逆にスーパーのチラシは、価格だけが極端に大きい。1秒で「安い」と伝えることが目的だからです。

身近な例で比べてみてください。ユニクロのセール告知は価格だけが飛び抜けて大きく、無印良品のサイトは見出しと本文の差がほとんどありません。同じ文字を置く作業でも、倍率で伝わる印象が変わります。

文字のジャンプ率の目安

ちょうどいい倍率は、作るもので変わります。迷ったときの出発点として使ってください。

前のレッスンで「対比は1.5倍以上」と書きました。1.5倍がジャンプ率の下限だと考えてください。それ以下は、差をつけたのか揃え損ねたのか伝わりません。

文字以外のジャンプ率

画像のジャンプ率

並べた写真の大小の比率です。全部同じ大きさだと一覧性は上がりますが、平坦になります。
1枚だけ2〜3倍にすると、そこが主役になります。ギャラリーやブログの記事一覧で効きます。

余白のジャンプ率

これは前のレッスンでやった「グループ間はグループ内の2倍以上」と同じ考え方です。余白にも差をつけると、まとまりがはっきりします。

文字・画像・余白の3つでジャンプ率を揃えると、デザイン全体の調子が合います。文字だけ元気で余白が詰まっている状態は、ちぐはぐに見えます。

ジャンプ率の決め方

順番はこうです。

4つ目が地味に効きます。サイズをその都度決めると、18pxと19pxが混ざるような事故が起きます。使う文字サイズは3〜4種類までに絞ってください。反復の考え方と同じです。

本文16pxを出発点にするのは、パソコンでもスマホでも、ブラウザの初期設定が16pxだからです。まずここに合わせておくと、読めない文字になりません。

やってしまいがちな失敗

全部を大きくしてしまう

目立たせたい要素が3つあると、3つとも大きくしてしまいます。結果、どれも目立ちません。
直し方は、主役を1つに決めて、他を小さくする。大きくするのではなく、小さくするほうが早いです。

媒体に合っていない

コーポレートサイトにチラシのジャンプ率を持ち込むと、安っぽく見えます。逆にセールのバナーを1.2倍で作ると、何も伝わりません。
直し方は、作る前に「落ち着き」か「勢い」かを決める。決めてから倍率を選びます。

サイズの種類が多すぎる

14・15・16・18・19・22・24…と増えると、ジャンプ率が測れなくなります。
直し方は、3〜4種類に統合する。近い値は同じにまとめてしまって構いません。

太さで代用しようとする

サイズを変えずに太字だけで差をつけようとすると、弱い差にしかなりません。
直し方は、まずサイズで差をつけて、太さは補助に使う。太字だらけの画面は、結局どこも目立ちません。

練習：同じ文面で2案を作る

手を動かすと一気に分かります。文面・色・レイアウトは変えず、ジャンプ率だけを変えた2案を作ってください。

題材はこれを使ってみましょう。

• キャッチ：はじめての方へ
• サブ：カウンセリング無料
• 補足：オンライン対応・全国どこからでも

1. A案（低い・1.3倍）：本文16px、キャッチ21px
2. B案（高い・4.0倍）：本文16px、キャッチ64px

作り終えたら、2案を並べて言葉にしてみてください。「Aは落ち着いて見える」「Bは急いでいる感じがする」。この言語化が大事です。次に作るとき、印象から倍率を逆算できるようになります。

よくある質問

ジャンプ率は高いほうがいいんですか

いいえ。目的次第です。
一瞬で伝えたいなら高く、じっくり読ませたいなら低く。高いほうが上手に見えるということはありません。むしろ、媒体に合っていない高さは安っぽく見えます。

スマホとPCで変えるべきですか

変えたほうがいいです。スマホは画面が狭いので、PCと同じ倍率だと見出しが画面を占領します。
目安として、スマホではPCの0.7〜0.8倍に落とします。本文は小さくせず、見出しだけを下げるのがコツです。

何を基準に「本文サイズ」を決めますか

読む距離で決めます。Webは16px前後が標準です。
バナーやチラシは見る距離が変わるので、比率で考えます。バナーなら短辺の4%前後が本文の目安。1080×1080なら43px前後です。

ジャンプ率を測るツールはありますか

専用ツールは要りません。ブラウザの検証機能で文字サイズを見て、割り算するだけです。
参考にしたいサイトを開いて、見出しと本文のpxを調べて割る。これを何本かやると、印象と数字が結びつきます◎

次に学ぶこと

このレッスンのまとめです。

• ジャンプ率 = 大きい要素 ÷ 小さい要素
• 低い（1.0〜1.5倍）は落ち着き、高い（3.0倍以上）は勢い
• 下限は1.5倍。それ以下は差として伝わらない
• 本文サイズを先に決めて、倍率を掛けて見出しを出す
• 使う文字サイズは3〜4種類まで

ここまでで、4原則・余白・ジャンプ率と、1つの面をどう整えるかを学びました。次は面全体の組み立て方です。次のレッスンは「レイアウトの基本」。要素をどこに置くか、視線がどう動くかを扱います。

バナーで手を動かしたい方はバナーデザインお題20選をどうぞ。同じお題をジャンプ率違いで2案作ると、練習になります。