先日、とある企業のご依頼を受け、CMアイトラッキング調査を行った。
※アイトラッキングとは、赤外線で人の視線を可視化する機械のこと。
※パソコン上で番組や該当CMなどを見ていただく調査を行った。

今回の被験者さんは５０歳代、６０歳代の女性４名。

そこから得られた気付きはとても多く、改善に繋がる気付きを得ることができた。

今回の調査では、いくつかダミーとして健康食品のCM、テレビショッピングのCMを入れておいた。
そこから得られた「シニアの動画の見方」について解説していこうと思う。
（本来であれば動画をアップしたいのだが、肖像権の問題があると思うのでそこからの気付きだけでご容赦ください。）

CMは意識してみるものではない。

ウェブサイトが能動的に見なくてはいけない一方で、テレビは、基本受動的に見ている。
特にCMについては流し見ることが多い。

そのため、そのCMが自分に関係がありそうか、
それが直接すぐに自分に伝わってくるかで、見る意識が変わる。

最初に何の商品紹介か解るとその後も見続けようとするし、
すぐに何のCMか理解できないとすぐに飽きてしまう。

動画だけではなく、ウェブサイトでも、何もかもいつもそう思っているが、
人は、考えない。

これは決して、悪い意味ではなく、世の中にはいろいろ考えなくてはいけないことが多すぎて、CMや情報番組について、深く考えることはない、ということである。

その商品や買い物行動に興味を持つのは、
「今見ている情報は自分に必要か、不必要か」という瞬時の判断である。

それでは、自分に必要なものである、と判断してもらうためにはどうすればいいか。

被験者の方の目線を追っていて思ったことは、
情報はシンプルに。そして、情報の粒を大きくしすぎないこと。（個人サイズにすること）
健康食品のCMは、その点、「食べて健康」「まずは電話」
その2点のみのシンプルな情報を解りやすく説明しており、
被験者の方にも「解りやすい」と思われた。

人の顔を見ている・文字情報は重要

アイトラッキング調査を行って、改めて実感したのは「人は、人の顔を超見る！」ということであった。

出演者の顔をじっと見て、手の動きや顔の向きによって目線を動かす。
ということは、同時にいくつも重要なことがテロップなり、演技なりで示されると何を見ていいのか解らず混乱してしまう。

健康食品のCMでは、登場人物が飲み終わって正面を向いたときに
その効果がテロップとして出てくる。
すると、人は、人の顔を見ているがゆえに、その効果・効能の部分に絶対に目が行くのである。

また、テレビショッピングのCMでは、正面を向いて話している人の内容がテロップに出るのだが、
その人がテロップに手を動かすことにより、
耳からも、目からも「重要な」情報をしっかり認識することができていた。

動画では、文字と人の動きとの兼ね合いがとても重要である。

常々、人に考えさえないということを考えているが
今回はCMという、ユーザーと距離が遠いものであったので、
より、考えさせずに、寄り添うということがとても重要だと感じた。

また、動画だからこそ、ついつい見てしまうということもあるため、
そのストーリー、目や手の動きを含めた演技力はCMの反応を左右すると思う。

動画の人気がシニアに根強いからこそ、動画での商品紹介などを考えている場合には、一度ユーザーの目線を確認してもいいかもしれない。

このブログでも何度かご紹介している通り、アイトラッキング分析では以下のようなデータをアウトプットとして用いるのが一般的です。

・視線データ付き動画
・ヒートマップ
・ゲイズプロット

通常こうしたアウトプットは、定性的な分析に用いる場合が多いです。しかし一方で、下の図のようにページ上に分析対象とするエリアを指定する「AOI（Area of Interest）」と呼ばれる機能を使えば、より定量的な分析も行うことができます。

今回は、このAOI分析で得られる主な指標をご紹介したいと思います。

First Fixation系

