WordPressにヒートマップを導入する方法を紹介！プラグインで簡単に導入できる

WordPressのプラグインでは、無料で利用できるヒートマップツールが用意されています。

Webサイトの運営では、アクセス数や各ページのPVなどの数値分析に加えて、ヒートマップツールによるユーザー分析も重要です。

本記事では、マーケティングやサイト改善に便利な、WordPressにヒートマップを導入する方法を紹介します。Webサイトの運用・改善方法を模索している人は、参考にしてください。

ヒートマップとは？

ヒートマップは、ユーザーが注目している箇所や、クリックした箇所がひと目で分かるよう、アクションごとに色分けなどによって可視化するツールです。

注視していると思われる箇所やクリックした箇所は、サーモグラフィーのように黄色から赤色などで表示されます。

ヒートマップで可視化できること

ヒートマップで可視化できることは以下の4点です。

1. 熟読エリア
2. 終了エリア
3. クリックエリア
4. カーソルの動きを可視化(PCのみ)

エリアごとに詳細を紹介します。

熟読エリアの表示

熟読エリアとは、ユーザーが注目している箇所のことを指します。ヒートマップツールの表示では、黄色や赤で表示されることが多いです。注目されていないエリアは青やきみどりで表示され、ひと目で識別可能です。

終了エリアの表示

終了エリアを確認すると、ユーザーがどこまで読んでページ離脱したのかが分かります。ユーザーがページから離脱する理由はいくつかありますが、主な理由は以下のとおりです。

1. 自分に必要な情報だけ把握して離脱
2. 画面が見にくいため（UIが見づらい）、離脱
3. テキストを少し読んだけど、読みにくいため離脱
4. ページの読み込みが遅いので離脱

さまざまな切り口から分析し、ユーザー目線のコンテンツ、ユーザビリティの高いページを提供できるよう、ヒートマップの情報を参考に改善を続けなければいけません。

クリックエリアの表示

クリックエリアは、クリックされた箇所が可視化される機能です。多くのツールでは、赤く表示されます。

特にリンク機能がない箇所でも、ユーザーがクリックすると赤くなります。リンクではない部分が多くクリックされていれば、ユーザーを間違えさせるようなページになっているかもしれません。

クリックエリアは、ユーザーの目線の動きを把握する時に便利です。熟読エリア表示と、クリックエリア表示が重なっている場合、特定の箇所が高確率で注視されていることがわかります。

リンクに集中して表示されるクリックエリアは、テキストリンクと画像リンクのABテストや、テキストリンクの効果的な文言の検証など、ピンポイントな改善にも大いに役立ちます。

カーソルの動きを可視化(PCのみ)

ヒートマップでは、マウスカーソルの動きを可視化することも可能です。マウスフローマップとも呼ばれ、ユーザーの視線の動きを分析することが可能です。

ユーザーがどのような順番でコンテンツを見ているのかや、ボタンなどの導線が注目されているかなど、ページ改善を行う上で重要なデータが収集できます

WordPressにヒートマップを導入するメリット

ヒートマップは、WEBサイトを改善し、よりよい状態を保つために欠かせないツールです。

サイト内のユーザーの動きからは、サイト運営の重要なヒントとなる貴重な情報が取得できます。

以下、ヒートマップの導入で得られる3つのメリットを紹介します。

ユーザーの動きが把握できる

ヒートマップを導入すると、ページ上のユーザーの動きがひと目で把握できます。

GA4(Googleアナリティクス)やサーチコンソールから得られる数値情報は、サイト運営を行う上でとても重要です。しかし、これらのツールでは、ユーザーの動きの全てまでは把握できません。

▼UA(Googleアナリティクス)の記事はこちら
Google アナリティクスの使い方・見方をマスターしよう！

ヒートマップを導入すると、閲覧されたページの範囲やクリックポイントがあきらかになり、ピンポイントな改善ができます。

クリックされやすいリンクテキストや画像の検証と改善を重ねるうちに、より生産性の高いサイトへの成長が可能です。

SEO改善が期待できる

前項でも挙げたようにヒートマップによるユーザー行動の把握は、適切なサイト改善に繋がります。

