ヒートマップとは？活用方法からおすすめのツール6選まで解説！

皆さんは「サイト改善をして」と言われたら、どのような方法を思いつくでしょうか。

サイトそのものを見て、データと格闘して、競合サイトを見て…
どれも正解で、とても大切です。

この記事で紹介するのは、上記のような改善で使用する「ヒートマップ」というツールです。
数字のデータからでは見つけにくい改善箇所を視覚的に把握できて、ちょっと違った角度から改善案を調べられます。

今回はヒートマップの活用方法からおすすめのツールまで解説いたします。

また、「ユーザー行動の改善方法」について動画で学びたい！という方のために、動画セミナーをご用意しています。あわせてご覧ください。

セミナー【動画】SEO徹底解決セミナー：
第10回「直帰率が上がる理由と下げ方」

ヒートマップとは

ヒートマップは、サイトを訪問したユーザーの行動をサーモグラフィのように表し、視覚的に把握できるツールです。
ページ内のよく読まれているコンテンツや離脱が多い箇所などを色で判別できるようになっていて、直感的に改善ポイントに気づくことができます。

下の写真は弊社のサイトをヒートマップツールで見たものです。
よく読まれている箇所は濃い赤色に、あまり読まれていない箇所は青色になっています。

何を分析できるの？

ヒートマップには種類があり、それぞれ分析できる項目が異なります。

クリックヒートマップ

ユーザーがどこをクリックしたのかを計測するヒートマップです。
クリックの多い箇所の色が赤く表示されます。

下の写真は弊社のサイトをクリックヒートマップにかけたものです。
例えばこのページではグローバルナビのボタンがよくクリックされていることがわかります。

マウスホバーヒートマップ

ユーザーはクリックした時以外にも興味を持ったコンテンツにカーソルを合わせます。

マウスホバーヒートマップでは、このようなカーソルの動きを追って、より多くカーソルが置かれていた箇所を濃い赤色で示します。
またマウスリプレイといって実際のユーザーのマウスの動きを再現する機能を持つツールもあります。

※参考：弊社サイトでのユーザーのマウスの動きを表したヒートマップです。

アテンションヒートマップ

ユーザーがどこに興味を持って読んでいるのかが分かるヒートマップです。
そのため「熟読エリアヒートマップ」とも呼ばれています。
よく注目されているエリアが濃い赤色、逆にあまり読まれていないエリアは青色で表されます。

スクロールヒートマップ

何％のユーザーがどこまでスクロールしているのかが分かります。
例えば下の画像で説明すると、このページに訪問したユーザの25％しか”ジオコードのSEO対策実績”にたどりついていないことがわかります。

分析項目ごとのヒートマップ活用方法

ヒートマップは先に述べたような種類があります。
では実際にどうやって改善すればいいのか、種類ごとに説明いたします。

クリックヒートマップの活用例

クリックヒートマップのポイントは下記2点です。

弊社のサイトで見てみましょう。
ここでは「メインビジュアルのボタン」（青いボタン）をクリックしてほしいこととします。

この場合、押して欲しいボタンのクリックが少なく、グローバルナビの「料金プラン」がよくクリックされていることが分かります。

この結果から…

といった施策につなげることができます。

アテンションヒートマップの活用例

注目箇所が分かるこのヒートマップでは、以下がポイントです。

上記が分かれば

といった施策に活用できます。
また、なぜそのコンテンツがよく読まれているのかまで深堀りすることで、ユーザの求めているコンテンツのヒントにもなります。

スクロールヒートマップの活用例

このヒートマップの活用ポイントは下記です。

どんなに良いコンテンツも、見てもらわないと意味がありません。
ユーザーが到達してないなら、上の方に並び替える必要があります。
また、離脱されているコンテンツについては、見やすく整えたり、順番を下げるといった対応が可能です。

ヒートマップツールの仕組み

ヒートマップはどのようにできているのか気になりますよね。
そこでクリックヒートマップの仕組みを簡単にご説明します。

①：計測ページをいくつかのエリアに分割します
②：1 のどの箇所が何回クリックされたのか計測します
③：数字を一覧にしたリストにカラーグラデーションで配色します

下記の図のようにより多くクリックされた箇所は濃い色に配色することでヒートマップが作られていきます。
実際には、各エリアの境目はもっと細かく配色も分かりやすいものになっています。

