ヒートマップとは？ツール導入前に知っておきたい基礎知識を事例も交えて解説！

「ヒートマップって何？」

Web業界に入って間もない方は、耳にすることが多いのではないでしょうか。

ヒートマップとは、Webページに訪れた人の行動をデータ化し、赤色や青色などの色彩でユーザーの動きを表すツールのこと。「どこがよく読まれているのか」「どこで離脱してしまったのか」といったデータを直観的に確認できるため、初心者でも使いやすいのが特徴です。

本記事では、

• ヒートマップでできること
• ヒートマップの導入事例
• おすすめのヒートマップツール

について解説していきます。ぜひヒートマップツール選びの参考にしてください。

ヒートマップとは

ヒートマップとは、Webページに訪れた人の行動をデータ化し、赤色や青色などの色彩でユーザーの動きを表すツールです。サイトに訪れた人の行動を目で見ただけである程度理解できるようになります。

商品の購入や資料請求といったコンバージョンの向上のために活用することが一般的です。結果を分析しサイトに来た人々の行動をより促しやすいサイト作りをすることで、間接的にSEO対策としても貢献できるでしょう。

例えば「どれくらいのユーザーがどこから来てどこのページを閲覧したか」までは、一般的なアクセス解析ツールで追うことができます。ヒートマップを使えば、上記のツールだけではわからないサイトのページ内での動きを把握することが可能です。

ヒートマップで分析できること

では、実際にヒートマップを活用することで分析できる項目について解説していきます。分析項目によって活用するツールの形式が異なってくるため、それぞれの名前も把握しておきましょう。

1つですべての項目が分析できるものあればそうではないものもあるため、ツールがどこまで分析できるかを把握することが大切です。

ユーザーが離脱した箇所

ユーザーがページ内のどの部分でサイトを離れているかを知るためにはスクロールマップを活用します。赤い色が薄くなるほど、離脱した人も多いということです。

例えば、ページを最後まで閲覧する人が全体の10%で重要コンテンツもサイトの終わりにある場合、その重要コンテンツは訪問してくれた人全体のたった1割にしか届いていないという残念な結果がわかります。

このようにスクロールマップは、ユーザーが離脱を決めた場所を直観的に把握でき、感覚的な判断ではなくデータに基づいたコンテンツ配置を行うことで離脱率を抑えることが可能です。

ユーザーの注目していた箇所

ユーザーが重点的に見ていた部分を表すヒートマップは、アテンションマップといいます。Webページ上でスクロールをやめた部分の滞在時間を計測し、青から赤の色で注目箇所を表す仕組みです。つまりどれぐらいの人々がどの部分のコンテンツを熟読しているのかがわかります。

多くの人が興味を示し読まれたコンテンツは赤で示され、逆に興味を示さず通り過ぎられてしまったコンテンツは青色です。赤色の部分はユーザーが注目した場所ということに変わりはありませんが、ユーザーの行動については２つの仮説が考えられます。1つが単純に興味があったから熟読したということ、2つ目がコンテンツの内容がわかりにくく、何度も読み返したという説です。

このように表示されたデータを利用し様々な仮説を立て、閲覧する立場でコンテンツの改良を行うことが、ページの離脱回避につながるでしょう。

ユーザーがクリックした箇所

クリックマップを使えば、多くの人々がクリックした部分を把握することが可能です。より多くの人々がページ内でクリックした部分は赤色になります。 別ページへのリンクや購入・お問い合わせのリンクなど、人々の行動を促す重要な部分を分析することで、使い勝手の良いサイトへの改善を行うことができます。

例えば、企業が重要なページへ顧客を誘導するボタンをサイト内に設置していたものの、顧客側がほとんどボタンを認識せずほとんどクリックされていなかったというような事例も少なくありません。

以上のようにサイトを訪れる人々が必ずしも企業側の思惑通りに行動するとは限りません。しかし、 クリックヒートマップを活用することで、効率的にサイトを改善する事ができます。

ユーザーがカーソルを置いた箇所

最後はホバーマップです。人がサイトを閲覧する場合、クリックするときだけではなくスクロールする際やある部分を注視する際にもマウスのカーソルを合わせ、読み進めるに従ってそのカーソルを動かしていく傾向があります。

このツールはカーソルの動きを追って、多くの人がカーソルを置いた部分を赤く表示します。カーソルの動きを分析することで、Webページ内での人々の行動を細かく追うことが可能です。

ヒートマップだけでは分析できないこと

ヒートマップでは1ページというピンポイントでの分析しかできません。しかし、サイトに訪れた人々の行動を改善するにはある特定のページの分析だけでなく、サイト全体のデータから課題点を見つけ出し、より具体的な修正案を検証していくことも重要です。

そのため、サイト全体のデータ分析に優れている解析ツールや、どちらのパターンがコンバージョンにつながるかどうかを分析できるA/Bテストツールなどと併用していくとよいでしょう。

ヒートマップの導入事例：パナソニック株式会社

次に、実際に導入した企業の事例についてみていきます。課題点から解決策を見つけ、成果につながるまでの過程は、これから導入を検討している企業にとって参考になるでしょう。

今回はパナソニック株式会社の事例を見ていきます。（参照：User Insight|導入企業の活用事例：Panasonic）

課題点：インデックスページの直帰率の高さ

パナソニック株式会社（以下パナソニック）が運営する個人向けの家電商品関連Webサイトには、単なる価格比較サイトからより詳しいスペックの情報を求めて訪れる人が多い傾向にありました。

特にテレビ「VIERA」を扱うサイトでは、インデックスページが製品のスペックと魅力を伝えるための窓口的な役割を果たしています。そのため、インデックスページ内において直帰や離脱が多いと、サイト全体が機能しなくなるという事態が起こります。