そして適切な改善を重ねることで、よりユーザビリティの高いサイト作成が可能になり結果的にSEO改善につながっていきます。

具体的には、平均滞在時間の延長や、直帰率の低下などの改善が可能になります。

※SEOとは、自社サイトを検索結果の上位に表示させるための対策です。
検索エンジンの評価基準の1つとして、ユーザーにとっての使いやすさ、ユーザビリティの高さが含まれているとされています。
・SEO対策とは？仕組みや施策、進め方などを徹底解説

CVRを向上することができる

CVRとは、コンバージョンレートの略称で、流入に対しての成果達成の割合を表しています。CVRは、商品の購入や資料請求などコンテンツの目的によってさまざまです。

ヒートマップを活用できれば、クリックされやすいお問い合わせリンクのデザインやサイズ、リンクテキスト（宣伝文句）の内容などを、分析検証したのちに、改善できます。

WordPressにヒートマップを導入する方法

WordPressでは、プラグインを使うことで個別に機能をアップグレードできます。プラグインとは、WordPressに便利なツールを追加、登録してカスタマイズする機能です。

有名なプラグインでは、自動的に画像を圧縮してくれる機能や、充実した問い合わせフォームを設置する機能などがあり、現在、数多くのプラグインがリリースされています。

今回はAurora Heatmapというプラグインを使って、ヒートマップを導入する方法を紹介します。

Aurora Heatmapの特徴や概要は以下の通りです。

• 無料版と有料版がある
• 有料版（月額2,189円）では熟読分析や離脱分析が利用可能
• データ保存期間が6ヵ月
• 無料版でもPV制限がなく、クリック分析までできる

無料版と有料版の違いをまとめた表がこちらです。

以下、導入方法など詳細について紹介します。

➀WordPressの「プラグイン」からインストールする

Aurora Heatmapは、WordPress公式のプラグインディレクトリに登録されているため、インストールは簡単です。

管理画面から左側メニューのプラグインをクリックし、プラグインを追加の画面にて、キーワード検索を行います。今すぐインストールをクリックしてクリックしてインストールが完了すると使用できます。

➁基本設定を確認する

WordPress管理画面＞設定＞Aurora Heatmapと画面遷移すると、プラグインの設定を確認できます。インストール後はそのまま使えるため、難しい設定は必要ありません。

データ設定や表示設定にて、UIの調整ができます。

シンプルな管理画面なので、操作方法に迷うことはないでしょう。

（参考：https://ja.wordpress.org/plugins/aurora-heatmap/）

③ヒートマップのデータを確認する

設定＞Aurora Heatmapと遷移して、ヒートマップ一覧から確認できます。

確認したいページをクリックすると、ヒートマップが現れます。

使い始めた当初は、クリックしてもなにも表示されません。ある程度情報が収集された時点で随時情報が更新されるようになります。

（参考：https://ja.wordpress.org/plugins/aurora-heatmap/）

まとめ

ヒートマップとは、数値だけでは確認できないユーザーの動きを可視化するツールです。

ヒートマップを活用することで、ユーザー行動をもとにしたサイト設計やサイト改善が可能になり、より効果的な施策を考案・実行・検証することが可能です。

また、ヒートマップによってユーザビリティの向上や、SEO効果なども生まれるため、サイト運営にとって必要不可欠なツールといえます。今回紹介したAurora Heat以外にも、様々なヒートマップツールが存在するので、自サイトに合ったツールを探してみましょう。

もちろんヒートマップだけでは、完璧なサイト改善はできません。ヒトノートでは、サイト改善に関する記事を掲載しているので是非ご覧ください。

・【サイト改善】分析・進め方を押さえて7つの課題に対処しよう！パフォーマンス向上の秘訣とは？
・ECサイト改善ってどうやるの？売上アップのための分析と改善ポイントを解説

執筆者：川口享晟

株式会社ヒトノテのSEOコンサルタント。メディアサイトからポータルサイト、ECサイトまで様々なサイトのSEO支援を経験。売上のアップから逆算したSEO対策を得意とし、クライアントに寄り添ったオーダーメイドの提案を心がけています。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。