※上記画像は下記のページを参考に作成しました
【今さら聞けない】ヒートマップとは？ユーザー行動を見極める分析手法

同様にアテンションヒートマップの場合は滞在時間を計測し、ユーザーが熟読している箇所を濃い赤色で示します。

マウスホバーヒートマップはユーザーのマウスの動きを元にして、長くマウスが置かれた箇所やカーソルが動いた箇所は濃く示されます。

スクロールヒートマップはユーザーのスクロールがどこからどこまでされたのかを元に作成されています。

おすすめのヒートマップツール

Ptengine

2013年にグッドデザイン賞を受賞しているヒートマップツールです。
世界15万社に導入されていて他のツールと比較しても多いのが特徴です。
また、3,000PVまでの無料プランもあり、有料版も14,800円からと比較的安価となっています。

会社名	株式会社Ptmind
機能	ヒートマップ機能、アクセス解析
実績	世界15万社導入
料金	14,800円～
トライアル期間	有（3000PVまでの無料プラン）
サイトURL	Ptengine | 世界15万ユーザー導入の顧客体験を劇的に変えるプラットフォーム

VWO

VWOはABテスト機能とヒートマップ機能の両方を使えるツールです。
どちらのツールも導入されていない方は、1つのツールで可能ですので、検討してみてはいかがでしょうか。

有名企業にも導入されていて、無料トライアル期間もあります。

会社名	株式会社assion
機能	ABテスト機能、ヒートマップ機能
実績	世界6000社導入
料金	要問合せ
トライアル期間	有
サイトURL	世界2500社以上導入のA/Bテストツール「VWO」

Contentsquare（Clicktale）

2019年の経営統合により、Clicktaleは従来の機能はそのままにContentsquareとなりました。
アクセス解析やヒートマップ機能に加えて、コンテンツ単位でROIを可視化する機能やカスタマージャーニー分析機能もあり、多機能なのが特徴です。

会社名	株式会社ギャプライズ
機能	ヒートマップ機能、コンテンツパフォーマンス分析、カスタマージャニー分析
実績	不明
料金	要問合せ
トライアル期間	不明
サイトURL	世界No1顧客体験分析プラットフォームContentsquare（コンテントスクエア）

ユーザーヒート

月間300,000PVまで無料で使用できるヒートマップです。
熟読エリア・終了エリア・クリックエリア・マウスムーブ・離脱エリアの5種類のヒートマップ機能があります。
トライアル可能なので、まずは無料でヒートマップを試してみたい方におすすめです。

会社名	株式会社ユーザーローカル
機能	ヒートマップ機能
実績	不明
料金	月間300,000PVまで無料
トライアル期間	有
サイトURL	無料ヒートマップ解析ツール User Heat

Sitest

ABテストツールに加えてヒートマップ機能が搭載されています。
さらにマウス動作の録画再生機能があるのが特徴です。
ユーザーの動きを録画して、どのように行動したかを確認することができます。
ヒートマップだけではなく、アクセス解析やABテストも一緒に使用したい方におすすめです。

会社名	株式会社グラッドキューブ
機能	ABテスト、ヒートマップ機能、アクセス解析機能、AI分析機能
実績	アジアで480,000サイト導入
料金	要問合せ
トライアル期間	有
サイトURL	ヒートマップ解析・ABテスト・EFO対策ツール

MIERUKA

10,000PV/月までの無料トライアルがあります。
複数のプランがあり、9,800円から使用できるため、費用を押さえたい方におすすめです。
SEO&分析ツールで有名なMIERUCAの姉妹ツールですね。

会社名	株式会社Faber Company
機能	SEO解析機能、アクセス解析機能、ヒートマップ機能
実績	姉妹ツールミエルカは世界1500社導入
料金	月額9,800円～
トライアル期間	有（10,000PVまで）
サイトURL	ミエルカヒートマップ

まとめ

ヒートマップはGoogle Analyticsのような解析ツールとは異なり、ユーザー行動を視覚的に把握することができます。
また、直感的に改善ポイントを把握しやすいため、最近web担当になったばかりという方にもおすすめです。

ヒートマップツールを実際に使用した個人的な感想としては、

そのため、施策の幅が広がって便利というものでした！
また無料で試せるツールもあるので気軽に取り入れやすいのも魅力ですね。

ぜひこの記事を参考にヒートマップを活用してもらえたら嬉しいです。