ヒートマップとは？クリック・スクロールの見方と改善点の探し方

ヒートマップは何を色で表す？

ヒートマップは、ページの上に色などを重ね、集計した情報の違いを見やすくする表示です。多くの操作が集まる場所や、ページ内の到達を調べる入口になります。ただし、同じ「赤」でも、クリック回数が多いのか、滞在時間が長いのかで意味が変わります。まず、地図の名前の横にある凡例、単位、集計範囲を読んでください。

種類を一律に三つと覚える必要はありません。製品にはエリア、注意、コンバージョンなど別の地図もあります。使っている画面で、何を集計した色かを確かめることが先です。マウスの移動やクリックは視線そのものではなく、視線計測や利用者への質問の代わりにはなりません。出典：Heatmaps overview

写真に14回のクリック。何を確かめる？

次は、架空のPC商品ページを、架空の1週間で集計した例です。ページ表示は80回、全クリックは46回、そのうちリンクでない商品写真へのクリックが14回という設定です。図では、写真という部品と集計札の関係を見ます。実解析画面や、写真内の細かなクリック位置を再現したものではありません。

原寸画像を開く

「押せると思ったのか」を、確認できる問いにする

仮説の一つは、写真の見た目や周囲の案内から、拡大や詳細へ進めると思った可能性です。ほかにも、画像を見ようとした操作、繰り返しの操作などが考えられます。まず同じ版・端末の実ページを開き、写真の枠、近くの説明、拡大の案内、実際に押したときの動作を確かめます。図のクリックだけを根拠に、写真へリンクを足すことを自動的な正解にはしません。

操作の前後を知る必要があれば、担当者が閲覧権限と利用目的を確認した記録で、対象の部品と前後の操作を限定して見ます。それでも「なぜ押したか」は本人への確認が必要な場合があります。個人情報を広く集めたり、隠されている内容を復元したりする作業を、この記事の手順へ追加するものではありません。

Clarityの「Dead clicks」「Rage clicks」などの分類名も、調べる候補を選ぶ手掛かりです。反応がなかったクリックや短い間の反復といった分類を、人の怒りや個別の不具合原因、送信結果の確定へ広げないようにします。

高さ72%と到達40%は、別の数字

こちらは、別の架空の配送案内ページを、別の架空の1週間にスマートフォンで集計した例です。集計対象は45人、そのうち配送案内の見出しへ到達したのは18人、見出しはページ高さの72%位置にある、という設定です。商品写真の例と同じページ・利用者群でも、改善後の結果でもありません。

原寸画像を開く

この表示だけから、残りの人が見出しの直前で離脱した、配送条件が難しかった、見出しを上へ動かせば売れる、と逆算しません。到達の記録を読むときは、その位置の見出しと前後の説明を、同じ端末条件で実際に読みます。配送条件がどこで初めて説明されるか、写真や余白で長くなっていないか、案内へ進む操作が分かるかを、確認できる問いにします。

Clarityにある平均foldは、集計対象の利用者について、最初に見える範囲の平均的な位置を示すものです。一人ひとりの画面の境界や、そこまでの熟読を保証する線ではありません。地図の高さ、到達人数、平均的な初期表示の位置を区別して読んでください。

比較前に、対象条件とページ内容をそろえる

別の地図と比較するときは、数や色より先に資料の条件を照合します。見る順は、対象URLとページの版、期間、端末、流入や絞り込み、地図の種類と凡例です。複数ページの集計なら、いま見ている一ページの資料なのかも確かめます。

原寸画像を開く

PCとスマートフォンでは段組みや画像の高さが違い、同じ高さの割合が同じ説明を指すとは限りません。割合の線だけを並べるのではなく、商品説明や配送案内などの内容を対応させます。途中でページを変更した期間の集計も、一つの版の結果として重ねないようにします。

色が薄い・記録がない・部品が見えないとき

