Clarityを設置して、データが溜まってきた。
今回はいよいよ、ヒートマップの見方を解説します。
ヒートマップは、お客さんがページのどこに注目しているかを「色」で教えてくれる機能です。
初めて見ると「おお」と声が出るかもしれません。自分のサイトがどう見られているか、初めて実感する瞬間です。
ヒートマップの種類
Clarityには主に2種類のヒートマップがあります。
1. クリックヒートマップ
お客さんがページ上のどこをクリック（スマホならタップ）したかを表示します。
赤い部分ほどクリックが集中している場所。青い部分はほとんどクリックされていない場所です。
「購入ボタンはクリックされているか？」「メニューのどの項目が人気か？」がひと目でわかります。
2. スクロールヒートマップ
お客さんがページをどこまでスクロールしたかを表示します。
ページの上部は赤（ほぼ全員が見ている）、下に行くほど青（見ている人が減っている）になります。
ページのどこまで読まれているか、どの辺りで離脱が多いかが一目瞭然です。
ヒートマップの開き方
Clarityにログインしたら、左メニューから「ヒートマップ」を選択します。
上部で対象のページURLを選択できます。
まず見るべきは、あなたのサイトで一番アクセスが多いページです。多くの場合、トップページか、主力商品のページでしょう。
ページを選択すると、クリックヒートマップとスクロールヒートマップを切り替えて見られます。
商品ページの見方
ECサイトで最も大切なのは商品ページです。
商品ページのヒートマップで注目すべきポイントをお伝えします。
購入ボタン（カートに入れるボタン）はクリックされているか？
クリックヒートマップで、購入ボタンの位置を確認してください。赤くなっていればクリックされています。
もし購入ボタンがほとんどクリックされていないなら、2つの可能性があります。
1つは、ボタンの位置が目立たない。ページの下の方にあって、そこまでスクロールする人が少ない。
もう1つは、ボタンにたどり着く前に「買わない理由」が生まれている。情報不足、価格への不安、送料がわからないなど。
スクロールヒートマップで「どこまで読まれているか」を確認
商品ページのスクロールヒートマップを見ると、ある地点でガクッと読んでいる人が減るポイントがあります。
これが「離脱ポイント」です。
あるアパレルのECサイトでは、商品画像の下にある「素材・サイズ表」の部分で半数以上が離脱していました。
理由を調べると、サイズ表がExcelのスクリーンショットを貼っただけの画像で、スマホでは文字が小さすぎて読めなかったんです。
サイズ表をHTMLのテーブルに作り替え、スマホでも読めるようにしたら、その先の購入ボタンまでたどり着く人が増えました。
クリックされている「意外な場所」がないか？
クリックヒートマップで、リンクでもボタンでもない場所が赤くなっていることがあります。
これは、お客さんがそこをクリックできると思ったのに、実際にはクリックできなかったということです。
よくあるのが、テキストリンクに見える装飾文字や、クリックできそうなアイコン。お客さんは何かを期待してクリックしたのに、何も起こらなかった。
こうした「空振りクリック」が多い場所には、実際にリンクやボタンを設置してあげると、ユーザー体験が改善します。
トップページの見方
トップページのヒートマップでは、少し違う視点で見ます。
ファーストビュー（スクロールしないで見える範囲）に何を置いているか
スクロールヒートマップを見ると、ページの上部（ファーストビュー）はほぼ100%の人が見ていますが、スクロールするたびに人が減っていきます。
ECサイトのトップページでは、ファーストビューから最初のスクロールまでで30〜50%の人が離脱するのは珍しくありません。
つまり、本当に伝えたいことは、ページの上部に置くべきです。
「一番売りたい商品」「今やっているキャンペーン」「お店の特徴」。これらがファーストビューに入っているか、ヒートマップで確認してみてください。
ナビゲーションメニューのどこがクリックされているか
クリックヒートマップで、メニューの各項目のクリック状況を確認します。
まったくクリックされていないメニュー項目があれば、そのラベルが伝わっていないか、お客さんが求めていない項目かもしれません。
逆に、よくクリックされている項目は、お客さんが探している情報がそこにあるということ。導線を強化する価値があります。
ヒートマップを見るときの3つのコツ
1. デバイス別に見る
Clarityではデバイス（PC/スマホ/タブレット）でフィルタリングできます。
ECサイトのアクセスは70〜80%がスマホからです。PC版のヒートマップだけ見ていると、実態とズレます。
まずスマホのヒートマップから見る習慣をつけてください。
2. 期間を揃える
ヒートマップのデータは期間で変わります。セール期間中とそれ以外では行動が違いますし、季節によっても変わります。
「先月と今月」「セール前とセール中」のように、比較する期間を意識して見ましょう。
3. 数字と組み合わせる
ヒートマップは視覚的でわかりやすい反面、「なんとなくの印象」で判断しがちです。
「このボタンがあまりクリックされていない気がする」で終わらせず、GA4のデータと組み合わせて「このボタンのクリック率は2%しかない」と数字でも確認するクセをつけましょう。
次回予告
次回は、Clarityのもう1つの機能「セッション録画」の見方を解説します。ヒートマップが「全員の行動の平均」を見せてくれるのに対して、セッション録画は「一人のお客さんの行動」を丸ごと見せてくれます。
