ヒートマップ分析

ヒートマップ分析とは

ヒートマップとは、Webページ上でユーザーがどこをクリックし、どこまでスクロールし、どこに視線を向けているかを色の濃淡で可視化したツールです。GA4の数値データだけではわからない「ユーザーの行動パターン」を直感的に把握できます。

ヒートマップ分析

---

主要ツール比較：Clarity vs Hotjar

Microsoft Clarity（推奨：完全無料）

MicrosoftのClarityは完全無料でセッション録画・ヒートマップ・ダッシュボードをすべて提供する最強のコスト効率ツールです。

💡 Clarityの導入は5分で完了します。ClarityのサイトでプロジェクトをつくりトラッキングコードをGTMに貼るだけです。中小サイトから大規模サイトまで、まずClarityを入れることを強くおすすめします。

Hotjar（有料・機能豊富）

HotjarはLPO専門ツールとして業界標準の地位を持つサービスです。無料プランもありますが、記録できるセッション数には上限があります（上限や料金は改定されることがあるため、最新の情報は公式サイトで確認してください）。

⚠️ 初めてヒートマップを導入する場合はClarityから始めましょう。無料で十分な機能が揃っており、使い方に慣れてから必要に応じてHotjarに移行する判断ができます。

---

ヒートマップ3種類の見方と改善判断

クリックマップ

クリックマップはページ上のどの要素がクリックされているかを集計したものです。赤〜黄色が多クリック、青が少クリックを示します。

分析のポイント

• ◆CTAボタンのクリック率が低い → ボタンの色・サイズ・文言・配置を変更する
• ◆クリッカブルでない画像や文字がクリックされている → リンクを追加するかデザインを修正する
• ◆ナビゲーションやロゴへのクリックが多い → 必要な情報がLP内で見つからない可能性がある
• ◆複数のCTAがある場合、どのCTAが最もクリックされているか → 効果的なCTAの位置を把握する

スクロールマップ

スクロールマップはページのどの位置まで閲覧されたかを、ユーザーの割合（%）で示したものです。ページ上部ほど閲覧率が高く、下に行くほど低くなるのが一般的です。

分析のポイント

• ◆スクロール率50%付近で急激に閲覧者が減少する → そのポイントにCTAを追加するか、コンテンツを整理する
• ◆CTAボタンが配置されている箇所のスクロール率が低い → CTAをページ上部に移動させる
• ◆スクロール率がページ全体を通じて緩やかに低下 → コンテンツの順序が適切、改善は軽微でよい
• ◆70%以上スクロールしているユーザーが多い → 離脱理由がスクロール不足ではなく他にある

💡 「CTAはファーストビューに必ず入れる」のが鉄則です。スクロールマップで50%到達率を見て、CTAが50%以下の位置にしかない場合は、ファーストビュー直下にもCTAを追加しましょう。

アテンションマップ

アテンションマップはユーザーの視線や注目度の分布を可視化したものです。マウスの動きや滞在時間をもとに推定されます。

分析のポイント

• ◆重要なキャッチコピーやベネフィットが見られていない → テキストサイズ・色・配置を見直す
• ◆装飾的な画像に注目が集まり、テキストが見られていない → 画像を削減しテキストを前面に出す
• ◆ページの右側・下部への注目が薄い → 重要な情報は左上・中央に集約する

---

LPでヒートマップを見る手順と改善例

ランディングページ（LP）は、1ページの中で「読む→納得する→申し込む」まで完結させるページです。そのため、ヒートマップは上から順に、どこで読むのをやめたかを確認するのが基本です。

見る順番は「ファーストビュー→中盤→CTA」

1. ◆ファーストビュー（最初に見える範囲）：スクロールマップで、ファーストビューの直後に大きく人が減っていないかを確認します。ここで半分近くが離脱しているなら、キャッチコピーやメイン画像が、広告や検索で期待した内容と合っていない可能性があります
2. ◆中盤（特徴・実績・料金）：熟読されている（色が濃い）部分と、読み飛ばされている部分を確認します。読まれていない段落は、短くするか、順番を入れ替える候補です
3. ◆CTA（申込ボタン）の位置：ボタンがある位置まで、どれくらいの人がスクロールしているかを確認します。到達率が低い位置にしかボタンがなければ、もっと上にもボタンを置きます

