実例で学べる｜ジャンプ率の目安と読みやすいWebページの見せ方

デザインに文字は欠かせない要素になりますが、同じ文字でもキャッチコピー、見出し、本文、注釈・・・などそれぞれ役割が大きく異なります。

当然、それらを同列に扱う事はできないので、皆さんもすでに見出しでは文字サイズを少し大きめにしたり、逆に注釈は少し控えめな印象にしたりと自然に文字に強弱をつけているかと思います。主にこの文字サイズの比率（印象の強弱）のことを「ジャンプ率」といいます。
このジャンプ率によって文章の読みやすさだけでなく、デザインの印象も大きく影響します。

ホームページ作成サービス「BiNDup」など自分でサイトを制作している方や、デザイナーの方にも参考になるよう、Webページの実例を交えてポイントを紹介していきます。

ジャンプ率による印象の違い

ジャンプ率の違いはわかりやすく文字サイズの差で表現することができます。
以下は全て同じ文字サイズにしたもの（ジャンプ率が低い）と、見出しなどで文字サイズを変更した（ジャンプ率が高い）場合の印象の違いです。

ジャンプ率の違い

こちらは極端な例ですので、左の「ジャンプ率が低い」ものよりも、明らかに右の「ジャンプ率が高い」ものが読みやすいかと思います。
一般的にジャンプ率が高い方が、情報の優先度が視覚的にはっきりするので内容の把握がスムーズに行える傾向があります。

それではジャンプ率が高ければ高いほど良くて、ジャンプ率が低いものはデザイン的に悪いかというと、そうではありません。
こちらの様に、単にジャンプ率は読みやすさだけではなく、同じ内容でもデザイン的な印象に違いを出すこともできますので、目的に応じて使い分けると良いでしょう。

ジャンプ率による印象の違い

以下ではジャンプ率による印象の違いについて説明します。

「ジャンプ率が高い」場合の特徴

ジャンプ率が高いと、情報にメリハリが生まれるため活発な印象を受けます。
また視線誘導をコントールしやすい特徴もあります。

• 躍動感
• センセーショナル
• リーズナブル

このように、情報にスピード感を持たせたい場合にはジャンプ率を高めに調整すると良いと思います。

参考事例

ノーコードCMS「BiNDup」のテンプレートでジャンプ率高いものを紹介します。

→業種や目的から選べて種類は380以上！「BiNDup」のテンプレートを見る

ROIYAL Recruit

大きなテキストが真っ先に目に付く作りに

求人サイトをイメージしたテンプレート。
より高い訴求力とメッセージ性を目的としているため、より重要な文章を大胆なくらい大きくして目を引く作りになっている。

woody & co.

見出しのジャンプ率で明るい印象に

雑貨のオンラインショップを想定して作られたテンプレート。
全体的にジャンプ率が高めな見出しが、元気で親しみやすい印象を受ける。

TSUBAME Ikebana

ジャンプ率の高い見出しでテンポ良く情報が拾える

生け花作家のポートフォリオを想定したテンプレート。
こちらも大きな見出しはもちろん、リード部分も大きめなジャンプ率で、メッセージ性の強い作りになっている。

「ジャンプ率が低い」場合の特徴

逆にジャンプ率が低い場合は、視線誘導が活発でないため落ち着いた印象になりやすいです。
そのため内容をじっくり見て欲しい場合に効果的といえます。

• クール
• 信頼性
• 高級感

参考事例

VERT. houseplant shop

ジャンプ率の低さでコンテンツがじっくり読める

ラグジュアリーホテルを想定したテンプレート。
控えめな文字サイズの見出しで、落ち着いた印象になっている。

Daisy Jewellery

写真やテキストなど情報量は少なくないが、低いジャンプ率が落ち着いた印象を作っている

ジュエリーショップを想定したテンプレート。
ジャンプ率の低い見出しと本文で、全体的にゆったりとして上品な印象を受ける。

NISHIZAWA Tea

見出しと本文の文字サイズがほとんど変わらないことで信頼性を感じられる

お茶の販売を想定したECのテンプレート。
高級感と落ち着いた印象を感じられる。

→業種や目的から選べて種類は380以上！「BiNDup」のテンプレートを見る

BiNDupでのジャンプ率の調整方法

ここまで文字サイズを基準にしたジャンプ率の解説となりましたが、ジャンプ率の本質は情報に強弱をつけることにありますので、必ずしも文字サイズの調整だけでなく装飾を加える事でジャンプ率を変化させることも可能です。
実際にBiNDupでもできる方法をいくつかご紹介します。

文字の太さを変える

同じ文字サイズでも太さに違いを出すことで差別化ができる

背景色をつける

背景色を敷くことでより情報にメリハリがつく

ポイントをつける

罫線などポイントがつくだけでも効果的

これらを組み合わせても効果的です。

デザインや目的に合わせてジャンプ率を見直してみてください。

→動画のコンテンツマーケティングにも最適な国産CMS「BiNDup」を30日無料体験する

無料でBiNDupを使ってみるBiNDの制作事例を見る