このエントリーをはてなブックマークに追加

【アイトラッキング】5つのスマホサイトのファーストビューを、3人に3秒ずつ見てもらった

アイトラッキング_スマホファーストビュー_サムネイルPCサイトを構築する際、『ファーストビューを大事にする』ことや、『そのサイトへ興味を持つかどうかは3秒で決まる』といったことを意識される方は多いのではないでしょうか。

スマホサイトの場合も、スクロールがPCよりも簡単になったとはいえファーストビューは重要と考えられているようです。

では、実際にスマホサイトのファーストビューはどこを見られるのでしょうか?ECサイトから3つ、情報ポータル系サイトから2つスマホサイトをピックアップして、3名の方に見てもらうところをアイトラッキングしてみました。

調査方法 / 被験者さん情報

調査方法

スマートフォンで下記サイトをスマートフォンで表示した状態で、画面を見えないよう隠しておき、見える状態にしてから3秒少々で再度隠す。その後、画面を隠して印象に残っている内容をヒヤリングする。
UNIQLO(ECサイト)
Oisix(ECサイト)
爽快ドラッグ(ECサイト)
Yahoo! JAPAN(ポータルサイト)
デイリーポータル Z(ポータルサイト)

被験者さん情報

Aさん:30代女性、マーケティング担当。
Bさん:30代男性、サービス紹介サイト担当。
Cさん:20代女性、マーケティング担当。

 

UNIQLO

ひとつ目のサイトは『UNIQLO』です。

ファーストビューアイトラッキング_UNIQLO
└3秒間で見た箇所のゲイズプロット(Aさん/Bさん/Cさん)

3人ともモデルさんの顔をバッチリ見ていますね。AさんとBさんは比較的早い段階で、Cさんは最後(3秒ギリギリ)で確認していることが、注視点の中の数字からわかります。

写真の中の人が目線を送る方向を、ユーザーも見る傾向にあるという調査結果があります。AさんとBさんが閲覧したモデルさんは顔が左上を向いていたので、今回もその法則が働いたのか、モデルさんの顔の後は左もしくは左上に視点が移動しています。

サイトを見てもらった後の印象は、

Aさん:モデルさんが可愛い。
Bさん:ロゴとモデルさんがいた。
Cさん:1,290円。

といった感じでした。なお、UNIQLOのサイトであることは3人ともすぐに理解できたようです。

 

Oisix

ふたつ目のサイトは『Oisix』です。

ファーストビューアイトラッキング_Oisix
└3秒間で見た箇所のゲイズプロット(Aさん/Bさん/Cさん)

AさんとBさんは見ている箇所が近く、ロゴ部分や中央の2,000円という文字をよく見ています。特にAさんは縦に広い範囲を見ているようです。Cさんはロゴ部分の少し下と、下部の2,000円の文字周辺が中心ですね。

サイトを見てもらった後の印象は、

Aさん:会員1,500万人、2,000円お試し。
Bさん:2,000円。
Cさん:黄色いサイト。

といった内容で、Aさんがとても具体的に記憶できていることがわかります。なお、Oisixのサイトであることはこちらも同様に理解できていたようです。もう少し野菜の写真が見たい…と言った意見もありました。

 

爽快ドラッグ

3つ目は『爽快ドラッグ』です。

ファーストビューアイトラッキング_爽快ドラッグ
└3秒間で見た箇所のゲイズプロット(Aさん/Bさん/Cさん)

3人共共通して、ロゴ部分を特に多く見ている様子がわかります。最上部のテキストはBさんだけ、下部の写真はAさんとCさんが見ています。

残っている印象は、

Aさん:何かの偽サイトのように見えた。上に書いてあるテキストがスペースを取ってしまっている。
Bさん:◯ーソン?◯onta?何か注意を促しているサイト?
Cさん:青汁などの健康食品のサイト?

といったもので、3人ともロゴをしっかり見ていたものの、何のサイトか把握できたのはAさんだけでした。Bさんは名前は知っていたものの違うブランドと勘違い、Cさんはそもそも名前は知らなかったそうです。

 

Yahoo! JAPAN

4つ目は『Yahoo! JAPAN』です。

ファーストビューアイトラッキング_Yahoo!JAPN
└3秒間で見た箇所のゲイズプロット(Aさん/Bさん/Cさん)

AさんとCさんは、どこかに集中して視線が集まるというよりも、画面中央を縦長に見ている様子がわかります(Bさんはアイトラッカーとの相性の都合により、後半の視線がうまく計測できませんでした…)。

残っている印象を聞くと、

Aさん:ニュースの一部が確認できた。情報が少ないと思ったら、上部にアプリのバナーがあった。
Bさん:ニュースのタイトルや、アプリのバナーの存在。レイアウトはとても思い出しやすい。
Cさん:ニュースの一部。

とのこと。Yahoo! JAPANのサイトであることは全員認識できていました。ニュース部分のテキストは、文字が独立していてサイズも大きく目に入りやすいですね。

 

デイリーポータル Z

5つ目は、知っている人と知らない人との差が大きそうな『デイリーポータル Z』です。

ファーストビューアイトラッキング_デイリーポータルZ
└3秒間で見た箇所のゲイズプロット(Aさん/Bさん/Cさん)

共有して見られている箇所はロゴと記事タイトルエリア、中央の写真を見ているのはBさんとCさん、右下の漫画部分を見ているのはAさんとCさんでした。

残った印象は、

Aさん:何のサイトかはよく分からず。住宅情報?右下の漫画の存在。
Bさん:黄色い。知ってるサイトだ。
Cさん:物件のサイト?

というものでした。スマートフォンの場合、サイト名の検索結果からデイリーポータル ZにアクセスするとPC版サイトが表示されてしまうため、中央の写真と記事タイトルが目立ってしまったようです。

 

まとめ

視線が集中する場所

画面のどこかに視線が集中するのか知るために、全てのゲイズプロットを重ねてみました。

スマホサイト_アイトラッキング_ゲイズプロット集合

一般的にサイトのロゴが存在する左上に視線が集中しているのが分かりますが、そこから右下の方へ向けて広がっているような形に見えます。右上に一つ飛び出しているのは、UNIQLOのサイトのメニュー展開ボタンを見ているところですね。

もう少し特徴的な傾向が現れたら良かったのですが、今回のデータに限って言えばあまりそういったものは見られませんでした。

サイトの画面構成によって視線が集まる場所は左右され、あまり視線の集中する場所を意識する必要は無さそうに思えます。

印象に残りやすいもの

人の写真(UNIQLO)、ハッキリ読みやすいテキスト(Yahoo! JAPAN)、内容のわかりやすい目を引く写真(デイリーポータル Z)が、特に印象に残りやすいものだったと思われます。今回は、画面中央のバナーやサイトの背景が黄色いサイトがありましたが、そのように色を押し出すことで色の印象を残すこともできるようです。

 

今回は、スクロールやタップを調査内容に加えませんでしたが、スマホサイトは画面をスクロールされやすい傾向があるという調査結果もあります。画面の小さなスマートフォンにおいてファーストビューで見せられる内容は限られていますから、ファーストビューばかりを意識しすぎず、スクロールしてもらった時の流れまで考えた画面構成を考慮することが理想的かもしれません。

スマートフォンサイトを利用するユーザーをどのようにサイトへ誘導し、そこで何を見てもらいたいのかをハッキリとさせたうえで、アイトラッキングを使ったユーザーテストをすることで、具体的な課題が見えてくると思われます。

 

このエントリーをはてなブックマークに追加

おかいもの研究室のサービスに関して
お気軽にお問い合わせください

▲ ページ先頭へ