T60では、1秒間に60回の視点計測を行います。視点が一定の範囲内にとどまったと判断できたとき、それを「注視点（Fixation）」と呼びます。ゲイズプロット画像で言う1つの円がそれにあたります。

1つの注視点の一般的な長さは、読書などで200ミリ秒程度です。

Time to First Fixation

指定したエリアを最初に見るまでにかかった時間。途中で別のページに移動していた場合は、その時間を含まない。

この数値が小さいほど、目につきやすいデザインが施されていると言える。

Fixations Before

指定したエリアを見る前に、どれだけの数の注視点があったか。時間の長短は問わない。

First Fixation Duration

指定したエリアの最初の注視点の長さ。

Total Fixation系

Total Fixation Duration

指定したエリアにある注視点の全ての長さの合計。サッカード（注視点と注視点の間の素早い動き）の時間は含まない。

この数値が大きいほど、注目されたエリアだということがわかる。

Fixation Count

指定したエリアにある注視点の数。

Fixation Duration

指定したエリアにある注視点の長さの平均値。[Total Fixation Duration]/[Fixation Count]でも算出可能。

Visit系

Total Visit Duration

指定したエリアに滞在した最初の注視点開始から最後の注視点終了までの時間の合計。サッカード（注視点と注視点の間の素早い動き）の時間を含む。

この数値が大きいほど、注目されたエリアだということがわかる。

Visit Count

指定したエリアに滞在した回数。

Visit Duration

指定したエリアの滞在時間の平均値。[Total Visit Duration]/[Visit Count]でも算出可能。

Percentage Fixated

テストの全セッションのうち、指定したエリアを1回でも注視したセッションの割合。

この数値が高いほど、多くの人の目に留まるデザインであると言える。

Mouse Click系

Time to First Mouse Click

指定したエリアを最初にクリックするまでにかかった時間。途中で別のページに移動していた場合は、その時間を含まない。

Mouse Click Count

指定したエリア内をクリックした回数。

Percentage Clicked

テストの全セッションのうち、指定したエリアを1回でもクリックしたセッションの割合。

この数値が高いほど、多くの人がクリックするデザインであると言える。

複合系

Time from First Fixation to Next Mouse Click

指定したエリアの最初の注視点が開始してから、そのエリアをクリックするまでの時間。途中で別のページに移動していた場合は、その時間を含まない。

Time from First Fixation to Next Mouse Click (Across Media)

指定したエリアの最初の注視点が開始してから、そのエリアをクリックするまでの時間。途中で別のページに移動していた場合は、その時間を含む。

ランディングページの仮説検証にも有効！

先ほどAOIを設定したサイトで、Total Visit Durationを算出し、グラフにした例がこちらです。各エリアがどれだけ注目されていたのか、一目瞭然です。

AOI分析は、問題発見というよりは仮説検証に適しています。

「このバナーは、ちゃんと見てもらえたのか？」
「どのくらいの時間、見られていたのか？」等々。

まずはユーザーがサイトを見たり使ったりする様子を観察し、そこで出た疑問や課題について、AOI分析でさらに検証するという使い方が適切です。数字で比較ができるので、説得材料としても適しています。

特に、縦に長いランディングページなどについては、各要素がどれだけ認識されたのか、アクセス解析だけではわからないことが多いので、こうした視線分析アプローチがとても有効であると言えます。

視線分析を含めたユーザーテストのコーディネートについては、ぜひご相談ください。

参考リンク

・シニアを引きつける！購買意欲を高めるキャンペーンサイトの黄金パターン | マミオン有限会社

先日リニューアルされた「はてなブックマーク」。

大幅なデザイン変更に対し、ネット上では賛否が分かれているようです。

【参考記事】
・はてなブックマークのリニューアルがいけてない5つの理由 - enator's blog
・はてブリニューアル賛成論

個人的には「あぁ、見づらくなっちゃったな…」と感じましたが、何となく不満を訴えても仕方がないので、今回はその原因をマミオン得意の「アイトラッキング分析」を用いて考えてみることにしました。

