アイトラッキングから分かる、サイト改善点発見事例7選

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

photo by Sara Cimino

自社サイトにおけるユーザーの反応が芳しくない、購入に繋がっていない・・・などお悩みの方は多いのではないでしょうか。
「ユーザーの視点で考える」ことが抜けてしまい、自社の言いたいことを熱く語り、コンテンツを盛り込んだサイトを作ってしまっている会社は実に多く見受けられます。
では、「サイトのどこにユーザーは興味を持っているのか」など、ユーザーのサイト上での行動を分析しサイト改善に役立てるには、どのような方法があるのでしょうか。その解決策を提示してくれるのが「アイトラッキング」になります。

そこで今回は、アイトラッキングについて紹介し、自社サイトにおいて多くのお悩みを抱えていらっしゃる皆様に解決の糸口を提供したいと思います。

リスティング広告初心者向けのガイドブック(無料)


▼目次
1. サイト改善点発見事例7選
2. アイトラッキングとは
3. アイトラッキングで分かること
4. 似ている様で全然違う、「ヒートマップ」と「ゲイズプロット」
5. まとめ

1. サイト改善点発見事例7選

ユーザーは大きな、太字のヘッドラインを読む

20140820_01

引用:BLOGOS

ユーザーはヘッドラインが大きければ大きいほど、そして、目立てば目立つほど、読んでもらえる確率は高くなることが、様々な調査によって証明されています
このトピックを追求したThe Poynter Instituteによる調査では、「圧倒的なヘッドラインは、ページを訪れた際に最初に見てもらえることが多い」と結論づけられています。ユーザーに内容を読んでもらうためには、目を引く言葉で目立つように記載することが必要不可欠になります。
引用:BLOGOS

参考:The Poynter Instituteによる調査

モデルの視線は、視聴者の視線を誘導する

この事例は、ヘアケア用品を取扱うSunsilk社の事例です。
モデルの視線による注目度の変化をテストし、モデルの視線が正面を向いている広告と商品に視線を向けている広告で比較した結果、以下のような結果が出たそうです。
モデルが正面を向いている広告では、視聴者のうち6%が商品を閲覧し、一方、モデルが商品に視線を向けている広告では、視聴者の84%が商品を閲覧していました。

この事例から学べることは、モデルの視線は、視聴者の視線を誘導し、重要なメッセージを伝えるのは非常に効果的な方法ということです。
従って、人物写真を使用する場合は、その人物の写真が最も見てもらいたい個所(商品画像など)を見ている構成にしたほうが効果が上がる傾向にあります。
引用:リッチマーケティング

もっとも重要な要素はページの左側に配置する

この事例は、平均的な人がどのようにページを閲覧するのかをアイトラッキングした事例です。

結果、以下の2つのことが検証結果として得られたそうです。
・平均的な人は、10〜20秒の間に、およそ250文字を左から右に読む
・ページの左側を見るのに、全体の69%の時間を費やしている
従って、最も重要な要素はページの左側に配置する必要があることを意味します。伝えたいメッセージや見せたいコンテンツはページの左側に配置することをおすすめします。
引用:リッチマーケティング

多くの余白を設ける

20140820_04

引用:BLOGOS

この事例は、余白(ネガティブスペース)は、ウェブデザインにおける重要な要素の一つである事を表明しています。
上の例では、余白を持つレイアウトが、スムーズに注視を導き、データを効率良く吸収させていることが見て取れます。余白は、スペースの無駄遣いにみえますが、人間の目は、ページの様々要素から、「休む」場所を求める傾向があるため、適度な余白の確保は必要不可欠です。
引用:BLOGOS

また、上記の写真からは画面右側にあるバナー広告が全く見られていないことも見て取れます。ユーザーがバナー広告を「無意識に避ける」ことを覆すのは、難易度が高いということを表しています。
この事例から学べる事は、文字情報を上から詰め込むのではなく、適度に改行し、スペースを設ける方がユーザーにメッセージが伝わりやすいということです。

