ウェブ解析における群衆の知恵への挑戦（パート 2） — ヒートマップ

【1号につき1文】誰もが時間に浸り、過ぎ去る年月に流されていく。人々は一生をかけて時間と戦っています。私たちは恋愛や友情にしがみつきたいのですが、これらの感情は人に頼ることでしか生き残れず、各人自身も時間の経過とともに絶えず崩壊し、沈んでいきます。死んだり、人生から抜け落ちたり、私たち自身が変わったりするのです。 —プルースト

[はじめに] 前回の記事では、直帰率に関する一般的な見解を詳しく説明し、「多すぎるのも少なすぎるのも悪い」という真実を皆さんに説明しました。直帰率が低すぎるのはよくありませんし、高すぎるのは技術的な理由によるものである可能性があります。今回は、私たちの友人たちが特に気に入っているもう 1 つのツール、ヒート マップについて見てみましょう。ヒートマップで、世間の常識に関する「ちょっとした誤解」を見てみましょう。

【文章】

「一枚の写真は千の言葉に値する」というのは、ウェブサイト分析に関してはまさにその通りです。ヒートマップの優れている点は、ユーザーがページのどの部分に興味を持っているかが非常に明確にわかり、非常に直感的であることです。以前、あるクライアントから「何も必要ありません。ヒートマップだけください」と言われました。ヒートマップは読みやすく理解しやすく、情報も豊富であるため、彼はヒートマップを好んでいるのだと思います。

その結果、多くのツールが意図的または無意識的にヒートマップの重要性を強調するようになりました。誰もが、より多くのユーザーの支持を得るために、「他の」ヒートマップ機能よりも優れたヒートマップ機能を作成することに熱心です。

このヒートマップはあのヒートマップではない

ヒートマップは思ったほど単純ではないかもしれません。ヒートマップの最も初期のアイデアは、ユーザーの閲覧行動を研究する専門家から生まれました。実際、ヒートマップはウェブサイトのページ分析にのみ使用されるわけではありません。当初から、ヒートマップは人間の視覚認知を研究するための本格的な科学的手法でした。

つまり、ヒートマップは、Web サイト分析ツールで表示されるヒートマップ (クリック密度マップ) ではなく、ユーザーの視覚的な注目度マップを指します。下記の有名な Google ヒートマップの赤と青のグラデーションは、ユーザーの視線の集中度を表しています。

Google はこのグラフを使って広告掲載の価格を決めているそうです。左側の価格が右側よりも高いのは、左側の方がユーザーの注目度が高いためだと思われます。

したがって、「ヒートマップ」と言う場合は、クリックのヒートマップではなく、人々の視線のヒートマップを考える必要があります。英語では、ビジュアル ヒート マップはアイ トラッキング ヒート マップと呼ばれることが多く、クリック ヒート マップはクリック ヒート マップと呼ばれますが、これらは異なります。

UE デザイナー、Web サイトの UI、およびページの視覚とインタラクションを担当するその他の人々にとって、人間の目の注目のヒート マップは非常に役立ちます。自分が作ったものが人々の目にどのように受け止められるかが分かれば、自分の作品が本当に「目を引く」ものなのか、それとも単に「無視する」ものなのかが分かります。

下の画像は、Facebook のデザイン変更前と変更後のユーザーの注目度のヒートマップです。この改訂が成功か失敗かを一言で表現するのは難しいようですが、ある意味、Facebook はユーザーの注目を「左右対称」にし、「Google ページ閲覧モード」をなくすことに成功しました。

人間の目の注目ヒートマップをどのように取得するのでしょうか? 方法は 2 つあります。

1つ目の方法は「アイトラッカー」を使うというものですが、非常に高価な方法だと言われています。人々はスクリーンの前に座り、横に視線追跡装置を置いて目の動きを記録します。この方法は非常に正確ですが、サンプルの収集が限られており、操作が困難です。

