Web広告バナーやランディングページ（LP）、SNS投稿など、様々なクリエイティブにおいてユーザーの行動に影響する重要な要素、それが「視線誘導（Gaze Guidance）」です。

魅力的なデザインを用意しても、ユーザーにその情報を正しく受け取ってもらえなければ、メッセージが伝わらずコンバージョン（成果）には繋がりません。

本エントリでは、ユーザーの視線をコントロールし、「何を」「いつ」「どの順番で」伝えるかを設計する視線誘導の基本原則と、目的別の活用パターンを解説します。

目次

ユーザーの無意識に働きかける！視線誘導の基本原則

視線誘導の基本として、人間の目の動きの仕組みを使った4つのルールがあります。これらは、ユーザーの視線が自然と動く方向を決めるものです。

1. 大きさ・太さ
2. 同形・同色
3. 数字
4. 余白・接近

このルールを組み合わせて、伝えたい情報の順番（ビジュアルヒエラルキー）をはっきりさせることが、効果的なデザインを作るための最初の一歩です。

大きさ・太さ（コントラストの法則）

視覚的な要素の中で、人は自然と目立つものに注目し、その次に目立たないものへと視線を移動させます。そのため、視線は「大→小」「太い→細い」へと流れます。

同形・同色（類同の法則）

人間は、形や色が同じ要素を一つのグループとして認識する傾向があります。（ゲシュタルト法則の「類同」）同じ形や同じ色は、関連性の高い要素として捉えられ、ユーザーの視線はグループ全体を追うように誘導されます。

数字（順序付けの力）

人は数字を見ることで無意識的にその順番通りに情報を追うようになります。順番に見せたい情報には数字をつけると効果的です。

余白・接近（近接の法則）

デザインにおいて「余白」は情報を分断し、「接近」は情報を統合します。（ゲシュタルト法則の「近接」）

物理的に近くに配置された要素同士は、たとえ異なる要素であっても関連性が高いと見なされます。逆に、遠く離れた要素は関連性が低いと見なされます。

目的と媒体で使い分ける！主要な視線移動パターン

ユーザーの視線の流れにはいくつかの定型パターンが存在します。クリエイティブ制作の前に押さえておきたい主な4パターンをご紹介します。

1. グーテンベルク・ダイアグラム
2. Z型
3. F型
4. N型

グーテンベルク・ダイアグラム

均等に配置された情報（テキストブロックなど）を見る際、視線が左上から右下へと対角線状に移動するパターンです。視線が最初に当たる左上と、最後にたどり着く右下が最も注目されます。

Z型（ゼットパターン）

視線が「左上 → 右上 → 左下 → 右下」と、アルファベットの「Z」を描くように移動するパターンです。視線移動が速く、短時間で情報を伝えたいバナー、広告、情報量の少ないLPのファーストビューに適しています。

F型（エフパターン）

視線が「左上 → 右上 → 左下 → 右下」と流れつつ、左側を重点的に下へと移動し、「F」の形を描きます。テキスト主体の長いコンテンツや、多くの情報が並ぶサイトで最も多く見られるパターンです。

ユーザーはまず左側の垂直ラインをスキャンするように読み進め、興味を持った箇所で水平に視線を移します。ブログ記事、ニュースサイト、縦に長いWebサイトなど、情報量が多く、スクロールが前提となるコンテンツにおすすめです。

N型（エヌパターン）

視線が「右上 → 右下 → 左上 → 左下」と移動します。横書きが主流のWebデザインでは少ないですが、縦書きのレイアウトや、縦書きを意識した和風デザインなどに見られます。

【応用】視線誘導を加速させるテクニック

基本原則とレイアウトパターンに加え、以下のテクニックを使うことで、より積極的にユーザーの視線をコントロールできます。

1. 矢印・線を活用する
2. 人物やキャラクターの「視線」を利用する
3. 動きによって注目を集める

矢印・線を活用する

図形的な矢印だけでなく、太字の線、破線、アニメーションなどを使い、「次に進むべき方向」を示します。特にステップ式の説明や、離れた場所にある要素への注意喚起に効果を発揮します。

また、ボタン内に矢印を入れることで、ユーザーに次のアクションをより明確に伝える効果も期待できます。

人物やキャラクターの「視線」を利用する

デザインに人物写真やキャラクターイラストを使用する場合、モデルの目線が向いている先に、ユーザーの視線も引き寄せられます。ユーザーの視線誘導のガイド役となるため、目立たせたい要素に視線を向けるのもテクニックの1つです。

動きによって注目を集める

人間の視覚は、静止画よりも動画に敏感です。この特性を活かし、要素を少しだけ拡大・縮小させる、色をわずかに変化させる、ゆっくりとフェードインするなど、さりげない動きを加えることで、その箇所への注目度を一気に高めることができます。いわゆる「アニメーションバナー」に取り入れられているテクニックです。

ただし、過度なアニメーションはユーザー体験を損なうため、重要な要素に絞って取り入れることが大切です。

アニメーションバナーは「最後の後押し」として費用対効果が高いことがデータで証明されています。当社では、サーバー負荷や表示速度も考慮しながら、最も効果的なアニメーション箇所をご提案しています。

おわりに

効果的な視線誘導は、単に「見栄えが良い」デザインを作るためではなく、ユーザーに情報を正しく伝え、最短距離で目的を達成してもらうための設計です。

当社もこれらの基本を徹底し、日々クリエイティブ制作に取り組んでいます。ご自身のプロジェクトでも、この視線誘導の力をぜひ最大限にご活用ください。

• Tweet