ヒートマップでLPの離脱箇所を直す｜「どこで読むのをやめたか」を見る

「アクセス解析を見ると、ちゃんと人は来ている。なのに、買われない。いったいページのどこで気持ちが離れているんだろう……」

これ、ランディングページ（LP）や商品ページを運営していると、必ずぶつかる壁です。GA4を開けば「直帰率が高い」「滞在時間が短い」とは分かる。でも、ページの“どこ”でお客さんが読むのをやめたのかは、数字の表からは見えてきません。

そこで頼りになるのがヒートマップです。お客さんの視線や指の動きを色で見せてくれる道具で、「ここまでは熱心に読まれている」「この行で、ぱたっと人がいなくなる」が一目で分かります。この記事を読み終える頃には、勘で直していたページを、“ここを直す”と1か所に絞って手を入れられるようになっているはずです。

結論：ヒートマップは「お客さんがどこまで読んで、どこで離れたか」を色で見せる道具。見るのは主に①スクロール（どこまで読まれたか）②クリック／タップ（どこが押されたか）③アテンション（どこが熟読されたか）の3つ。大きく人が減る“崖”を1か所だけ見つけて、その直前のブロックを直す――これだけで、勘に頼った改修が「根拠のある1手」に変わります。

ヒートマップって、そもそも何が見えるの？

ヒートマップは、お客さんの行動を色の濃淡（赤＝多い、青＝少ない）で重ねて見せてくれる道具です。アクセス解析が「何人来て、何%が買ったか」という数の話だとすれば、ヒートマップは「ページのどこで何が起きたか」という場所の話。この2つは役割が違い、組み合わせて初めて「なぜ売れないか」が立体的に見えてきます。

代表的に見るのは、次の3種類です。

• ① スクロールヒートマップ（到達）：ページのどこまで読まれたかを、上から下への色の薄まりで見せます。「50%の人がここまで到達」のように、人が大きく減る“崖”が分かります。これが一番最初に見るべきもの。
• ② クリック／タップヒートマップ（クリック）：どこが押されたかを斑点で見せます。押せない画像が押されている（リンクと勘違い）、逆に買うボタンが全然押されていない、といった食い違いが見つかります。
• ③ アテンションヒートマップ（熟読）：どこがじっくり読まれたかを明るさで見せます。力を入れて書いた説明が素通りされていないか、逆に意図しない場所で迷って立ち止まっていないかが分かります。

最初から3つ全部を読み込む必要はありません。まずは①スクロールで“崖”を探す。これだけで十分に最初の一手が見つかります。

「崖」を探す――どこで人が消えるか

スクロールヒートマップを開いたら、見るのはたった1つ。色が急に薄くなる（＝人が一気に減る）場所です。ここを私たちは「崖」と呼びます。

たとえば、こういう読み取り方をします。

大事なのは、崖を“1か所だけ”選ぶこと。ページには直したい場所がいくつも見つかりますが、一度にあちこち変えると「何が効いたのか」が分からなくなります。一番大きく人が減っている崖を1つ選び、その直前のブロックに集中しましょう。

💡補足：スマホとPCは、別々に見てください。スマホでは画像が縦に大きく積み上がるぶん、PCでは1画面に収まる情報が「ずっと下」に押しやられ、崖の位置がまるで変わります。EC流入の多くはスマホです。まずスマホのヒートマップから見るのがおすすめです（関連：スマホで売れる商品ページの作り方）。

クリックと熟読で「ズレ」を見つける

崖の場所が分かったら、②クリックと③熟読でお客さんの本音とのズレを確かめます。

よくあるのが、「押せないものが押されている」パターン。商品写真や、ただの装飾バナーが何度もタップされていたら、お客さんは「これはもっと大きい画像が見られる／詳細に飛べる」と期待しています。リンクを付ける、画像を拡大できるようにする――それだけでストレスが減ります。

逆に、「買うボタンが押されていない」なら、ボタンが見つけにくい・周りに埋もれている可能性があります。色・大きさ・置く位置（崖の手前にもう1つ置く）を見直します。