2 番目の方法はアイトラッカーを使用する必要がなく、見た目も素晴らしいです。必要なのはウェブカメラ付きのラップトップだけです。テストを行う際は、カメラをオンにしてユーザーの目の動きを記録し、テスト対象のコンテンツに基づいてユーザーの目の動きのヒートマップを作成します。この方法には、コストが低いだけでなく、特殊な機器を必要とせず、より大きなサンプルを取得でき、地理的な場所による制限も受けないという非常に大きな利点があります。この方法については、海外にeyetrackshopというサービスプロバイダーがあります。その紹介動画を見ることができます。

注目ヒートマップについてはこれまでたくさん話してきましたが、今度はクリック ヒートマップについてお話ししましょう。クリックヒートマップに関しては、実は専門のウェブサイト分析ツールにすでに登場しており、Google AnalyticsやOmnitureの特許ではありません。各クリックによってもたらされるさまざまな効果に応じて、クリック マップは、マウス クリックのヒート マップ、各リンクで発生したコンバージョン数を示すヒート マップ、および各リンクによって生成された最終的な売上を示すヒート マップに分けられます。最もよく使用されるヒート マップは、マウス クリック ヒート マップです。

クリック ヒート マップに関する一般的な常識と誤解を見てみましょう。

クリックヒートマップではできないこと

ユーザーの関心を測定するためにクリック ヒート マップを使用しますが、これは適切です。クリック数が多いほど、ユーザーの関心が高いことを示します。しかし、その逆は必ずしも当てはまりません。つまり、クリック数が少ない場所が必ずしもユーザーの関心が低いというわけではありません。言い換えれば、人々の注目度とマウスのクリック数は必ずしも一貫しているわけではありません。理由は簡単です。注目される場所はクリックできる場所ではないかもしれません。あるいは、ユーザーにとって魅力的で二度見させるような場所であっても、リンクをクリックさせるほどの説得力に欠けているかもしれません（魅力的なものが必ずしも説得力があるとは限らないことに注意してください）。逆に、他の場所でも、最初はあまり注目されなくても、二度見した後に発見し、この場所の価値を認識するユーザーもいるかもしれません。そのため、この場所はクリック数が多くても、注目の的ではないのです。したがって、クリック ヒート マップでは、ページがどのように人々の注目を集めるかを完全に説明することはできません。また、ページを設計する際の重要な要件、つまり、最も重要なコンテンツをページ上で人々の注目を最も引き付けることができる場所に配置し、ユーザーの注目と関心の一貫性を確保するという要件を完全に満たすこともできません。

次の例はこの状況を示しています。左の写真はこのページのクリック ヒート マップ、右の写真はこのページの注目度ヒート マップです。この 2 つの間には明らかな違いがあります。

UE（ユーザー エクスペリエンス）または UI（ユーザー インターフェイス）の場合、2 つの違い（注目ヒート マップとクリック ヒート マップ）を比較することは非常に重要です。ある領域が多くの注目を集める場合、そこに最も重要なコンテンツを配置するのはなぜでしょうか? 逆に、ある領域が多くのクリックを獲得し、その領域が非常に重要である場合、人々の注目が最も集まる場所に配置する必要があります。しかし、注目度のヒートマップがなければ、人々の視線が私たちが望む通りに留まるかどうかは推測することしかできません。

クリック ヒート マップでは実現できないもう 1 つの機能は、人々の注目の移動の軌跡です。ウェブサイト分析ツール製品を担当している友人から、マウスの動きの軌跡をユーザーの注目の軌跡として利用できると聞きました。特に同意しません。私自身の習慣としては、Web を閲覧するときには、まず目を動かして、興味のあるものが見つかるまで素早く連続的にスキャンし、それに応じてマウスを動かします。それは、運転中に車線を変更したり曲がったりするときに、まずバックミラーをチェックして近くに他の車両や障害物がないことを確認してからハンドルを切らないのと同じです。

次の図に示すように、注目ヒートマップは人々の注目の軌跡を追跡できます。

この写真では、注目ヒートマップから、人々の注目を最初に引き付けるのは後頭部であり、次に Web サイトのロゴであることがわかります。これは、左上から右下へスキャンする通常のパターンとは異なります。

