「ジャンプ率」でお手軽メリハリデザイン!

「ジャンプ率」でお手軽メリハリデザイン!

ジャンプ率でお手軽メリハリデザイン!

ジャンプ率でお手軽メリハリデザイン!

Webだけに限らず、紙媒体の広告やパッケージなど、ジャンプ率という概念は様々な場面で使われています。ジャンプ率を意識していると、デザインに詰まったときなどに意外と役に立つんです。
まだまだ未熟な私ですが、デザインを始めた当初、ジャンプ率についてまったく分からず、バナー1つ作るのにも本当に苦労しました。なので、この記事を見ている方のお役に少しでも立てたら良いなという思いで、私なりに調べたジャンプ率についてお伝えしたいと思います。

1.ジャンプ率って何?

ジャンプ率とは一般定義では【大きさに差を与えたもの】とされています。

itigo

上記AとBの画像を比較してみると、文字のジャンプ率が大きいものの方がタイトルとして分かりやすく、読みやすいものとなっています。また、Bのように文字のジャンプ率が均一なものは、見出しとして認識されにくいものとなっています。

ちなみに生活の中でよく目にするジャンプ率は新聞ではないでしょうか。
ほぼ文字と文字の組み合わせなのに、読みやすいと感じることができるのはジャンプ率を工夫しているためです。
新聞の文章と一番大きな特大見出しでは、およそ9倍近いジャンプ率が使用されているそうです。号外などになると、さらに大きく14倍になったりもするそうですよ!

つまり、ジャンプ率は
・短く、わかりやすく、すぐ読めるようにするため
・視界に入った瞬間に読み手を引き込ませるため
に利用されるんですね。

 

2.ジャンプ率がキレイに使用されているサイト

では次に、Webサイトにてジャンプ率をキレイに利用しているなと感じたデザインをご紹介します!

1.Apple

Apple(日本)

まずは世界のAppleです。
写真、文字、余白とジャンプ率が非常に高いサイトのため、シンプルなのに躍動感を感じることができますね!誰が見ても読みやすいサイトになっていると思うので、私自身よく参考にしています。

 

2.おもちゃボックスタカラトミー

選べる、おもちゃギフト おもちゃボックス---タカラトミーモール
続いてタカラトミーです。
特徴部分をピックアップさせていただきましたが、見出しとそれに対する説明がとても見やすいサイトとなっています。
余白とジャンプ率、そして写真の間隔をうまく使い、優しさが伝わるデザインになっていますね。

 

3.い・ろ・は・す

い・ろ・は・す(ILOHAS-

最後にい・ろ・は・すです。
メインビジュアルでジャンプ率が高い文字を使うことにより、商品画像との相乗効果でさらにイキイキとした印象が強くなっています。ジャンプ率が高いと、フォントが明朝体や細めのものでも、文字自体のインパクトが強くなるのもジャンプ率の特徴ですね。

 

3.ジャンプ率を活用していこう!

いくつか例をあげましたが、つまり「ジャンプ率が高いと視線の誘導がしやすくなる」ということなんです。Webサイトという普段読み飛ばされやすいものでも、見出しのジャンプ率を高くするだけで、内容を覚えてもらいやすいというメリットがあります。
また、文字の太さや写真の大きさだけ気をつけるだけでも、大胆にもシンプルにもサイトの雰囲気をある程度変えることができますのでとても便利です。

ジャンプ率を使ったものは、例えば商品のパッケージや電車の中吊り広告など実は身近に沢山あります。そういったものを日頃から見るようにし、ジャンプ率のバランス感覚を鍛えてWebデザインにどんどん応用していきましょう!


Previous: 私がロゴを作るときのフォントの選び方 Next: AngularJSを使ってお問合せフォームの作成!

© 2017 ALL CONNECT Inc. All Rights Reserved.