WEBデザインで意識すべき視線の動き4点

情報をわかりやすくユーザーに伝えるのがデザイナーの仕事!
視線の動きを意識し、デザインに取り入れてみましょう!

1:視線は上から下へ移動する

最も自然な動きは上から下への移動です。WEBサイトも書籍も、
文章が縦書きであっても、横書きでも、すべて上から下へと読み進めていきますよね♪
「グーテンベルク・ダイヤグラム」をご存知でしょうか?グーテンベルク・ダイヤグラムとは、
「同じ種類の情報が均等に配置されているときの視線の流れ」を図で表したものです。
この図のように人の視線は左上から右下方向へ移動していきます。

01
重要な要素はこのライン上に沿って配置するとユーザーの目に入りやすいといえます。
左上に読ませたいタイトルやテキストを配置し、視線の終点になる右下に押してほしいバナーや、問い合わせ先を記載しておくと効果がありそうですね!

 

その他にも視線の動きには「Z型」「F型」というパターンがあります!

 

「Z型」

02
視線の開始地点は左上、そこから右上→左下→右下に流れる動きです。
チラシや雑誌などの紙媒体(横書き)によく見られるパターンですね!

「F型」

03
これはWEBサイトを閲覧するときに多く見られる視線移動です。
こちらも、視線の開始地点は左上。そこから、メニューや見出しに視線が動きつつ、下に降りていくパターンです。

 

2:視線は大きいものから小さいものへ移動する

04
人はまず、大きいものに目がいきます。そして、小さいものへと移動していきます。

下の画像をご覧ください▼

上の図はタイトルも本文も同じ大きさ。下の図は本文のサイズは上と同じですが、タイトルを大きくしました。
いかがでしょうか?まずパッと目がいくのは下の図のタイトルですね!
自分のほしい情報がそこにあったとしても、目の引っかかりどころがなければ、ユーザーは読み飛ばしてしまう可能性があります。
サイト(デザイン)が何を発信しているのか、ユーザーに一目でわかるよう、要素にメリハリをつけましょう!

 

3:視線は近接するものへ移動する

07
人の視線は近くにあるものに移動していきます。
それは、一つの要素を見ている時、近くにある要素がすでに視野に入っているので、
僅かな目の移動で見ることができるからといわれています。

下の図はカフェのドリンクメニューです。
08
カフェのメニューとしてわかりやすいのはどちらでしょう?

左の図は商品、商品名、値段が等間隔にあるため、どの商品に対する情報かわかりづらいです。
右の図は、商品の情報をぐんと近づけているので、どの情報が何の商品のものなのかわかりやすいですね!

この近接するものに視線が動くことを利用し、
同時に読んでもらいたい要素や、関連性の強い要素は近づけて配置しましょう!

 

4:視線は同じ形、色を追いかける

09
人の視線は、同じ形や、同じ色を追う傾向があります。
デザインの中で「流れ」を作りたい時、ポイントとして何か特徴的な形を使用すると、
視線はこの形を追って読み進めていきます。
また、同じ形や色を繰り返し使うことは、全体に統一感や一貫性を作る効果もあります。

 

いかがだったでしょうか?
視線の動きを理解していれば、より効果的なレイアウトに出来そうですね!

design > WEBデザインで意識すべき視線の動き4点