ヒートマップとは
ヒートマップとは、Webページのどこがクリックされ、どこまでスクロールされ、どこが長く見られたかを、色の濃さで表す分析の道具です。よく押された所や長く見られた所は赤く、あまり見られていない所は青く表示されるのが一般的です。
「ヒートマップ」という言葉は、表の数字を色で塗り分けた図（遺伝子の解析や株価の一覧など）にも使われます。この記事で扱うのは、Webサイトのアクセス解析で使うヒートマップです。
ヒートマップを使うと、アクセス数の表だけでは分からない「ページの中での動き」が見えます。たとえば、申込ボタンが押されているか、ボタンの位置まで読み進められているか、押せない画像が押されていないか、といったことです。
ヒートマップの種類
ヒートマップには、クリック・スクロール・エリア・コンバージョン・アテンションの5種類があり、知りたいことによって使い分けます。種類の分け方は道具によって少しずつ違いますが、ここでは無料で使える Microsoft Clarity の公式の説明に沿って整理します。
| 種類 | 分かること | 向いている使い方 |
|---|---|---|
| クリック | どこが、何回押されたか | 申込ボタンが押されているか、押せない所が押されていないか |
| スクロール | その位置まで読み進めた人の割合 | 大事な情報やボタンまで読まれているか |
| エリア | 選んだ範囲の中のクリックの合計 | メニューやカードの並びなど、まとまりごとの反応を比べる |
| コンバージョン | 購入などにつながったクリック | 通販サイトで、売上につながった部分を探す |
| アテンション | ページの各部分で過ごした時間 | 長く見られている所、すぐ飛ばされる所を探す |
Microsoft Clarity では、クリックマップはさらに「すべてのクリック」「押したのに反応しないクリック（デッドクリック）」「何度も連打されたクリック（レイジクリック）」などに分けて見られます。Clarity の導入と操作の手順は、Microsoft Clarityの使い方で紹介しています。
ヒートマップの仕組み
ヒートマップは、多くの訪問のクリックやスクロールを集めて重ね合わせたもので、1人の動きではなく「全体の傾向」を表します。1回ずつの訪問を再生して見たいときは、ヒートマップではなく、録画（セッションの記録）の機能を使います。
画面の大きさは人によって違うため、同じボタンでも画面上の位置は訪問ごとにずれます。Microsoft Clarity の説明では、クリックマップはマウスの絶対的な位置ではなく、押されたページの要素（ボタンやリンク）ごとに数える方式を使っているため、画面サイズやレスポンシブのデザインが違っても正確に集計できるとされています。
GA4・Search Consoleとの違い
GA4 は「どこから来て何ページ見たか」、Search Console は「検索でどう表示されたか」、ヒートマップは「ページの中でどう動いたか」を見る道具です。3つは見ている場所が違うので、どれか1つで代わりにはなりません。
| 道具 | 見ているもの | ヒートマップとの違い |
|---|---|---|
| Search Console | 検索結果での表示回数・クリック数・掲載順位 | サイトに来る前の動き |
| GA4 | アクセス元・読まれたページ・成果 | ページの中の位置までは分からない |
| ヒートマップ | ページの中のクリック・スクロール・注目 | どこから来たかや成果の件数は分からない |
GA4 にもスクロールを数える機能がありますが、アナリティクス ヘルプによると、拡張計測機能の scroll は、ページの縦の90%の深さに初めて達したときに記録される1点だけです。ページのどこで読むのをやめたかを見るには、ヒートマップのスクロールマップが向いています。GA4 の用語と画面はGA4とはでまとめています。
読み違えやすい6つの点
ヒートマップは、データの量・端末・期間・ページの変更・動く部品・「見られた」と「読まれた」の違いの6つを押さえないと、読み違えやすくなります。色の印象は強いので、見る前にこの6つを確かめる習慣をつけると、間違った結論を出しにくくなります。
| 点 | 起きること | 対策 |
|---|---|---|
| データの量 | 訪問が少ないと、数人の動きで色が大きく変わる | 期間を延ばし、訪問数を確かめてから判断する |
| 端末 | PCとスマホでは画面の形も読み方も違う | 端末を切り替えて別々に見る |
| 期間 | 長さの違う期間を比べると、多い方が濃く見える | 比べる期間の長さをそろえる |
| ページの変更 | 変更の前後が混ざると、どちらの結果か分からない | 変更した日を境に期間を分ける |
| 動く部品 | スライダーや開閉する部品は、表示された状態が人によって違う | 録画で実際の動きを確かめる |
| 見られた≠読まれた | スクロールで通過しただけでも「到達」に数えられる | アテンション（滞在時間）とあわせて見る |
Microsoft Clarity は、ヒートマップを作るのに最低限のアクセス数は必要ないと説明しています。ただし、作れることと、結論を出してよいことは別です。訪問が少ないうちは、気づいた点を「仮の見立て」として記録しておき、数が増えてから確かめます。
見る前に、確かめたいことを1行で書く
ヒートマップは、見る前に「何を確かめたいか」を1行で書いてから開くと、色の印象に引っ張られずに結論を出せます。何となく眺めると、目立つ赤い所ばかりが気になり、次に何を直すかが決まらないためです。
書くのは「確かめたいこと」「見るもの（端末・期間・種類）」「結果によって決めること」の3つです。決めることまで先に書いておくと、見た後に「面白かった」で終わらず、次の作業につながります。結果を社内や経営者に伝えるときの書き方は、経営者向けWebレポートの書き方で紹介しています。
個人情報の扱い
ヒートマップの道具を入れるときは、入力欄などの個人情報を記録しない設定を確かめ、使っていることをプライバシーポリシーに書きます。ヒートマップや録画の道具は、ページに表示された文字や操作を記録するため、設定によっては入力した内容まで残るおそれがあるためです。
Microsoft Clarity の説明では、入力欄とドロップダウンはどのモードでも隠され、初期設定の「Balanced」では、数字とメールアドレスも隠されます。設定を変えても過去の記録にはさかのぼらないため、導入した時点で確かめておきます。
あわせて、サイトのプライバシーポリシーに、アクセス解析の道具を使っていることと、その道具の名前を書きます。このブログ（のれん）でも、Google アナリティクスと Microsoft Clarity を使っていることを、プライバシーポリシーに書いています。
ヒートマップの道具の選び方
道具を選ぶときは、料金より先に、必要な種類のヒートマップ・スマホとPCの切り替え・録画の有無・個人情報を隠す設定の4点を確かめます。この4点が足りないと、料金が安くても、見たいものが見られないためです。
初めて使うなら、無料で、5種類のヒートマップと録画がそろっている Microsoft Clarity から試すのが手軽です。Microsoft の説明では、Clarity は無料で、アクセス数の上限や有料版への切り替えもありません。のれんでも、Google タグ マネージャーから Clarity を入れて使っています。
よくある質問
ヒートマップは無料で使えますか？
無料で使える道具があります。Microsoft Clarity は無料で、クリック・スクロールなどのヒートマップと録画が使えます。有料の道具には、分析の機能やサポートが加わるものがあります。
アクセスが少なくても意味はありますか？
ヒートマップ自体は作れますが、訪問が少ないうちは偶然の影響が大きいため、結論は急がないほうが安全です。期間を延ばして訪問数を増やすか、気づいた点を仮の見立てとして記録し、録画で実際の動きを確かめます。
スクロールで最後まで到達していれば、読まれたと考えてよいですか？
そうとは限りません。スクロールマップは、その位置を通過した人を数えるため、読まずに下まで流した人も含まれます。アテンション（各部分で過ごした時間）とあわせて見ると、読まれたかどうかを判断しやすくなります。
GA4だけでは足りませんか？
ページの中の動きを見るには足りません。GA4 は、どこから来て何ページ見たか、成果につながったかを見る道具で、ページのどこが押され、どこで読むのをやめたかまでは分かりません。
まとめ
ヒートマップは、次の点を押さえると、読み違えずに使えます。
- ヒートマップは、ページの中でどこを押し、どこまで読み、どこで止まったかを色で表す道具
- 種類は、クリック・スクロール・エリア・コンバージョン・アテンションの5つ
- 多くの訪問を重ねた「全体の傾向」で、1人の動きは録画で見る
- データの量・端末・期間・ページの変更・動く部品・「見られた」と「読まれた」の違いに気をつける
- 個人情報を隠す設定を確かめ、プライバシーポリシーに書く
実際にヒートマップを見て、どこから直すかの順番は、Microsoft Clarityの使い方で紹介しています。
