Zの法則・Fの法則で視線を誘導しよう!

2018年04月23日

アバター画像スーパーみえこさん

新人よしの
新メニューができたそうなので、ホームページにバナーを新しく追加したいんですがどこが効果的なんですかね?

スーパーみえこさん
WEBだったら左上が一番目立つんじゃない?

新人よしの
WEBとチラシだと違うんですか?

スーパーみえこさん
チラシでも縦書きと横書きだと違うけど、Zの法則・Fの法則って聞いたことない?

新人よしの
何ですかそれ?

新人よしの
…みえこさん、○○の法則とか、○○効果とか好きだな~

スーパーみえこさん
視線の動きを表した法則やねんけど、WEBは流し読みされやすいから気を付けなアカンねん

新人よしの
WEBライティングも改行やスペースを多めに取って、読む気が起きるように工夫してますもんね。
なるほど~

紙媒体とWEB媒体では視線の動きが違う!視線の法則とは?

目次


「Zの法則」「Fの法則」、どちらも雑誌やウェブサイトを閲覧する時の人の視線の動きをアルファベットの文字の形で表した法則のことです。

Zの法則

雑誌やチラシなどの紙媒体では、視線は左上→右上→左下→右下…とZ字型にまんべんなく動いていきます。
(縦書きの場合はN字型に動きます。)

Zの法則の図

Fの法則

紙媒体に対してウェブ媒体では、視線は左上→右上→左下…とF字型に動き、左端を流し読みして、右下はほとんど読まれない…という動きになります。


Fの法則の図

E字型に動いてくれれば、全部読んで貰えるのですが、ウェブはF字型なんです!

まとめ

では、ホームページを作る際にどんなことに注意をしたら良いかというと…

  • 読んで欲しい情報・クリックして欲しい情報は、左上上部に設置する!
  • 右下に大事な情報を載せない!
  • 視線をZ型E型に動くように誘導する!

というように法則を利用して構成しましょう。

新しくメニューを作ったり、割引やクーポンがあるという場合は左上か上部にリンクバナーを設置するのが効果的です!

視線をZ型に動くように誘導するためには、文章の途中に画像(写真・イラスト・図)を右・左・右…や、文章の右端に載せていくと人は文字より画像に注目しやすいので、視線をZ型、E型に誘導することができます。

ホームページの構成を考える時に参考にしてみてください。
(ちなみにスマートフォンサイトでは、視線はI型の動きになります。)



犬猫の殺処分をなくすために…!

【ゆる研】ゆるい購買心理研究所のサイトにあるバナーからの広告収入は、すべて神戸市の動物愛護支援事業へ寄付させていただきます。

神戸市ホームページ 動物愛護支援事業へのご寄付のお願い

動物愛護支援事業では、犬猫の殺処分を減らし譲渡を促進する活動を行っております。

  • 譲渡前の子猫のミルクボランティア
  • 譲渡候補の犬猫の健康管理(ワクチン接種・血液検査等の健康管理・不妊去勢手術等)
  • 譲渡候補の犬猫の不妊去勢手術
  • 地域猫の不妊去勢手術への助成

ゆる研の運営スタッフや運営会社のポータルズスタッフは動物好きが多く、猫・犬・うさぎ・インコなど可愛いファミリーがたくさんいます!
私たちは、動物の殺処分のニュースに心を痛めており、1匹でも1頭でもなくせるようにと寄付活動を行っております。

私たちの趣旨にご賛同いただける方は、Amazon ・楽天でお買い物される際は下記広告バナーを入り口にしてください。広告収入を寄付させていただきます。

書籍のバナーから本を購入してくださっても広告収入が入るので、寄付させていただきます。

広告収入の金額・寄付活動については、お知らせ欄でご報告いたします。

マーケティング&売上アップに役立つ!おすすめ書籍

Twitterでも、マーケティング・デザイン・心理学、時々猫についてゆるく発信中