ヒートマップは
色が変わる所を見る

最初に見るのは1枚だけ、スクロールの図です。赤い所を探すより、色が急に変わる所を探してください。

ヒートマップは、ページのどこが見られ、どこが押されたかを色で塗り分けて見せる道具です。入れるのは簡単ですが、開いてみると赤や青の模様が並ぶだけで、そこから何を直せばいいのか分からない、という声をよく聞きます。

見るコツは、色そのものより、色の変わり目を探すことです。読む人が急に減った場所、長く止まった場所、押せない所を押した跡。そこに、ページの直すべき場所が出ています。

この記事では、無料で使える Microsoft Clarity を例に、ヒートマップで「どこで読まれ、どこで離れたか」を見つける手順を書きます。

ヒートマップで分かること、分からないこと

Microsoft Clarity は、Microsoftが無料で提供している行動分析のツールです。公式の説明（2026年10月時点）では、ずっと無料で使えるとされています。ヒートマップにはいくつかの種類があり、それぞれ答えてくれる問いが違います。

ヒートマップで分かるのは、ページの上で起きたことです。分からないことも2つあります。1つは「なぜ」そうしたのか。もう1つは、そのページが何件の申し込みにつながったかです。申し込みや問い合わせの数は、GA4のような計測の道具で見ます。

見る前に、ページをブロックに区切っておく

ヒートマップを開く前に、ページを中身のまとまりで区切っておきます。「悩み」「解決の中身」「お客さんの声」「料金」「よくある質問」「申し込み」のように、ブロックの名前を紙に書き出しておくと、色の変わり目がどの中身の場所なのかを言葉にできます。ブロックの並べ方は、LPの構成の記事で扱っています。

もう1つ、スマホとパソコンは必ず分けて見ます。Clarity では、ヒートマップをパソコン・タブレット・モバイルで切り替えられます。同じページでも、スマホでは画像が縦に積まれてページが長くなり、離れる場所がまったく違います。スマホから来る人が多いなら、まずモバイルだけを見ます。

期間は、見たいページにある程度の人数が来るまで広げます。人数が少ないうちは、1人の動きで色が大きく変わり、たまたまの模様を読んでしまいます。期間を延ばしても模様が変わらなくなってきたら、読みどきです。

スクロールマップで「どこで離れたか」を読む

スクロールマップは、上から下へ、読み進めた人の割合で色が変わっていきます。下へ行くほど人が減るのは自然なことです。見るのは、なだらかに減る所ではなく、急に減る所です。

例えば、整骨院の初回予約のLPで、「施術の流れ」のブロックまでは多くの人が読み進めているのに、料金表のすぐ上で読む人がぐっと減っていたとします。料金表を見る前に帰っているので、問題は料金そのものより、その手前にあります。施術の説明が長すぎるのか、写真が重くて止まっているのか、と手前のブロックを疑います。

Clarity のスクロールマップには、平均的に最初の画面に収まっている位置（Average fold）も線で示されます。この線より下にある大事な中身は、スクロールしなかった人には一度も見られていません。申し込みのボタンや一番伝えたい約束が線の下にあるなら、置き場所を考え直す合図です。

人が帰っていく場所って、図の上でちゃんと見えるんですよ。そこが直す場所のいちばんの候補です。

アテンションとクリックで「どこで読まれたか」を読む

アテンションマップは、ページの場所ごとに、人が過ごした時間を色で示します。長く止まった場所は、読まれている場所であり、同時に迷っている場所でもあります。

• 長く止まり、そのあと下へ進んでいる：読まれている。中身が効いている可能性が高い
• 長く止まり、そこで離れている：迷って帰っている。言葉が分かりにくいか、答えが見つからない
• ほとんど止まらずに通過している：読み飛ばされている。削るか、短くできる候補

クリックマップでは、押せない所が押されていないかを見ます。例えば、施工写真を何度もタップした跡があれば、「大きく見たい」という合図です。Clarity では、押しても何も起きなかったクリック（デッドクリック）や、同じ場所を短い間に何度も押したクリック（レイジクリック）を、それぞれ数えて示してくれます。どちらも、読む人がいら立っている印です。

押せない写真を何度も押させてるのは、お客さんに申し訳ないですよね。見つけたら、真っ先に直したい所です。

録画で理由を確かめ、直すのは1か所ずつ

ヒートマップは大勢の動きを重ねた図なので、1人がどういう順番で迷ったのかまでは見えません。そこで、色の変わり目を見つけたら、その場所で離れた人の録画（セッションの記録）を何本か見て、理由を確かめます。料金表の手前で、上に戻って何かを探していたのか、写真の読み込みを待っていたのか。図だけで決めつけるより、ずっと確かな手がかりになります。

録画は見始めると止まらなくなるので、コーヒー1杯のあいだ、と時間を決めて見るのがおすすめです。

理由の見当がついたら、直すのは1か所ずつにします。料金表の手前の説明を短くするなら、それだけを変え、直す前と同じ長さの期間でもう一度ヒートマップを見ます。一度に何か所も直すと、どれが効いたのか分からなくなります。2つの案を同時に比べたいときは、ABテストの組み方の記事も参考にしてください。

ヒートマップを読むところから、お手伝いします

• 読み方の整理：今のページをブロックに区切り、スマホでどこで離れているかを一緒に見ます
• 直す場所の優先順位：色の変わり目と録画から、最初に直す1か所を決めます
• LPの改善と制作：直す案の制作まで、同じチームで引き受けます
• 計測の設計：申し込みの数とヒートマップを並べて見られるように整えます

HEART CREATIONは、再生数や閲覧数ではなく、その先の申し込みや来店の数字を最初に決め、計測の環境まで含めて設計します。初回のご相談は無料で、オンライン60分でも大丈夫です。ほかに引き受けていることはサービスの一覧にまとめています。

ツールを入れたまま、開かずに眠っていませんか。画面を一緒に開いて、どこから見るか決めましょう。