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