Heatmap

定義

ヒートマップとは、ECサイトやランディングページ上でのユーザー行動を色の濃淡で可視化する分析手法です。クリック、スクロール、マウス移動、タップ、滞在時間などのデータを、実際のページ画像の上に重ねて表示します。赤やオレンジは反応が強いエリア、青や寒色は反応が弱いエリアを示し、まるでページの「体温」を見ているように、ユーザーがどこで熱狂し、どこで離脱しているかを一目で把握できます。

DTC・EC領域では、Google Analyticsのような数値指標だけでは見えない「なぜCVRが上がらないのか」という問いに対して、定性的な答えを提示してくれるのがヒートマップの最大の価値です。

类比

ヒートマップは、店舗の防犯カメラを後から早送りで見るようなものです。

実店舗では、どの棚の前でお客様が立ち止まり、どの商品を手に取り、どこでレジに向かうのをやめたかを、店員が目視で観察できます。しかしECサイトには「店員の目」がありません。ヒートマップは、その失われた観察眼をデジタルで再現するツールです。どの商品画像が「じっくり見られている棚」で、どのCTAボタンが「誰も触らない陳列」なのかが、色で浮かび上がります。

公式・指標の考え方

ヒートマップ単体には決まった計算式はありませんが、関連する指標として以下がよく使われます。

- クリック率（CTR） = 該当要素のクリック数 ÷ ページ表示回数 × 100

- スクロール到達率 = 該当位置まで到達したユーザー数 ÷ ページ訪問者数 × 100

- アテンション率 = 該当エリアの滞在時間 ÷ ページ総滞在時間 × 100

たとえば、あるECサイトの商品詳細ページで以下が観測されたとします。

1. ファーストビューのCTAボタンCTR：2.4%

2. ページ全体のスクロール到達率（最下部）：31%

3. 商品画像エリアのアテンション率：48%

この数字から、「ユーザーの約7割がページ下部のレビューや配送情報に到達しておらず、CVの後押し材料を見ないまま離脱している」という仮説が立ちます。

ヒートマップの種類 比較表

応用シーン

1. 商品詳細ページ（PDP）のCVR改善

ファーストビュー内の「カートに入れる」ボタンCTRが1.8%しかない場合、ボタン位置・色・コピーの変更をA/Bテストで検証します。ヒートマップで「サイズ表を確認するリンク」へのクリックが異常に多いなら、サイズ不安が購入障壁になっているサインです。

2. カート離脱の要因特定

チェックアウト画面で、送料表示エリアにマウスが集中し、その直後に離脱しているパターンが確認できれば、送料の見せ方がボトルネックだと判断できます。

3. LP・広告着地ページの最適化

スクロール到達率が50%を下回るLPでは、ファーストビューにベネフィットとCTAを集約する「Above the Fold」戦略が有効です。

4. モバイルUXの検証

スマホでは親指の届く範囲（サムゾーン）にCTAを置くことで、タップ率が平均15〜25%改善した事例も報告されています。

よくある誤解・落とし穴

- 「赤い＝良い」ではない：赤は反応が多いだけで、それがCVに貢献しているとは限りません。誤タップや迷いのクリックも赤く表示されます。

- データ量が少ないと誤判定する：セッション数が数百程度では、ノイズが多く信頼できる傾向が出ません。最低でも1,000セッション以上を目安にしましょう。

- PCのヒートマップをモバイルに流用する：デバイスごとに操作が根本的に異なるため、必ずセグメント分けして分析します。

- ヒートマップだけで意思決定する：定性データとGA4などの定量データ、さらにA/Bテストを組み合わせて初めて施策の効果が検証できます。

- 個人情報の扱い：セッションリプレイでは入力フォームの内容が映り込む可能性があるため、マスキング設定が必須です。

関連用語

- セッションリプレイ：ユーザーの操作を動画のように再生する分析手法

- A/Bテスト：2パターンを比較して効果を検証する施策

- ファネル分析：CVまでの各ステップの離脱率を可視化

- スクロール深度：ページ内でどこまで読まれたかを示す指標

- マイクロコンバージョン：カート追加や資料請求など、最終CV前の中間行動

- CVR（コンバージョン率）：訪問者に対する購入・申込の割合

ヒートマップは「ユーザーの本音が色で見える地図」です。数値だけでは気づけない小さな摩擦を発見し、CVR改善の打ち手を具体化するための強力な第一歩となります。