WEBデザインで意識すべき視線の動き4点
- 編集部の見解や意向と異なる内容の場合があります
- 編集部は内容について正確性を保証できません
- 画像が表示されない場合、編集部では対応できません
- 内容の追加・修正も編集部では対応できません
情報をわかりやすくユーザーに伝えるのがデザイナーの仕事! 視線の動きを意識し、デザインに取り入れてみましょう!
1:視線は上から下へ移動する
最も自然な動きは上から下への移動です。WEBサイトも書籍も、 文章が縦書きであっても、横書きでも、すべて上から下へと読み進めていきますよね♪ 「グーテンベルク・ダイヤグラム」をご存知でしょうか?グーテンベルク・ダイヤグラムとは、 「同じ種類の情報が均等に配置されているときの視線の流れ」を図で表したものです。 人の視線は左上から右下方向へ移動していきます。 重要な要素はこのライン上に沿って配置するとユーザーの目に入りやすいといえます。 左上に読ませたいタイトルやテキストを配置し、視線の終点になる右下に押してほしいバナーや、問い合わせ先を記載しておくと効果がありそうですね! その他にも視線の動きには「Z型」「F型」というパターンがあります!
「Z型」
視線の開始地点は左上、そこから右上→左下→右下に流れる動きです。 チラシや雑誌などの紙媒体(横書き)によく見られるパターンですね!
「F型」
これはWEBサイトを閲覧するときに多く見られる視線移動です。 こちらも、視線の開始地点は左上。そこから、メニューや見出しに視線が動きつつ、下に降りていくパターンです。
2:視線は大きいものから小さいものへ移動する
人はまず、大きいものに目がいきます。そして、小さいものへと移動していきます。 上の図はタイトルも本文も同じ大きさ。下の図は本文のサイズは上と同じですが、タイトルを大きくしました。 いかがでしょうか?まずパッと目がいくのは下の図のタイトルですね! 自分のほしい情報がそこにあったとしても、目の引っかかりどころがなければ、ユーザーは読み飛ばしてしまう可能性があります。 サイト(デザイン)が何を発信しているのか、ユーザーに一目でわかるよう、要素にメリハリをつけましょう! 残りの3,4はこちら: http://www.skuare.net/article/2014/09/29/design-point-eyes/
ソーシャルもやってます!