Webサイトのヒートマップとは？見方と使い方
Webサイトのヒートマップ
ヒートマップとは？Webサイトのクリックマップとスクロールマップを解説 | We.Inc
Webサイトのヒートマップとは何か、クリックマップ、スクロールマップ、アテンションマップのデータ収集の仕組み、プライバシーと同意への対応、自分のクリックからヒートマップを描くライブデモを紹介します。
Webサイトのヒートマップとは、ページの画像に色を重ね、訪問者がどこをクリックしたか、どこまでスクロールしたか、どこに時間をかけたかを示すものです。暖色は多くの訪問者、寒色は少ない訪問者を表します。ページ上の小さなスクリプトが操作を記録し、ツールが多数の訪問を集計します。
主なヒートマップの種類
- クリックマップ
- クリックやタップされた場所
- メインのボタンは押されているか？
- スクロールマップ
- ページの各深さまで到達した訪問者の割合
- 価格はそもそも見られているか？
- エリアマップ
- 選択したエリア内のクリックの合計
- メニュー全体はどれくらい使われているか？
- アテンションマップ
- ページの各部分に費やされた時間
- どのセクションが人を引き留めているか？
- ムーブマップ
- マウスポインターが動いた場所（一部のツールが提供）
- デスクトップの訪問者は何に引きつけられているか？
アクセス解析は、ページを何人が訪れたかを教えてくれます。ヒートマップは、訪問者がそこで何をしたかを見せてくれます。小規模ビジネスのサイトでは、それだけで謎が一目で解けることがよくあります。誰もクリックしないボタン、リンクだと思って皆がタップする写真、ほとんどの訪問者がスクロールをやめる位置より下にあるオファー。デモを試して、ヒートマップがどう作られるかを確かめてみましょう。
- ヒートマップツールを選び、サイト用のプロジェクトを作成します。
- ツールのトラッキングスクリプトをすべてのページに追加するか、サイトビルダー用のプラグインをインストールします。
- 同意が必要な地域からの訪問者がいる場合は同意の仕組みを設定し、ページ上のテキストをツールがどこまで記録してよいかを選びます。
- 結論を出す前に、対象のページへの訪問が数百件たまるまで待ちます。
- そのページのヒートマップを開き、モバイルとデスクトップを別々に確認し、試してみる変更を1つ書き出します。
- スマートフォンとパソコンは分けて見ましょう。同じページでもレイアウトが異なるため、混ぜたマップはぼやけてしまいます。
- 写真や太字のテキストなど、リンクでないものがクリックされているなら、訪問者はそれが何かをしてくれると期待しています。
- ほとんどの訪問者がCTAより前でスクロールをやめているなら、大きくするより上に移動させましょう。
- 同じ場所を何度もタップするレイジクリックは、壊れているか遅い要素を示していることがよくあります。
- ヒートマップはアイデアの源として扱い、変更の効果はA/Bテストやコンバージョンデータで確かめましょう。
よくある質問
無料のヒートマップツールはありますか？
あります。Microsoftのドキュメントでは、Clarityはずっと無料のサービスとされており、クリックマップ、スクロールマップ、エリアマップ、コンバージョンマップ、アテンションマップに加えてセッション録画も利用できます。Hotjarなど他のツールもヒートマップを提供しているので、最新のプランは各公式サイトで確認してください。
役立つヒートマップには何人の訪問者が必要ですか？
公式な数字はありません。ごくわずかなトラフィックからマップを描くツールもありますが、数件の訪問では主に個人のくせが見えるだけです。訪問が増えてもパターンが変わらなくなるまで待ってから、デザインを変更しましょう。
ヒートマップにはクッキーの同意が必要ですか？
ツールと、訪問者がいる地域の法律によります。たとえばClarityは、2025年10月31日からEEA、英国、スイスからの訪問について同意シグナルの適用を開始しました。これは法的助言ではありません。自分に適用されるルールを確認してください。
ヒートマップツールは入力内容を記録しますか？
優れたツールは入力内容を隠します。Clarityのドキュメントによると、入力欄とドロップダウンの内容はすべてのモードでマスクされ、デフォルトのBalancedモードでは数字やメールアドレスもマスクされます。
ヒートマップとセッション録画の違いは何ですか？
ヒートマップは多数の訪問を1つのページの画像にまとめます。セッション録画は1人の訪問者がページをまたいでたどった道筋を再生します。ヒートマップはパターンを示し、録画はひとつの不思議な行動を説明するのに役立ちます。
データの収集方法
- ページ上のスクリプトがクリック、タップ、スクロールを検知し、押された要素、ページの幅、訪問者がどこまで下に進んだかといった小さな記録をツールに送ります。ツールはその記録をページと端末ごとにまとめ、ページに色を付けます。
- 優れたツールは、クリックを画面上の座標ではなくページの要素に結びつけます。Clarityのドキュメントによると、クリックマップはマウスの絶対位置ではなく要素を使うため、画面サイズやレスポンシブレイアウトが変わってもマップは正確なままです。
初日に選んでおくべきプライバシー設定
- ツールがページのテキストをどこまで保存してよいかを決めましょう。Clarityには、すべてのコンテンツをマスクするStrict、数字やメールアドレスなどの機密性の高い内容をマスクするBalanced、フォームの入力欄とドロップダウンだけをマスクするRelaxedがあります。
- ページの一部だけを非公開に指定することもできます。Clarityでは、下のコードにあるdata-clarity-mask属性を使います。またClarityは、18歳未満のユーザーを対象とするサイトでは使用しないよう案内しています。
必要になるかもしれないコード
Clarityを使うサイト向けの短いスニペットを2つ紹介します。どちらもMicrosoftが公開しているAPIに沿ったもので、ここでの値は例です。
ページの一部を録画から隠す
data-clarity-maskに値Trueを付けると、サイト全体の設定に関係なく、その要素と中身すべてがマスクされます。
訪問者が同意したことをClarityに伝える
訪問者が同意した後、クッキーバナーからこれを呼び出します。拒否された場合、Clarityはクッキーなしで動作するため、呼び出しは不要です。
デモでのヒートの描き方
クリックごとにcreateRadialGradientによる柔らかい円が描かれます。重なった円は積み重なるため、集中している場所ほど濃くなります。
自分のクリックでヒートマップを作る
下のサンプルページのどこかをクリックまたはタップしてください。クリックするたびにヒートが加わります。どこにも送信されず、クリックはこのブラウザーのタブ内にとどまります。
サンプルページ。クリックするとその場所にヒートが加わります。
記録されたクリック：{n}
クリックを消去
ヒートの下にページを表示
午前5時に焼き上げる、焼きたてのサワードウ
午後10時までのご注文で、翌朝お受け取りいただけます。
パンを注文する
営業日：火曜日から日曜日、午前7時から午後2時
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る