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