ジャンプ率とは？文字サイズの差でデザインの印象を変える方法

バナーやLPを作っても、なんだか物足りない…
文字を大きくしてみたのに、メリハリが出た気がしない…

見出しと本文の文字サイズを変えてみても、画面がのっぺりしたまま変わらないことがありませんか？原因は、

• 重要な箇所とそうでない箇所の優先順位
• 優先順位に沿ったサイズでのレイアウト

が足りていないケースがほとんどです。

この差を数値で表したものがジャンプ率です。ジャンプ率とは、1つの画面の中で大きい文字と小さい文字のサイズの比率のこと。サイトの見出しと本文にも、バナーのコピーと注釈にも同じ考え方を使います。計算方法は「大きい文字サイズ÷小さい文字サイズ」で求められます。

ジャンプ率は感覚ではなく数値で判断できる指標です。「なんとなく大きくする」をやめて、比率で決める方法をこの記事で説明します。

ジャンプ率とは？文字サイズの比率と計算方法

ジャンプ率とは
1つの画面の中で、大きい文字と小さい文字のサイズの比率です。Webサイトの見出しと本文がよく例に出されますが、重要な情報とそうでない情報の大小の差すべてが対象で、写真や図版の大きさの差に使うこともあります。計算は「大きい文字サイズ÷小さい文字サイズ」です。

たとえば本文を16px、見出しを32pxで作ったとすると、32÷16でジャンプ率は2.0です。見出しを48pxまで上げれば、48÷16でジャンプ率は3.0になります。

数字が大きいほど、見出しと本文の差が大きいということです。差が大きいほど見出しは目立ち、差が小さいほど見出しは本文に近づいて目立たなくなります。

比率の目安として、黄金比（1:1.618）を使う考え方もあります。例えば本文16pxに対して見出しを26px前後にするとジャンプ率が黄金比に近づきます。正解として決まっているわけではないので、狙った印象に合わせて比率は自分で決めてください。

ジャンプ率が高い・低いで変わる印象

ジャンプ率を上げるほど見出しは目立ち、下げるほど本文との差がなくなって落ち着きます。印象の違いは、次のように整理できます。

比べるポイント	ジャンプ率が高い（差が大きい）	ジャンプ率が低い（差が小さい）
印象	ダイナミック・ポップ・若々しい	落ち着いた・上品・高級感
向いているターゲット	セール・若年層向け・SNS広告	法人・年齢層が高めの客層・ブランド系
使われやすい例	セールバナー、タイムセールLP	企業の公式サイト、サービスサイトの見出し

私は、「ジャンプ率が高い方が良い」も「低い方が上品で正しい」も、どちらも採用していません。選ぶ基準は、読者やターゲットに合っているかどうかです。

20代向けのセールバナーに落ち着いたジャンプ率を使うと、勢いが伝わらず埋もれてしまいます。士業や医療のようなサイトで差を広げすぎると、今度は軽い印象になって信頼感が下がります。ターゲットを先に決めて、そこから比率を選ぶ順番にしてください。

同じ案件の中でも、ページごとに使い分けることもあります。

Webデザインの現場でジャンプ率を使う場面

ジャンプ率の考え方は、バナー・LP・サイトの見出しのどこでも共通して使えます。

バナー：キャッチコピーと補足テキストの差

バナーでは、キャッチコピーと補足テキストの文字サイズの差が、そのままクリックのされやすさに関わってきます。

キャッチコピーを目立たせたいのに補足テキストと差が付いていないと、どちらが主役か伝わらず、クリックする理由が弱くなります。バナーの作り方の基本から確認したい方は「バナーの作り方を初心者向けに解説｜手順・サイズ・上達のコツ」から進んでください。

LP：ファーストビューの見出しとサブテキストの差

LPのファーストビューも同じです。見出しとサブテキストの差が小さいと、読者はどこを先に読めばいいか判断できず、結局どちらも読まずに離れてしまいます。

サイトの見出し階層：H1〜H3と本文の差

サイトではH1・H2・H3と本文の文字サイズの差が、情報の重要度を伝える役割を持ちます。ジャンプ率で作った目立つ見出しは、読者が最初に目を留める場所にもなります。

「どこから見てもらうか」という視点は視線誘導そのものです。詳しくは「視線誘導とは？Z型・F型の使い分けとWebデザインでの活かし方」にまとめています。

