【Z・Fの法則】「自販機で左上が一番売れる」は嘘だった!? Webデザインに活かす本当の視線の法則。

Webサイトのレイアウトに使える「Zの法則」と「Fの法則」

Webサイトのレイアウトを考える上で、非常に役立つ「Zの法則」と「Fの法則」というものがあるのをご存知でしょうか。世の中にはZの法則とかFの法則と呼ばれる法則が存在していまして、それがWebサイトのレイアウトに応用できるということで、今回はこの法則について詳しく説明していきたいと思います。

なぜ視線の動きが重要なのか？

ではまず、なぜこの法則が重要なのか、その重要性について説明していきたいと思います。
この記事を読んでくださっているみなさんは、おそらくご自身でWebサイトを運営されていて、お問い合わせや資料請求、商品購入といった、何かしらのゴールを設定していることが多いのではないでしょうか。

そうでなくても、例えばメディアサイトのように、記事をたくさん読んでほしいといった目的もあると思います。いずれの目的にせよ、サイトを訪れた人の“目線”がどこにあるのかを意識することが、とても重要になります。

例えば、お問い合わせボタンをどこに置くか。それが目立つ位置にあるかないかで、結果は大きく変わってきます。その「目立つ位置」というのが、左上なのか右上なのか、はたまた左下なのか右下なのか。サイトの作りによって最適な場所は違うはずですよね。その時に考え方の指針となるのが、今回ご紹介するZの法則とFの法則なんです。Webサイトを構築する上での基本的なレイアウトの考え方として、この法則が広く利用されています。

「Zの法則」「Fの法則」とは一体何か？

では、いよいよ本題です。「ZとFの法則とは一体何ぞや？」というところを解説していきます。
人の視線がどのようにコンテンツを見るか、その動きをパターン化したものがこれらの法則です。

パターン1：Zの法則

まず一つ目のZの法則ですが、これは人の視線がアルファベットの「Z」を描くように動くというものです。

Webサイトの画面を思い浮かべてみてください。一般的に、左上にはロゴがあり、その横にナビゲーションメニューが並び、中央にはメインビジュアル、その下に各コンテンツが配置されていることが多いですよね。

みなさんもおそらく、Webサイトを訪れた時に、無意識に左上から全体を眺めている経験があるのではないでしょうか。人の目線は、まず左上のロゴあたりを見て、次に右上のメニューあたりをざっと確認し、それから左下のメインビジュアルやキャッチコピーに視線を移し、最後に右下のコンテンツへと抜けていく。こんな感じで「Z」の形に動くことが非常に多いんです。これがZの法則です。

パターン2：Fの法則

次にFの法則です。これも名前を見れば想像がつくかもしれませんが、視線がアルファベットの「F」のように動くというパターンです。

Zの法則とは少し違い、Fの法則では、視線は左上を起点にして、左側に軸があるような動きをします。まず左上から水平に右へ読み進め、次に視線を少し下げて再び左から右へ、という動きを繰り返す、アルファベットの「F」のような形で情報を読んでいきます。

このように、人の視線の動きには「Z」と「F」のパターンがある、ということを意識してレイアウトを作っていくのが、これらの法則の基本的な考え方になります。

• Zの法則とは
  視線が「左上 → 右上 → 左下 → 右下」と、アルファベットのZの形に動くパターン。
• Fの法則とは
  視線が左側を軸にして、「左から右へ読む」という水平の動きを上から下に繰り返す、アルファベットのFのようなパターン。

【余談】自販機で一番売れるのは左上、は本当か？

昔よく言われていた話で、面白いものがあるんです。街中にある自動販売機、ありますよね。いろんな商品が2列くらいでずらっと並んでいる、あのおなじみの光景です。

あの自動販売機で、一体どの場所の商品が一番売れるのか？という話になった時、「Zの法則やFの法則に基づくと、最初に目に入る左上が一番売れる」と、僕もいろんなところで聞いた記憶があります。どちらの法則にしても、絶対に左上を一番最初に見ていますからね。だから売れ筋商品は左上に置いておくと売れるんだ、と。

今回この記事を書くにあたって、「これって本当なのかな？」と気になって、念のためネットで調べてみたんです。
そしたら、なんとこれ、嘘らしいんですよ。もし、僕と同じように「自販機は左上が一番売れるんだよ」という話を聞いたことがある方がいらっしゃったら、ぜひ「あれは嘘らしいよ」と伝えてあげてください（笑）。

ある調査によると、自動販売機で一番売れるのは左下、ということだったみたいです。
考えてみれば、自動販売機って、Webサイトのようにじっくり眺めるというよりは、何の脈絡もなくパッと見ることが多いですよね。それに、まず「いい商品あるかな」と全体をざっと見るパターンと、先にお金を入れてから商品を選ぶパターンがあります。

