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

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

Zの法則って何？

Zの法則の使い方

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

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

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

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

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

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

Fの法則って何？

Fの法則の使い方

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

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

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

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

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

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

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

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

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

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

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

数字を利用する

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

副業に興味あるけど一歩が踏み出せない方必見！
初めてでも安心して副業ができる方法

CrowdWorks（クラウドワークス）

CrowdWorks に無料登録

まとめ：人の視線の法則を理解しよう！

今回のポイントまとめ

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