【レイアウトノウハウ】Webサイトのレイアウトは「Fの法則」で配置するのがお勧めなワケ

Fの法則,レイアウト,PowerPoint



 

当ブログでは、ビジネスシーンで作成する資料で“誰でも・手軽に使える”レイアウトノウハウ・テクニックをお伝えしています。

今回お伝えするのは「Fの法則」。以前当ブログで「Zの法則」をお伝えしましたが、これと名前が似ている、とっても効果的なレイアウト術になります。

特に社内のWeb担当の方などには、ぜひ意識していただきたいものですので、早速お話ししていきましょう٩( ‘ω’ )و

Webサイトのレイアウトも「目線の流れ」を意識するのが大切

「読み手にとってわかりやすい・読みやすい内容になっているかどうか」。前回の記事で、ビジネスシーンの資料ではやっぱりこれって大事だよね~ってことをちらっとお話ししましたが、では資料ではない「Webサイト」とかはどうなんでしょう?


やっぱりWebサイトのレイアウトも同じですよね。わかりやすい内容にするためには様々な要素がありますが、「読み手の目線の流れ」を意識して配置する必要があります。

特にWebサイトの場合は、読む・見る人の「目線の流れ」を意識したレイアウトにしてあげないと、伝えたいポイントが見落とされてしまい、「なんだか欲しい情報が書いてないなぁ(´ω`)」なんて思われて、サラッとスクロールして終わり!って感じで、すぐ離脱(他サイトに行かれてしまったり、ブラウザ自体を閉じられてしまうことです)されてしまいます。

これではせっかく良い内容をページに書いても意味がないですし、もったいないですよね!

Webサイト見るときの目線って、どう動いてる?

dummy
トリジ先生

では、一般的にWebサイトを見るとき、人はそれを「どのように見ている」でしょうか?

dummy
神楽くん

なんとなくですが、まず左上から見始める気がします。

dummy
トリジ先生

そう、Webサイトを見るときも、やっぱり最初は左上から見ることが多いようです。そしてその後もそのまま右に進みます。まさに最初は「Zの法則」と同じなんですよね。
じゃその後も同じなのか?というと、ここからが実は違います。では一番右まで来た時、その後どう見てます?

dummy
神楽くん

ん~その後はまた左に戻って、最初に見たところの少し下から、また右に向かって見にいきます…かね?

dummy
トリジ先生

なるほど…ではその後は?

dummy
神楽くん

そ、その後ですか?その後は…また左に戻ってる気がします…

dummy
トリジ先生

………。

dummy
神楽くん

(あれ?違うこと言っちゃった?やばい、これ怒られるやつ?(;´д`) どうしよう、今のうちに逃げとこうかな。。)

dummy
トリジ先生

……………そう!そうなんですよ!!まさに!!!

dummy
神楽くん

おぉ…そ、そうでしたか。よかったです。(あたってたーまじビビったー汗)

そう、一般的には今の話にあったような流れで人は目線を動かしています。わかりやすいように図で表すとこんな感じ。

Fの法則,レイアウト,PowerPoint

今度は目線の動きが「F字」に動いていますね。これをデザイン・レイアウトの世界では「Fの法則」と呼ぶわけですね。

みなさんもWebサイトを見るとき、何気なくこのような目線の動きをしてるんじゃないでしょうか。

今では様々なWebサイトでFの法則が!あのAmazonも!

ということは、Webサイトをデザインする際は、やっぱりF字の動線上に見てもらいたい重要コンテンツを置いていくと、とっても効果的です。

例えば、あのAmazonもこの法則を意識してコンテンツを配置しています。商品詳細ページを見てみるとわかりやすいですよ!

  1. 左上(Fの始まりの位置)に画像を配置
  2. その右に気になる「値段」や「大まかな説明」を記載
  3. さらに目線が左に戻って下に進み、
  4. 「一緒に購入されている商品」や「レビュー」が目に入る
  5. その内容が気になる人は、また右へ進む
  6. その後はまた目線が左に戻って下に進む

