視線誘導とは？Z型・F型の使い分けとWebデザインでの活かし方

作ったバナーだけ、なぜか素人っぽく見える…
どこを直せばいいのか分からないまま、なんとなく完成にしている…

バナーやLPを作っていると、見てほしい場所より先に別のところを見られてしまうことがあります。Webデザインで「見る順番」をつくる考え方が視線誘導です。

視線が動く順番は設計できるもので、どう組むかを選ぶ基準もあります。

デザインは見た目ではなく、目的達成の手段です。見る順番の設計も、目的から逆算して決めます。この記事で分かることは次の3つです。

1. 視線誘導の意味と、Webデザインで必要になる理由
2. Z型とF型を使い分ける判断基準
3. 添削でよく出る3つの崩れ方と、その直し方

視線誘導とは？Webデザインで「見る順番」を設計すること

視線誘導とは
要素の大きさ・位置・色・余白などを使って、見てほしい順に読者の視線を動かす設計のことです。

Webページやバナーを開いた人は、端から順に全部を読みません。先に目に入ったものだけで「これは自分に関係があるか」を判断して、次の行動を決めます。

逆に言えば、視線の動きに合わせて設計されたデザインはユーザーの情報収集のしやすさに寄与します。その結果として伝わりやすいデザインを意図的に制作できます。

視線誘導の仕事は「情報の優先順位づけ」

視線誘導は、要素に順位を付ける作業です。

• 1番に見せるもの
• 2番に見せるもの
• 見なくても困らないもの

を分けていきます。

順位を決めるには、何を一番伝えたいかが先に決まっていないと動けません。目的が決まっていない状態で大きさや色をいじっても、どこを強くすべきか判断できないからです。

左上は目立たせるべき

左上が目立っている場合、目線の動きの起点になるので私たちが意図した順番で読んでもらえる可能性がアップします。反応の取れるデザインにするためにおすすめの工夫です。

視線が動く3つの基本パターン｜Z型・F型・N型

視線の動きには、よく観察される型があります。Webで出番が多いのはZ型とF型で、縦書きの媒体ではN型が使われます。

比べるポイント	Z型	F型	N型
視線の動き	左上→右上→左下→右下	上部を横→少し下を短く横→左側を縦	右上→右下→左上→左下
よく当てはまるもの	バナー、LPのファーストビュー、提案スライド	ブログ記事、商品一覧、サービス紹介ページ	縦書きの媒体
向いている情報量	少ない（一画面で収まる）	多い（縦スクロールが前提）	少ない〜中くらい

Z型は、横書きの文章を読む動き（左から右へ進み、改行して左へ戻る）を画面全体に広げた形です。要素が少なく、スクロールなしで全体が見えるものに当てはまります。

F型が出るのは、文章量の多いページ。Nielsen Norman Groupの2006年の調査によると、232人を対象にしたアイトラッキングで、上部を横に読む動き・少し下での短い横の動き・左側を縦にたどる動きという3段階が確認されています。アルファベットの「F」はこの軌跡の形から来ています。

N型は、右から左へ読む縦書きの媒体での動きです。Webでは縦書きのレイアウトが少ないため、出番はあまりありません。

Z型とF型の使い分け｜判断基準は「情報量」と「読む姿勢」

Z型とF型、どちらで組めばいい？
一画面に入る情報量と、読者の読む姿勢の2つで決めます。型の名前から選ぶ場面はありません。

判断軸1｜一画面に入る情報量

要素が少なく、スクロールなしで全体が見えるなら、Z型で組めます。バナー、LPのファーストビュー、提案スライドがここに入ります。

縦スクロールが前提になった時点で、F型で拾い読みされると考えます。読者は見出しと左端を拾いながら、下へ進んでいきます。

判断軸2｜読者の読む姿勢

自分で検索して来た人には、読む気があります。見出しを拾いながらでも下まで進んでくれますね。

一方で、SNSのタイムラインや広告枠で偶然見かけた人は、読む姿勢がありません。一瞬で「自分に関係あるか」だけを判断して、指を動かします。

通りすがりに見られる前提のものは、伝えることを1つだけに決めて作ります。

型を選ぶ3ステップ

1. 一番伝えたいことを1つに絞る
2. 一画面に入る要素の数を数える
3. 読者の読む姿勢を想定して、型を決める

型の名前から入らなければ、迷う場面はぐっと減ります。順番は①→③で固定です。

視線誘導をつくる5つの手段（大きさ・位置・色・余白・向き）

視線を動かす手段は、多くありません。次の5つを組み合わせるだけです。

①大きさ（ジャンプ率）

一番伝えたい要素を、一番大きくします。文字サイズの差が小さいと、どれが主役か読者に伝わりません。

