ヒートマップ分析でLPを改善する方法｜Clarity・Hotjarの使い方

ヒートマップとは何か

ヒートマップとは、ウェブページ上でユーザーがどこをクリックし、どこまでスクロールし、どこに視線を集中させているかを色の濃淡で可視化したツールです。数値データだけでは見えない「ユーザーの行動パターン」を直感的に把握できるため、LPO（ランディングページ最適化）において非常に有効です。

GA4などのアクセス解析ツールは「何人が来て何人がコンバージョンしたか」という結果を教えてくれますが、「なぜ離脱したのか」は教えてくれません。ヒートマップはその「なぜ」を解明するための補完ツールです。

ヒートマップの種類

クリックヒートマップ

ユーザーがページ上のどこをクリックしたかを可視化します。クリックが集中している箇所は「ユーザーが反応しているコンテンツ」です。逆に、クリックしてほしいCTAボタンへのクリックが少ない場合は、ボタンの視認性・配色・テキストの改善が必要です。

よく見られる問題パターン：

• ◆クリックできない画像や文字に多数クリックが集中している（→ リンク追加を検討）
• ◆CTAボタンよりも上部のナビゲーションにクリックが集中している（→ ナビを削除してLPに集中させる）

スクロールヒートマップ

ページのどこまでスクロールされているかを示します。一般的なLPでは、ファーストビュー（画面上部）から下に行くほど閲覧率が低下します。重要な情報が「スクロール率50%以下」の領域にある場合、多くのユーザーに見られていない可能性があります。

改善の基準：

• ◆スクロール率が急落するポイント（離脱ポイント）を特定し、その直前のコンテンツを改善
• ◆多くの人が読んでいる位置の近くにも、CTAボタンを追加で置く

アテンションヒートマップ・ムーブメントヒートマップ

アテンションヒートマップは、ページのどのエリアが長く表示されていたか（よく読まれているか）を示します。ムーブメントヒートマップは、マウスの動きを記録して、注目されている場所を推測するものです。どちらも視線そのものを測っているわけではないため、目安として使いましょう。名前や対応している種類はツールによって違います。

Clarityの使い方

概要

Microsoft Clarityは、Microsoftが提供している無料のヒートマップ・セッション録画ツールです。費用をかけずに始められるため、まずヒートマップを試したい場合に向いています。

導入手順

1. ◆Microsoft Clarity にアクセスし、Microsoftアカウントでサインイン。
2. ◆「新しいプロジェクト」を作成し、サイト名とURLを入力。
3. ◆発行されたトラッキングコードをサイトの<head>タグ内に貼り付け。
4. ◆WordPressの場合はプラグイン「Microsoft Clarity」をインストールするだけでOK。

主要機能の見方

• ◆ダッシュボード：セッション数・怒りクリック（連打）率・デッドクリック率・スクロール深度の平均を一覧表示
• ◆ヒートマップ：ページURLを選択し、「クリック」「スクロール」「エリア」の3種類を切り替えて表示
• ◆セッション録画：実際のユーザー操作を動画で確認。離脱直前の行動が把握できる

Hotjarの使い方

概要

Hotjarは、無料プランと有料プランがあるヒートマップツールです。アンケート機能（ページ上のポップアップ調査など）があり、行動データと利用者の声を組み合わせて分析できます。無料プランの上限や料金は変わることがあるため、公式サイトで確認してください。

Clarity vs Hotjar の比較

コストを抑えたい場合はClarity、ユーザーへの直接調査やフォーム分析まで行いたい場合はHotjarが適しています。

ヒートマップ分析の改善判断基準

改善優先度の決め方

ヒートマップから改善アクションを導出する際は、以下の判断フローを使います。

1. スクロールヒートマップ → 離脱ポイントを特定
2. クリックヒートマップ → 意図しないクリック集中箇所を特定
3. セッション録画 → 離脱ポイントの前後の行動を確認
4. 改善仮説を立てる → A/Bテストで検証

具体的な改善アクション例

• ◆ファーストビューでのスクロール率が低い：キャッチコピー・ビジュアルの変更、ローディング速度の改善
• ◆CTAボタンへのクリックが少ない：ボタン色・テキスト・配置位置の変更
• ◆フォームの途中離脱が多い：入力項目の削減、エラーメッセージの改善
• ◆特定の画像に多数クリック：画像にリンクを追加するか、クリックを想起させるデザインを変更

ヒートマップ分析の進め方：導入から改善まで5ステップ

ツールを入れただけでは、色のついた画面を眺めて終わってしまいがちです。次の順番で進めると、改善につながる仮説を立てやすくなります。

GA4・ヒートマップ・A/Bテストの役割分担

離脱が多いステップを数字で見つける方法はファネル分析と離脱ポイント特定、テストの組み立て方はABテストの設計と実行のレッスンで解説しています。

分析するときの注意点

• ◆サイトの利用者への説明：ヒートマップツールは閲覧者の行動データを外部のサービスに送ります。プライバシーポリシーなどに、利用しているツールと目的を書いておきましょう
• ◆少ないデータで決めつけない：訪問が少ないうちは、数人の動きで色が大きく変わります
• ◆「よくクリックされている＝良い」とは限らない：押せない画像や文字が何度もクリックされている場合は、迷っているサインです

---

まとめ

ヒートマップはLPOの「仮説発見ツール」です。GA4が「結果」を教えるのに対し、ヒートマップは「原因の仮説」を与えてくれます。まずは無料のMicrosoft Clarityを導入し、スクロールヒートマップで離脱ポイントを特定することから始めましょう。離脱ポイントが見つかれば、改善施策の優先順位が自然と決まり、A/Bテストによるコンバージョン率改善サイクルが回り始めます。

---

よくある質問

ヒートマップは何日分のデータで判断すればいいですか？

決まった日数はありませんが、少なくとも平日と週末を含む1〜2週間分は集めるのがおすすめです。広告の配信を止めた日やキャンペーン中など、普段と違う期間が混ざっていないかも確認しましょう。

ClarityとHotjarは同時に使えますか？

技術的には同時に設置できます。ただし、タグが増えるほどページの読み込みに影響が出る可能性があるため、まずはどちらか1つで始め、必要な機能が足りないときに追加するのがおすすめです。

ヒートマップの結果だけで、LPを直してもいいですか？

ヒートマップからわかるのは「原因の仮説」までです。直したあとに成果が上がったかは、コンバージョン率の推移やA/Bテストで確かめましょう。改善の回し方はLP改善のPDCAとCVR最適化のレッスンで解説しています。

ヒートマップ分析をもっと詳しく学ぶには？

LPOコースのヒートマップ分析のレッスンで、画面の読み方と改善の考え方を順番に学べます。LPOそのものの考え方から知りたい方はLPO基本から始めてください。