Google検索結果の画像は視覚的にとても有効

この事例は、Googleの検索結果に表示されるテキストと比較して、写真やビデオが視覚的にどのような影響をもたらすのかを分析した事例です。
明らかに商品サムネイルやビデオサムネイルに注目が集まっていることが見て取れます。
この事例から学べることは、Googleの検索結果に影響を及ぼす、GoogleプレイスやGoogleショッピング、YouTubeなどのサービスが視覚的にもとても有効的ということであり、まだ、これらのサービスを導入していない場合は、ぜひとも、導入を検討した方が良いでしょう。
引用:リッチマーケティング

参考:リッチマーケティング 必見!コンバージョン率アップに役立つ7つのアイトラッキング事例

男性は女性モデルを凝視し、
女性は広告メッセージにも十分気を配る

20140820_06

引用:PRFREAK

この事例はH&Mの水着広告における、男女の注目するポイントを比較した事例になります。
異性という事十分影響していると考えられますが、男性は水着の女性モデルを凝視し、女性は女性モデルだけでなく、周辺の広告メッセージにも着目している事が見て取れます。
引用:PRFREAK

両者に共通していえることは、やはり「顔」に視線が集まっており、顔から下に目線が下がっているという事です。
この事例から学べることは、男性に対しての広告を打つ場合、女性モデルを起用した方が注目度は高まり、何か伝えたいメッセージがある場合、人物の顔の近くに広告メッセージを配置するほうがユーザーに見てもらえる可能性が高まりるという事です。

Facebookのタイムラインでは、写真がもっとも視線を集める

20140820_07

引用:PRFREAK

この事例は、Facebookのタイムライン上に表示されるテキストと比較して、写真がどれだけ注目されているのかを分析した事例です。
引用:PRFREAK

参考:
リッチマーケティング 必見!コンバージョン率アップに役立つ7つのアイトラッキング事例
PRFREAK 【ちょい保存版】ヒートマップ分析、H&Mの水着広告の男女差など9選
BLOGOS アイトラッキング調査で判明した8つの原則
U-Site 派手な体裁や奇をてらった言い回しは無視される

2. アイトラッキングとは

概要

アイトラッキングは、心理学や認知科学などの研究分野でも用いられる分析方法であり、
ユーザーの顔や眼球、角膜反射を赤外線でとらえて、視線の動きをトラッキングする科学的な手法です。
アイトラッキングの技術を用いることで、Webサイトを閲覧するユーザーの視線がどこに向けられているか、どのポイントを注視しているかを科学的に分析することができ、
アクセスログ解析やユーザーインタビューでも抽出できないユーザビリティの問題点を発見し、改善につなげることが可能となります。
引用:MITSUE-LINKS

仕組み

初期の頃は、被験者に専用のゴーグルを装着してもらったり、頭を固定する装置などを利用する必要があったため、ユーザーの検索行動を自然に近い状態でテストするとはお世辞にも言い難いものでした。
現在は技術が進化し、赤外線を用いてユーザーの視線をキャッチする仕組みが主流になっています。そのため、ユーザーは特別な器具を身体に装着する必要もなく、ふだんと同じようにWebサイトを操作するだけで、視線が記録されるようになっています。設定もシンプルで、1分足らずで初期設定を終え、テストを始めることができるので、より自然な状態のユーザーの検索行動を観察することが出来るようになっています。
引用:実践!Webユーザビリティ研究所

参考:
ミツエーリンクス アイトラッキング分析
実践!Webユーザビリティ研究所

3. アイトラッキングで分かること、分からないこと

ではアイトラッキングで分かることと分からないこと、テストから得られるアウトプットに関して紹介いたします。

アイトラッキングでわかること
1)ウェブサイトの「どこ」が見られたか
2)「どのくらい」見られたか
3)「どのような」視線の動きがあるのか