注目トラックは、ページを分析するための新しい手がかりを提供します。ページのレイアウトや使用されている画像の違いは、ユーザーの注目度に大きな影響を与える可能性があります。 AB テストと組み合わせると、多くの興味深いストーリーが得られます。 UI の同僚にとって大きな助けとなるでしょう。

注意軌跡マップがない場合は、代わりにマウスの動きを近似することができます。問題は、私が見たツールでは、各ユーザーのマウスの動きを個別に表示することしかできず、動きの全体的な概要は表示できないことです。次の一連の記事では、プロファイル データの重要性を強調しますが、個々のユーザー データの重要性ははるかに小さくなります。

したがって、注目ヒートマップとクリック ヒートマップを組み合わせることができれば素晴らしいでしょう。世界を見る目がすぐに変わります。結局のところ、認識は行動につながり、この 2 つは別々のものであり、別々に測定されるべきです。

クリックヒートマップの監視技術の問題

先ほど、クリック ヒート マップは関心 (注目度) を完全に反映できないことを学びました。次に、一般的なツール (Google Analytics または Omniture の SiteCatalyst) におけるクリック マップの監視に関する技術的な問題について説明します。

最初の問題は、ページ上に同じ URL のリンクが複数ある場合、何もできないことです。

よく注意して見ると、Google アナリティクスのヒートマップのクリック率の一部は実線でマークされ、他の部分は点線でマークされていることがわかります。点線のグリッドは、まったく同じ URL を持つリンクが 1 つ以上あることを意味し、マークされたリンクはそのうちの 1 つです。マークされたパーセンテージは、このリンクのクリック数ではなく、この URL を持つすべてのリンクのクリック数の合計です。現在、Google アナリティクスでは、この URL に同一リンクがいくつあるかを直接マークするという、より優れた方法が使用されています (右の図を参照)。複数のリンクが同じ URL を共有している理由は、Google アナリティクスのページ クリック ヒート マップのすべてのパーセンテージを注意深く合計すると、100% にはならず、100% よりはるかに高い値になる理由を説明しています。

Omniture テクノロジーでサポートされている SiteCatalyst でも同様の問題が発生します。

実際、上記の文中の「クリック」という単語も不正確です。その理由は、Google AnalyticsやSiteCatalystではリンクの実際のクリック数を記録するのではなく、リンクをクリックした後に開かれた該当ページのPVを記録するためです。たとえば、リンクが 100 回クリックされ、このリンクに対応するページが 85 回開かれた場合 (一部のクリックでは実際にページが開かれなかったり、Web サイト分析ツールによって開かれたと記録されなかったりすることはあり得ることであり、正常であると考えています)、ツールは実際には 100 回ではなく 85 回を記録します。

この問題の影響により、2 つ目の問題が発生します。追加の構成 (仮想ページ監視または外部リンク監視) を行わないと、JavaScript ポップアップなどの新しいページを開くことができないリンクや、他の人の Web サイトにリンクするアウトバウンド リンクのクリック数を知ることができません。

そのため、一般的なツールのクリック ヒート マップでは実際のクリック数はわかりません。ただし、リンクがクリックされた後に新しいページが開かれたことを記録するのではなく、マウスの動きを記録するヒートマップ ツールもあります。そのため、Web ページでの実際のクリック数やマウスの軌跡もより正確に記録されます。しかし、そうすることで他の機能が犠牲になるようです。たとえば、通常の Google Analytics ヒートマップでは、リンクのクリックごとに発生したコンバージョン数を記録し、「コンバージョン」ヒートマップを作成できます。売上金額のヒートマップも問題ありませんが、マウスの動きや軌跡を監視するツールには、そのような機能はありません。結局のところ、Web サイトのコンバージョン状況はわかりません。

3 つ目の問題は、ページ上の「カルーセル フォーカス画像」などのリンクが非常に邪魔になることです。このような場合、Google アナリティクスのヒートマップ ツールでは複数の並行した曖昧なデータが提供され、どのカルーセル画像がクリックを生成したかを判断するのは簡単ではありません。さらに、よく見ようとラベルの上にマウスを置くと、ラベルが「いたずらに」逃げてしまいます。全体的に見て、あまり役に立たず、混乱を招きます。

