ジャンプ率という言葉を知っていますか？
デザイナーならよく耳にする事が多いかもしれません。
画面上の「大きい部分」と「小さい部分」の比率のことを”ジャンプ率”と言います。
写真と文字、または写真同士文字同士の画面上での比率の違いによって、画面を見ている人に対し様々な違った印象を与えることができます。
ジャンプ率が高いと賑やかで躍動的なインパクトのあるデザインに。
ジャンプ率が低いと落ち着いた上品なイメージのデザインに。
ジャンプ率の違いによって、上記のようなイメージの違いを生み出す事ができると言われています。
今回は実際に、ジャンプ率の違う二つのWEBサイトを参考にファーストビューでの印象の違いを考察してみました。
比較させていただいたのは、下記二つのサイトです。
比較に当たって、サイトの呼称をA、Bと仮定しました。下記解説ではA,Bの呼称で比較していきます。
日本酒/白鶴のプロダクトサイト（A）
http://www.hakutsuru.co.jp/bekkaku/product/
エナジードリンク/e3のプロダクトサイト(B)
https://bsd-e3.com/
どちらも飲み物のプロダクトサイトですが、
日本酒とエナジードリンクでは、感じる印象が全然違いますよね。
それを表現するのに文字のジャンプ率がどのような力を発揮しているのか、サイトのファーストビューで実際に分析してみます。
どうでしょうか？
AよりBのサイトの方がフォントを大きめに使ったジャンプ率の高いレイアウトをしていることがわかります。
また、使用フォントがAは明朝体、Bはゴシック体を使用しているところも、二つの印象の違いを強めていますね。
Aのサイトについて.
Aのサイトでは余白をとった洗練された空間に商品の画像が置かれています。
左側に置かれたロゴとキャッチの大きさは商品画像の三分の一よりすこし大きいぐらいとなっており、
商品画像の周りに大きく余白がある事でゆったりとした上品な印象を与えています。
ロゴのサイズを控え目にする事で商品の美しさが際立っています。たっぷりとした余白とロゴ色と喧嘩しない背景色がうまい具合に調和して、ロゴもしっかりと目に留まる構成となっています。
Bのサイトについて.
Bのサイトではe3の商品名やイメージロゴであるXがドドンと表示され、かなりインパクトの強い印象に仕上がっています。
商品名がメインビジュアルの男性やキャラクターの3/2くらいの大きさで配置してあるため、必然的に商品名に目がいきます。
キャッチコピーのサイズ感も大きめで、感情に訴えるような太字のゴシック体もエナジードリンクの宣伝らしい強気で情熱的な印象を与えます。
フォントの太さタイプによっても文字の印象を雰囲気づけることができますが、
写真との比率や見出しと本文との大きさの差だけでも印象は大きく変わります。
コンテンツの優先順位をつける際にも、ジャンプ率の概念は大切になってくるので、
画面のレイアウトについて、もっと理解を深めていきたいです。