アイトラッキングでは解らないこと
→「どのように考えたか」「失敗原因」はアイトラッキングでは解りません。
1)なぜそこを見たのか(興味があるから見たのか?わからないからよく見たのか?)
2)主観的なもの、気持ち
3)なぜ与えられた課題ができなかったのか
引用:マミオン有限会社

アイトラッキングはユーザー行動を可視化できるため、非常に有用なテスト手法ですが、上記のように完璧ではありません。ユーザーがどう思ってその行動を取ったのかなど、ユーザーの思考や気持ち面に関しては解明ができないのです。
したがって、アイトラッキングとヒアリングを組み合わせてテストを行えば、非常に効果的な調査結果を得ることができます。

参考:マミオン有限会社 アイトラッキング(アイカメラ)について

4. 似ている様で全然違う、
ヒートマップとゲイズプロット

次に、アイトラッキングで得られるアウトプットに関して紹介いたします。
アイトラッキングのテストでは大きく分けて「ヒートマップ」「ゲイズプロット(プロットマップ)」「撮影動画」のアウトプットを得ることができます。

ヒートマップ

図のようにヒートマップ(Heatmap)とは、Webページ上に配置されているボタンや画像といった要素のクリック率やマウスの動きなどの情報を、頻度や程度によって色分けして示した図のことです。Webマーケティングにおいては、ユーザーの動きを色で示し、ページのレイアウト、サイトの使いやすさ広告の出稿位置の検証などに用いられます。

ヒートマップのを利用し、出来ることは主に以下の3点になります。
・入口となる「ランディングページ」内のユーザー行動を検証し、最適化を行う手がかりを得る。
・ページ閲覧時のユーザーの関心や注目点をあぶり出す。
・ページ構成の「仮説」を検証する。
引用:Web担当者Forum

ゲイズプロット(プロットマップ)

図のようにゲイズプロット(プロットマップ)とは、ページ内でユーザーの視線が、どのように移動したか、ポイントで表示したデータです。視線が移動した順番に番号が振られ、視線が留まった秒数に応じてポイントの大きさが変化します。
ゲイズプロットの最大の特徴は、「ユーザーがどういう順序で見たか」が分かることです。ヒートマップでは、各々のエリアがどの程度の時間見られたか否かしか分からないのに対し、
一方で右側のゲイズプロットからは、まず商品画像から視点がスタートし、商品をザッと下まで見た後に、上に戻って絞り込み機能やカテゴリメニュー部分を見ている…などということがが読み取れます。
また、ヒートマップは複数人のデータを元に算出されるのに対し、ゲイズプロットは1人のユーザーの行動を見るという点も異なります。
引用:マミオン有限会社

ゲイズプロットを利用し、できることは主に以下の2点になります。
・ページ上の各コンテンツの相関性が分かる
・ユーザーの行動が順序立てて分かるので、コンテンツの配置が効果的かどうかを知ることができる

以上のように、ヒートマップとゲイズプロットは似ているようで、まったく異なる情報のアウトプットになります。検証したい事象に対し、有効なデータがとれるのはどちらかを見極めた上でテストすることをおすすめします。

参考:
Web担当者Forum ユーザーのページ内の行動を見える化する「ヒートマップ」
@IT アイトラッキング調査の実践
マミオン有限会社 ヒートマップだけで満足していませんか?UXデザインと相性のよい「ゲイズプロット」分析のすすめ

5. まとめ

いかがでしたでしょうか。アイトラッキングに関してご理解頂けたでしょうか。

まだ、一般的にはあまり知名度がない言葉であり、初めて概要を知ったという方も多いかもしれません。しかし、Webマーケティングにおいて、とても有効な検証手段です。
気になっている方は、導入を検討してみてはいかかでしょうか。

リスティング広告初心者向けのガイドブック(無料)

  • このエントリーをはてなブックマークに追加
  • Pocket
The following two tabs change content below.
LISKUL編集部
LISKUL(リスクル)は、ソウルドアウト株式会社の社員によって執筆・運営されています。Webマーケティングの成果改善の役に立つさまざまなノウハウを発信中。
pagetop