少ない記録や空の表示を、利用者ゼロ、クリックなし、問題なしへ置き換えないでください。対象URL、収集の範囲、期間、適用した絞り込みと、部品が存在した版かを確認します。地図を生成できることと、比較に十分な量・代表性があることも別です。架空例の80回や45人を、一般的な必要件数や統計的に十分な基準にはしません。

実ページと重ねた地図がずれている場合は、見ているページ表示の作成条件、要素の有無、CSSなどの状態も確認対象です。Clarityの公式資料には、記録による要素の違いや、保存された表示資源の影響が説明されています。表示上のずれをそのまま利用者の操作のずれと判断せず、担当者が原因を限定します。私有資産を公開したりアクセス制限を外したりすることを、標準の解決手順にはしません。出典：Troubleshooting Heatmaps

隠された内容は、分からない範囲として残す

入力内容などが保護されているときは、その文字が読めないまま判断できる範囲にとどめます。Clarityのマスキング設定の変更は、過去の記録へさかのぼるものではありません。見えない情報を補ったり、分析のために保護を解除したりせず、必要な確認と権限・運用条件を別に整理します。本稿は、導入や法令・同意の適合を判定する手順ではありません。出典：Masking content

観測から仮説を作り、変更と成果を分けて確かめる

地図を見終えたら、画面で確認できたことと、理由として考えていることを別に書きます。次のように一つの部品と一つの問いへ絞ると、何を調べるかが具体的になります。

1. 観測を限定する。「写真に14回のクリック」「配送見出しに18人/45人が到達」と、対象・単位・条件を添えます。前者と後者を一人の移動や改善前後へつなぎません。
2. 理由は仮説として置く。「写真を拡大できると思った可能性」「配送の説明を探していた可能性」など、まだ確かめていない理由として扱います。色だけで本人の意図を代弁しません。
3. 次の確認を選ぶ。実ページで案内と動作を照合する、許可された範囲の記録で前後の操作を見る、対象の仕事を知る人に探してもらって説明の受け取り方を聞く、といった方法を問いに合わせて選びます。実際に分かった事実と本人の発言を、推測と分けて残します。
4. 変更する対象を決める。確認された不足に合わせ、写真の案内、配送条件の説明や配置などを具体化します。色を赤くすることや、全ボタンを上へ動かすこと自体を目的にはしません。必要な検証と公開判断は、そのサイトの担当と手順で行います。
5. 成果は別に確かめる。変更後の対象ページ・版・端末・期間と、何を成果と数えるか、分母をそろえます。購入・相談の結果や読者の理解は、地図が表示されたことやクリックが増えたことだけでは確認できません。

架空例では、理由の調査、ページの修正、変更後の成果はいずれも未確認です。全原票は次の補足で確認できます。実製品や凡例の定義も未確認のままであり、図の説明用の色を、実解析の凡例へ補完していません。

GA4で最後のイベントが起きたページやページ間の流れを知りたい場合は、LPの最後のページと、ページ内の到達を分ける調べ方へ分けて読めます。本稿は、ヒートマップの種類・凡例・集計単位から、具体箇所の仮説と次の確認を選ぶことが主題です。

まとめ：色・単位・対象・実ページの順に読む

ヒートマップは、色から良し悪しや原因を即断するための資料ではありません。何を集計した地図か、色の凡例と数の単位は何か、どのページ・版・期間・端末を対象にしているかを確認し、実ページの部品と説明へ対応させて読みます。

写真への14回のクリックは14人の意図ではなく、高さ72%は到達した人の割合ではありません。18人/45人の40%という架空の計算も、読解や購入成功を示しません。別の記録を改善前後へつながず、分かったこと、仮説、次の確認を分けてください。

ヒートマップを含め、会社サイトで調べる範囲と修正する対象の整理に迷う場合はDREEXYへ相談できます。実セッションや個人情報を送らず、対象ページと困っている操作、分かっている条件をお知らせください。対応範囲・費用・実施条件は個別に確認します。Webサイトの調査・改善を相談する