知ってますか？サイト改善に役立つヒートマップの仕組み ｜ SiTest (サイテスト) ブログ

ウェブサイトを改善するためのヒートマップですが、これはデータを直感的につかみやすくするためのデータビジュアライゼーションの１つの手法です。

様々なデータ解析をしようとしたときに、膨大で複雑な数値の羅列。。。慣れていないと大変ですね。そのようなデータの関連性や連続性、法則、特徴などをわかりやすく直感的に可視化することができるようになるのがデータビジュアライゼーションです。
データを元に他人と共通認識をもったり合意形成をするためにも役にたちます。

さて、百聞は一見にしかず。次の数値データを見てください。

Excelのセルに１～９の数値が羅列されています。

 
これをヒートマップ化してみると・・・・
 

こんな感じに！まとまりや関連性がわかりやすくなりますね。

ちなみに、Excelの「条件付き書式」機能のカラースケールで簡単に色分けすることができるのでレポートなど作成する機会があれば是非取り入れてみてください。

ウェブサイト上でヒートマップ分析をするメリットは下記のような点があります。

・ユーザーがよく見ている部分、見ていない部分が可視化できる
・ユーザーがクリックやタップしている場所が可視化できる

これまでの定量的なアクセス解析ツールでは、サイト全体でのユーザーの動き（例えば流入元や訪問数・PV数・離脱率など）を定量的に把握することができましたが１つのページの中での定性的な動きを把握するのは困難でした。
そこで役に立つのがヒートマップツールです！

ウェブサイトの上に透明のレイヤー（膜のようなイメージ）を載せて、そのレイヤーに色をつけます。
SiTestを含む一般的なヒートマップは、
虹色と同じ並び順で、

赤■　→　オレンジ■　→　黄■　→　緑■　→　青■　→　無色□　の並び順で
データが大きい（多い）　→　データが小さい（少ない）

を表現します。

ウェブサイトでのヒートマップを表示するためのデータを取得するには大きく分類して２種類の方法があります。

１つ目は被験者にゴーグルのような測定機器をつけて実際の目の動きを追って測定するリアルのアイトラッキング

２つ目はウェブサイトにJavascriptのコードを設置して、マウスカーソルや画面タップ状況などのブラウザ操作を記録する方法

それぞれメリット・デメリットがあるので、目的や予算などによって使い分ける必要があります。

アイトラッキング方式は、実際の被験者を集めて、高額な専用機械を用意しなければトラッキングすることができないため、ハードルが高く、そのぶんコストも高いです。ユーザーテストと呼ばれる手法で、ウェブサイトを操作するシナリオを用意してどのような動きをするのかを調査します。実際のお客様のデータではなく、また無意識による操作でもないというデメリットがありますが測定される目線のデータは比較的正確です。

最近ではパソコンのWebカメラを利用したリモートでのアイトラッキングデータからヒートマップを生成するツールも登場しています。

realeye.ioより引用

SiTest (サイテスト)は、ウェブサイト上でのマウスのカーソルの動きや、キーボード入力、スマートフォンでのタップやスワイプの情報を取得してサーバーに送信したものを利用しています。
マウスのカーソルの位置データから生成されたヒートマップがどのように役に立つのか？という疑問を持たれることが多いですが、カーネギーメロン大学教授が2001年に発表した論文によると、マウスカーソルと視線の動きは84%～88% の相関関係にあるということです。実際のお客様の大量のデータを低コストで集めることができるという点がメリットです。

下記のURLはヒートマップを簡単に実装することができるJavascirptライブラリのサイトですが、こちらをみていただければどのような仕組みでヒートマップが表示されるのかイメージしやすいと思います。
https://www.patrick-wied.at/static/heatmapjs/

サイトを改善するために使われるヒートマップの種類をそれぞれご紹介します。

スクロール滞在状況（SiTest内のスクロールヒートマップ機能）

ユーザーのブラウザの一番上から下まででどの部分を何秒表示しているのかをトラッキングして、集計することでウェブページの中でどの部分に平均どれくらい滞在しているかをヒートマップで表示します。赤いところほど滞在時間が長く、じっくりコンテンツを見られていることがわかります。ページの下部で赤くなっている（滞在時間が長い）コンテンツがあれば興味関心が高いのでその情報にアクセスしやすくすることでユーザーエクスペリエンスが改善できるかもしれません。

スクロール到達状況（SiTest内のスクロールデータ機能）

ユーザーのブラウザの一番下がウェブページのどの部分にまでスクロール到達したのかを蓄積して表示します。ランディングページなどはコンバージョンさせるには一番下まで到達させる必要があるので改善のKPIとしてスクロール率利用することができるようになります。

マウスカーソルの滞在状況（SiTest内のマウスグラフィ機能）

トラッキング用のJavascriptコードが埋め込まれたページをユーザーが開くと、マウスカーソルの位置やタップした位置をウェブサイト上の画面の左上からの横軸（X座標）縦軸（Y座標）データとして連続的に記録して表示します。
クリックされていなくても、マウスカーソルが乗った部分が赤くなるため、興味関心が高いコンテンツ、スルーされているコンテンツが明らかになります。

クリック・タップ状況（SiTest内のクリック解析・タップ解析機能）

パソコンの場合クリックされた場所、スマートフォンやタブレットでブラウザ内でタップされた場所やスワイプされた場所・方向などを記録し表示します。
ナビゲーションやリンクの使われ具合や、クリックしても何も起こらない場所でミスクリックなどが起こっていないのかを確認してユーザーインターフェースの改善に役立てることができます。

それぞれのヒートマップがどのような仕組みで、どのようなデータが元になっているのかを把握いただけたかと思います。
ぜひウェブサイト改善にお役立てください！