モデルの視線がユーザーにも影響。サイト内でユーザーを誘導する画像の使い方

アメリカのコンサルティング会社「Nielsen Norman Group（ニールセン・ノーマン・グループ）」が公開したデータによると、ユーザーの多くはサイトを細かく見ていないということが判明しました。 以下はその内容になります。

• 79%のユーザーはサイト内の文章を斜め読みする。

• サイト内の文章を丁寧に読むユーザーは、わずか16%

ユーザーの多くがサイトをしっかり読まずに斜め読みしているということです。

多くのユーザーはサイトを流し読みする

via：https://vwo.com/blog/

この画像のように、多くのユーザーは、よほど興味のある文章以外はサッと流し読みする程度でサイトを閲覧しています。

長い文章のなかに大切な情報を書き込んでいる場合、ユーザーはその情報に気付かない可能性があります。

そのため、ユーザーに必ず読んでもらいたい文章がある場合は、コンテンツの中に埋もれてしまわないように配置などを工夫する必要があります。

具体的には、フォントの色やサイズを変えたり、その部分に背景色をつけるなどの工夫になると思います。

写真のなかのモデルの視線の方向がユーザーにも影響

もうひとつ、こちらも興味深いデータになりますが、ユーザーは写真の中に写っているモデルの視線の先に意識が向くようです。

下の画像は、2パターンの赤ちゃんの写真を使ってユーザーの視線の動きを調べたものになります。

via：https://vwo.com/blog/

左側について説明すると、ページ内で「赤ちゃんが正面を向いている写真」を使用した場合、ユーザーはその赤ちゃんに注目するようです。

右側について説明すると、「赤ちゃんが右側（テキストのある方向）を向いている写真」を使用した場合、ユーザーもその赤ちゃんの視線につられて、その視線の先にあるテキスト部分に意識が向くようです。

この結果によると、モデルの視線がユーザーの視線を誘導するということになりますので、コンバージョン率を重視するサイトの場合は写真のモデルにも注意を払う必要がありそうです。

出典：7 Proven Ways to Improve Website Readability and Boost Conversions

また、検索結果を見ているユーザーの視線の動きをご紹介します。

※赤い丸が大きくなる時は、視線が止まっていることを示しています。

このようにユーザーは、通常とても速いスピードで価値のある情報があるかどうかを判断しようとしています。

ユーザーはどのようにページを見ているのか？

下の画像は、ユーザーの視線の動きを視覚化した実験結果です。

赤色が濃くなるほど、よく見られている部分です。

出典：http://www.useit.com/alertbox/reading_pattern.html

上の画像を見て頂けると分かりますが、ユーザーは全ての記事や画像に目を通している訳ではありません。

一般的にユーザーは、「Ｆの文字」を描くようにページを見る傾向があります。
（場合によっては、Ｚの文字を描く場合もあります。）

出典：http://googleblog.blogspot.com/2009/02/eye-tracking-studies-more-than-meets.html

上の画像は、グーグルの検索結果を見ている人の視線の動きです。

赤色が濃くなるほど、よく見られている部分です。 「Ｆの文字」は、具体的には、Ｆの縦線が基本的な視線の動き（上から下へ進む）ですが、横書きの文章を読もうとするので、Ｆの横線が出来上がります。

それでは、なぜＦの文字のような形になるかというと、ユーザーは特に前半の文章に注目して、前半部分は横書きの文章もしっかり読もうとするためです。

その後、上から下に視線は移動しますが、特に気になる情報がなければ、後半は文章をあまり読まなくなるので、Ｆの文字の形のようになります。

しかも、ユーザーはいままでの経験上、大抵どの部分に重要な情報があるかを知っているので、「Ｆの文字」の縦線が描かれる位置は、サイトのデザインや内容によって異なります。

例えば、 ブログの場合は、一般的に左側にサイドバーがありますが、サイドバーには読みたい記事の内容があるわけではないので、初めて訪問したユーザーはサイドバーに注目せず、主に中央部分の記事に目を通します。

出典：http://www.useit.com/alertbox/reading_pattern.html

上の画像のサイトのように、ブログのようなページや商品紹介ページなどは、主に記事だけが注目され、サイドバーはあまり見られていません。

（ただし、そのサイトを気に入ってもらえると、ページ全体を見てくれるようになります。）

このように、ユーザーはこれまでの経験をもとに、ページの構成を直感的に判断して重要そうな場所だけをまず見ようとするので、あまり一般的ではないデザインや配置をしてしまうと、ユーザーに対して十分な情報や魅力を伝えられない恐れがあります。

なお、「Ｆの文字」はブログのようなデザインや、商品詳細ページのように文章が多いデザインのときに当てはまるものであり、全てのサイトに当てはまるわけではありません。

以上のまとめになりますが、

• 初めてサイトに訪問したユーザーは、たった3秒で、そのページを見るか戻るかを決定する。

• 目を通してもらいたい告知や、クリックしてもらいたいものがある場合は、ページの右側よりも左側に配置した方が効果的

• 特に通販サイトの場合は、できるだけ上部にユーザーの注意を引く言葉や画像を入れると効果的

• ユーザーはページを訪れた際、まず左上に視線がいく場合が多いので、この部分でサイトの魅力や内容を直感的に伝える必要がある。

※ただし、これらは初めて訪問してきた人に当てはまるだけで、いつも見に来てくれるユーザーはどの位置に何があるか知ってくれていますので、問題ありません。

それに、友人などから紹介されたサイトやそのサイトを見たいと思って来てくれたユーザーは、きちんとページを閲覧してくれると思います。