「ヒートマップ」でサイトを丸裸に！ユーザーの視線とクリックが集中して赤く燃え上がっている場所はどこ？

「社長！我が社のホームページに毎月1万人が来てくれています！順調です！」 「よしよし、トップページに載せた私の『社長の挨拶と長いポエム』を読んで、みんな感動してくれているんだな！」 「あ……えっと……実は、お客さんはページを開いた瞬間、開始3秒で下の『料金表』までスクロールしていて、社長のポエムのところは1秒も読まれずに高速で素通りされています……」 「な、なんだってー！？」

「ホームページに何人来たか（アクセス数）」は分かっても、「その人たちがページの『どの部分』を熟読したか」までは、普通のアクセス解析（Googleアナリティクスなど）では分かりません。

この「Webページ上のどこを見て、どこをクリックして、どこで飽きて帰ったのか」を、まるで温度計のように色分けして見せてくれる魔法のツールが「ヒートマップ」です。今回は、マーケターの必須ツールを解説します。

ヒートマップとは？ 一言でいうと

一言でいうと、ヒートマップ（Heatmap）は「ユーザーのマウスの動きやスクロールの深さを解析し、Webサイト上の『よく見られている箇所（熟読エリア）』や『よくクリックされている箇所』を、温度分布図（赤、黄、青などのグラデーション）で視覚的に表現するツール」のことです。

これを、「空港にあるサーモグラフィカメラ（体温センサー）」に例えてみましょう。

空港のサーモカメラを通ると、熱がある人（体温が高い人）の顔は真っ赤やオレンジ色に表示され、冷たいペットボトルを持っている手は真っ青に表示されます。熱いところと冷たいところが一目瞭然ですよね。

Webサイトの「ヒートマップ」も全く同じ仕組みです。 お客さんが「おっ、ここの文章面白いな」と立ち止まってじっくり熟読した場所は、温度が上がって「真っ赤」に燃え上がります。 逆に「社長の長い挨拶」のように、お客さんが「つまらない」と思って高速でスクロール表示させた（読み飛ばした）場所は、温度が低くて「真っ青」になります。 これを使えば、「なるほど、みんな最初の『商品画像（赤）』は見てるけど、その下の『開発者の苦労話（青）』でみんな飽きてサイトから帰っちゃってるな（離脱）。よし、苦労話は削除して、すぐに『購入ボタン』を置こう！」と、サイトのどこを手術（改善）すればいいかが一発で分かるのです。

ビジネスの現場での使い方

実際の現場で「ヒートマップ」がどう使われているのか、よくある3つの場面を見てみましょう。

「ヒートマップで見たら、リンクじゃないただの画像が真っ赤にクリックされているぞ」

• 裏にある意味・意図：
  • 「お客さんがマウスでカチカチとクリックした場所を赤く見せてくれるヒートマップを見たら、ただの『飾りのイラスト』のところが真っ赤にクリックされまくっている！つまりお客さんは、この飾りを『購入ボタンだ』と勘違いして必死に押しているのに、画面が進まなくてイライラしているんだ！大至急、このイラストを本物のボタンと差し替えろ！」
  • お客さんの「ミスクリック（勘違いによる怒り）」を可視化して、致命的な欠陥を塞ぐ超実践的な使い方。

「商品の料金表まで到達している人が、スクロールヒートマップで見るとたったの10%しかいない」

• 裏にある意味・意図：
  • 「せっかく一番アピールしたい安い『料金表』をページの最後の方に置いているのに、ヒートマップの青い線（離脱・これ以上下を読まない線）を見ると、お客さんの90%は料金表を見る前に飽きて画面を閉じていることが判明した。これじゃあ誰も買わないわけだ。料金表のブロックを、今すぐトップページの真っ赤なエリア（一番読まれている上の部分）に移動させよう」
  • 「どこで客が帰ってしまったか」を暴き出し、コンテンツの並び順を入れ替える（最適化する）作戦。

「Googleアナリティクス（GA4）の数字だけ見ても限界がある。ヒートマップを入れて『なぜ』を深堀りしよう」

• 裏にある意味・意図：
  • 「『昨日のアクセスは1万件でした。滞在時間は2分です』という数字（GA4のデータ）だけ見ても、『で、結局ページのどこが良くて2分も読んでくれたの？』という理由（なぜ）の部分は全然わからない。だから、数字だけでなく『お客さんの目線の動き（サーモグラフィ）』を視覚的に見せてくれるヒートマップを導入して、人間のリアルな行動心理を分析しよう」
  • 「アクセス数（量）」の分析から、「読まれている場所（質）」の分析へとレベルアップするための提案。

代表的な「3つのヒートマップ」の種類

「ヒートマップを見よう」と言われたら、主に以下の3つの「赤くなる場所」を切り替えて分析します。

この3つを切り替えながら、「お客さんがどこで立ち止まり、どこでつまづき、どうやって行動したか」という”見えない足跡”をストーカーのように洗い出すのがマーケターの仕事です。

まとめ

• ヒートマップとは、Webページ上の「よく見られている場所」や「クリックされている場所」を、赤や青の温度分布図（サーモグラフィ）のように可視化する解析ツールのこと。
• テレビで見るサーモカメラのように、お客さんが熱心に読んでいる場所は「赤く」燃え上がり、読み飛ばされたつまらない場所は「青く」冷える。
• アクセス数（何人来たか）だけではわからない、「スクロールの途中で飽きて帰ってしまった」という、ユーザーのリアルな行動（失敗の理由）を一撃で見つけることができる。

今日できるミニアクション： 実は、ヒートマップの考え方はリアルの店舗にもあります。例えばコンビニの床をよく見てみてください。「お弁当コーナー」や「レジ前」の床は、沢山の人が立ち止まって擦れるため、床が黒ずんだりワックスが剥げたりしていますよね？これがリアルな「真っ赤になっているヒートマップ（熟読エリア）」です。逆に、誰もいかない奥の棚の床はピカピカ（真っ青のエリア）です。Webサイトの改善もこれと全く同じで、「床が擦れている（文字が読まれている）ところに、売りたい新商品をドカンと置く」のが商売の基本鉄則なのです。