【Zの法則とFの法則】Webマーケティングに役立つ視線の法則

Webサイトのデザインを制作する時、見やすさを考えることはとても重要です。
Zの法則とFの法則は、視線が無意識にしている動きのことなので、Webのデザインに取り入れると非常に効果的です。
この記事ではZの法則とFの法則について紹介します。
Webサイトのデザイン作成に悩んでいる方は是非参考にしてください。

ケンタ

視線の動きってそんなに重要なんすか?
そうね。視線の法則を取り入れると、ユーザーに伝わりやすいデザインになるわ。
伝わりやすいデザインは、Webサイトのユーザー数や売上にも高い確率で良い効果を与えるのでぜひ覚えておくことをおすすめするわ。

ネコミ

視線の法則

Zの法則って何?

初めてWebサイトのページを見るとき、ケンタはどんな風に見る?

ネコミ

ケンタ

(どんな風に…?)う~ん、まあ全体をざっと見るっすかね?
もしかしたら、そのときZの法則のような視線の動きをしてるかもしれないわ。
まずは、Zの法則について説明していくわね。

ネコミ

Zの法則の使い方

Zの法則とは、人の視線がアルファベットの「Z」のように、左上→右上→左下→右下の順番に移動することです。
全体の概要をざっくりと把握できるので、初めてWebサイトを見る人はこのように目線を移動させることが多いです。

Zの法則

視線の順番は、画像のように左上→右上→左下→右下なので左上が特に目立ちます。
なので、左上には、重要な情報や一番見てほしい情報などを配置します。
例:サイトロゴ、企業名など

右上、左下、右下や、Zのライン上も目立つ場所なので、その他に見てほしい情報を配置します。
例:おすすめの記事、商品の画像、バナー広告、カテゴリのリンクなど

ケンタ

目立つ場所に情報を配置すれば、見られやすくなるっすね!

Zの法則はどんなページに使う?

先述した通り、初めてWebのページやチラシ、広告を見る人は全体をざっくり見ようと視線を「Z」に動かします。
Zの法則は以下のようなページで使用すると効果的です。

  • Webサイトのトップページ
  • 写真やイラストなどが多いページ

Fの法則って何?

ケンタ

今度はFの法則っすね!
やっぱり「F」の形に視線が動くんすか?
その通り!
早速内容を説明していくわね。

ネコミ

Fの法則の使い方

Fの法則

Fの法則は、人の視線が画像のように左上→右上→下がってもう一度左→右→下がって以下繰り返し、とアルファベットの「F」のように移動することです。
リピーターやサイトをじっくり読む人はこのような視線の動きをします。

左から右に視線が動き徐々に下へ移動していくため、上部分の特に左側がよく見られます。
なので、Zの法則と同じく左上に重要な情報や一番見てほしい情報などを配置します。
そして、Fのライン上にその他の情報を配置します。

じっくり読む人が多いから、文章の多いページで活用するといいかもね!

ネコミ

Fの法則はどんなページに使う?

ここでは、Fのページはどんなページで使うと効果的なのか紹介します。
Fの法則は、じっくり内容を読む人がする視線の動きなので、全体の文章量が多いページで活用すると効果的です。
具体的には以下のようなページで活用することをおすすめします。

  • 商品の詳細ページ
  • ブログなどの読み物系のコンテンツページ

その他の視線の動き方の法則

実は、Zの法則やFの法則以外にも、人の視線の動き方に影響を与えるものがあるのよ。

ネコミ

ケンタ

本当っすか!ぜひ教えてくださいっす!
今回は、3つのテクニックを紹介するわね。

ネコミ

大きいものの方が視線を集めやすい

大きさ

画像を見てみると、小さいオブジェクトより大きいオブジェクトの方が視線が向くのではないでしょうか。
画面上の面積比が大きいため、自然と視線が集まりやすくなるのです。
このように画像や文字の大きさを変えることで、視線を誘導することもできます。

人の向いてる方向に視線も誘導される

視線を誘導したいときは、人の画像を上手く使うことも有効です。

視線

画像①のように視線をずらしていると、見ているユーザーも男性の視線の先へ目が行きます。
逆に画像②のように、こちらを見つめている画像はユーザーも画像の女性を見つめ返すことが多いです。

数字を利用する

数字

画像のように情報に数字を振り分けると、視線も数字に誘導されます。
数字を振り分けておけば、デザインが多少バラバラでも順序を示すことができます。


まとめ:人の視線の法則を理解しよう!

ケンタ

視線の動き方や流れを考えて工夫するのって結構重要なんすね!
そうね。視線の法則を理解して、見やすいように意識しながらWebページのレイアウトを制作することが大事よ。

ネコミ

今回のポイントまとめ

  • Zの法則Webサイトのトップページや画像の多いページで使うと効果的
  • Fの法則は商品の詳細ページや文章量の多いページで使うと効果的
  • 大きさや数字など視線を動き方に影響を与えるものがある

またこの他にも、デザイン関連の記事を執筆していますのでぜひ参考にしてください。