Webデザインを添削していると、「なんとなく見づらい」「素人っぽく見える」「メリハリがない」と感じるデザインがあります。しかし、その原因を「センスがないから」「もっとおしゃれにすればいい」と片付けてしまうと、いつまで経ってもデザインは上達しません。デザインには、見た目の印象を左右する明確な要素があります。その一つが「ジャンプ率」です。
ジャンプ率とは、簡単に言えば、ページの中にある文字や要素の大きさにどれくらいの差をつけているかという考え方です。タイトル、見出し、本文、注釈、ボタンなど、それぞれの要素に適切な大小関係があることで、ユーザーは「何を先に見ればいいのか」を直感的に理解できます。逆に、この大小関係が弱すぎたり、強すぎたりすると、デザインは一気に素人っぽくなります。デザイン添削をするなら、色や装飾を見る前に、この「情報の大小関係」を確認することが重要です。
この記事では、Webデザインスクールや独学でデザインを学んでいる方が見落としやすい「ジャンプ率」について、実務で使えるレベルまで掘り下げて解説します。
※第３弾以降は順次公開していきます
第１弾：デザイン添削で見るべき「余白」の設計とは
第２弾：デザイン添削で見るべき「ジャンプ率」とは※本記事
第３弾：デザイン添削で見るべき「視線誘導」とレイアウト設計
第４弾：デザイン添削で見るべき「タイポグラフィ」の基本
第５弾：デザイン添削で素人っぽく見える原因10選
第６弾：デザイン添削で「なんとなく良い」を卒業する方法
第７弾：デザイン添削で色を変える前に確認すべきこと
第８弾：デザイン添削でレイアウトを改善する具体的な方法
- そもそも「ジャンプ率」とは何なのか？
- ジャンプ率が弱いデザインは「全部同じ」に見える
- 逆にジャンプ率が強すぎてもプロっぽくならない
- ジャンプ率は「文字サイズ」だけを見るものではない
- プロのデザインは「ジャンプ率の階層」が整理されている
- ジャンプ率を決めるときに「全部目立たせたい」は禁止
- ジャンプ率と「視線誘導」はセットで考える
- ジャンプ率を改善するとき、まず「サイズ」を変えるのは間違い
- ジャンプ率を意識した具体的な添削方法
- ポートフォリオ添削でもジャンプ率は重要
- 素人っぽいデザインは「ジャンプ率」ではなく「感覚」で作られている
- ジャンプ率を理解すると「なんとなく良い」が言語化できる
- デザイン添削で「ジャンプ率」だけを直してもデザインは完成しない
- まとめ｜ジャンプ率を理解することは「デザインの優先順位」を理解すること
そもそも「ジャンプ率」とは何なのか？
ジャンプ率とは、デザインの中に存在する要素同士の「大きさの差」を指します。
例えば、「Webデザインスクール」という大見出しが60px。その下の説明文が18px。さらに小さな補足が14px。という構成なら、60px → 18px → 14pxという明確な大小関係があります。
これによってユーザーは、
「ここが一番重要」
⇩
「これはその説明」
⇩
「これは補足情報」
という情報の優先順位を瞬時に理解できます。
つまりジャンプ率は、単純な「文字サイズの問題」ではありません。
情報の重要度を視覚的な大きさの差として表現するための設計です。ここを理解していないと、文字サイズを適当に決めてしまいます。「見出しだから32px」「本文だから16px」「ボタンだから18px」というように、何となく数字を当てはめているだけでは、デザインとしての意図が弱くなります。
プロのデザインでは、「何を目立たせるのか」「何を補助情報にするのか」を考えた上で、サイズの差を設計します。
ジャンプ率が弱いデザインは「全部同じ」に見える
デザイン添削で非常によくあるのが、ジャンプ率が弱すぎるケースです。
例えば、見出しが24px、本文が18px、補足が16px。
数字だけを見ると問題がなさそうに感じます。しかし、実際に画面を見ると、全部が同じような強さで見えてしまう。これが「メリハリがないデザイン」です。
ユーザーからすると、「どこが重要なの？」という状態になります。特にWebサイトでは、ユーザーは文章を最初から最後まで読んでくれるとは限りません。
まず画面をざっと見て、
「自分に関係があるか」
「何が書いてあるのか」
「どこを読めばいいのか」
を判断します。
そのときに必要なのが、視覚的な優先順位です。
ジャンプ率が低いデザインは、情報そのものが悪いのではありません。情報の重要度が視覚的に整理されていないことが問題なのです。
これはポートフォリオにも同じことが言えます。作品一覧、作品タイトル、説明文、制作期間、使用ツールなどがすべて同じような大きさで並んでいたら、見る側はどこに注目すればいいのかわかりません。ポートフォリオ添削では、作品そのものだけではなく、この情報設計まで確認する必要があります。
逆にジャンプ率が強すぎてもプロっぽくならない
「それなら見出しを思い切り大きくすればいい」これは違います。
ジャンプ率は強ければ強いほど良いわけではありません。
例えば本文が16pxなのに、見出しだけ80px。さらにボタンが30px。数字を大きくした結果、ページ全体のバランスが崩れてしまうことがあります。
「目立たせたい」
⇩
「文字を大きくする」
⇩
「もっと目立たせたい」
⇩
「さらに大きくする」
という発想です。
しかし、目立たせる方法は「大きくする」だけではありません。
余白、太さ、色、位置、写真、背景、コントラストなど、複数の要素を組み合わせて視覚的な優先順位を作ります。ジャンプ率だけで無理やりメリハリを作ろうとすると、今度は「うるさいデザイン」になります。プロのデザインでは、必要なところだけ差を作り、必要のないところでは差を抑えることが重要です。
ジャンプ率は「文字サイズ」だけを見るものではない
ここはデザイン添削で特に重要なポイントです。ジャンプ率というと、「フォントサイズの差」だけを考える人がいます。しかし実際には、画面上に存在するさまざまな要素の大小関係を見る必要があります。
・メインビジュアルのキャッチコピー
・見出し
・本文
・写真
・カード
・ボタン
・アイコン
・数字
・価格
・バッジ
・注釈
これらすべてに視覚的な強弱があります。
例えば料金表なら、「月額30,000円」という価格を最も大きく見せるのか、「マンツーマン」というサービス内容を目立たせるのか、「月4回」という回数を強調するのかによって、ユーザーが受け取る印象は変わります。つまりジャンプ率とは、「何を一番見せたいのか」を決め、それに合わせて周囲の要素とのサイズ差を設計することでもあります。ここまで考えて初めて、デザインが「装飾」ではなく「設計」になります。
プロのデザインは「ジャンプ率の階層」が整理されている
良いデザインを見ると、実は視覚的な階層が非常に明確です。
H1
⇩
リードコピー
⇩
H2
⇩
本文
⇩
補足
というように、情報に階層があります。
この階層が視覚的にも一致していると、ユーザーは迷いません。
反対に、
✅ H2と本文のサイズがほぼ同じ。
✅ 本文と注釈のサイズもほぼ同じ。
✅ 重要な数字だけ突然ものすごく大きい。
このような状態では、情報構造と視覚構造が一致していません。
デザイン添削では、ここを見る必要があります。
「この文字は何pxですか？」だけではなく、「この情報は、このページの中で何番目に重要なのか？」と考えるわけです。これが初心者とプロの添削の大きな違いです。
ジャンプ率を決めるときに「全部目立たせたい」は禁止
初心者のデザインでは、「全部見てほしい」という気持ちが強くなりがちです。
✅ 実績も目立たせたい。
✅ サービス内容も目立たせたい。
✅ 料金も目立たせたい。
✅ ボタンも目立たせたい。
その結果、全部が大きくなります。
しかし、全部が目立っている状態は、実際には何も目立っていません。
これは非常に重要です。デザインでは「何を目立たせるか」と同じくらい、「何を目立たせないか」を決める必要があります。
例えばLPなら、最初にユーザーへ伝えるべき情報と、その後に読ませる情報は違います。
✅ その下では、その根拠を見せる。
✅ さらに下では詳細を説明する。
✅ そして最後に問い合わせへ誘導する。
このようにページ全体で重要度を変えていくことで、自然なジャンプ率が生まれます。
ジャンプ率と「視線誘導」はセットで考える
ジャンプ率だけを単独で考えても不十分です。
なぜなら、ジャンプ率はユーザーの視線を動かすための一つの手段だからです。
大きな見出し
⇩
写真
⇩
短い説明
⇩
CTAボタン
という構成があれば、サイズ差によって視線の入口を作り、その後に小さな情報へ誘導できます。
反対に、画面のあちこちに同じくらい大きな文字や写真があると、視線が分散します。
これは「情報量が多い」こととは別問題です。情報量が少なくても視線誘導が下手なら、見づらいデザインになります。情報量が多くても、ジャンプ率とレイアウトが整理されていれば、読みやすいデザインになります。そのためデザイン添削では、「文字が多いから見づらい」と簡単に判断してはいけません。本当に問題なのは、情報の優先順位と視覚的な強弱が合っているかもしれません。
ジャンプ率を改善するとき、まず「サイズ」を変えるのは間違い
ジャンプ率が悪いデザインを見たとき、いきなりフォントサイズを変更する人がいます。
これも初心者によくある失敗です。先に考えるべきなのは、「このページで最も重要な情報は何か？」です。そして、「2番目に重要なのは何か？」「補足情報は何か？」と順位をつけます。この情報の優先順位が決まっていない状態でフォントサイズを変更しても、ただ大きくしたり小さくしたりするだけになります。デザインは数字合わせではありません。
重要なのは数値そのものではなく、要素同士の関係性です。
ジャンプ率を意識した具体的な添削方法
ここからは実際にデザイン添削をするときの考え方です。
まず画面を白黒にして見てみます。
・次に、目立っている場所を確認します。「本当にそこを一番見せたいのか？」ここを確認します。
例えば重要なのは「問い合わせ」なのに、装飾された写真ばかりが目立っているなら、ジャンプ率の設計が目的と合っていません。
・さらに、見出しと本文の差を確認します。見出しだけ見ればページの内容が理解できるか。本文は見出しを補足する役割になっているか。この関係性が整理されているかを確認します。
・最後に、画面を縮小して見ます。
ブラウザを小さくしたり、デザイン全体を遠くから見たりすると、視覚的な強弱がわかりやすくなります。プロのデザイン添削では、細部を拡大して見るだけではなく、全体を引いて見ることも非常に重要です。
ポートフォリオ添削でもジャンプ率は重要
ジャンプ率はWebサイトだけの話ではありません。
Webデザイナーのポートフォリオにも非常に重要です。例えば作品ページに、「制作物」「制作目的」
「ターゲット」「デザイン意図」「使用ツール」「制作期間」などの情報が大量に並んでいるとします。これを全部同じサイズ、同じ太さ、同じ色で表示したら、読む側は疲れます。
ポートフォリオは作品を見せる場所だからこそ、「作品そのもの」と「説明情報」の優先順位を明確にする必要があります。さらに、複数の作品を掲載する場合は、「作品A」「作品B」「作品C」のタイトルやサムネイルにも階層が必要です。
✅ 代表作品を一つ大きく見せるのか。
✅ 案件の種類ごとにまとめるのか。
こうした設計も、広い意味ではジャンプ率の考え方につながります。
ポートフォリオ添削で「作品を増やしましょう」と言うだけでは不十分です。何をどう見せるかまで設計して初めて、ポートフォリオとして機能します。
素人っぽいデザインは「ジャンプ率」ではなく「感覚」で作られている
ここが今回の記事で最も伝えたい部分です。
素人っぽいデザインの大きな問題は、フォントサイズが間違っていることではありません。サイズを決める根拠がないことです。
「見出しだから大きく」
「ここは重要だから赤く」
「余白が空いているから文字を大きく」
このような判断を積み重ねると、デザイン全体の整合性が崩れていきます。
プロは、すべての判断に必ずしも難しい理論を使っているわけではありません。
しかし、「なぜここを大きくしたのか」「なぜここは小さくしたのか」「なぜこの情報を目立たせなかったのか」を説明できます。これが大きな違いです。デザイン添削で本当に身につけるべきなのは、「正解のサイズを教えてもらうこと」ではありません。自分で適切なサイズを判断できる基準を身につけることです。
ジャンプ率を理解すると「なんとなく良い」が言語化できる
デザインを学んでいる人によくある悩みが、「なんとなくこっちのデザインの方が良い」という感覚です。感覚自体が悪いわけではありません。むしろデザイナーにとって感覚は重要です。問題は、その感覚を言葉にできないことです。「なんとなく良い」から、「見出しと本文のジャンプ率が適切で、情報の優先順位が明確だから見やすい」に変われば、デザインを見る目が変わります。
さらに、
「このデザインはジャンプ率が強いからダイナミックに見える」
「こちらはジャンプ率を抑えているから上品に見える」
というように、デザインの違いを構造として理解できるようになります。
ここまで来ると、他人のデザインを見たときにも「なぜ良いのか」「なぜ悪いのか」を分析できるようになります。
デザイン添削で「ジャンプ率」だけを直してもデザインは完成しない
もちろん、ジャンプ率だけで良いデザインが作れるわけではありません。
余白、レイアウト、タイポグラフィ、配色、写真、装飾、視線誘導、情報設計など、さまざまな要素が絡み合っています。しかし、ジャンプ率はその中でも非常に重要な要素です。
「何となく素人っぽい」
「メリハリがない」
「どこを見ればいいかわからない」
「全部同じに見える」
「逆にうるさい」
という問題がある場合は、一度ジャンプ率を疑ってみる価値があります。
そして重要なのは、ジャンプ率を「文字サイズのテクニック」として覚えないことです。
見るべきなのは、情報の重要度と、視覚的な強さが一致しているか。これです。
まとめ｜ジャンプ率を理解することは「デザインの優先順位」を理解すること
ジャンプ率とは、単に文字を大きくしたり小さくしたりするテクニックではありません。
それは、ページの中に存在する情報の重要度を視覚的に伝えるための設計です。
✅「ここを見て」
✅「次にここを読んで」
✅「詳しく知りたいならここへ」
という流れが自然に作られています。
その裏側には、サイズ、太さ、余白、位置、色、写真などによる明確な視覚的階層があります。
だからこそ、デザイン添削をするときに「もっとおしゃれに」「ここを大きく」「色を変えましょう」といった表面的なアドバイスだけでは、本当の改善にはなりません。
「この情報は何のために存在するのか」
「ユーザーに最初に何を伝えるのか」
「何を目立たせ、何を抑えるのか」
というところまで戻って考えることです。
ポートフォリオ添削でも同じです。
作品を増やすだけではなく、どの作品をどう見せるのか、どの情報を強調するのかまで設計しなければ、採用担当者やクライアントに伝わるポートフォリオにはなりません。Webデザインを本気で上達させたいのであれば、「なんとなく見やすい」「なんとなくおしゃれ」という感覚だけでデザインを作る段階から卒業する必要があります。
「なぜ、この大きさなのか？」
「なぜ、この情報を目立たせるのか？」
「なぜ、この情報は小さくていいのか？」
この問いに答えられるようになること。
それが、デザインの精度を上げる第一歩です。
WebデザインスクールAppRizz（アップリズ）では、単に「ここを直してください」と答えを渡すのではなく、実際の制作現場でデザインを見るときに必要となる「なぜそうするのか」という判断基準まで含めて、デザイン添削を行っています。
自分のデザインを見ても「何が悪いのかわからない」。「一応作れるけれど、なぜか素人っぽくなる」。「ポートフォリオを作ったものの、プロから見て通用するレベルなのかわからない」。そう感じているのであれば、必要なのはテンプレートを増やすことでも、AIに「このデザインを評価してください」と聞くことでもありません。自分では気づけないズレを、実際の制作経験があるプロに見てもらうことです。デザインの上達とは、正解を暗記することではありません。
自分で「なぜこのデザインなのか」を判断できるようになることです。
