限られたスペースの中できちんと情報が伝わるデザインを制作する必要があります。
そこで重要になってくるのが視線誘導です。
人の視線の動き方には傾向があるので、その傾向に沿ったレイアウトをすることで見ている側がストレスを感じにくいデザインとなります。
Z型、F型は特によく利用されているので、実例を見て確認しましょう。
Z型
Z型は、ユーザーの視線が「Z」を書くように順に移動するパターンのことです。
これを踏まえて自然な視線の動きにあっていないレイアウト例を見てみましょう!
極端な例ですが、「とても読みづらいな…」と感じませんか?
このように視線の動きを意識できていないデザインは見る側にストレスを与えるどころか、間違った解釈まで与えかねません。
『伝わるデザイン』を作るためにとても重要なポイントであるのがわかります。
F型
F型はユーザーの視線が「F」を書くように移動するパターンのことです。
ECサイトの一覧ページやブログサイトやSNSでもよく見られる形です。流し読みに適しているため、情報量が多いサイトではこの形が採用されることが多く、縦に読みつつ気になったら右へと視線が動く流れです。
N型
N型はユーザーの視線が「N」を書くように移動するパターンのことです。
縦書きに用いられることが多いです。
視線を誘導する要素
Zの法則やNの法則について押さえておきたいのは
『人の視線は左から右に流れやすい・上から下に流れやすい(横書き時)』というような、傾向があるということです。
必ずそのように視点が動くのではなく、目立つ要素や興味関心の高い要素など様々なものによって視線の動きは左右されます。
たとえば大きいものから小さいものへ視線は動きやすく、色が変わっている(彩度が高い色)箇所は視点が向きやすい傾向があります。
また、人の顔の向きにも視線は動きやすいです。
まとめ
同じ要素でも視線の誘導の仕方で印象が変わることを覚えておきましょう!
コメント