お金を入れる場所が右側にあるとすると、お金を入れてから商品棚に目線を戻すので、その時点で視線の動きがWebサイトとは異なります。なので、ZとかFの法則は、単純には通用しないのかもしれませんね。

ただ、Webサイトの場合は話が別です。みなさん、ブラウザの上部にあるタブで複数のサイトを同時に見ていることが多いと思います。タブを切り替えてパッとサイトを開いた時、「これはどんな会社のサイトかな」という情報は左上にある、と多くの人が認識しているはずです。ですから、Webサイトにおいて、まず左上を見る、というのは、おそらく間違っていないかと思います。

Zの法則とFの法則の使い分け

さて、視線のパターンとして「Z」と「F」の2つをご紹介しましたが、「どっちで考えたらいいの？」と思いますよね。どっちのパターンで見る人が多いのか、という話ではなく、これには実は明確な使い分けがあります。

Zの法則が向いているサイト

Zのパターンは、LP（ランディングページ）だったり、比較的情報量の少ないWebサイトに向いていると言われています。

Fの法則が向いているサイト

一方で、メディアサイトやニュースサイト、あるいはFAQ（よくある質問）のように、質問と回答が羅列されているような情報量が多いサイトは、Fの法則を意識するのが良いとされています。

もちろん、これが絶対に正しいというわけではありませんが、使い分けるとしたら、このような考え方が一つの指標になります。
特に、文章を読むときを考えてみてください。日本語も英語もそうですが、基本的に左から右へと読んでいきますよね。そのため、文字がずらっと並んでいるサイトでは、どうしても一番左側が視線の軸になります。文章がメインのコンテンツでは、やはりこの左側を軸に人間は情報を見ていくので、Fの法則が適していると言えます。

LPにおけるレイアウトの考え方

対して、LPのように何か商品を購入してもらいたいサイト、例えば美容品の通販サイトなどを想像してみると分かりやすいです。

• 視線の起点（左上・右上）
  最終ゴールとなる「お問い合わせ」や「購入ボタン」を配置
• メインの視線誘導（中央）
  最も伝えたい「キャッチコピー」を配置
• 次の視点（左下）
  ユーザーの共感を呼ぶ「悩み」や「問いかけ」を配置
• 最終的な結論（右下）
  具体的な「商品の特徴」や「メリット」を配置

まず、視線が向かう左上や右上には、最終的なゴールである「お問い合わせ」や「購入ボタン」を配置して、ユーザーにゴールをチラ見せさせます。そして、中央の最も目立つ場所には「お肌に潤いを」といったような、心を掴むキャッチコピーを持ってきます。

次に視線が移るであろう左下のエリアには「こんなお悩みありませんか？」とユーザーの悩みを喚起する問いかけを配置し、最後に右下のエリアで「この商品の特徴」を1、2、3と見せていく。
こんなふうに要素を配置していくと、ユーザーの視線は自然とZの形に誘導されていきますよね。

このように視線を誘導することで、サイトに訪れてくださったお客さまに、より効果的に情報を伝えることができるようになります。

まとめ：サイト改善の指標として

もちろん、これが全てにおいて正しいというわけではありませんが、サイトのレイアウトを改善したいけれど、何から手をつければいいか分からない、何か指標が欲しいという時には、こういったZの法則やFの法則を意識してレイアウトを改善してみてはいかがでしょうか。

僕自身、これまでは「コンバージョン率が多少悪くても、とにかくアクセスさえ集めればお問い合わせは絶対に生まれる」という考え方を潜在的に持っていました。アクセスを稼ぐこと自体、かなりリソースを取られる大変な作業です。

しかし、先月は自社のWebサイトの改善に結構力を入れて取り組んでいたのですが、レイアウトなどを少し変えただけで、お問い合わせ率が大幅に変わるという経験をしまして、やっぱりサイト改善は本当に大事なんだなと痛感したところだったんです。

サイトに来てくださったお客さまを、いかにゴール（お問い合わせなど）に導くか。この作業は、意外なほど奥が深く、そして重要です。
そんな個人的なマイブームもあって、今回はコンバージョン率を高めるための一つの考え方として、Zの法則とFの法則についてお話しさせていただきました。サイト改善の施策の一つとして、ぜひ参考にしていただければと思います。

プロ仕様！内部SEOセルフチェックツール

あなたのウェブサイトが検索エンジンで上位表示されるために重要な内部SEO対策。このセルフチェックツールを使えば、簡単な質問に答えるだけで、サイトの改善点が見つかります。

あなたのホームページのSEOは健康度はどれくらい？ 今すぐチェックして、アクセスアップを目指しましょう！

今すぐチェックする >