視線誘導で効果的なデザインを！読んでもらうための基本技術

デザインにおいて、良いデザインは綺麗に見えるだけではありません。

計算されたデザインのなかには、いくつもの工夫が施されています。

その中の1つのテクニックが「視線誘導」。

デザインにおける「視線誘導」とは、ユーザーの目線の流れをコントロールし、重要な情報に自然と注意を向けてもらうための手法です。

本記事では、視線誘導の基本原則（Zの法則・Fの法則）を解説し、配置・余白・色彩・コントラストを活用した具体的なテクニック、さらに実際のデザイン事例を踏まえて、初心者でもすぐ実践できる方法について説明します。

視線誘導がデザインのテクニックとしてどのような役割を果たすのか、早速みていきましょう。

視線誘導の代表的なパターン（Zの法則・Fの法則）

視線誘導はユーザー体験の向上だけでなく、最終的な購入や問い合わせといったコンバージョンにも大きく関わる重要なデザイン技術です。

デザイン側で視線の動きを計画しておくことで、ユーザーが迷わず情報を理解でき、伝えたい内容を確実に届けることができます。

特に有名なのが「Zの法則」と「Fの法則」です。

それぞれ、ページ上で人間の視線がアルファベットの「Z」字型および「F」字型に動く傾向を示したものです。

まずはこの2つの基本原則を理解しましょう。

Zの法則 – 視線が「Z」の字に動くパターン

それでは、「Zの法則」から解説していきます。

バナーを例に上げて赤いラインで視線の流れを表していますが、この視線が「Z」状に流れることから「Zの法則」といわれています。

ユーザーの視線は左上から右上に移動し、次に対角線状に左下へ、最後に右下へとZ字型に流れていきます。

この「Zの法則」は、図のようなバナーやチラシ、LPのファーストビューなど1画面で完結させたいデザインでよく使われます。

人は、一目に映る情報量が多いほど、まずはざっと流し読みし、視線が「Z」の流れを描くみたいですね！

この性質を利用することで、デザインの始めと終わりが明確になるので、LPなどではキャッチコピーを左上に、CTA(ゴール)を右下に置くというレイアウトが完成します。

初めて訪れたユーザーにも直感的に理解しやすい自然な情報の流れを作れるため、デザインに迷ったときはZの法則を意識すると良いでしょう。

Fの法則 – 視線が「F」の字に動くパターン

続いては、「Fの法則」についてです。

ユーザーの視線がページ上部の見出しからから横方向に動いた後、左端に沿って下方へ移動し、再び途中の段階で横方向へ動く様子が「F」字型になっています。

ブログ記事や、少し長めの読み物に関しては、目立つ見出しをしっかり読み、本文の冒頭を読むと、次の見出しに写ってしまいます。

そのため重要な情報はページの上部や左側に集めて配置し、ユーザーがスクロールしながら要点を把握できるレイアウトにすると効果的です。

Fパターンはユーザーが必要な情報だけ取捨選択しやすい利点がありますが、下に進むほど離脱率が高まる傾向があるため、ページ中断や最後にもCTAを置いたり固定のナビゲーションを設けるなどの工夫で補うと良いでしょう。

LPなどでは、所々にCTAが設置されているページをよく見たことがあるのではないでしょうか？

ただ闇雲に、成果地点が多いわけではなく、よく見られるタイミングに設置しているんですね！

その他の視線誘導パターン

「Z」や「F」以外にも日本特有の縦書きになぞらえた「N型」のパターンも存在します。

しかし、一般的な横書きのWebや広告デザインでは、上記のZ型・F型パターンが有名になっているようですね！

もちろん、全員がこの視線の動きをする訳ではないですし、あえて崩すことで目立たせる部分を作ることもあります。

あくまで傾向であることは忘れずに、デザインに迷ったら案として出してみると良いでしょう。

配置・レイアウトを使った視線誘導テクニック

さて、視線の大まかな流れを知ったうえで、レイアウトについても考えていきましょう。

人の視線の動きを知り、どの順番で何を見せるのか。

配置も意識することで、デザインは洗練され、読みやすさも倍増します！

それでは、以下、レイアウトに関するポイントです。

開始位置を意識する

「Zの法則」でも記載しましたが、開始位置は、横書きの場合は左上に集中しやすいです。

なので、最も目立たせたい内容や、重要な内容は左上に配置。更に大きさも他の素材よりも大きくすると良いでしょう。

サイトであれば、ページタイトル、バナーなどであればキャッチコピーがそれにあたりますかね。

「Z」を意識するのであれば、その対角線上にCTAなどの購入ボタンや問い合わせボタンがあると行動喚起しやすいでしょう。

レイアウトに関しては、「グーテンベルク・ダイアグラムの法則」という、4つの視覚領域も覚えておくと配置に便利です。

上記図の様に情報にも緩急をつけると、印象をうまく誘導することが可能です。

Zパターンを採用する場合は、左上から右上へのライン上に見出しや導入文を置き、斜め下に視線を誘導する位置（中央やや左寄り）に主要な画像やコピーを配置、最後に右下にCTAボタンを置くといった流れが典型です。

Fパターンの場合は、縦に長いレイアウトの上部から順に見出し→サブ見出し→本文というように、情報の優先度が高いものから順に上から配置します。

