Skip to content

【WordPressプラグイン】
利用者がクリックした箇所が確認できるヒートマップを
無料で使える「Aurora Heatmap」の
導入と使い方のご紹介

ヒートマップなら利用者が
Webページのどこを注目しクリックしているかわかる

ホームページやブログを開設しても、利用者がどこに注目し、どこをクリックしているか、気になると思います。
そこで、今回はWordPressの無料プラグイン「Aurora Heatmap」でヒートマップの導入方法と使い方をご説明します。

こんな人にオススメ

Webページのどのボタンがよくクリックされているか知りたい
Webページがどこまでスクロールして読まれているか知りたい
Webページの離脱ポイントを知りたい

Webサイトは常に改良して閲覧数を増やすことが必要です。ただ何を改善すれば良いかわからないので、実際にアクセスした人がどこに注目しているか確認する手段としてヒートマップは非常に有効なツールです。
マーケティングやUX改善に是非、ご活用ください。

ヒートマップとは

ヒートマップとは、データの値を色の違いで視覚的に表現する図のことです。主に数値の大小や密度の違いを一目でわかるようにするために使われます。どこが多いのか、少ないのかを色で直感的に示す強力な視覚ツールです。例えば、地球の温度(数値)を色で表せば、温暖化の影響をわかりやすく表現できます。
ビジネス分析、マーケティング、研究など、さまざまな分野で活用されています。

地球温暖化のヒートマップ

地球温暖化のヒートマップ

Webページでヒートマップを使う主な理由

Webページでヒートマップを使う理由は、ユーザーの行動を視覚的に分析し、サイト改善のヒントを得るためです。以下のような具体的なメリットがあります。

1. ユーザーの注目エリアが一目でわかる

  • よく見られているコンテンツがわかる(スクロールヒートマップ)
  • よくクリックされている箇所がわかる(クリックヒートマップ)
  • マウスの動きや滞在位置から注目ポイントがわかる(マウスヒートマップ)

例:バナーが思ったより見られていない → デザインや位置を見直す判断材料に。

2. ユーザー体験(UX)改善に役立つ

  • 「ユーザーが迷っている場所」や「誤クリックされている要素」がわかる
  • CTAボタンが目立っていない → 色・配置を見直す
  • 長すぎてスクロールされないコンテンツ → レイアウト再設計へ

3. 定量データと定性データの橋渡し

  • アクセス解析(例:Google Analytics)では「数値」はわかるが「なぜ」はわからない
  • ヒートマップは「なぜそうなったか」のヒントがわかる

このようにヒートマップは、ユーザーの「見ている」「触れている」「離れている」部分を色で直感的に把握することができるので、Webサイトの改善に活用できます。

ヒートマップはWebページの通知簿のような存在です。
Webページ内のどこが注目されていて、どこがクリックされているか確認できるので、思い通りの効果があるか確認でき、無い場合は改善を確認することができる非常に有効なツールです。

WordPressのプラグイン「Aurora Heatmap」とは?

Aurora Heatmapとは、WordPressでヒートマップが簡単に使えるプラグインです。
無料版と有料版があります。有料版は離脱分析や熟読分析などの機能も使えますが、今回は無料版をご紹介します。

Aurora Heatmapの主な特徴

Aurora Heatmapは使いやすく手軽に導入できるWordPressのプラグインです。主に以下のような特徴があります。

1. WordPressに簡単インストール

  • WordPressの管理画面からプラグインとしてインストール可能
  • コーディング不要で、初心者でも簡単に使える

2. ページごとのヒートマップを自動作成

  • 投稿・固定ページごとに自動的にヒートマップを生成
  • クリック箇所を色で表示
  • 熟読箇所や離脱箇所を色で表示 ※有料版のみ

3. 管理画面で直感的に閲覧

  • ヒートマップはWordPressの投稿一覧から直接確認可能
  • 専用の外部サービスではなく、自サイト内でデータ管理される

4. プライバシーに配慮(データはローカル保存)

  • 収集した行動データは自サイトに保存され、外部送信されない
  • GDPRやプライバシーへの配慮が必要なサイトでも安心

WordPressのプラグイン「Aurora Heatmap」のインストール

今回はWordPressでヒートマップを導入するプラグイン「Aurora Heatmap」で、無料版のインストールを説明します。
Aurora Heatmapは無料版と有料版で別々のプラグインとなります。もし無料版から有料版に移行する場合は、無料版のプラグインを削除し、データを移行する必要があります。詳しくはAurora Heatmapの公式 をご確認ください。

WordPressの管理画面でインストール

Aurora Heatmap

WordPressの管理画面から「プラグイン」→「新規追加」を選択。

①キーワードで「Aurora Heatmap」を検索。

②検索結果から「Aurora Heatmap」の「今すぐインストール」をクリック。

「Aurora Heatmap」の有効化