綺麗な「F字型」を見せる旧デザイン

まずはリニューアル前のデザインについて分析ができればよかったのですが、時すでに遅し。代理として、以前のデザインに近い以下のサイトで分析を行ってみました。

Hatebu::Classic - 見慣れたデザインのはてなブックマーク

被験者は、30代男性である筆者1名です。いつものように、ホットエントリーをチェックする行動を行った結果がこちらです。

左側がヒートマップ、右側がゲイズプロットになります。

画像を見ると、各タイトルの部分を順番に閲覧しているため、綺麗な「F字型」が現れているのがわかります。多くの記事の中から、自分の興味ある記事を見つけようとする動きです。

「F字型」は、検索結果の閲覧時にもよく見られる視線の動きです。

【参考記事】
・軌跡は“F”を描く – U-Site

「F字が…描けません」

そして今回のリニューアル後のデザインではどうなったのでしょうか？

同じように、ホットエントリーをチェックする行動を試してみた結果がこちらです。

実際にやってみて、感じたことは以下の3点です。

右側が気になる

本当は「ホットエントリー」だけを次々とチェックしていきたいのに、記事タイトルを読んで視線が右に行ったタイミングで、右カラムの画像やアイキャッチの太線部分が気になってしまいました。

人気の記事の合間に、強制的に別カテゴリの記事を読まされている感覚です。

またカテゴリの見出しも目立たないので、一体何の記事なのか、よくわからないまま割り込まれているように感じました。

ブクマコメントを読んでいない

記事タイトルの間にあるブクマコメント。画像からわかるように、ほとんど読んでいません。

以前実装された「マイホットエントリー」の場合は、自分の知っている人がどんなコメントをしているのかが重要な意味を持っていたのでよく読んでいたのですが、通常のホットエントリーについてはそこまで気になりません。

また字の大きさも潰れるほど小さいので、無意識的に飛ばしてしまっているのかもしれません。

新着エントリのタイトルがガタガタ

下半分にある新着エントリですが、画像のあるものとないもので、タイトルの位置が変わってしまっています。

そのため、横方向にタイトルだけ見ていこうとした場合、視線が上下させられて疲れる感覚が残ります。

アイトラッキングは、「なんとなく見にくい」という感覚を表現できる

今回は時間がなく1名分のデータしかとっていないので、上記のデータはかなり偏った結果だと思います。

しかし、「なんとなく見にくい」という感覚をこうしてすぐにビジュアルに表現して確かめられるのは、アイトラッキング分析の大きな強みだと思います。

ちなみに今回のリニューアルですが、しばらく利用して慣れたあとでは見方も変わってくるはずなので、個人的には引き続き経過を見守りたいと思っています。

マミオンでは1名30000円からサクッとアイトラッキング分析ができるサービスメニューも用意していますので、ご興味のある方はぜひお問い合わせください。

・「テキストが全然読まれていない！」
・「せっかく作ったボタンが全く目に入っていなかった！」
・「エラー表示に気付いてもらえなかった…。」

こういった課題が発見、検証できるのがアイトラッキング分析の強みなのですが、実はこの計測に使うマシンが非常に高価（ベンツが1台買えるほど！）なため、どこの調査会社に依頼してもコストが高くついてしまうのが難点の一つでした。

しかし先日、アメリカの3M社が、Visual Attention Serviceという簡易的な「視線予測サービス」をリリースしました。

画像をアップロードして分析ボタンを押すと、数十秒で結果が返ってきます。

料金は、登録して最初の5枚までは無料、以後1枚$15、10枚$120で利用することができ、1か月使い放題$500、3か月使い放題$800のコースもあります。

こうして安価にアイトラッキングを用いたデザイン検証ができるのであれば、制作者にとっては非常に助かりますね！

今回は、この3Mのサービスの実力と使いどころを確かめてみたいと思います。

