読者です 読者をやめる 読者になる 読者になる

Web行動心理学研究所 - Powered by infodex co.

Web行動心理学研究所は、ディスプレイ広告のパフォーマンスを向上させるため、株式会社インフォデックスが外部有識者の皆さんと共に運営している研究チームです。 ユーザーがWeb広告と接触して反応する際の「行動心理」について、基礎的な研究やテスト配信に基づいたデータの蓄積~公開を行っています。 ブログでは、マーケティングや広告制作に活用できそうな行動心理の紹介や、行動心理を適用したバナーを実際に広告配信をして広告効果を検証したレポートなどを掲載しています。

【視線の法則】「Zの法則」しか知らない人は要注意!Webの法則は紙とは違います。

行動心理

f:id:web_bp_lab:20160318210701g:plain

チラシなどの紙媒体や、コンビニやスーパーの棚の陳列、自動販売機などでは常識の「Zの法則」をご存知の方は多いと思います。
しかしWebではZとは異なる視線の流れがあることはご存知でしょうか?もしかしたら、コンテンツ内での配置を変えることで、クリック数や売上が変わってくるかもしれませんよ!

まずは「Zの法則」をおさらい!

f:id:web_bp_lab:20160318212418g:plain

Zの法則とは、紙媒体やコンビニの棚などを見る際に、左上→右→左下→右と「Z」の順番に視線を動かすという法則のこと。

デザイン業界や流通業界では常識とされ、最初に見られる左上に重要な情報やイチオシの商品を配置したり、中央ではなく右上、左下、右下にポイントを置くといったように以前から活用されてきました。

Webは「Fの法則」も重要!

f:id:web_bp_lab:20160318212616g:plain

一方、Webの場合はZではなく「Fの法則」も重要だと言われています。左上から右に目線が移動するのは同じですが、その後最初に見た左上の場所から少し下に移動し、また右に移動する、という「F」の動きを繰り返すそうです。

ただ、Webは全てFというわけではなく、始めてアクセスしたWebサイトは全体を見渡すために「Z」の動きをすることが多く、全体の構成を把握した後は、お目当ての情報を探すために「F」の動きをすることが多いそうです。

また、写真やイラストなどの画像が多いページや、インフォグラフィックなどの場合はZの法則、ブログやニュースなど文章量が多いコンテンツはFの法則だとも言われています。

「Zの法則」と「Fの法則」のWeb活用例

Yahoo! JAPAN トップページは「Zの法則」を利用

f:id:web_bp_lab:20160318212903g:plain

Yahoo! JAPAN のトップページは、ページの一番上、ZもFも通る最も大事な場所にトラベルやヤフオク!などの自社サービスのアイコンと検索窓を置いています。その一段下は左上にショッピングやヤフオク!などの自社商品、右上にバナーという配置です。

面白いのはスクロールをしたとき。「あなたへのおすすめ」というおすすめ記事がいくつも並ぶなか、右側は固定され、1番下までスクロールしても右下にきっちりと広告が表示されています。

もし右側が固定されておらず、画面の途中に広告スペースが配置されていたら、見逃してしまうのではないでしょうか。Webならではのテクニックを使って「Zの法則」を活用した例だと言えます。

Facebookも一見「F」のようですが、スクロールしても常に右下にチャットバーが表示されており、実は「Zの法則」を押さえているのです。

個々の記事や商品ページは「Fの法則」が多い

f:id:web_bp_lab:20160318213151g:plain

Yahoo!の記事や、通販サイトの商品購入ページなどは「Fの法則」を意識して作られていることが多いようです。例えばAmazonは、左上に商品画像、右上に金額や「カートに入れる」ボタンがあり、左側に戻って下を見ていくとキャンペーン情報やおすすめ商品などが横へ横へと並んでいます。まるで「F」の動きを何度も繰り返すような配置です。

まとめ

以上、「Zの法則」と「Fの法則」についてご説明をさせていただきました。単純に「紙=Zの法則、Web=Fの法則」ということではなく、コンテンツの特性に合わせて使い分けることが大切です。特にトップページなどは一度作ってしまうとあまり見直さないもの。これを機に配置を変えてみてはいかがでしょうか。ぜひご活用ください!

※事例はすべて2016年3月18日時点でのものです。


著:Web行動心理学研究所 諸永

Web行動心理学研究所 COPYRIGHT ©infodex CO.,LTD. ALL RIGHTS RESERVED.     http://www.infodex.co.jp