以上のことから、直帰率・離脱率の改善、そしてインデックスページから各シリーズページにおける誘導方法の改善は欠かせない課題となっていたのです。

解決策：サイトの一覧性向上とスペック重視向けのコンテンツを作成

分析の結果、原因はスクロールを必要とする見づらさにあると気づきました。すぐにパナソニックはサイトの一覧性を向上させて、クリック率の高いものを上部へと移動させると共に、ページ下部にあったスペック表をファーストビューへと移動させました。このような解決策は、多角的な解析が視覚的に可能なヒートマップだからこそ分析できたことです。

また、スペックを重視する方に向けて、数字だけではわからないテレビの背面板の画像や、転倒防止パーツの設置方法などを画像で丁寧に紹介するコンテンツも新しく作りました。そして、顧客には欲しい商品の上位機種と下位機種の比較が必要不可欠と判断し、各製品の紹介ページには上位・下位機種へのリンクも設置しました。

成果：インデックスページの離脱率改善

解決のための対策を行った結果、インデックスページの熟読エリアが広がり、各製品ページへのクリックも増加していることがわかりました。インデックスページの離脱率は18.4％→14.4％と改善が見られ、インデックスページの滞在時間は1分7秒から49秒へと18秒も短くなりました。

インデックスページの滞在が短いということは、サイトを訪れた人が迷うことなく目的のページヘ移動できたことの証拠になります。よって、ページの役割は向上したといえるでしょう。改善結果をさらに解析することで、新たな改善点も発見できたということです。

ヒートマップツールを導入する際に確認するべきポイント

では、実際にヒートマップを導入する際、どのような点に気を付ければよいのでしょうか。
本記事では3つのポイントに分けて解説していきます。

価格帯・機能が自社に合っているか

まずは自社サイトの現状に合ったものを選ぶことが大切です。例えば、自社のサイト利用者はパソコンからアクセスしてくることが多いのか、またはスマホからアクセスしてくることが多いのかという点だけでも必要な機能は変わってきます。

パソコン利用者が多い場合はマウスグラフィ機能が必須です。しかし、スマホ利用者が多い場合は必要ありません。価格や契約形態といった面でも自社に合ったものを選びましょう。

データの保持期間や分析できるページ数は十分か

ものによっては、データを保存できる期間や分析可能なページ数が異なります。自社サイトにおいて、どのくらいのページ数を分析したいのか、そして分析したデータはどのくらい保存しておきたいのかをよく考えて選択することが大切です。

多くのツールで無料版と有料版が存在し、無料版より有料版の方がデータの保持数や分析できるページ数が多いです。
そのため、企業サイトの場合はお試しで無料版を使ってみて、自社に合うようであれば有料版を利用していくのが無難でしょう。

サポート体制や日本語対応しているか

導入後でもできるだけサポートが充実しているものを選ぶことが重要です。中には海外製のものもあるため、選ぶ際は日本語対応しているかどうかを必ず確認しましょう。初めての場合は電話やメールでのサポートはもちろん、運用の際にコンサルティングを行ってくれるツールを選ぶとより安心です。

おすすめヒートマップツール3選

ヒートマップを実際に導入を検討してはいるものの、たくさんある中からどれを選ぶべきか迷っている方も多いでしょう。
そんなツール選びに悩んでいる方のために、日本語対応で、なおかつ価格もリーズナブルなヒートマップツールを3つ紹介していきます。

ミエルカヒートマップ（ヒートマップ初心者向け）

初めての方に最適なツールが「ミエルカヒートマップ」です。管理画面が見やすく、有料ではありますがサポートも手厚いため、初心者でも安心して扱うことができます。

独自の自動でキャプチャを取得する機能が搭載しているのも大きな特徴です。
ページを改善する前と改善した後のキャプチャを自動で取得することで、ページ改善の前後で効果が格段に検証しやすくなります。

User Heat（コスパ重視向け）

「User Heat」はURL数無制限で30万PV、そして1000ページまで無料で利用できるため、コスパ重視の方に向いているツールです。マルチデバイスへの対応や、他に紹介している2つのツールにはないホバーマップを含めたヒートマ4種類以上のヒートマップが使えるなど、無料でも十分な機能が備わっています。

ただ、データ取得期間を指定することができない点と、サポートがない点には注意が必要です。初心者向けというよりは、社内にサイト分析が得意な社員がいる企業向けといえるでしょう。

Ptengine（アクセス解析ツールと一元化したい方向け）

「Ptengine」は、MicrosoftやNikeといった有名企業など20万社以上が導入している、国内でも信頼と実績のあるツールです。特徴としては、初心者でも扱いやすい点と、サイトのアクセス解析ツールとしても利用できることが挙げられます。

Googleアナリティクスと連携させれば、サイト内でコンバージョンまで至ったユーザーの流入経路や導線、各ページまでの動きを一括で分析することが可能です。離脱率やクリック率のデータと解析ツールをあわせて使うことで、より高度な分析ができるでしょう。

まずは無料版のヒートマップでサイトの課題を見つけよう

本記事ではヒートマップの役割から導入事例、おすすめのツールまでを取り上げてきました。ヒートマップはアクセス解析ツールだけでは知ることができない、Webページ内におけるユーザーの行動を分析できます。

自社のサイトを訪れた人々の行動を改善するためには、課題点を明確にすることが重要です。そのために、まずはお試しでヒートマップの無料版を使って課題点を洗い出してみるとよいでしょう。

導入する際は、対応している形式や日本語対応かどうかなど、自社のスタイルに合ったものを選んでください。課題点から仮説と検証を繰り返していくことが成果を上げるための秘訣です。