迷ったときは、一番大きい文字と一番小さい文字の差を、今より広げてみてください。差を付けるほど主役がはっきりします。

②位置

視線の始点と終点に何を置くかを決めます。横書きのバナーなら、始点は左上、終点は右下。

行動してほしいこと（申込みボタン・リンク）は、視線の終点に置きます。読み終わった場所に次の一手が無いと、読者は行動せずに離れていきます。

③色・コントラスト

色数を増やす前に、背景との明るさの差を付けます。同じ赤でも、背景が明るければ浮き、暗ければ沈んでしまう。目立たせたいのに目立たないときは、色を変える前に背景との差を疑ってみてください。

色の選び方で手が止まる方は、以下の関連記事もご覧ください。

④余白・近接

関係のある要素を近づけ、関係のないものは離します。余白は、主役を際立たせるために取るもの。周りを空ければ、大きさを変えなくても主役は強くなります。

この近づける・離すという考え方は、デザインの基本原則そのものです。5つの手段は原則をWebで運用したものなので、原則から押さえたほうが判断が速くなります。詳しくは「デザインの4原則とは？近接・整列・反復・対比をWebの例で解説」で整理しています。

⑤向き（人物の視線・矢印・線）

写真の人物が見ている方向へ、読者の視線も動きます。モデルが右を向いている写真なら、右側に伝えたい文字を置いたほうが読まれます。矢印や斜めの線も同じ働きをします。

よくある3つの崩れ方と、その直し方

崩れ方は、だいたい3つに分かれます。どれも直し方が決まっているので、自分の一枚を照らし合わせてみてください。

崩れ方1｜要素が全部同じ強さで、主役がない

一番多いのがこれです。文字も画像もボタンも同じ強さで並んでいて、目がどこにも引っかかりません。

起きる理由は、作っている途中で迷ったときに「念のため」と要素を足していくから。足す判断は楽ですが、強いものが増えれば主役は消えます。

直し方は、足すのをやめて下げるほうへ回ることです。

1. 伝えたいことを1つ決める
2. それ以外の文字を小さくする
3. それ以外の色を弱くする（彩度を落とす・グレーに寄せる）

足すより早く終わりますし、やり直しもききます。

崩れ方2｜ボタン（CTA）が視線の終点にない

キャッチコピーは決まっているのに、申込みボタンが左上や中央に埋もれている状態。読み終わりの位置に次の行動が無いので、動いてもらえません。

直し方は、Z型で組んだバナーなら右下、縦に読ませるLPなら読み終わりの位置へボタンを移すこと。あわせて、ボタンの周りの余白を今より広く取ります。

崩れ方3｜情報が左右に散って、視線が往復する

左に文字、右に画像、また左に文字、という配置で、視線が何度も左右を往復してしまうパターン。読むのに体力がいるので、途中で止まります。

直し方は、関係のある要素を近づけてブロックにまとめ、一方向に流すこと。1つのかたまりの中だけで視線が完結すれば、往復は起きません。

直し方を覚えるより、自分の目で確かめる

3つの直し方を暗記する必要はありません。作り終わったら、次の順で自分の目を使って確かめます。

• 画面から一度離れる（別の作業をはさむ・表示を小さくする）
• もう一度見て、最初に目が行った場所を覚える
• 狙った場所とずれていたら、主役以外を1段下げる

狙った場所と違えば、設計がまだ効いていないということですね。この確認を繰り返した回数が、そのまま判断力になります。

視線誘導は、要素の少ないバナーがいちばん練習しやすい題材です。私は、時間のかかるHP・LPより先に、バナーで枚数を稼ぐことを勧めています。手順やサイズから確認したい方は「バナーの作り方を初心者向けに解説｜手順・サイズ・上達のコツ」から進んでください。

まとめ

視線誘導は、見てほしい順に視線を動かす設計です。感覚で決まるものではないので、基準を持てば自分で直せます。

 型から選ばず、「一番見せたい1つ」を決めてから型を決める。
 Z型かF型かは、一画面の情報量と読者の読む姿勢で判断する。
 崩れたときは、足すより先に主役以外を1段下げる。

手元のバナーを1枚開いて、一番伝えたい要素を1つだけ決めてみてください。残りを1段下げるだけで、最初に目が行く場所は変わります。

参考にした情報源

• Nielsen Norman Group「F-Shaped Pattern For Reading Web Content (original study)」（Jakob Nielsen・2006年4月16日）https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/
• Nielsen Norman Group「F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant」（Kara Pernice・2017年11月12日）https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

※2026年10月時点の各ページの記載にもとづきます。Z型・N型は横書き・縦書きの読み方向から説明したもので、特定の調査にもとづく数値ではありません。