熟読ヒートマップでは、力を入れた説明が素通りされていないかを確認します。たとえば、こだわりの製法を長文で書いたのに誰も読んでいないなら、見出しと写真で要点を先に見せる形に変える。逆に、配送欄でみんなが立ち止まっているなら、そこに不安（送料はいくら？いつ届く？）がある証拠です。

ヒートマップを使うときの注意（ここを外すと誤読します）

道具は便利ですが、読み違えると逆効果です。次の3点だけ守ってください。

• データが溜まってから見る：訪問が数十件しかない状態の色は、たまたまの偏りです。最低でも数百セッション、できれば100クリック以上溜まってから判断します。少ないうちは「傾向のメモ」程度に。
• 一度に1か所だけ直す：複数を同時に変えると、効果の検証ができません。1か所変えたら、また数字（コンバージョン率・到達率）が動くのを待って確かめます。
• プライバシーに配慮する：ヒートマップ系ツールには、訪問者の操作を録画する「セッションリプレイ」機能を持つものもあります。氏名・カード番号などの入力内容は必ずマスキング設定にし、プライバシーポリシーに利用を明記しておきましょう（個人情報の取り扱いは、必要に応じて専門家に確認を）。

ツールは無料枠のあるものから有料まで幅広くあります。まずは無料枠で、売上の柱になっている1ページだけに入れて試すのが、失敗の少ない始め方です。

あなたへの影響

• ヒートマップを使えば、「なんとなく売れない」が「◯◯の崖で人が離れている」に変わります。直す場所が1か所に決まると、改修のスピードと精度が一気に上がります。
• 見ずに勘で直し続けると、読まれてもいない場所を磨いて時間を溶かしたり、本当の崖を放置したまま広告費を足してしまったりします。穴の空いたバケツに水を注ぐのと同じです。
• GA4などの数字（GA4でEC売上を見る最初の一歩）で「どのページが弱いか」を絞り、ヒートマップで「そのページのどこが弱いか」を見る。数字とヒートマップの二段構えで、改善は迷わなくなります。

明日やること

1. 売上の柱になっているページを1つ選ぶ（一番アクセスか売上の多いLP・商品ページ）。
2. ヒートマップツール（無料枠でよい）を導入し、まずはそのページだけに設置する。
3. データが数百セッション溜まったら、スマホのスクロールヒートマップを開き、「崖（色が急に薄くなる場所）」を1か所だけ特定する。
4. その崖の直前のブロックを1つだけ直す（見出し・写真・送料表示・ボタンなど）。
5. 直した後、到達率とコンバージョン率が動くのを1〜2週間見て、効いたか確かめる。

チェックリスト

• 見るページを「1ページ」に絞った（あれもこれもやらない）
• スマホとPCを別々に見ている
• データは数百セッション以上溜まってから判断している
• スクロールで「崖（人が急に減る場所）」を1か所だけ特定した
• クリックで「押せないのに押されている／買うボタンが押されていない」を確認した
• 熟読で「力を入れた説明が素通りされていないか」を確認した
• 直すのは1か所だけにした（同時に複数いじらない）
• セッションリプレイを使う場合、入力内容のマスキングとポリシー明記をした

関連テンプレ・ツール

ヒートマップで「どこを直すか」を決めたら、次は具体策です。あわせてどうぞ。

• ▶ スマホで売れる商品ページの作り方 — 崖になりやすいスマホ表示の整え方
• ▶ 表示速度を上げてCVRを改善する — ファーストビューで離脱されるときに最初に疑う場所
• ▶ GA4でEC売上を見る最初の一歩 — どのページが弱いかを数字で絞る
• ▶ カゴ落ち対策チェックリスト — 「あと一歩」で離れる人を取り戻す
• ▶ EC利益計算ツール（利益率 / ROAS / 送料無料ライン / LTV） — 改善で残るお金を数字で確認
• ▶ 売れるECサイトに共通する 商品ページ改善チェックリスト50 — 直す場所の引き出しを増やす

最後に。ページの数字が伸び悩んでいるなら、まずは一番大事な1ページのヒートマップを、今日設置してみてください。「どこで離れているか」が見えるだけで、明日からの改善は、ぐっと前向きなものになります。

「うちのこのページ、どこが崖になっていそう？」と気になったら、無料のEC改善診断から、現状のチェックを始めてみてください。