当ブログでは、ビジネスシーンで作成する資料で“誰でも・手軽に使える”レイアウトノウハウ・テクニックをお伝えしています。
今回お伝えするのは「Fの法則」。以前当ブログで「Zの法則」をお伝えしましたが、これと名前が似ている、とっても効果的なレイアウト術になります。
特に社内のWeb担当の方などには、ぜひ意識していただきたいものですので、早速お話ししていきましょう٩( ‘ω’ )و
目次
Webサイトのレイアウトも「目線の流れ」を意識するのが大切
「読み手にとってわかりやすい・読みやすい内容になっているかどうか」。前回の記事で、ビジネスシーンの資料ではやっぱりこれって大事だよね～ってことをちらっとお話ししましたが、では資料ではない「Webサイト」とかはどうなんでしょう？
やっぱりWebサイトのレイアウトも同じですよね。わかりやすい内容にするためには様々な要素がありますが、「読み手の目線の流れ」を意識して配置する必要があります。
特にWebサイトの場合は、読む・見る人の「目線の流れ」を意識したレイアウトにしてあげないと、伝えたいポイントが見落とされてしまい、「なんだか欲しい情報が書いてないなぁ(´ω｀)」なんて思われて、サラッとスクロールして終わり！って感じで、すぐ離脱（他サイトに行かれてしまったり、ブラウザ自体を閉じられてしまうことです）されてしまいます。
これではせっかく良い内容をページに書いても意味がないですし、もったいないですよね！
Webサイト見るときの目線って、どう動いてる？
では、一般的にWebサイトを見るとき、人はそれを「どのように見ている」でしょうか？
なんとなくですが、まず左上から見始める気がします。
そう、Webサイトを見るときも、やっぱり最初は左上から見ることが多いようです。そしてその後もそのまま右に進みます。まさに最初は「Zの法則」と同じなんですよね。
じゃその後も同じなのか？というと、ここからが実は違います。では一番右まで来た時、その後どう見てます？
ん～その後はまた左に戻って、最初に見たところの少し下から、また右に向かって見にいきます…かね？
なるほど…ではその後は？
そ、その後ですか？その後は…また左に戻ってる気がします…
………。
（あれ？違うこと言っちゃった？やばい、これ怒られるやつ？(;´д｀) どうしよう、今のうちに逃げとこうかな。。）
……………そう！そうなんですよ！！まさに！！！
おぉ…そ、そうでしたか。よかったです。（あたってたーまじビビったー汗）
そう、一般的には今の話にあったような流れで人は目線を動かしています。わかりやすいように図で表すとこんな感じ。
今度は目線の動きが「F字」に動いていますね。これをデザイン・レイアウトの世界では「Fの法則」と呼ぶわけですね。
みなさんもWebサイトを見るとき、何気なくこのような目線の動きをしてるんじゃないでしょうか。
今では様々なWebサイトでFの法則が！あのAmazonも！
ということは、Webサイトをデザインする際は、やっぱりF字の動線上に見てもらいたい重要コンテンツを置いていくと、とっても効果的です。
例えば、あのAmazonもこの法則を意識してコンテンツを配置しています。商品詳細ページを見てみるとわかりやすいですよ！
- 左上（Fの始まりの位置）に画像を配置
- その右に気になる「値段」や「大まかな説明」を記載
- さらに目線が左に戻って下に進み、
- 「一緒に購入されている商品」や「レビュー」が目に入る
- その内容が気になる人は、また右へ進む
- その後はまた目線が左に戻って下に進む
って感じですね！ただ、実はAmazonの「トップページ」はちょっと違っていて、ここは「Zの法則」を意識した配置になっていると思われます。
というのも、Zの法則は前回の記事で少しお伝えした通り、「ざっとページ全体を見るとき」にも当てはまりやすいと言われているため、「どんな商品が並んでいるか、ざっと初めにチェックすることが多い」トップページは、Zの法則を意識しているわけです。
そして、中身をじっくり見ていく商品詳細ページは、上から順にスクロールしていくFの法則を意識する。つまり、ページごとのユーザーの行動特性を考えた上で、2つの法則を使い分けているということですね。
それくらいWebサイトは丁寧な対応が求められるということでしょうし、そのきめ細かなレイアウトの違いによって、あれほど多くの方が利用者を獲得したとも言えるのではないでしょうか。
現在自社のWeb担当をされていて、まだFの法則・Zの法則を意識していなかったという方は、ぜひ今後活用してみてください！
まとめ：Webのデザイン時はぜひ意識を！
Webサイトを見るユーザーの一番の特徴は、「欲しい情報を素早く」手に入れたがっているということです。
最初の方にもお話しした通り、Webサイトはユーザーの欲しい情報が見つかりやすくないと、すぐ離脱されてしまうのが特徴です。ですのでユーザーの目線の動線をしっかり意識して、重要コンテンツが目に留まりやすいレイアウトにしてあげましょう！
ちょっとしたレイアウト術ではありますが、こちらも効果的なレイアウト法なので、ぜひご活用ください！
次回は視覚効果についてお伝えしたいと思います！お楽しみに～٩( ‘ω’ )و
↓↓↓次回の記事はこちら↓↓↓
もし書籍で資料デザインを学ぶのであれば、以下の本は結構オススメです。“ノンデザイナー”であるビジネスマンの方向けにわかりやすく解説されていますよ。