たった30秒で、それらしいヒートマップを入手！

まず、試しにマミオンのトップページで分析をしてみました。

こちらが分析前のファーストビュー。

そしてこちらが分析をかけたもの。

おお、思ったより結果が綺麗に出た感じがします。

中段左の人物画像に最も多く視線が集まり、そのまま右側のコピーに流れています。
そして下の3つのメニューも、アイキャッチとなる画像とタイトルがしっかりと見られているようです。電話番号にもしっかり視線が行き届いています。

サイトの設計的には結構うまくいっているのではないでしょうか？

分析の方法ですが、おそらく人の視線が集まりやすい要素（画像、人の顔、目立つ色彩、フォントの大きさ、コントラスト差 etc.）を自動で抽出しているようです。また分析をかける際に、分析対象のカテゴリ（Webサイト、紙媒体、風景etc.）を選択させられるので、そのあたりの補正も入っているのではと思われます。

これだけ手軽にアウトプットが得られるのは、素晴らしいシステムだと思います。

一見よさげなこの3Mのサービス。それでは意地が悪いですが、これまでマミオンで行ってきた実際のアイトラッキングマシンの活用事例と比較し、こうした手段の代わりになるのかどうかチェックしてみましょう。

有効なページとそうでないページの違いは？

こちらは、以前ユーザーテストを行った「椒房庵」さんのサイトです。

左側が、アイトラッキングマシンで採取したヒートマップ画像、右側が「視線予測サービス」での分析結果です。

どちらも、視線が赤線で囲んだコンテンツエリアの商品画像部分に集まっている様子がよくわかります。それに対して、左右のカラムにあるナビゲーションやお知らせのエリアは、相対的に言うと目に入らない傾向が高いということもわかります。

また視線予測サービスは、画像に対する反応が実状よりも過剰な印象を受けます。これはアイトラッキングの方では画面スクロールに合わせて視線が徐々に移動していくのに対し、視線予測サービスの方は長いページを一度に全て分析しているからというのもあるかもしれません。

次は、「e英会話」さんのサイトにある、サービス紹介ページです。

こちらのサイトで実際にユーザーテストを行った際に出てきた課題のひとつは、左上にあるオレンジ色の「申し込みボタン」にほとんど視線が集まっていないということです。一方で右側の視線予測サービスの方では、まずロゴを見て、ボタンを見て、それからコンテンツエリアを見ているように見えます。

視線予測サービスは、ユーザーがこのページを目にするタイミングや他のページとの関係を考慮できないので、こうした「途中のページ」「下層のページ」を分析する際は注意が必要でしょう。

次は、「ジャパネットたかた」さんの入力フォームページで、しかも入力内容にエラーがあって戻ってきてしまった場面です。

実際にテストをしてみると、左側のアイトラッキング画像に示されているように、赤線で囲ったピンクのエラー表示の部分が見られていないことがわかりました。一方で視線予測サービスの方では、近くにある赤いボタンにつられて視線が流れているように見えますし、また最下部の人物画像が異様に目立ってしまっています。

ここまでの検証から言えるのは、3Mの視線予測サービスは、トップページやランディングページなどの「パッと見の判断」が重視されるところであれば、1枚1000円ならトライしてみてもおもしろいのではということです。

しかし一方で、少し複雑なインタラクションが必要なページや、ユーザーが利用する背景の考慮が必要とされる場合には、適切な分析結果を導けない可能性が高いと感じました。

また縦に長いページでは、画面スクロールの影響を正しく織り込むこともできません。そのため、ファーストビューの評価に限って用いる方が安全だと思います。

Webサイト以外の分析もおもしろい！

今回の3Mのサービスが面白いのは、画像を自分で自由にアップロードできるので、Webサイト以外の分析も可能なところです。
例えば、商品のパッケージ、店舗の商品陳列棚、パンフレット、ポスターなどなど。

