印象をガラリと変える文字の「ジャンプ率」を理解しよう

皆様、ホームページやランディングページを作成するとき、文字の「ジャンプ率」にはこだわっていますか？
ジャンプ率はホームページの印象を大きく左右するので、ターゲットユーザーに合わせてコントロールできると大きな効果を発揮することがあります。

今回はホームページ制作するうえで知っておくべき「ジャンプ率」について解説します。

ジャンプ率とは？

ジャンプ率とは、一番大きいテキストと一番小さいテキストの大きさの比率を言います。

ジャンプ率が高い例

http://phocase.jp/
弊社が運営するスマートフォンケースのネットショップのTOPページです。
大きさの違う文字を配置し、訴求したい内容を強調させています。画面にメリハリが出るためデザイン性を高める効果もあります。

ジャンプ率が低い例

https://ferret-plus.com/
FerretのTOPページです。
日々更新している記事をできるだけフラットに見やすくするため、ジャンプ率を低くしています。

ジャンプ率の高低で、与える印象がガラリと変わる

ジャンプ率が高い構成の場合、下記のような印象を与えます。

・大衆的
・行動的
・ダイナミック
・若々しい

逆にジャンプ率が低い場合は、下記のようなほぼ真逆のイメージがつきます。

・知的
・保守的
・信頼
・大人っぽい

例えばスポーツ新聞は、駅の売店で購入する方が多く、道行く人々の目を引くためキャッチャーなゴシップ記事を多く掲載します。とにかく売店で目を引くように、ジャンプ率を以上に高くしてインパクトのある記事に仕上げる必要があります。

逆に日経新聞などは定期購読がメインで、ぱっと見で目を引く必要はありません。大見出し・中見出し・小見出しはあるものの、スポーツ新聞ほど大げさなジャンプ率ではありません。
また、報道の信憑性や公平性が重要なので、下手にジャンプ率の高い派手な見出しにすると逆効果となることがあります。

以上のように、文字だけでもページの印象とユーザーを設定する事が出来ます。

こちらの画像は同じ色・同じ要素ですが、文字の大きさを変えるだけで印象が大きく変わって見えるのではないでしょうか。

このように、ジャンプ率は使いようによってはホームページの印象を180度変えてしまう効果があるので、ターゲットユーザーをしっかり分析したうえで使い分けましょう。

まとめ

もう一度繰り返しますが、ジャンプ率が高いほど

・大衆的
・行動的
・ダイナミック
・若々しい

という印象を与え、ジャンプ率が低いほど

・知的
・保守的
・信頼
・大人っぽい

という印象を与えます。

ジャンプ率の効果については、デザイナーであれば誰でも知っているような知識で、世の中に出回っている広告やチラシ、ホームページは、ジャンプ率が計算されたうえで構成されているものがほとんどです。
その中で、ただなんとなくで全体構成を考えてしまうと競合に差を付けられる可能性があります。ジャンプ率がもたらす印象を把握したうえで、自社のホームページに活用しましょう。

プライベートでホームページを見るときも、ページ内に設置されている文字のジャンプ率を意識し、どのようなイメージを打ち出したいのか、どのようなターゲットを想定しているのかを考えながら見るとよりよく理解できるので一度試してみてはいかがでしょうか。

このニュースを読んだあなたにおすすめ

CSSの基本～スタイルシートとは

タグ・HTMLとは。ホームページの基礎技術

タグの基本的な書き方

Web戦略に関するカリキュラム

Web戦略に関するカリキュラムを体系立てて学びましょう。