視線誘導を意識したWebデザインとは？その概要と効果をご紹介

「視線誘導」という言葉を耳にしたことがあるでしょうか。
人には無意識に視線を動かすいくつかの「パターン」があり、その「パターン」を意識したWebデザインを施すことによって、より確実にユーザーに情報を届けることができるとされています。

ここでは、視線誘導の種類、そして視線誘導を意識することがデザインにとって重要な理由とその効果についてまとめてみました。

視線誘導とは？そのメリットと効果

まず、そもそも「視線誘導」とは何かについて細かく見ていきましょう。

視線誘導とは？

視線誘導は、ユーザーの視線の流れを意図的にコントロールするために用いられる方法の一つで、特に絵画、写真、映画、漫画などの世界で使われています。

近年では、ユーザビリティの優れたWebサイトやゲームなどをデザインするうえで重要な技術となっています。

視線誘導の効果

視線誘導を意識してデザインをすると、情報の重要度に応じた順序でユーザーが回覧するよう、意図的にコントロールすることが可能になります。

それにより、ユーザーはストレスなく画面を閲覧・巡回・操作できるようになるため、サービスに対するアクセス頻度や滞在時間が自然と高まり、情報の伝達度も高まります。

視線誘導の目的

視線誘導には大きく２つの目的があります。

ユーザーに情報を認知させる

ユーザーが注目している場所から注意を逸らし、より誘導したい場所に視線を移動させることで、狙い通りの効果へと導きます。

ユーザーの視線移動をサポートする

ユーザーに対して次にどのようなアクションを行えば良いかを知らせ、その通りの移動にスムーズに導きます。
モーションエフェクトを使ったゲームのUIデザインなどでこの手法が多く使われています。

視線誘導の4つの形

視線誘導にはいくつかの代表的なパターンがあります。
その中で特に重要となる４つの視線の動きについて解説します。

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

グーテンベルク・ダイヤグラムとは「均等に配置された情報を見る時、視線は左上から右下に流れていくように習慣づけられている」とするパターンです。

15世紀に活版印刷技術を発明したとして知られるヨハネス・グーテンベルグの名前からその名がつけられました。
読書などによって視線が左から右へ、上から下へ無意識に移動することから「読書重力」とも呼ばれます。

Z型

「Z型」は、ユーザーの視線が左上、右上、左下、右下の順番に「Z」の文字を描くように動くとする考え方です。
このラインにそって情報を配置することで、理想とする効果へスムーズにユーザーを導くことができます。

グーテンベルク・ダイヤグラムと類似した点もありますが、Z型は印刷物よりもWebに適応した考え方であり、実際、Webサイトの玄関口ともいえるトップページがZ型のレイアウトで組まれることは非常に多くなっています。

F型

「F型」は、左上から始まる点では他のパターンと同じ考え方ですが、左上から右上に視線を移動させ、左に視線を戻し下に向かって視線を移してから、再度右方向に読み進めるを繰り返していき、アルファベットの「F」を描くような順番で視線が動くとする考え方です。

F型はリピーターによく見られる視野の動きとされており、見落とした内容を確認する場合に多く見られます。
また、商品説明のテキストが中心であるサイトや、文字の多いニュースサイトの多くがF型レイアウトになっており、テキストが多いページやコンテンツを読ませたいサイトに向いています。

N型

「N型」は、ユーザーの視線が右上→右下→左上→左下とアルファベットの「N」のように動くことからこのように呼ばれており、日本語で書かれた新聞や雑誌など、縦組みの書籍に多く用いられています。

その他の視線移動の考え方

「グーテンベルク・ダイヤグラム」「Z型」「F型」「N型」の４パターンだけでなく、画像の大小や文字の太さ、色や形、数字などによっても視線を誘導する方法があります。

画像の大小や文字の太さ

人が画面を見て最初に注目するのは大きな図柄や文字です。
さらに、細いものより太いものに視線を移動させる傾向があり、これらは重要な情報を伝える見出しフォントなどに応用されています。

色や形

均一に情報が配置されている場合、人は無意識に同じ色や同じ形を探し出し視線を移動させる傾向があるため、注目させたいグループ内の文字の色を統一したり図柄の形を同じにしたりすることで、視線誘導の効果を発揮させることができます。

デザインの観点では、同形・同色を繰り返し使うことで全体に統一感や一貫性を感じさせることができます。

順序

数字は世代や国籍を超えて認識できるものであり、数字を順に辿っていくことは無意識の視線誘導となります。
また、数によって重要度に格差もつけることもできます。

Webデザインにおける視線誘導は非常に重要

視線誘導がうまくいっていないWebデザインはユーザーにストレスを与えるだけではなく、企業など情報提供者の目的にも悪影響を及ぼします。

また、複雑な構造や分かりにくい画面構成がなされていると、サービスの追加や機能拡張のたびに改修が必要となり、コストが増大します。

人の視線の動きは無意識に生まれるものですが、この動きを理解してデザインすれば、ユーザーはストレスを感じることなく必要な情報に触れることができます。

また企業にとっても、Webサイトの目的を達成しCVをアップさせることにつながりますので、視線誘導はデザインを行う上で極めて重要な要素であるといえるでしょう。

まとめ

ここでは、Webサイトなどをデザインする場合に重要となる視線誘導について、その種類や効果、ユーザビリティの改善などについて紹介しました。

視線誘導を意識したデザインはユーザビリティの改善において基本的な指標です。
ユーザーが利用している様子を分析してさらにテストを重ね、課題を解消しながら最適化していくと、より使い勝手がよく美しいWebサイトになります。
新しいサイトデザインなどを行う場合に参考にしていただければと思います。

また、近年のWebサイトの構築において新たなトレンドとなっているのが、動画を活用した視線誘導です。
人は静的なものより動的なものにまず視線を引かれるといわれており、魅力ある動画を効果的に配置することで、よりスムーズにユーザーをCVへと導くことができます。

Webサイトの視線誘導、またWeb広告からの流入にも大きな効果を発揮する動画をぜひ取り入れてみてはいかがでしょうか。