視線の動き方を知っておく

人の視線は、ページの種類によってある程度決まった動き方をします。ヒートマップを見るときの目安になります。

• ◆Fパターン：文章が多いページでは、上の数行を横に読み、その後は左側を縦に流し読みする
• ◆Zパターン：画像や要素が少ないページでは、左上→右上→左下→右下とジグザグに見る

LPでは、**左上〜中央に一番伝えたいこと（誰の・どんな悩みを・どう解決するか）**を置くと、見落とされにくくなります。熟読エリアを色で表示するヒートマップ（ツールによって「アテンション」「熟読エリア」などと呼び名が違います）を使えば、狙いどおりに読まれているかを確かめられます。

---

自動検出される問題パターン

Clarityは以下の問題パターンを自動検出してフィルタリングできます。

怒りクリック（Rage Click）

同じ要素を短時間に3回以上連続クリックしている行動です。ユーザーがフラストレーションを感じていることを示します。

原因として多いのは：リンク切れ・ボタンの反応が遅い・クリッカブルに見えるが動かないUI要素

対処法: 怒りクリックが多いページ・要素を特定し、リンク修正・UI改善・読み込み速度改善を実施する。

デッドクリック（Dead Click）

リンクでもボタンでもない要素がクリックされている行動です。ユーザーがそこにリンクがあると誤認していることを意味します。

対処法: 下線がついたテキスト・青い文字・ボタンのように見えるデザインを修正するか、実際にリンクを追加する。

---

セッション録画の活用

ヒートマップの集計データに加えて、実際のユーザー操作をビデオ形式で確認するセッション録画は質的分析として非常に有効です。

⚠️ セッション録画は個人情報に注意してください。Clarityはデフォルトでパスワードフィールド・クレジットカード番号は自動マスクされますが、プライバシーポリシーへの記載と必要に応じた追加マスク設定を行いましょう。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆Clarityを導入する: 担当するLPにMicrosoft ClarityのトラッキングコードをGTM経由で設置し、正常にデータが取得されていることをClarityダッシュボードで確認する。
2. ◆クリックマップを分析する: 1週間後のクリックマップを開き、CTAボタンのクリック率を確認する。クリック率が低い場合、改善仮説を3つ立案する。
3. ◆スクロールマップを分析する: スクロール率が急激に落ちるポイントを特定し、その位置とCTAの位置を比較する。CTAが低い位置にある場合はファーストビューへの追加を検討する。
4. ◆セッション録画を5本見る: フォームを開いたが送信しなかったユーザーのセッション録画を5本確認し、共通する離脱パターンをメモする。

📝まとめ

ヒートマップは、GA4の数値データだけではわからないユーザーの行動パターンを視覚的に把握するツールです。Clarityは完全無料でヒートマップ・セッション録画・怒りクリック検出を提供する最初の選択肢として最適です。クリックマップでCTAへの誘導を確認し、スクロールマップでCTAの位置を最適化し、アテンションマップで重要コンテンツの視認性を改善する、という順序で分析を進めましょう。次のレッスンではファネル分析によるボトルネック特定を学びます。

---

よくある質問

LPのヒートマップでは、まずどこを見ればいいですか？

最初はスクロールマップで、ファーストビューの直後とCTAボタンの位置まで、どれくらいの人が残っているかを見ます。大きく人が減っている場所が、最初に直すべき場所です。

ヒートマップは無料で使えますか？

使えます。Microsoft Clarityは無料で、クリック・スクロールのヒートマップとセッション録画まで使えます。まずは無料のツールで分析に慣れ、必要になったら有料ツールを検討するのがおすすめです。

ヒートマップの分析には、どれくらいのアクセス数が必要ですか？

明確な決まりはありませんが、数十件程度では偏りが大きく、判断を誤りやすくなります。目安として、1ページあたり数百セッション以上たまってから傾向を判断すると安心です。