って感じですね!ただ、実はAmazonの「トップページ」はちょっと違っていて、ここは「Zの法則」を意識した配置になっていると思われます。

というのも、Zの法則は前回の記事で少しお伝えした通り、「ざっとページ全体を見るとき」にも当てはまりやすいと言われているため、「どんな商品が並んでいるか、ざっと初めにチェックすることが多い」トップページは、Zの法則を意識しているわけです。

そして、中身をじっくり見ていく商品詳細ページは、上から順にスクロールしていくFの法則を意識する。つまり、ページごとのユーザーの行動特性を考えた上で、2つの法則を使い分けているということですね。

それくらいWebサイトは丁寧な対応が求められるということでしょうし、そのきめ細かなレイアウトの違いによって、あれほど多くの方が利用者を獲得したとも言えるのではないでしょうか。

現在自社のWeb担当をされていて、まだFの法則・Zの法則を意識していなかったという方は、ぜひ今後活用してみてください!

東京,神楽坂,東京note,グルメ

まとめ:Webのデザイン時はぜひ意識を!

dummy
トリジ先生

Webサイトを見るユーザーの一番の特徴は、「欲しい情報を素早く」手に入れたがっているということです。

最初の方にもお話しした通り、Webサイトはユーザーの欲しい情報が見つかりやすくないと、すぐ離脱されてしまうのが特徴です。ですのでユーザーの目線の動線をしっかり意識して、重要コンテンツが目に留まりやすいレイアウトにしてあげましょう!

ちょっとしたレイアウト術ではありますが、こちらも効果的なレイアウト法なので、ぜひご活用ください!

次回は視覚効果についてお伝えしたいと思います!お楽しみに~٩( ‘ω’ )و

↓↓↓次回の記事はこちら↓↓↓

図形は左、テキストは右

【資料レイアウトノウハウ】「図形は左、テキストは右」に置くとわかりやすくなるのは何故だか知ってた?

2018.07.03
dummy
トリジ先生

もし書籍で資料デザインを学ぶのであれば、以下の本は結構オススメです。“ノンデザイナー”であるビジネスマンの方向けにわかりやすく解説されていますよ。



当ブログ「ビズデザ(旧「Are you Designer? No, I'm...」)の中の人が、ついにYouTubeチャンネル『ビズデザ』を開設し、パワポの作り方をはじめとしたデザインノウハウの共有を始めました!


◆YouTubeチャンネル『ビズデザ』

ノンデザイナー・デザインビギナーである一般のビジネスパーソンの方々が、日頃のお仕事の中で使える『誰でも簡単にできるデザインのノウハウ・セオリー』を実例をたっぷり使いながら動画でわかりやすく解説!

小難しい高度なデザインノウハウは一旦抜きにして、“最低限ここまで押さえておけばOK!”というようなデザインノウハウに絞ってお伝えしていますので、資料デザインなどにお困りの方は、ぜひ当チャンネルをご活用ください!(よろしければチャンネル登録もお願いいたします)


Go to YouTube!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

1984年東京生まれ。 デザイナーであった親の影響もあり、学生時代からデザインに関心を持ち、デザインの中ですくすくと成長。大学卒業後は都内出版社に入社し、編集部で書籍やWebサービスの企画・編集・ディレクションを幅広く担当。その後経営企画部を経て独立し、株式会社トリッジを設立。 現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業や個人向けにデザイン・資料作成の講師兼アドバイザーとしても活動。 “日本最大まなびのマーケット『ストアカ』”にて開催されているPowerPoint資料作成講座では、ストアカ全登録講師25,000人の中で2019年トップレビューを獲得(ユーザー平均満足度95%以上を現在進行形で獲得中)。著書に『ひと目で伝わるプレゼン資料の全知識』(株式会社インプレス、2020年3月発行)がある。 趣味は、美味しいものを食べて飲んでケラケラ笑うこと♪