寒い日が続くようになり、鍋が美味しい季節になってきましたね。暖かいものを食べて体調を整えていきましょう。
今回も、引き続きレイアウトについてまとめていきます。
第4弾は「視線の導線」についてです。
→前回記事：【HP作成】Webデザインの基礎！【レイアウト編③】
視線の流れを意図したものにする
人は、何かの情報をみるときは左上から右下へ視線が流れていきます。
左上、左下、右上、右下の4つのエリアに分けて考えたとき、特に目に入りやすい左上と右下に重要な要素を配置すると、意図した通りに情報を伝えやすくなるでしょう。
視線誘導における2種類のレイアウト
視線誘導を意識したレイアウトには以下の2つがあります。
①Z型レイアウト
視線の流れが「左上→右上→左下→右下」とＺの形に似ているために、「Z型のレイアウト」と呼ばれています
左上から重要な要素を配置していくレイアウトで、この手法はコンテンツを大きく見せたいプロモーションサイトやスマートフォンアプリなどでよく用いられています。
②F型レイアウト
ヘッダー部にあるロゴやナビゲーションへ視線が移動し、その後見出しや記事へと下に視線が移動していく手法です。
主にECサイトやブログなど、最近のWebサイトでよく用いられています。
おわりに
視線の流れですら、意図されたものがあるということに初めは驚きました。
だからこそ、視線の流れを意識したレイアウトにすることで意図した通りの情報を与えられるのが気付きでした。
これまでの記事で書いたものも駆使して、より良いHP作成に貢献できれば幸いです。
また、⑤を投稿しました。「レスポンシブ対応」についてまとめていますので、こちらもご参照ください。