Webページ制作において重要なことは、ただ単に美しいデザインを作るのではなく、いかに人に興味を持たれるようなコンテンツを作ることや、ニーズに合った商品を上手く配置するなど、ユーザー目線で考えたデザイン作りを行うことです。
そのようなデザインを制作する際に考慮すべき点はユーザーに見てほしい要素を正しく配置できているかどうかという点です。
Webにもユーザーの視線の流れのパターンがあるのはご存知でしょうか？
今回はユーザーの視線の流れのパターン3つについて詳しくご紹介します。もくじ
◆グーテンベルク・ダイヤグラム
グーテンベルク・ダイヤグラムとは、均等に配置された同じ種類の情報を見る際の一般的な視線のパターンのことで、人間の目は左上から右下方向へ向い、左から右へ視線を移動させます。
そのためテキストをレイアウトする場合、一般的には、左上・右下に重要なコンテンツを配置するようにします。
◆Z型パターン
Z型パターンとは、紙媒体やコンビニやスーパーの陳列棚などを見る際によく使われるパターンで、左上→右→左下→右とアルファベットの「Z」をなぞるように視線を動かすという法則のことです。
一番初めに視線がいく左上に一番重要な情報やオススメの商品を配置したり、中央ではなく右上、左下、右下のライン上にポイントを置くと効果的です。
◆F型パターン
F型パターンは比較的新しいパターンで、アルファベットの「F」をなぞるように視線が動きます。
ECサイトやブログなどWebの閲覧の際にはこの視線の流れをなぞる傾向が高くなります。
Z型と異なる点は、左上から視線が始まり右に移動しながらメニューや見出しを見た後、少しだけ下に移動して、再度左から右へ進み、その後下に向かって移動していく点です。
Webの閲覧が全てF型というわけではなく、写真やイラストなど、画像の多いページの場合はZの法則、ニュースやブログなど文章量が多いコンテンツはFの法則と言われています。
◆その他の目の動き
人は見る対象物を無意識に以下のように見る傾向があります。
・大→小
大きなものと小さいものが並んでいるとき、人は大きいものから順に視線を動かします。
多くの情報を目にしているユーザーは、情報が目に入らなければ読み飛ばしてしまう可能性もあります。
重要な情報にはメリハリをつけてしっかりと目に止まるようにすることが重要です。
・近くにあるもの
人は、始めに目に止まった要素の近くにある要素に視線を移動させます。
そのため、関連のある要素は近くに配置した方が、ユーザーはより情報を把握しやすくなります。
関連性のある要素はひと固まりするようにし、できるだけ近くに配置しましょう。
また、同じ形・色についても同じ傾向にあります。
◆まとめ
ファーストビューで一番ユーザーの興味の引くものを配置することでコンバージョン率も変わってきます。
ユーザーの目線の流れを意識してユーザーにとって読みやすいWebページ作りを目指しましょう。
今回ご紹介した視線の流れは代表的な例なのでコンテンツによって上手く使い分けてみてください。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