チラシなどの紙媒体や、コンビニやスーパーの棚の陳列、自動販売機などでは常識の「Zの法則」をご存知の方は多いと思います。
しかしWebではZとは異なる視線の流れがあることはご存知でしょうか？もしかしたら、コンテンツ内での配置を変えることで、クリック数や売上が変わってくるかもしれませんよ！
まずは「Zの法則」をおさらい！
Zの法則とは、紙媒体やコンビニの棚などを見る際に、左上→右→左下→右と「Z」の順番に視線を動かすという法則のこと。
デザイン業界や流通業界では常識とされ、最初に見られる左上に重要な情報やイチオシの商品を配置したり、中央ではなく右上、左下、右下にポイントを置くといったように以前から活用されてきました。
Webは「Fの法則」も重要！
一方、Webの場合はZではなく「Fの法則」も重要だと言われています。左上から右に目線が移動するのは同じですが、その後最初に見た左上の場所から少し下に移動し、また右に移動する、という「F」の動きを繰り返すそうです。
ただ、WebはすべてFというわけではなく、始めてアクセスしたWebサイトは全体を見渡すために「Z」の動きをすることが多く、全体の構成を把握した後は、お目当ての情報を探すために「F」の動きをすることが多いそうです。
また、写真やイラストなどの画像が多いページや、インフォグラフィックなどの場合はZの法則、ブログやニュースなど文章量が多いコンテンツはFの法則だとも言われています。
「Zの法則」と「Fの法則」のWeb活用例
Yahoo! JAPAN トップページは「Zの法則」を利用
Yahoo! JAPAN のトップページは、ページの一番上、ZもFも通る最も大事な場所にトラベルやヤフオク！などの自社サービスのアイコンと検索窓を置いています。その一段下は左上にショッピングやヤフオク！などの自社商品、右上にバナーという配置です。
面白いのはスクロールをしたとき。「あなたへのおすすめ」というおすすめ記事がいくつも並ぶなか、右側は固定され、1番下までスクロールしても右下にきっちりと広告が表示されています。
もし右側が固定されておらず、画面の途中に広告スペースが配置されていたら、見逃してしまうのではないでしょうか。Webならではのテクニックを使って「Zの法則」を活用した例だと言えます。
Facebookも一見「F」のようですが、スクロールしても常に右下にチャットバーが表示されており、実は「Zの法則」を押さえているのです。
個々の記事や商品ページは「Fの法則」が多い
Yahoo!の記事や、通販サイトの商品購入ページなどは「Fの法則」を意識して作られていることが多いようです。例えばAmazonは、左上に商品画像、右上に金額や「カートに入れる」ボタンがあり、左側に戻って下を見ていくとキャンペーン情報やおすすめ商品などが横へ横へと並んでいます。まるで「F」の動きを何度も繰り返すような配置です。
まとめ
以上、「Zの法則」と「Fの法則」についてご説明をさせていただきました。単純に「紙＝Zの法則、Web＝Fの法則」ということではなく、コンテンツの特性に合わせて使い分けることが大切です。特にトップページなどは一度作ってしまうとあまり見直さないもの。これを機に配置を変えてみてはいかがでしょうか。ぜひご活用ください！
※事例はすべて2016年3月18日時点でのものです。