ノンデザイナーなら押さえたい！デザインの基本「ジャンプ率」～デザインを大切にするマーケティング担当者へ～
Webサイトのデザインを検討するとき、「もっとメリハリ出したい」とか「もっと落ち着いた感じにしたい」とかふわっとした意見に困ったことはありませんか？
言わんとしていることは分かるんだけど、どうしたらいいのかわからない…。
そんなノンデザイナーの皆さま向けに少しの工夫でもっとイメージに近づける小技を…。今回は「ジャンプ率」についてご説明します。
ジャンプ率とは？
ジャンプ率とは「本文の文字サイズに対する見出しの文字サイズの比率」のことです。一般的にジャンプ率が高いと賑やか、躍動的、若年向けの印象に。ジャンプ率が低いと落ち着いた、高級感のある、大人っぽい印象になると言われています。デザインにおいて印象を与える要素は、色や写真など様々ですが、実は文字の大きさとそのバランスも比率の高低によって印象を調整する重要な要素になるのです。
色々なサイトのジャンプ率
それでは実際ジャンプ率がどれくらい印象に影響を与えるか見ていきましょう。
大見出し：50.5px
中見出し：22px
テキスト：14px
比率は3.6：1. 57：1となっています。
タグラインとして見せたい大見出しと、シリーズの説明として語りたい中見出し・テキストのジャンプ率を高くすることで、メリハリをつけています。タグラインがすぐに目に入ってくるので、まずはキーワードやメッセージを伝え、その後説明に落としていくような構成にしたい場合に似た比率で検討するのがよいでしょう。ブランド・商品・サービスのコンセプトのページなどは、似たようなジャンプ率で構成されていることが多いです。
Amazon https://www.amazon.co.jp/
大見出し：28px
中見出し：21px
テキスト：13px
比率は2.1：1.6：1となっています。
画像はAmazonのカテゴリトップですが、無印良品サイトと比べるとテキストと大見出しとのジャンプ率は低く、中見出しとのジャンプ率は若干高くなっています。このような比率はAmazonのようなECサイトや記事をまとめたキュレーションサイトなどでよく見受けられます。
同じサイトの中でも、デザイン全体は大きく変えたくないけどサービスや商品によって雰囲気を変えたい。そういうときもジャンプ率で印象を変えることができます。例えばAppleのWebサイトを見てみましょう。
iPadとiPad Proは同じ種類の製品ですが価格帯が異なり、文字の大きさもそれに合わせて変えていることが分かります。
大見出し：160px
中見出し：40px
テキスト：23px
iPad Pro https://www.apple.com/jp/ipad-pro/
大見出し：65px
中見出し：40px
テキスト：32px
比べてみるとわかるように、高価格帯であるiPadProの方がジャンプ率が低い構成になっています。ジャンプ率の高いiPadのページは躍動感や賑やかさを感じますが、対してiPadProの方は比較的落ち着いた印象を受けます。
伝えたい内容や、与えたい印象によってジャンプ率を変えるというのは有効な手段となります。
ジャンプ率には、色や配色のようにこの印象を与えたいならこの比率で！という黄金比はありません。しかし表現したいイメージと近い印象のサイトを受けるサイトを見つけたらジャンプ率にも注目してみることで、社内での認識合わせやデザイナーへの指示出しに役に立つと思います。
メリハリをいれる小技
ジャンプ率は基本的に文字サイズの比率のことですので、当然文字を大きくしたり小さくしたりして調整を行います。では「全体的に文字サイズは大きくしたくないけれどジャンプ率を高めたい」、「落ち着いた雰囲気でジャンプ率を高めたい」という場合はどうしたらいいのでしょうか。
今回はあくまでも文字サイズの比率に着目したお話をしましたが、そもそもジャンプ率の本質は「見出しと本文を視覚的に区別がつきやすい状態にすることで読み飛ばしやすく、また必要な情報を一目で見つけやすくすること」にあります。
なのでメリハリをつける手段は必ずしも文字サイズの調整だけではなく、文字そのものにデザインを加えてメリハリをつけるといったことも可能です。
１）ウェイトを変える
ジャンプ率の調整と合わせてウェイトを変化させているサイトも多いですね。
２）色を変える
こちらもジャンプ率の調整やウエイトの変更と合わせて色を変えているサイトが多い印象です。
３）装飾を加える
シンプルなものからポップなものまでいろいろな装飾がありますが、以下のようなサイトを参考にするとヒントがたくさんありますよ！
http://bubundesignarchive.jp/mid/
まとめ
今回はジャンプ率についてお話しました。ジャンプ率はWebサイトだけではなく、新聞や広告など身近なところで広く活用されています。ポスターなど、世の中に出回っている掲載物は、そのほとんどはジャンプ率も計算された上で構成されています。行き詰ったときは通勤電車のつり革広告などをジャンプ率を吟味する視点でみるだけでもとても参考になりますよ！
是非実践してお役立てください！
