- 公開日： 最終更新日：
視線誘導の法則とは？3つの法則とさらに効果的なWebデザイン作成法
ホームページを閲覧しているユーザーは、上から順番にページを読んでいるわけではなく、一定のルールに基づいてコンテンツを見ています。
ユーザーが行う一定の閲覧ルールのことを視線誘導と言い、その法則性を理解して、企画やワイヤーフレーム、デザイン作成を行うことで、重要なポイントを読んでもらいやすいホームページへと成長します。
当ページでは、視線誘導の法則とは何か、3つの法則、Webデザイン作成のポイントを解説します。
視線誘導の法則とは
視線誘導の法則とは、ユーザーがコンテンツを閲覧するときのルールです。
訪問者が上から順番にコンテンツを見ていると考えてしまうと、コンテンツの優先順位を間違えてしまい、掲載場所がユーザーの理想と異なってしまうので、ホームページの成果を十分に発揮しづらくなってしまいます。
そのため、成果が出るホームページを制作したい方は、視線誘導の法則を理解しなくてはならず、ユーザーの視線に合わせてコンテンツを配置することで、最大の成果を実現できるようになります。
視線誘導は、難しい内容になっておらず、3つの法則が存在しているので、それらを理解するだけで充分に高い効果を発揮できます。
視線誘導の3つの法則
視線誘導の3つの法則を解説します。
Zの法則
ホームページの視線誘導でもっとも有名なのがZの法則です。
アルファベットのZの形に沿って訪問者の視線が動くので、左上から右上、左下、右下の順番に重要なコンテンツを配置することで、ユーザーが読みやすいと感じるホームページへと成長します。
Zの法則は、もともとはホームページではなく、チラシやパンフレット、ポスターのデザイン作成で利用されていて、今なお代表的な視線誘導の法則となります。
Fの法則
現在のホームページでは、Fの法則を考えることが一般的です。
Fの法則では、左上から右上、少し下がり左から右へとユーザーが閲覧していることを想定したコンテンツ配置を行うことで、読みやすいホームページへと成長します。
ホームページの閲覧方法として、もっともオーソドックスな考え方ですが、Fの法則を理解しているといないでは、コンテンツの配置場所に大きな差が生まれるので、最低限の知識として理解していく必要があります。
ちなみにFの法則には、左上から左下への縦線もありますが、気にしなくて良いでしょう。
Nの法則
これまで多くのホームページ制作で提案をしてきましたが、Nの法則をご存じだったお客さまは、ほぼ0になっていました。
Nの法則では、右上から右下、左上、左下へとユーザーが閲覧することを想定したコンテンツ配置を行うことで、スムーズに重要なコンテンツを閲覧してもらうことが可能です。
Nの法則は、雑誌や書籍で利用される視線誘導の法則で、あまりホームページで利用することはありませんが、書籍っぽいデザインのホームページでは利用するケースもあります。
訪問者の視線を誘導するWebデザイン作成のポイント
自社のホームページに最適な視線誘導の法則を理解した後、さらに訪問者が自然と重要なコンテンツを見てしまうにWebデザイン作成のポイントを解説します。
文字サイズを使う
オーソドックスな対策ですが、文字サイズを使うことで、訪問者の視線を操作することができます。
ホームページで利用されている通常の文字サイズよりも大きくすることで、自然とユーザーは大きな文章に目を向けてしまいます。
ホームページによくある事例として、見出しの文章を本文よりも大きなサイズにして、上部の文章に飽きたユーザーの視線を見出しに向けることで、離脱される可能性を下げる対策があります。
また、ホームページによっては、重要な数字を大きく表示させて、ユーザーの視線を向けて、その周りにある重要な文章を読んでもらう対策を行うこともあります。
色を使う
上記は制作実績の東京恵比寿にある治療院のホームページです。
重要なコンテンツだけに、目立つ色を使うことで、訪問者の視線を操作することができます。
ホームページでよくある事例は、グローバルナビゲーションの問い合わせや予約だけ色を使い、ページを開いた訪問者に自然とコンバージョンリンクがあることを認識させる対策です。
ホームページに訪問してすぐにグローバルナビゲーションからコンバージョンページへと移動してくれるケースはありませんが、色を使いユーザーの視線を向けることによって、ページを読み終わったユーザーが、どこにコンバージョンページへのリンクがあるかを記憶している可能性が高くなります。
色なら何でも良いわけではありませんが、Webデザインとのバランスを考えた配色を行うことで、訪問者の視線を操作することが可能になり、ホームページの成果数を高める対策として利用が可能です。
円を使う
訪問者は円の形をしたデザインに視線を向けてしまう傾向があります。
ホームページでよく見る事例としては、重要な数字を円の中に入れてユーザーが数字を見落とさないようにしたり、特徴コンテンツで円の中に特徴の文章を入れる対策法です。
当社のホームページ制作で利用頻度が高いのが、トップページのメイン画像内で円を使い、その企業の魅力を打ち出す対策法になり、メイン画像内は多くの要素が存在するので、円を利用して強調しています。
もちろん、訪問者の視線を操作したいからと言って、なんでもかんでも円の中にコンテンツを配置すると、効果が薄れるので、Webデザインとのバランスが重要になります。
視線誘導の法則のまとめ
視線誘導の法則を解説しました。
視線誘導においては、どのようなレイアウトやデザインのホームページを制作するかによって、使い分けることが大切です。
一般的なホームページであればWebデザインや目的などからFかNの法則を利用して、雑誌っぽいWebデザインであればNの法則を利用することで、ユーザーが読みやすいホームページと認識してくれます。
ホームページ制作会社から提案されたワイヤーフレームやWebデザインがピンとこないとお悩みのWebマスターは、視線誘導の法則を含めた改善依頼を行うことで、理想通りのレイアウトを提案してくれるでしょう。
