自分で作ったデザインが、少しパッとしないと感じることはありませんか？
Webデザインの見た目がパッとしないときは、メリハリをつけることを意識する必要があります。
このメリハリをつける際に大事になるが「ジャンプ率」という考え方です。
この記事では、ジャンプ率についての「考え方」や「使い方」について学んでいきましょう。
ジャンプ率について学ぼう
まずは、ジャンプ率とは何かについて簡単にイメージを膨らませていきましょう。
ジャンプ率とは
ジャンプ率は、要素同士の大きさの比率のことです。
言葉の説明だけでいまいちピンとこないと思うので、例を交えて説明します。
ZeroPlusのサービスサイトのキャッチコピーの例
キービジュアルの箇所では、キャッチコピーが大きめのフォントサイズで配置されています。
キャッチコピーとその下のテキストを比較すると一目瞭然です。
この要素同士の大きさの比率こそが「ジャンプ率」です。
要素の大きさを比較した際に、大きさの差が大きければ「ジャンプ率が高い」と表現します。
反対に、大きさの差が小さければ「ジャンプ率が低い」というように表現します。
ジャンプ率は情報の優先順位を表す
要素同士を比較して、大きい方の要素は情報の優先順位が高い要素になります。
なので、先ほどの例では「キャッチコピー ＞ その下のテキスト」という情報の優先順位になります。
デザインにはメリハリが必要
デザインの４原則の「対比」の考えで大事な「メリハリ」をまとめると以下のようになります。
- 情報に優先順位をつける
- 情報を見やすくする
上記の効果を与えるために、ジャンプ率を意識してデザインを制作する必要があるのです。
ジャンプ率の実践
次は、ジャンプ率を意識した例とそうでない例を確認していきましょう。
ジャンプ率を意識しない例１
こちらはジャンプ率を意識していない例です。
右側のテキストには、ジャンプ率を意識してスタイルが適用されていないので、どこが大事な情報なのかいまいち伝わりません。
ジャンプ率を意識した例１
次は、ジャンプ率を意識した例を確認していきましょう。
先ほどの例と比較して、テキストの箇所の「見出し」「文章」のそれぞれに対してジャンプ率が意識されたスタイルが適用されました。
「見出し＞文章」という優先順位を表すことができたので、デザインを見るユーザーが情報を確認しやすくなります。
ジャンプ率の大切さがイメージできてきたところで、次の例を見ていきましょう。
ジャンプ率を意識しない例２
次は、表のデザインのジャンプ率です。
上記のジャンプ率が意識できていない例では、テキストの大きさが全て同じになってしまっています。
ジャンプ率を意識した例２
次は、ジャンプ率を意識した例を見ていきましょう。
先ほどと比較してみると「数字 > 単位」というジャンプ率になっています。
細かい箇所ですがテキストの中でも、どの部分が大事な情報なのかを伝えることが大切です。
制作のポイント
デザインを作る際に、テキストを打ち込むだけだとジャンプ率は意識できません。
数字や単位、強調したいテキストなどの情報の整理をきちんと行っておきましょう。
整理ができたら、大事な情報のテキストを分離しておくとジャンプ率を意識したデザインが制作しやすくなります。
画像のジャンプ率の例
ジャンプ率という考え方は、画像の配置にも応用できます、
画像を複数枚配置する際に、どの画像を一番に見てほしいかを考える必要があります。
ジャンプ率の考え方を活かして、ジャンプ率が高い配置をしておくことで、画像に優先順位をつけることができます。
ジャンプ率で見やすいデザインを作ろう
文字や要素をそのまま並べたりするだけでも、見ること自体は可能です。 しかし、「いかに伝えたいことをわかりやすく伝えられるか」がデザインを作る上で大切です。
- ジャンプ率とは要素同士の大きさの比率のこと
- 情報に優先順位をつける
- 情報を見やすくする
デザインの中に、ジャンプ率を取り入れて、上記３つの効果を発揮しましょう。
ジャンプ率という考え方を知っているだけでも、デザインのメリハリの付け方がより具体的にイメージできるようになったかと思います。
あとは、皆さんでアウトプットを行って、きちんと自分のスキルにしていきましょう。
