Fの法則・Zの法則は、レイアウト設計の話題で必ず登場します。一方で、「Zの法則に従って配置したのにCVが増えない」という声も多く聞きます。
これらは「人の視線はこう動きやすい」という傾向であって、そう配置すれば成果が出るというルールではありません。実際の視線は、コンテンツの内容と見た目の強弱に大きく左右されます。法則に従うことより、法則が成立する条件を理解することが重要です。
この記事では、2つの法則の内容と成立条件を整理したうえで、実務での使い分け、スマートフォンでの扱い、そして法則より優先すべき要素を解説します。
この記事でわかること
・Fの法則・Zの法則の内容と、それぞれが成立する条件
・どちらを前提に設計すべきかの判断基準
・スマートフォンでは前提が変わる理由
・視線誘導で法則より優先度が高い3つの要素
・実際の視線をヒートマップで確認する方法
2つの法則の内容
| Zの法則 | Fの法則 | |
|---|---|---|
| 視線の動き | 左上→右上→左下→右下（Zを描く） | 左上→右へ、少し下がってまた右へ（Fを描く） |
| 成立しやすい場面 | 情報量が少なく、全体を見渡せる画面 | テキストが多く、拾い読みされる画面 |
| 代表的な対象 | ファーストビュー、LP、広告バナー、チラシ | 記事ページ、検索結果、一覧ページ |
| 設計への示唆 | 重要な要素を4隅の順に配置する | 各行の左側に要点を置く |
使い分けの基準は情報量です。一目で全体が入る画面ではZ型に近い動きになり、読み進める画面ではF型に近づきます。同じサイトでも、ファーストビューはZ、記事本文はFという形で共存します。
法則は「こう配置すれば成果が出る」ではなく「こう見られやすい」という傾向です。
情報量が少なければZ、テキストが多ければF。この使い分けが実務的です。
法則が成立しない条件
次の場合、視線は法則どおりに動きません。
- 強いコントラストの要素がある：大きい画像、鮮やかな色のボタンには、位置に関係なく視線が向かう
- 人物の顔や視線が写っている：顔に視線が集まり、その人物が見ている方向にも誘導される
- 目的が明確な訪問者：探しているものが決まっていると、該当箇所だけを探す
- 縦1列のレイアウト：スマートフォンでは左右の動きがほぼ発生しない
3番目は重要です。広告や検索から来た人は、目的を持って訪問しています。全体を眺めるのではなく、期待した情報があるかを確認します。法則よりも、期待した内容がすぐ見つかるかのほうが影響します。
スマートフォンでは前提が変わる
Zの法則もFの法則も、横に広い画面を前提としています。スマートフォンでは要素が縦1列に並ぶため、視線は上から下への一方向になります。
つまり、スマートフォンで重要なのは左右の配置ではなく、縦の順序です。
| PC（横長） | スマートフォン（縦長） |
|---|---|
| 4隅の配置が意味を持つ | 上からの順序がすべて |
| 左右で情報を対比できる | 対比は上下になり、同時に見えない |
| ロゴ左上・CTA右上が定番 | CTAは画面内に入るかが問題になる |
| Z・Fの動きが観測される | ほぼ縦スクロールのみ |
流入の大半がスマートフォンである以上、設計の起点はスマートフォンの縦順序に置くべきです。PCのZ配置を先に決めてからスマートフォンに落とすと、順序が破綻します。詳細はファーストビュー設計の重要性｜離脱を防ぐ最初の3秒の作り方で解説しています。
法則より優先度が高い3つの要素
視線誘導を設計するとき、法則より先に効くのは次の3つです。
1. 大きさと太さの差（ジャンプ率）
最も強く視線を集めるのは、位置ではなくサイズです。見出しと本文に十分な差があれば、どこに置いても見出しから読まれます。逆に差が小さいと、Z配置にしても視線は迷います。
2. 周囲の余白
要素の周りに余白があるほど、その要素は目立ちます。CTAボタンを目立たせるとき、色を変えるより周囲を空けるほうが効果的です。余白の設計はWebデザインにおける余白の効果で解説しています。
3. 色の使用頻度
そのページで他に使われていない色は、位置に関係なく目に入ります。逆に、同じ色が何箇所にも使われていると、どれも目立ちません。配色の設計はWebサイトの配色の決め方で解説しています。
この3つが整っていない状態でZ配置やF配置を議論しても、効果は限定的です。順序としては、強弱の設計が先、配置は後です。
実務での使い方
ファーストビュー（Z型を意識する）
| 位置 | 置くもの | 理由 |
|---|---|---|
| 左上 | ロゴ、または対象者の明示 | 最初に視線が入る |
| 右上 | 電話番号、問い合わせボタン | 行動できる状態にしておく |
| 中央 | 主見出し（誰に何を提供するか） | 最も強い要素として配置 |
| 左下〜中央下 | 根拠となる要素（実績数、資格） | 判断材料 |
| 右下 | 主CTA | 視線の終点で行動を促す |
ただしスマートフォンでは、これが縦1列になります。順序は「対象者の明示 → 主見出し → 根拠 → CTA」となり、電話番号は固定表示にするか上部に置きます。
記事・一覧ページ（F型を意識する）
- 各段落の冒頭に結論を置く（左側に要点が来る）
- 見出しは短く、左端から読み始めて意味が分かる長さにする
- 箇条書きの各項目も、冒頭に要点を置く
- 一覧の各行は、左側に判断材料（サービス名、価格）を配置する
- 表は、左端の列に見出し項目を置く
F型の本質は「拾い読みされる前提で書く」ことです。行の左端だけを追っても意味が通るかを確認してください。
実際の視線を確認する
法則は傾向であり、自社サイトで実際にどう見られているかは別です。次の方法で確認できます。
| 方法 | 分かること | コスト |
|---|---|---|
| ヒートマップツール | クリック位置、スクロール到達率、注視されている領域 | 無料〜月数千円 |
| GA4のスクロール率 | どこまで読まれているか | 無料 |
| ユーザビリティテスト | なぜそこを見たか、何を探していたか | ほぼ無料（5人） |
| アイトラッキング | 実際の視線の動き | 高額。中小規模では過剰 |
実務では、ヒートマップで「見られていない領域」を特定し、ユーザビリティテストで理由を確認する組み合わせが効率的です。テストの進め方はユーザビリティテストのやり方｜低コストで始める実践手順で解説しています。
よくある失敗
失敗1：法則に従えば成果が出ると考える
Z配置にしてもCVは増えません。視線の傾向を示すだけで、行動を促す設計は別途必要です。
失敗2：PCの配置を先に決める
流入の大半がスマートフォンである以上、縦順序を先に決めてからPCに展開してください。
失敗3：強弱をつけずに配置だけ議論する
ジャンプ率、余白、色の使用頻度が整っていないと、どこに置いても視線は誘導されません。
失敗4：重要な要素を複数置く
強調したい要素が3つも4つもあると、どれも目立ちません。1画面につき最も見せたいものを1つに絞ってください。
よくある質問
Q. ZとFのどちらを使えばよいですか？
情報量で判断してください。一目で全体が入る画面（ファーストビュー、LP上部、バナー）はZ型、テキストが多く読み進める画面（記事、一覧）はF型です。同じサイト内で共存します。
Q. スマートフォンでもZの法則は使えますか？
縦1列になるため、左右の動きはほぼ発生しません。スマートフォンでは、法則より「上からの順序」と「1画面に何が入るか」を重視してください。
Q. CTAは右下に置くべきですか？
PCの横長レイアウトではZ型の終点として機能しますが、絶対ではありません。それより重要なのは、周囲に余白があること、ファーストビュー内にも1つあること、そして色がそのページで他に使われていないことです。
Q. 法則を無視してもよいですか？
意図があるなら構いません。ただし、無視した理由を説明できる状態にしてください。「なんとなく」で配置すると、レビュー時に議論が収束しません。
まとめ
Fの法則・Zの法則は、視線が動きやすい傾向を示すものであって、そう配置すれば成果が出るルールではありません。使い分けの基準は情報量で、一目で全体が入る画面はZ型、読み進める画面はF型です。
ただし、強いコントラストの要素、人物の顔、目的の明確な訪問者、縦1列のレイアウトでは、法則どおりに視線は動きません。特にスマートフォンでは左右の動きがほぼ発生しないため、設計の起点は縦の順序に置いてください。
そして、法則より優先度が高いのは、ジャンプ率・周囲の余白・色の使用頻度の3つです。この強弱が整っていない状態で配置を議論しても、効果は限定的です。
「レイアウトの議論が感覚的で決まらない」「重要な要素が見られていない気がする」といった状態にある場合は、配置の前に強弱の設計を確認し、ヒートマップで実際の状態を把握してください。
当社ではデザイン制作からWeb制作、計測設計までを横断して支援しています。資料では改善の進め方をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。