Aurora Heatmap

インストールが完了すると「有効化」のボタンに変わるので、クリックします。

以上で「Aurora Heatmap」のインストールは完了です。

「Aurora Heatmap」の使い方

ここから「Aurora Heatmap」の設定と、具体的な使い方を説明します。

「Aurora Heatmap」の設定

結論から言うと、設定はデフォルトのままで問題ありません。
ただ、ヒートマップが正常に表示されないなどの不具合があった場合は、見直してください。

Aurora Heatmap

「Aurora Heatmap」の設定は、以下から可能です。

①左カラムの 「設定」→「Aurora Heatmap」をクリック

②表示された画面の「 設定」をクリック

設定項目は以下の通りです。

データ設定

項目 選択肢 説明
保存期間

Premium
1か月 ※デフォルト
3か月
6か月
ヒートマップデータを保存する期間を選択できます。
期間を増やすとその分、サーバー容量を圧迫しますので、ご注意ください。
無料版は「1か月」のみ選択可能
精度 高精度 ※デフォルト
標準
ヒートマップデータの精度を設定します。
位置精度の高い高精度とカウント数の多くなる標準を選択できます。
設定を変更するとデータが消去され、新しくデータ収集が始まります。
個別ページ以外 計算する ※デフォルト
計測しない
ヒートマップの計測対象から、アーカイブページ・エラー404ページ・検索結果ページを除外します。
不要な情報を排除することで見やすさ、容量の削減にも寄与します。
トップページ(フロントページの最初のページ)は設定に関係なく常に計測されます。
Ajaxの遅延時間 3000 ※デフォルト ページロードからAjax通信を遅延させるミリ秒。 
JavaScriptリダイレクトなどの自動転送元での離脱を記録しないよう回避させます。
Ajax通信間隔

Premium
10 ※デフォルト Ajax通信の間隔です。
サーバーへの頻繁な通信を避けるために間隔を調整します。
無料版は変更不可
Ajax一括送信数

Premium
10 ※デフォルト Ajax通信で一括送信される測定値の数です。
サーバーへの頻繁な通信を避けるためにまとめて通信する閾値に使用します。
無料版は変更不可

表示設定

項目 選択肢 説明
描画ポイントの数 無制限
10000
3000 ※デフォルト
1000
ヒートマップを表示する際に使用するデータ数を選択できます。
無制限では密度の高い描画が可能ですが、表示処理に負荷が掛かります。
ヒートマップの表示に時間がかかる場合は「1000」に設定しましょう。
カウントバー 表示する ※デフォルト
表示しない
縦軸のどの位置でいくつのデータがカウントされているかを表示します。
URLハッシュ 統合表示 ※デフォルト
個別表示
同じページを指すURL ハッシュを統合表示するか別表示するかを選択します。
例:https://www.wildhawk.jpとhttps://www.wildhawk.jp#topを統合するか、分けるか
URLパラメータ 統合表示 ※デフォルト
個別表示

Premium

除外するパラメータ

パラメータ付きのURLのページを統合表示するか別表示するかを選択します。
有料版では、任意の個別パラメータを別表示、もしくは統合できます。 パラメータは半角カンマで区切ることで複数指定できます。

Aurora Heatmapの設定は変更する必要はありません。ただ、パーマリンク構造を「基本」のままで使っている場合は、URLパラメータを「個別表示」に変更する必要があります。
ただURLを「?」を使ったパラメータの場合、他にも集計の不具合が発生することがあるので、できればパーマリンク構造をフォルダ階層の「/」を使ったURLで運用することをオススメします。

「Aurora Heatmap」の使い方

Aurora Heatmap

「Aurora Heatmap」の使い方は、以下から可能です。

①左カラムの 「設定」→「Aurora Heatmap」をクリック

②表示された画面の「 ヒートマップ一覧」をクリック

Aurora Heatmap

の列に表示される数字をクリック

Aurora Heatmap

④ポップアップが表示

画面左に表示される青い箇所がクリックされた場所を表示し、画面右に表示される数値がクリックされた数を表示します。

まとめ

今回はサイト内でクリックされた箇所が確認できるAurora Heatmapを説明しました。

閲覧者がクリックされている箇所が、意図した場所なのか、関係ない所でクリックされているのか、どこが人気なのか、色々とユーザーの動向を把握する非常に重要なツールだと考えています。

有料版なら熟読箇所や離脱箇所も確認できるので、ご興味かあれば有料版も・・・と言いたいところですが、有料版なら日本で開発されたPtengineがオススメです。

Ptengineも無料で使えますが、熟読箇所を下の図のように表示してくれます。ただ、無料版は1ページしか設定できない条件があります。
有料版なら全てのページで熟読箇所が確認でき、もちろんクリック箇所も確認できるのでオススメです。

Ptengine

【Ptengine公式】
https://www.ptengine.jp