この様に、視線に合わせて情報を配置することは、大事なことですが、何よりも自分がユーザー目線で読んでみて、ストレスを感じないか？ということが一番重要かもしれないですね。

誘導サイン（矢印や線）の活用

視線を誘導するものは、レイアウトだけではありません。

装飾デザインの要素として矢印やラインを配置することも直接的な視線誘導に効果を発揮します。

例えば「次はこちら」「スクロール誘導」などの意図で矢印記号を置けば、ユーザーの目はその指し示す方向へ移りやすくなります。

漫画で使われる集中線のように、ある一点に視線を集めたい場合に放射状のラインを背景に入れる手法もあります。

ただし矢印などの強調サインは効果が強力な分、多用するとノイズになるため、「ここぞ」という場面で控えめに使うのがポイントです。

ステップ番号やグルーピング

資料デザインなどで、よく使われたりもしますが、最も簡単に視線を誘導したい場合は、番号をつけると効果的です。

人は、無意識に数字を数えてしまう本能があるので、数字をふっておくことで、自然とその通りに読んでしまいます。

どうでしょうか？

上から順番になっているという事もありますが、数字の通りに読み進めてしまいますよね。

更に、全体を囲いグループ化していることで、このステップが1つのまとまりであることもわかりやすくなっています。

この様にちょっとした装飾でも視認性を高めたり、相手に理解してもらう助けになっています。

余白と色彩による視線誘導のテクニック

Zの法則やFの法則を見てきたことで、お分かりかもしれませんが、人は基本的に全部をしっかり読みません。

特にマーケティングでも語られることですが、人には心理的な３つの壁が存在します。

LPなど、コピーライティングの分野で考えられることですが、人にはこの３つの壁が存在し、その内の１つでもある「読まない」という壁。

長い文章ほど読まれにくく、最初と最後しか読まないなんてこともザラでしょう。

１枚のポスターなどでも、文字が詰め込まれすぎていると読む気が起きませんよね？

そこで活躍するするのが以下のテクニックです。

余白（ホワイトスペース）による視線誘導

情報を詰め込みすぎると、読み手は、どこを読めば良いかわからなくなってしまいます。

そこで、活躍するのが余白（ホワイトスペース）。

適度な余白は、視覚的にも洗練さや安心感を与え、更に情報の区切りとしてグルーピングの役割も果たしてくれます。

例えば、こちらの名刺。

余白があることで、名前のエリアと、情報のエリアがしっかりと別れており、情報整理がされています。

また注目させたいときにも有効です。

なにもない白い紙の真ん中に、点があると、ついついそれを見てしまいますよね。

周囲に余白があることで視線を誘導し、見せたいものに注目させることができます。

色彩を使った視線誘導

余白とは言いつつも、視線誘導に大きな役割を果たすのは「白」だけではありません。

そして、特に重要な事は、明暗差などコントラストの強さです。

使い方には十分注意が必要ですが、しっかりと利用の仕方を知ることができれば大きな力になります。

例えばこちらの画像、色相が正反対の関係にある赤と緑を組み合わせると、コントラストは非常に強くなりますが目がチカチカしませんか？

これは「ハレーションカラー」と言われており目に負担をかけ、見た人にとってストレスを与えてしまいます。

彩度が高いとこのような現象は起きやすいので、どうしてもこの色を使いたい！等が起きたときには彩度や明度を調整すると落ち着かせることができます。

色の話は、また別の機会にするとして、このコントラストが視線の誘導に非常に大きく関係しているということ。

この図のようなボタンがあったとして、コントラストがはっきりしているオレンジ色のボタンのほうが目立ちますよね。

LPなどでCTAを変えただけで成果が30％以上改善した。という話はよく聞きます。

購買を促進させるようなイメージの色を選ぶことも大切ではありますが、何よりもコントラストがはっきりしており、目立たせることが最重要です。

視線誘導の実例

最後に視線誘導の実例としていくつかご紹介していこうと思います。

いきなり猫が出てきて関係無いと思いましたか？

実は動物も視線誘導に最も最適と言われる素材のひとつなのです。

マーケティングのお話ができる機会にまた詳しくお話しようと思いますが、素材に悩んだときは以下を意識すると良いかもしれません。

もちろん、目的に沿った素材が一番ではありますが、、、

そして、人は、人の視線の先を見てしまうという無意識下の行動もあります。

上記は、LPのファーストビューですが、女性の目線が教材のタイトルに向いていることで自然とタイトルに目が向けられます。

また、モデルの笑顔というビジュアル自体も強いアイキャッチですが、その視線が誘導効果を持つことで写真とテキストがシームレスにつながり、メッセージを確実に読ませることに成功しています。

3Bにも関係していますが、デザインとストレスは大きな関連性があります。

潜在的な癒やし効果を持つものは、デザインとして目を引く効果も高いです。

素材に迷ったときには、視線の向きにも着目してみるとより目に止まるデザインが完成するかもしれません。

まとめ

いかがでしたでしょうか？

視線誘導の基本となるポイントをまとめました。

以上のような内容を意識し、普段から目にする広告などにも注目すると一段とデザインを見る目が成長するでしょう。

現在は、Canvaなどの無料で使えるデザインツールも増えてきています。

デザインする目的を考えて、それに沿ったデザインをすることでビジネスも飛躍的に成長することでしょう。