こちらは、私が撮影してきたコンビニの商品陳列棚の分析例です。

商品パッケージやレイアウトの改善活動に役立ちそうですね。

そしてこちらがパンフレットの分析例です。

特にシニア層と紙媒体の相性は高いので、こうしてデザイン中のものを随時分析にかけながらブラッシュアップしていくのにも活用できそうです。

目的や状況に応じて使い分けよう！

ちなみにWebサイトのヒートマップであれば、ClickTaleやUserInsightなどのヒートマップ分析サービスでも得ることができますが、ヒートマップを見て各要素が「見られた／見られなかった」で一喜一憂していては、何も改善に結びつかないので注意が必要です。

どこをどういう順序で確認していったのか？それはなぜ？という部分を明らかにするためには、以前もブログに書いたのですが、ゲイズプロットを用いた分析が有効です。ちなみに3Mのサービスでもゲイズプロットに近い分析を行うことはできるのですが、こちらはかなり「適当」なもので、分析には使えないと思います。

【参考記事】
・ヒートマップだけで満足していませんか？UXデザインと相性のよい「ゲイズプロット」分析のすすめ | マミオン有限会社

やはり大切なのは、どれかの手段に頼りすぎるのではなく、「目的や状況に応じて使い分ける」ことだと思います。以下に各手段の活用イメージをまとめましたのでご参考にしてください。

またマミオンでは、高いと思われがちなアイトラッキングマシンを使った分析も、1人分3万円からご提供しています。詳しくは下のリンクからどうぞ！

【参考】
・3万円から！かんたんユーザーテストパック | マミオン有限会社

Webサイトを見ていて、そんな経験をしたことはありませんか？

今回、マミオンのスタッフが
あるサイトを使う様子をアイトラッキングで観察していたところ、
そのわかりにくさの原因がうっすらと見えてきました。

Webサイトを使うユーザーは、
あなたが考えているより100倍、お行儀が悪いようです。

ユーザー視線の『理想と現実』を把握して、
あなたも、より「効果的に伝わるデザイン」を作ってみませんか？

今回チェックしたサイト

今回、JR東日本のえきねっとから、新幹線のチケット予約を行いました。

ちなみに、えきねっとは以前からユーザビリティ的に悪名高いサイトなのですが、
雰囲気としては、よく見かけるようなスタンダードなものだと思います。

こちらのサイトで、ユーザー登録を行い、クレジットカード登録を行い、
路線を選び、席を選び、チケット購入手続きまで進めていきます。

「えっ？そっちを先に見るの？」

チケットの予約をしようとしたときに、『トクだ値』という言葉が出てきました。
意味がわからなかったので説明ページに行くと、こんな画像が載っていました。

皆さんは、この画像にある情報を、どういう順番で読んでいきますか？

実際は、この動画のように見ていました。

▼トクだ値！ページを見る視線の様子（約20秒）
//youtu.be/TQ9l8W0nn2I

どうでしたか？想像と一致していたでしょうか。

多分、これをデザインした人は、下の図の「理想」のように
見てほしかったのではないかと思います。

しかし、実際はその次の「現実」のように、
視点の終わり付近の目立つ要素に寄り道し、
あげく逆流してしまっている場合もあるのです。

先に結果を見てその次に背景を見たり、「～だから」なんて言葉を先に目にしたり。
頭に入ってきた情報が、うまく繋がらないんですね。

もう一例見てみましょう。

こちらはチケット購入の最終確認画面の一部で、
受け取り場所についての説明がされています。

実際は、この動画のように見られていました。

▼最終確認画面を見る視線の様子（約15秒）
//youtu.be/0mec-b4xLNU

こちらも、見出しを見たあと、説明文を読み込む前に、
図が気になってしょうがないようです。

地図がありますが、これが一体何なのかは見ただけではわかりません。
そこでやっと説明文に戻って一通り読み、
次に挿絵を見ますが今度はそこから右の図に誘導できていません。

