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

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

2019/04/14
 
Fの法則,レイアウト,PowerPoint
この記事を書いている人 - WRITER -
1984年東京生まれ。 デザイナーであった親の影響もあり、学生時代からデザインに関心を持ち、デザインの中ですくすくと成長。大学卒業後は都内出版社に入社し、編集部で書籍やWebサービスの企画・編集・ディレクションを幅広く担当。その後経営企画部を経て独立し、株式会社トリッジを設立。 現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業や個人向けにデザイン・資料作成の講師・アドバイザーとしても活動中。 趣味は、美味しいものを食べて飲んでケラケラ笑うこと♪

 

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

Zの法則
当ブログでは、ビジネスシーンで作成する資料で“誰でも・手軽に使える”レイアウトノウハウ・テクニックをお伝えしていますが、今回からは『ちょっと変えるだけで効果抜群なレ

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

会社や様々なビジネスシーンで作る多種多様な資料。 ・商品企画書(Word、PowerPoint等) ・他部署への依頼・通知文書(Word、Excel等)

 

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

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

 

 

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

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

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

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

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

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

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

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

dummy
トリジ先生

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

dummy
神楽くん

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

dummy
トリジ先生

そう、前回お伝えした「Zの法則」同様、Webサイトを見るときも、やっぱり最初は左上から見ることが多いようです。
そしてその後もそのまま右に進みます。まさに最初はZの法則と同じなんですよね。

じゃその後も同じなのか?というと、ここからが実は違います。
では一番右まで来た時、その後どう見てます?

dummy
神楽くん

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

dummy
トリジ先生

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

dummy
神楽くん

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

dummy
トリジ先生

………。

dummy
神楽くん

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

dummy
トリジ先生

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

dummy
神楽くん

おぉ…そ、そうでしたか。よかったです。(合ってたーまじビビったー(;´д`) てか謎の沈黙なんなん?怒)

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

 

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

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

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

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

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

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

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

って感じですね!

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

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

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

Zの法則
当ブログでは、ビジネスシーンで作成する資料で“誰でも・手軽に使える”レイアウトノウハウ・テクニックをお伝えしていますが、今回からは『ちょっと変えるだけで効果抜群なレ
そして、中身をじっくり見ていく商品詳細ページは、上から順にスクロールしていくFの法則を意識する。

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

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

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

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

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

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

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

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

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

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

図形は左、テキストは右
当ブログでは、ビジネスシーンで作成する資料で“誰でも・手軽に使える”レイアウトノウハウ・テクニックをお伝えしています。 先日から『ちょっと変えるだけで効果抜群
dummy
トリジ先生

“ノンデザイナー”であるビジネスマンのためのデザイン・レイアウト本として、以下の本はおすすめです。


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

この記事を書いている人 - WRITER -
1984年東京生まれ。 デザイナーであった親の影響もあり、学生時代からデザインに関心を持ち、デザインの中ですくすくと成長。大学卒業後は都内出版社に入社し、編集部で書籍やWebサービスの企画・編集・ディレクションを幅広く担当。その後経営企画部を経て独立し、株式会社トリッジを設立。 現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業や個人向けにデザイン・資料作成の講師・アドバイザーとしても活動中。 趣味は、美味しいものを食べて飲んでケラケラ笑うこと♪

- Comments -

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

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