藤井こんにちは！Webデザインが得意なマーケターの藤井です！
強みも料金も載せたのに、申し込みボタンまで見てもらえていない気がする…
Zの法則に沿って並べたつもりなのに、手応えがない…
この記事は、自社のWebサイトやLPを作る、または直そうとしている事業者・Web担当者に向けて書いています。道路の視線誘導標や、イラストの構図の話は扱いません。
見てほしいものが多いと、つい全部を目立たせたくなりますよね。ところが全部が目立つページでは、どこから見ればいいかが分からなくなります。
視線誘導で最初にやることは、見てほしい順番を決めて、その順に目が動くように配置を組むことです。手法は、その順番に合うものを5つの中から選べば足ります。
この記事で分かることは次の3つです。
- 視線誘導の考え方と、配置の前に決めておくこと
- Zの法則・Fの法則の使いどころと、見落としやすい注意点
- 見てほしい順に見せる5つの手法と、自社で制作したLPでの使い方
視線誘導とは｜「見てほしい順番」を配置で作ること
視線誘導とは
ページを見た人の目が、作り手の意図した順に要素をたどるように、配置・向き・形・色・余白を設計することです。
ポイントは「目立たせる」と「順番に見せる」を分けて考えることです。目立つ要素が1画面に3つも4つもあると、見る人はどれが1番目かを自分で決めるしかありません。
私は配置を考える前に、次の3つを書き出してから手法を決めます。
- 1番目に見てほしいもの（例：誰向けの何の話か）
- 2番目に見てほしいもの（例：選ぶ理由になる強み）
- 最後に取ってほしい行動（例：申し込み・問い合わせのボタン）
書き出せたら、1画面の主役は1つに絞ります。3つより多く並べたくなったら、残りは次の画面へ回しましょう。
Zの法則・Fの法則はそのまま使えるのか
視線誘導を調べると、ほぼ必ずZの法則とFの法則が出てきます。どちらも目の動き方の傾向を表したもので、その形に並べれば見てもらえるという保証はありません。
| 比べるポイント | Zの法則 | Fの法則（F字パターン） |
|---|---|---|
| 目の動き方 | 左上から右上、左下、右下へとZを描くように動く、という考え方 | 上の方を横に読み、少し下をもう一度短く横に読み、そのあと左端を縦に流し読む（NN/gの説明） |
| 起こりやすい画面 | 文字が少なく、画像と見出しが中心の画面（ファーストビューなど） | 文字が多く、目を引く手がかりが弱い画面 |
| 作り手の使い方 | 起点（左上）に最初に読んでほしい言葉、終点（右下）に取ってほしい行動を置く | 狙って作る形にはしない。F字で読まれていたら、見出し・太字・箇条書きで手がかりを足す |
| 注意点 | 起点と終点のあいだに主役級の要素を増やすと順番が崩れる | 右側や下にある大事な情報が読み飛ばされやすい |
Fの法則は「狙う形」とは限らない
国内の解説記事では、Fの法則に沿って配置すると効果的だ、という書き方をよく見かけます。ここは、F字パターンを調査した側の説明と食い違っています。
F字パターンは、Webユーザビリティの調査会社Nielsen Norman Group（NN/g）が2006年の視線計測（アイトラッキング）調査で報告した読み方です。NN/gは2017年の記事「F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant」で、この読み方がよく誤解されているとして、次のように整理しています。
- F字は、意味のある情報へ目を引く強い手がかりがないときに起こる既定の読み方
- F字の読み方はユーザーにも事業者にも良くない。ページの右側にあるというだけで、大事な内容が読み飛ばされるおそれがある
- Web上の読み方はいつもF字になるわけではなく、ほかにも複数のパターンがある
- 良い設計でF字の読み方は防げる（見出し、重要語句の太字、箇条書きなど）
私はFの法則を「狙う形」として使いません。F字で読まれているなら、読み飛ばしのサインと受け取り、見出しや強調の手がかりを見直します。
※NN/gの内容は、2026年9月17日に原文で確認できた範囲を要約しています。f design officeで視線を計測して検証したものではありません。
スマホではどう考えるか
NN/gは同じ記事で、近年の調査でもF字の読み方がデスクトップとモバイルの両方で見られたと書いています。スマホだから法則と無関係、とは考えないほうが安全です。
一方で、スマホは1カラムの縦長画面なので、左右の目の動きはPCより小さくなります。私はスマホのZを1画面ごと、とくにファーストビュー単位で考えています。自社事例にもスマホのファーストビューでZを使ったものがあり、後の実例で紹介します。
見てほしい順に見せる視線誘導の5つの手法
順番を書き出したら、それを目で追ってもらう手段を選びます。手法は次の5つです。
- 配置の順序を決める（Zの起点と終点）
- 人物の視線・指差しの向きを使う
- 矢印・線・形で次へつなぐ
- コントラストで1点だけ目立たせる
- まとまりと余白で「読む単位」を作る
全部を1ページに入れる必要はありません。1画面で使うのは1〜2個で十分です。
①配置の順序を決める（Zの起点と終点）
左上の起点に最初に読んでほしい言葉を、右下の終点に取ってほしい行動を置きます。ファーストビューのように要素が少ない画面でいちばん使いやすい手法です。
注意したいのは、起点と終点のあいだに主役級の写真やバッジを足しすぎること。途中で目が止まり、終点まで届きにくくなります。自社事例は後半で2件紹介します。
②人物の視線・指差しの向きを使う
写真の人物が向いている方向や、指・手のひらが示す方向へ、見る人の目も向かいやすくなります。人物の顔や指先を見出しやボタンの方向へ向けて配置しましょう。
写真を選ぶ段階で、人物の向きも確認しておきましょう。人物が画面の外を向いていると、その視線の先には見てほしいものが何もありません。
③矢印・線・形で次へつなぐ
矢印や線、斜めのラインで「次はここ」を示す方法です。言葉と言葉のあいだに置くと、読む順番をそのまま形で伝えられます。
ただ、矢印を増やしすぎると、どれが本線か分からなくなります。1画面の中で矢印が指す先は、1本の流れにまとめてください。
④コントラストで1点だけ目立たせる
同系色でまとめた中で、1か所だけ色・大きさ・太さを変えると、目はそこへ向かいます。代表的なのは、CTAボタンをテーマカラーと対照的な色にするやり方です。
目立たせる場所は1画面1か所までにしましょう。また、強い色どうしを隣り合わせると、文字がちらついて読みにくくなることがあります。色の組み合わせで起きるこの問題は、下の記事にまとめています。
⑤まとまりと余白で「読む単位」を作る
関係する要素どうしを近づけ、別の話との間に余白をとると、目はまとまりごとに進みます。見出し・説明・ボタンを1つのかたまりにすると、読む単位が伝わりやすくなります。
ただし、情報を詰め込みすぎたページでは、順番を工夫する前に読む気そのものが落ちてしまうことも。情報量の減らし方は、こちらの記事にまとめました。
実例で見る｜自社制作LPで使った視線誘導
f design officeでは、制作したLPで使った心理効果を心理学に基づくデザインの言語化として公開しています。その中から、視線誘導を設計意図として説明している4件を取り上げます。
| 事例 | 画面 | 使った手法 | 事例ページで公開している意図の要旨 |
|---|---|---|---|
| nomeruno様 アルコール体質遺伝子検査LP | PCのファーストビュー | ①配置の順序、②人物の向き | 「Z目線誘導の起点」として、左上の重要な情報やキーワードを目立つ配色にする。「視線誘導効果」として、重要な情報に向かってモデルをレイアウトする |
| シードリーム様 フェイシャルエステスクール | スマホのファーストビュー | ①配置の順序 | 「Z目線誘導」として、情報が多い場合はZの形に沿ってレイアウトする。Zの終点にCTAボタンを配置する |
| ライフワークエージェンシー様 歯科投資塾LP | PCのファーストビュー | ②指差し、④コントラスト | 「指差し追従」として、指先や手のひらを重要な文字やキーワードに向ける。「コントラスト効果」として、同系色の中の一部に特徴を付け、CTAボタンはテーマカラーの補色にする |
| エタンセル様 メイクレッスンLP | PCのファーストビュー | ③矢印 | 「矢印効果」として、読ませたい順番で文字から文字へ矢印で誘導する。重要な情報やキーワードの直前に矢印を置く |
※各事例ページの「デザインのポイント解説」に書かれている内容だけを要約したものです。実際の画面と番号付きの解説は、リンク先の事例ページでご覧ください。
Zの起点と終点を決めた2件
nomeruno様のLPでは、PCのファーストビューにZの線を重ねた図で、左上の言葉を目立つ配色にしてZの起点にしたことを説明しています。同じ画面で、モデルを重要な情報へ向けてレイアウトしています。
シードリーム様のLPは、スマホのファーストビューにZを使った例です。解説図では、Zの線の終わりにCTAボタンが置かれています。
指差し・コントラスト・矢印を使った2件
ライフワークエージェンシー様のLPでは、人物の指先を見出しへ向けています。CTAボタンの色は、テーマカラーの補色です。エタンセル様のLPでは、読ませたい順に矢印で文字から文字へつないでいます。
エタンセル様の事例ページには、ヒートマップ解析のBEFORE/AFTER画像とあわせて「2024年8月に更新をし、CV率が改善しました。BEFORE：2.1％（2024年7月時点）→AFTER：7.6%（2024年10月時点）」と公開しています。
この数値はページ全体を更新した結果です。視線誘導だけの効果として切り分けたものではありません。ヒートマップ画像も、色の凡例を公開していないため、この記事では読み取った解釈を書いていません。
4件を並べると、視線誘導として説明している手法は1事例あたり1〜2個です。どの事例も5つの手法を全部は使っていません。私が手法を選ぶときも、書き出した順番に合うものだけを使うようにしています。
狙った順に見られているかを確かめる方法
配置で作った順番は、公開した時点ではまだ仮説です。実際に見る人の目がその順に動いたかは、公開後に答え合わせをします。
答え合わせに使うのがヒートマップです。起点に置いた言葉やCTAのあたりがよく見られているか、途中で離脱が集中していないかを確認します。ヒートマップの種類や導入方法は、下の記事で紹介しています。
狙った順に見られていなかったとき、私は色や装飾を足す前に、次の順で原因を疑います。
- 1画面の主役が1つに絞れているか
- 起点と終点に置いたものが、書き出した順番と合っているか
- 使っている手法が多すぎて、流れが何本にも分かれていないか
目立たせる要素を増やすのは、この3つを確認してからで遅くありません。
まとめ｜手法より先に「見てほしい順番」を決める
視線誘導は、見てほしい順番を先に決めてから、その順に目が動く配置を組む設計です。手法は5つの中から1〜2個を選べば足ります。
- 「1番目・2番目・最後の行動」を書き出し、1画面の主役を1つに絞る
- Zは起点と終点を決めるときに使い、F字の読み方は読み飛ばしのサインとして扱う
- 配置の順序・人物の向き・矢印・コントラスト・余白から手法を選び、ヒートマップで答え合わせをする
まずは自社ページのファーストビューを開いて、「1番目に見てほしいもの・2番目・最後に押してほしいボタン」を書き出してみてください。
よくある質問
Q. Zの法則とFの法則はどう使い分けますか？
画面の文字量で考えます。画像と見出しが中心の画面ではZの起点と終点を決め、文章の多い画面では見出しや太字で手がかりを足します。F字は狙って作る形として扱いません。
Q. スマホでも視線誘導は効きますか？
スマホは縦に進む画面なので、ファーストビューなど1画面ごとに順番を作ります。自社事例のシードリーム様LPも、スマホのファーストビューでZを使っています。ただし、効果の大きさを約束できるものではありません。
Q. 視線誘導でCVRはどれくらい上がりますか？
上がる数値はお伝えできません。記事内で紹介したエタンセル様の数値はページ全体を更新した結果で、視線誘導だけの効果ではありません。
Q. 目立たせたい情報が複数あるときは？
1画面の主役は1つにして、残りは次の画面や次のまとまりへ回します。まとまりと余白で区切ると、順番に読んでもらいやすくなります。
見てほしい順番が決まったら、次は配色や見やすさを含めて画面全体を点検しておきたいところです。公開前のセルフチェックに、下の特典を使ってみてください。
f design officeでは、WebデザインとWebマーケティングを一気通貫で行い、クリック率やCVR（成約率）の改善まで伴走しています。実際の改善事例はこちらの記事で公開しています。
無料特典：実務でそのまま使える「クリック率を下げないデザインチェックリスト（10項目）」
バナーやWebサイトを公開する前に、この10項目を確認するだけで「読みづらい」「クリックされない」デザインを避けられます。
- 現役Webデザイナーが実務で使っているチェック項目をそのまま収録
- 配色・レイアウト・文字の見せ方など、公開前の最終確認に使える
- デザインの知識がなくても、チェックを付けるだけで確認できる
受け取り方法：下のボタンからf design office公式LINEを友だち追加して、「デザインチェックリスト」とメッセージを送ってください。
参考・参照URL
- Nielsen Norman Group「F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant」Kara Pernice、2017年11月12日公開（2026年9月17日に原文確認）：https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
- f design office「心理学に基づくデザインの言語化」（2026年9月17日確認）：https://f-design-office.com/verbalization-2/
- f design office「nomeruno様 アルコール体質遺伝子検査LP」（2026年9月17日確認・デザインのポイント解説画像を確認）：https://f-design-office.com/nnomeruno/
- f design office「シードリーム様 フェイシャルエステスクール」（2026年9月17日確認・デザインのポイント解説画像を確認）：https://f-design-office.com/esthe-school/
- f design office「ライフワークエージェンシー様 歯科投資塾LP」（2026年9月17日確認・デザインのポイント解説画像を確認）：https://f-design-office.com/invest/
- f design office「エタンセル様 メイクレッスンLP」（2026年9月17日確認・CV率 BEFORE 2.1%〈2024年7月時点〉→AFTER 7.6%〈2024年10月時点〉の記載を確認）：https://f-design-office.com/make_lesson/
- f design office「ヒートマップとは？御社のWebサイトを無料で分析可能」（2026年9月17日確認）：https://f-design-office.com/blog/heatmap/
- f design office「認知負荷とは？Webサイトで迷わせない情報設計の5つの改善ポイント」（2026年9月17日確認）：https://f-design-office.com/blog/cognitive-load-web-design/
- f design office「ハレーションとは？デザインで避けたい色の組み合わせと対策3つ」（2026年9月17日確認）：https://f-design-office.com/blog/halation/
藤井最後までご覧いただきありがとうございます！
次のブログでお会いしましょう！