『視線の交通整理』をしよう

情報を横方向に並べ、空白を埋めるようなデザインは、
スペースの制限のある紙媒体時代からの慣習かもしれません。

しかしこうしたデザインでは、「割り込み」や「逆走」が起こっていたのでした。

特に目に負担がかかるディスプレイ上の表示では、
ユーザーは流し読みをするため、この傾向が顕著に出てきます。

トップページなど、何かを選択させる場合には問題ないかもしれませんが、
今回の様な「順序を追って説明したい」場合には、
意図的に『視線の交通整理』をしていく必要があります。

そのためには、視線の開始地点よりも終着地点に注目し、
もし左に戻ってほしいのなら、その近辺には何も置かないようにすべきです。

一番簡単なのは、視線の動きを上下方向に制限してしまうことでしょう。
いわゆる楽天メソッド的なものが優秀なのは、こうして情報を見てもらう順序を
うまくコントロールできているからなのかもしれません。

ちなみに今回のヒントは、プレゼンのスライド作成でも応用できるでしょう。
一枚のスライドに要素を詰め込むのではなく、
多くのスライドを用いて時間差を使って情報の提供順序をコントロールする。

一時期、『高橋メソッド』なども流行りましたが、
情報を確実に意図した順番で送り込むという点で、理解しやすい方法であると言えます。

マミオンでは、あなたのサイトがどうやって見られているか、
アイトラッキングマシンを用いて詳しく分析することができます。

ご興味のある方はこちらのサービス詳細をぜひご覧ください！

参考：UXデザインと相性のよい「ゲイズプロット」分析のすすめ | マミオン有限会社

通常、アイトラッキング調査を行うと、『ヒートマップ』と『ゲイズプロット』の2種類のアウトプットが得られます。

皆さんはどちらに親しみがありますか？

画像：左がヒートマップ、右がゲイズプロット

ちなみにGoogleでの検索ヒット数を比較してみると、ご覧のとおりです。

• 　「ヒートマップ」：約 2,620,000 件
• 　「ゲイズプロット」：約 3,470 件
• 　「heatmap」：約 70,200,000 件
• 　「gaze plot」：約 11,200 件

…もったいない。

こんな良いものが知られていないなんて、非常にもったいない！

『ヒートマップ』は視線分析に限らず用いられる言葉なので単純比較はできませんが、後ほど解説する『ゲイズプロット』の良さが、まだまだ浸透していないのかもしれません。

また最近は手軽にサイトを分析する手法として、User InsightやClick Taleに代表されるように、マウスの軌跡を元にした安価な擬似的ヒートマップ作成サービスが増えたのも、こうした差が出てくる要因だと思われます。

もちろんヒートマップは強力なツールですが、最近盛んに言われている『UX（ユーザー体験）』を追及するのであれば、私は断然ゲイズプロットの活用をおすすめします！

順番に、UXとゲイズプロットの相性がよい理由を見ていきましょう。

ゲイズプロットは、見られた理由が推測できる

ヒートマップに対するゲイズプロットの最大の特徴は、「どういう順序で見られたかがわかる」ということです。

見た順序がわかると何がよいのか？

そこを見る前に、どこを見ていたのかがわかります。
またそこを見た後に、どこを見に行ったのかがわかります。

上の例のヒートマップの方からは、各々のエリアが見られたか否かしかわかりません。
一方で右側のゲイズプロットからは、まず商品画像から視点がスタートし、商品をザッと下まで見た後に、上に戻って絞り込み機能やカテゴリメニュー部分を見ていることが読み取れます。何か探していたのかもしれませんね。

皆さんの中には、こういったアプローチにピンと来る方もいらっしゃるかもしれません。

そう、Webページの「PV」と「参照元」の関係に似ているんです。

アクセス解析において、ページのPVだけをいくらチェックしていてもダメなように、ヒートマップで「見られた」「見られなかった」に一喜一憂していては、効率的な改善には繋がりません。

