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