実際、私は、オペレーションの同僚が特に心配しない限り、Google Analytics やその他のツールが提供するクリック ヒート マップを直接使用することはほとんどありません。クリック状況をより正確に示すために、何らかの方法に基づいて自分でヒート マップを作成することを好みます。やり方は？ — 次のセクションを参照してください。

自分で作成したクリックヒートマップの方が信頼性が高い

正確なクリック ヒート マップを作成するには、フロントエンド エンジニアに協力してもらい、事前の作業を行う必要があります。これは非常に重要です。

1. Google アナリティクスの外部リンク監視と仮想ページ監視の追加にご協力ください。何人かの学生から、「これらの JavaScript または Flash インタラクションを監視するために仮想ページではなくイベント トラッキングを使用しているので、イベント トラッキングによって監視されたインタラクションをクリック ヒート マップに表示できますか?」と質問されました。残念ながら、答えは「いいえ」です。このため、時々仮想ページに頼らざるを得ないことがあります。外部リンクのモニタリングについては、公式記事を参照してください: http://support.google.com/googleanalytics/bin/answer.py?hl=en&topic=11014&answer=55527

2. 同じ URL を持つ異なるリンクをマークするのに役立ちます。方法は2つあります。最初の方法は、同じ URL の後に異なるパラメータを追加することです。たとえば、どちらも http://www.chinawebanalytics.cn/about_author/ にリンクしているリンクが 2 つあります。当社の技術担当者は、これらを http://www.chinawebanalytics.cn/about_author/?from=navbar と http://www.chinawebanalytics.cn/about_author/?from=footage に変更して、1 つはナビゲーション バーのリンク、もう 1 つは下部のリンクであることを示すことができます。リンク アドレスはどちらも http://www.chinawebanalytics.cn/about_author/ ですが、Google アナリティクスでは 2 つの異なるページが記録されます。 2 番目の方法は、より高度なようです。これは外国人によって提案されました。彼はプログラムを書き、それをカスタマイズしてページに配置する必要があるだけです。このプログラムが適切に実行されると、GA が同じ URL を持つこれらのリンクをキャプチャすると、そのデータがイベント レポートに格納され、自動的にサフィックスが追加されます。下の図の通りです（クリックすると拡大画像が表示されます）。

詳細な手順については、次の記事をご覧ください: http://www.savio.no/blogg/a/102/how-to-track-multiple-links-to-the-same-url-automatically-in-google-analytics.

上記の 2 つのことを実行すると、ヒートマップを自分で簡単に作成できます。基本的なレポートでは、コンテンツ -> サイト コンテンツ -> すべてのページ -> ナビゲーション サマリーを使用します。このレポートについてはいつも少し残念に思っています。それは、このレポートが特に正確であるようには思えず、サンプルデータが使用されているように思われるからです。上記 2 の 2 番目の方法を選択した場合は、イベント レポートも参照する必要があります。 Omniture の次のページレポートを使用すると、独自のヒートマップを作成するとより正確になります。

場合によっては、クリックについて具体的に指定する必要はなく、上に示すように、エリアのクリック マップを提供する必要があります。場合によっては、クリック マップを人口別にセグメント化して、さまざまなグループの人々の行動特性を取得することもあります。結局のところ、Web 上の人々の最も基本的な行動はクリックです。

最後に、ボーナス: クリック ヒートマップ ツールの作成は、思ったほど複雑ではないようです。クリック ヒートマップ ツールを自分で作成したい場合は、こちらを参照してください: http://css-tricks.com/tracking-clicks-building-a-clickmap-with-php-and-jquery/。

さて、第2話はここまでです。何か分からないこと、理解できないこと、または私が書いた内容が不正確だと感じた場合は、下にメッセージを残して教えてください。 どうぞよろしくお願いいたします。

この記事の著作権は「Web Analysis in China CWA」とその著者である宋星に帰属します。

原題: ウェブサイト分析における一般大衆の知恵への挑戦 (2) - ヒートマップ

キーワード: チャレンジ、ウェブサイト分析、公開、知恵、ヒートマップ、各問題、一文、没入、時間、ウェブマスター、ウェブサイトのプロモーション、収益化