仮説検証ができるだけで、そこから改善の方向性を見出すのは難しいからです。

UXデザイン、およびアクセス解析に長けた人は、よく分析対象ページの“前後の”URLを調べることで、ユーザーの目的や気持ちがどう動いたかを推測します。ゲイズプロットでは、それと同じようなヒントを得ることができるのです。

テキストを読んでから隣のボタンを見たのか？
目立つボタンに目が行ってから近くのテキストを読んだのか？

ヒートマップ上では同じような「赤色」がついていても、その背景や見た理由は全然違うこともあります。つまり、改善すべき方向性が変わってくるのです。これがわかるのがゲイズプロットの大きな強みです。

ゲイズプロットは、要素間の関係性の強さがわかる

ゲイズプロットのレポートで特徴的なのは、納豆のようにネバネバと引かれた線たち。このおかげで、要素間の関係性の強さが視覚的にわかります。

線が多く密になっているところは、何度も見比べたり、セットで使われることが多い要素でしょう。
対して、線が分断されているところは、一緒に見ることがない、または向こう側は関係ないものとユーザーに判断されているのかもしれません。

上の画像のゲイズプロットを見ると、横方向の線が多く見られます。つまり、セットで確認したい情報が左右離れた場所にあり、視線が忙しく行ったり来たりしていると予想することができます。
ヒートマップの方では、一見、左から右に向かって順調に流れているようにも見えてしまいますね。

冒頭にも掲載した物産展の例では、右カラムのバナーの方への寄り道ができています。これが意図したものかどうかはわかりませんが、メインビジュアルと合わせて大きな三角形が作られています。関連する情報が置かれているのでしょうか。

線が引かれているところは、視線の道です。
この道をどう設計していくのか。

関係性の高い要素を把握し、それをつなぐようにレイアウトしていけば、おのずと「道」ができてきます。

今回の例はショッピングサイトなので複雑な要素はありませんが、例えばSNSなどのコミュニティサービス、またはコンバージョンを狙うトップページやランディングページなどでは、非常に質の高い分析が可能になります。

ヒートマップだけでは、こうした要素間の関係性までつかむには不十分ですね。
ここはまさしくUXデザインと同じ考え方なのではないでしょうか？

ゲイズプロットは、一人ひとりに焦点を当てる

ヒートマップは複数人の視線データを元に色が着けられるのに対し、ゲイズプロットは基本的に一人ずつのシートを出して、そこから検討を始めます。

画像参照：派手な体裁や奇をてらった言い回しは無視される – U-Site

平均を見て判断するのではなく、個人的なコンテキストに寄った行動に注目する。

これはペルソナを始めとしたUXデザイン手法の視点と近いと思いませんか？

アイトラッキング調査におけるヒートマップの場合、特異なユーザーがいるとそれに引っ張られてしまい、その他のユーザーの動きが相対的に薄められてしまう落とし穴があります。
また擬似ヒートマップでも、人数が多くなるほどアウトプットが“平凡な”ものになり、マップ上の黄色や緑の部分は軽視されてしまいがちです。

ユーザー調査を数多くこなしていると思うのですが、「普通の人」や「中間の人」なんていないんです。みんなが特異で、それぞれに背景や事情を持ち、それを薄めて平均化したときに幻の「普通の人」が現れます。このことは常に意識しておきたいですね。

擬似ヒートマップとの使い分けを目指そう！

ここまでゲイズプロットに大きく肩入れしてきましたが、もちろん、ヒートマップの利点もあります。

• パッと見てわかりやすい ⇒ 上司や他部署など関係者の説得に便利
• ビジュアル要素の評価には問題ない ⇒ バナーや広告単体の改善には十分
• 擬似ヒートマップの場合、人数が多いので確度が高い ⇒ 説得力がある
• 擬似ヒートマップなら、安い

