ウェブは読み飛ばさせるようにデザインする! ジャンプ率の効果

eye-catch

今日はジャンプ率についてのお話。 

ジャンプ率とは…?

簡単に説明すると【文字に大きさの差をあたえたものをジャンプ率と言います。】 みなさん自然にやっていることですね。
ちなみに、本文に比べて見出しが大きければ大きいほど、ジャンプ率が高い、小さければ小さいほどジャンプ率が低い、といいます。このジャンプ率が大きければ大きいほど、読み飛ばしやすい状態を作り出します。ブログや論文のような、読ませるコンテンツにはジャンプ率は不必要です。
ウェブデザインではジャンプ率を使用していることのほうがとても多いです。すなわち、ウェブとは読み飛ばされる前提でデザインを考えることが多いということです。

ウェブを見る視線の動きは、まずは画像、次に見出し、詳細という順番で動くことがほとんどです。 なので大きく画像やイラストをおき、近くにテキスト情報を入れてあげると次のアクションを起こしやすく視線誘導が自然と出来ます。

feedlyにも自然とジャンプ率が使われています。  

ジャンプ率の比較

①ジャンプ率の高いもの

②ジャンプ率が平均的なもの

③ジャンプ率が低いもの このように3つに分けてみました。

それぞれみてみましょう。

まず①ジャンプ率の高いもの

差を大きくつけることによって、スタイリッシュに見えます。読みやすさは、このあと説明する②ジャンプ率が平均的なものとほとんど変わりません。ニュースなど拾い読みに適しています。

http://www.thesun.co.uk/sol/homepage/

http://www.cbsnews.com/

次に②ジャンプ率が平均的なもの

読みやすさはそのままに、情報をより探しやすいようになります。情報量もそこそこ入るので、わざと見出しを多くし 文の固まりを分けて読みやすくする工夫も出来ます。

http://www.eco.sanken.osaka-u.ac.jp/

他、学校等のサイトもこれに当てはまるかと思います。

最後に③ジャンプ率が低いもの

文字サイズはほとんど変えず、ボールドだけで見出しの差をつける場合もあります。情報の強弱はかなり弱くなりますが、このタイプは情報量を最優先する場合に適しています。

http://developers.facebook.com/tools/

サイトを見ていると、ジャンプ率が高いものは一般ユーザ向けサイトが多く 低いものは専門的なサイトが多いという傾向にあるようです。

たくさんの人に見てもらえるサイトをデザインするには、 読み飛ばすのを助けてあげるデザインが重要ということですね。