ビジネスマンのための資料デザインの教室

レイアウトの魔法!ちょっと変えるだけで効果抜群な資料作成術 ②Fの法則

2018/11/05
 
Fの法則,レイアウト,PowerPoint
この記事を書いている人 - WRITER -
1984年東京生まれ。 デザイナーであった両親の影響もあり、学生時代からグラフィックデザイン・エディトリアルデザインの基礎〜実践的知識・スキルを習得。 大学卒業後、大手出版社に新卒で入社。3年間編集部にて単行本や継続出版物等の企画・編集業務を経験したのち、26歳で経営企画部に異動。その後7年間、経営計画・戦略の策定、市場・競合分析、収益予測等を担当し、企業経営全般に関する実践的知識・経験を蓄積。 編集者と経営企画スタッフという、世間一般的にも珍しい組み合わせの職歴・経験を積み、独自のスキル・思考フレームワークを確立。 2017年3月に出版社を退職。同7月に株式会社トリッジを設立。現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業・個人向けにビジネス資料作成のアドバイザー・研修講師としても活動中。

 

当ブログでは、ビジネスシーンで作成する資料で“誰でも・手軽に使える”レイアウトノウハウ・テクニックをお伝えしています。
前回から『ちょっと変えるだけで効果抜群なレイアウト術』を全3回シリーズでお話しし始めました٩( ‘ω’ )و ↓↓↓

レイアウトの魔法!ちょっと変えるだけで効果抜群な資料作成術 ①Zの法則

また、以前お伝えした『絶対意識すべきレイアウトの4大原則』と併せて使っていくと、より効果が高まります٩( ‘ω’ )و ↓↓↓

まさかそんな効果が!?資料作成時に絶対意識すべきレイアウトの4大原則

 

今回お伝えするのは「Fの法則」。
前回の「Zの法則」と名前が似ていますが、こちらもとっても効果的なレイアウト術になります。

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

 

 

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

「読み手にとってわかりやすい・読みやすい内容になっているかどうか」

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

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

特にWebサイトの場合は、読む・見る人の「目線の流れ」を意識したレイアウトにしてあげないと、伝えたいポイントが見落とされてしまい、

なんだか欲しい情報が書いてないなぁ(´ω`)

なんて思われて、サラッとスクロールして終わり!って感じですぐ離脱(他サイトに行かれてしまったり、ブラウザ自体を閉じられてしまうことです)されてしまいます

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

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

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

そう!そうなんですよね!

前回お伝えした「Zの法則」同様、Webサイトを見るときも、やっぱり最初は左上から見ることが多いようです。

そしてその後もそのまま右に進みます。まさに最初はZの法則と同じなんですよね。

じゃその後も同じなのか?というと、ここからが実は違います。

では一番右まで来た時、その後どう見てます?

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

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

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

………。

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

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

(合ってたーまじビビったー(;´д`) てか謎の沈黙なんなん?怒)

そうなんですよ、一般的には今の話にあったような流れで人は目線を動かしています。

 

わかりやすいように図で表すとこんな感じ。

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

 

そう、今度は目線の動きが「F字」に動いています。
これをデザイン・レイアウトの世界では「Fの法則」と呼ぶわけですね٩( ‘ω’ )وシャキーン

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

 

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

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

例えば、あのAmazonもこの法則を意識してコンテンツを配置しています。

商品詳細ページを見てみるとわかりやすいですよ!

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

って感じですね!

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

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

前回の記事はこちら٩( ‘ω’ )و ↓↓↓

レイアウトの魔法!ちょっと変えるだけで効果抜群な資料作成術 ①Zの法則

そして、中身をじっくり見ていく商品詳細ページは、上から順にスクロールしていくFの法則を意識する。

つまり、ページごとのユーザーの行動特性を考えた上で、2つの法則を使い分けているということですね٩( ‘ω’ )و

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

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

 

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

最初の方にもお話しした通り、Webサイトはユーザーの欲しい情報が見つかりやすくないと、すぐ離脱されてしまうのが特徴です。

ですのでユーザーの目線の動線をしっかり意識して、重要コンテンツが目に留まりやすいレイアウトにしてあげましょう!

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

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

 

あ、最後になりますが、職業柄よく「レイアウトで参考になる本を教えて欲しい!」と言われるのですが、私が昔からずっと参考にしているものの1つに「ノンデザイナーズ・デザインブック」という本があります。

PowerPoint含め、ビジネス資料のレイアウトテクニック・ノウハウなどについて、とてもわかりやすくまとめられています。

私がデザインを長く勉強してきた中で、学生時代から“バイブル”として何度も繰り返し読んできた本ですので、興味がありましたら一度読んでみるといいかもしれませんよ!↓↓↓

お値段も高くないですし、とっても参考になると思いますので(◯・∀・)人(・∀・○)イェーイ

 

あと、この本もビジネスマンさんにはとっても参考になりそうな良書でしたので、お時間あれば見てみてください(^^)

現在、当ブログでお伝えしている内容をベースにした「PowerPointの作成講座」をストアカにて開催しています!(講義形式)
我流で作ってしまいがちなPowerPointを「いかに見やすく・わかりやすく・伝わりやすく作るか」、その原則・ルールをロジカルにお伝えする講座です。
定員1〜2名という超少人数制で開講していますので、和やかな雰囲気で質問もしやすい(と言われるw)ですよo(^-^)o
また、受講者様が実際に作成したPowerPointの個別フォローもお受けしています。
ご興味ございましたら、ぜひよろしくお願いいたします!

この記事を書いている人 - WRITER -
1984年東京生まれ。 デザイナーであった両親の影響もあり、学生時代からグラフィックデザイン・エディトリアルデザインの基礎〜実践的知識・スキルを習得。 大学卒業後、大手出版社に新卒で入社。3年間編集部にて単行本や継続出版物等の企画・編集業務を経験したのち、26歳で経営企画部に異動。その後7年間、経営計画・戦略の策定、市場・競合分析、収益予測等を担当し、企業経営全般に関する実践的知識・経験を蓄積。 編集者と経営企画スタッフという、世間一般的にも珍しい組み合わせの職歴・経験を積み、独自のスキル・思考フレームワークを確立。 2017年3月に出版社を退職。同7月に株式会社トリッジを設立。現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業・個人向けにビジネス資料作成のアドバイザー・研修講師としても活動中。

- Comments -

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

Copyright© Are you Designer ? No, I'm … , 2018 All Rights Reserved.