またゲイズプロットは、実際にユーザーに目の前で使ってもらう『アイトラッキング調査』を行わないと得られないデータなので、見かけのコストはかなりかかります。

しかし、通常は振り返りインタビューと合わせて実施できるので、デザイン改善に役立つヒントは非常に多く得られるでしょう。
改善の方向性が定義できない状態で弾を打ち続けることは、それは本当に「コストが安い」と言えるのでしょうか？

サイトの規模や改善フェーズにもよりますが、UXデザインという考え方が隆盛のいま、全てを擬似ヒートマップに頼るのではなく、ユーザーを目の前にしたアイトラッキング調査をもっと取り入れていきませんか？
ゲイズプロットやユーザーへの直接インタビューを味方にすれば、きっと今の何倍もの改善アイデアが浮かんでくると思います！

アイトラッキングマシンを保有しているマミオンなら、予算に合わせた調査のご提案が可能です。マシンやテストルームの様子はこちらからどうぞ。

参考URL

• サイトの強み・弱みを可視化する、ヒートマップ9選 | TuiTui
  //tuitui.jp/2010/08/c05-heatmap.html
• ヒートマップで導くユーザーの「キモチ」の仮説： ClickTaleを活用したサイト改善事例 | Web担当者Forum
  //web-tan.forum.impressrd.jp/e/2012/02/23/12189
• アイ・トラッキング VS. マウス・トラッキング « VOYAGE GROUP UIO戦略室ブログ
  //uio.voyagegroup.com/2011/03/08/eye_tracking_vs_mouse_tracking/
• ヒートマップを使ったUI改修｜1 pixel｜サイバーエージェント公式クリエイターズブログ
  //ameblo.jp/ca-1pixel/entry-11204290058.html
• ユーザーのページ内行動の可視化で、問題個所を発見　遷移率などをケタ違いに改善した転職サイト「DODA」 （1/3）：MarkeZine（マーケジン）
  //markezine.jp/article/detail/15200/
• 派手な体裁や奇をてらった言い回しは無視される – U-Site
  //www.usability.gr.jp/alertbox/20070904_fancy-formatting.html

運営責任者さんの視点

まず、被験者はおぶぶ茶苑の販売責任者である松本さんの様子です。

検索で偶然このページにたどり着いたユーザーさんのつもり、という設定で、「かぶせ茶と大地の茶を購入する」というタスクを行ってもらいました。

//youtu.be/Lo6Xt8zeNBU

ページの上から下に向かって満遍なく読み、情報収集しようとしている様子がわかります。

初めてサイトに訪れたユーザーの視点

続いて、こちらのサイトを見たことのない30代男性の視点です。インターネットはほぼ毎日利用している方です。

//youtu.be/YUI9v50hi7U

はじめにサイトの上部のロゴやメニューなどを見て、どんなサイトなのかを把握しようとしている様子がわかります。

次に商品について知りたいと考えますが、ぱっと見てサイトや商品のポイントを把握できません。普通のお茶とどう違うのか、どんな魅力があるのか、画面をスクロールしてざっとながめて特徴を捉えようとします。

スクロールを止めて読んで見たいと感じる部分がないため、視点が止まらずかなりのスピードで読み飛ばされていきます。

なかなかポイントをつかめず、一旦ファーストビューまで戻り、「わからないのははじめてだからだな」と「はじめての方へ」のメニューをクリックしました。今回はユーザーテストですから進めてもらえましたが、ここでページを離脱されてしまう可能性はかなり高いのではないでしょうか。

「はじめての方へ」のページでは、オーナーさんの思いの書かれた画像は流し見されてしまっています（0:37～）。それよりも「おぶぶ茶苑って何？」やQ＆Aのほうが興味を持って見られていました。

理念を伝えることは必要ですが、初めてサイトに訪れたユーザーは、商品情報をより必要としています。まずは商品情報をしっかりと伝え、理念は別の場所で説明できるとよいでしょう。