サムネイル・SNS画像：タイトル文字と背景の差

ブログやYouTubeのサムネイル、SNS投稿画像も考え方は同じです。タイトル文字と、その周りの説明文・装飾文字との差が小さいと、一覧やタイムラインの中で埋もれてしまいます。

小さな画面ほど、差をはっきりつけることが大事になります。スマホの画面で見たときに、タイトルだけで内容が伝わるかどうかを基準にしてみてください。

初心者がやりがちなジャンプ率の失敗と直し方

添削でよく見かける失敗は、大きく3つに分かれます。

失敗1｜全部同じサイズで作ってしまう

見出しも本文も同じくらいの大きさで作ってしまい、メリハリが出ない状態です。サイズの差がないと、何が大事な情報か読者に伝わりません。読者は上から順に全部を読みません。

まず大きい文字に目を止めて、そこから内容を判断します。見出しと本文の差がないと、この「最初に目を止める場所」が作れません。反復・対比という原則が働いていない状態とも言えます。デザインの4原則から見直したい方は「デザインの4原則とは？近接・整列・反復・対比をWebの例で解説」で整理しています。

失敗2｜サイズの差だけつけて、字間・行間を整えていない

見出しを大きくしただけで、字間・行間がばらついたままのケースです。

サイズの差を付けても、文字間が詰まりすぎたり空きすぎたりしていると、見出しとして読みにくくなります。文字詰めの判断基準は「カーニングとは？文字詰めの判断基準とPhotoshopでの調整方法」でまとめています。

失敗3｜ジャンプ率を上げすぎて読みにくくなる

差を付けることに気を取られて、見出しを極端に大きくしすぎるケースです。見出しだけが浮いてしまい、本文とのつながりが切れて読みにくくなります。

デメリットとしてターゲットに合わない勢いが出てしまうこともあります。士業や医療系のような落ち着いた印象が必要な場面で起きやすい失敗です。

ジャンプ率は、上げれば上げるほど良いわけではありません。目立たせたいのは見出しそのものではなく、その先に書かれている内容です。見出しが大きすぎて内容まで読まれなければ、ジャンプ率を付けた意味がなくなってしまいます。

直し方｜本文サイズを先に決めてから、比率で見出しを決める

この3つの失敗は、決める順番を変えるだけで直ります。

1. 読みやすい本文サイズを先に決める
2. ターゲットに合う印象（高い・低い）を選ぶ
3. 本文サイズに比率をかけて見出しサイズを決める

見出しのサイズから先に決めると、本文との比率が後付けになってしまいます。本文を基準にして比率で見出しを決める順番にすれば、毎回同じ基準で判断できますよね。

本文が14pxならジャンプ率2.0で見出しは28px、本文が16pxなら同じ比率でも見出しは32pxになります。本文のサイズが違えば、同じ比率でも見出しの実際のサイズは変わるということです。

「見出しは何px」と固定の数字で覚えるより、「本文の何倍にするか」で覚えておくほうが、媒体やサイズが変わっても使い回せます。

まとめ

ジャンプ率は、1つの画面の中で大きい文字と小さい文字のサイズの比率です。見出しと本文に限らず、主役の文字と補足の文字の差すべてに使います。

計算方法は「大きい文字サイズ÷小さい文字サイズ」。高いほどメリハリが出て、低いほど落ち着いた印象になり、どちらが正解ということはありません。バナー・LP・サイトの見出しのどこでも、ターゲットに合わせて比率を選んでください。

ジャンプ率＝大きい文字サイズ÷小さい文字サイズ。
高いか低いかに正解はなく、ターゲットに合わせて選ぶもの。
本文サイズを先に決めて、比率で見出しサイズを決める。

手元のバナーやLPを1枚開いて、見出しと本文の文字サイズを割ってみてください。ジャンプ率が1.2〜1.3くらいしかなければ、見出しを大きくするところから直せます。

参考にした情報源

• 株式会社エンビジョン「ジャンプ率の定義や重要性を解説！効果や活用時のポイントも」https://envision-inc.jp/insights/column20
• 株式会社セブンデザイン「Webデザインのジャンプ率とは？黄金比から考える文字サイズの目安」https://www.sevendesign.biz/blog/web-design-jumprate/

※2026年10月時点の各ページの記載にもとづきます。黄金比（1:1.618）の目安は、上記のうち株式会社セブンデザインの記事で紹介されている考え方です。