これを読んでヒートマップツールを理解しよう！概要から使い方までまとめ

2020/09/30

ECのミカタ編集部

Webサイトの管理業務を担当している人であれば、「ヒートマップ」というキーワードに見覚えがある人も多いでしょう。ヒートマップとは簡単に言えば、Webページにおけるユーザーの行動や反応を可視化したものです。Webマーケティングにおいて有用な情報が期待出来るヒートマップですが、意外にもその実態はあまり認知されていません。そこで今回はヒートマップの基礎知識から導入方法まで網羅してご紹介します。

そもそもヒートマップって何？

Webサイトの作成者あるいは管理者であれば、ユーザーがどのようにサイトを閲覧しているのか気になるところでしょう。ヒートマップではWebページ上でユーザーが行ったマウスの動かし方・クリックした箇所・ページに滞在した時間・スクロールした箇所・ユーザーがそのWebページから離脱した場所など様々な要素が可視化されています。画像として表示される際にはこれらの要素がサーモグラフィー化され、色分けとそれぞれの濃淡で状況を把握するのです。

ヒートマップはいわゆる解析ツールの一種ですが、グラフや数値によって分析を行う他のツールとは異なり「色」によって分析結果を表示するという点が最大の特徴です。そのため、専門知識がなくても簡単に内容を理解する事が出来ます。なお、ヒートマップは「ユーザーによるマウスなどの動きを可視化したもの」と「Webページを閲覧しているユーザーの目線の動きを可視化したもの」の2種類が代表的です。前者は「マウストラッキング」、後者は「アイトラッキング」と呼ばれるので名称も合わせて覚えておきましょう。

ヒートマップツールとは？

ヒートマップを実際に表示するためには「ヒートマップツール」と呼ばれる製品を利用する事になります。ヒートマップツールは様々な種類のものが存在しているため、目的や用途によって最適なタイプを選ぶ事が重要です。例えば前述のマウストラッキングやアイトラッキングの他にも、ユーザーがWebページ上でクリックした場所・頻度が分かる「クリックトラッキング」と呼ばれるタイプも存在します。スクロール到達率を可視化するタイプの「スクロールトラッキング」、ユーザーの目線の動きを検知して熟読の度合いを可視化するタイプなども覚えておきましょう。

情報の可視化に長けたヒートマップツールを用いる事で、ユーザーがWebページ上の「どの部分に」「どれくらいの」興味・関心を持っているかをある程度直感的に把握する事が可能です。定量的に測定されるためよほど母数が少ない場合を除けば信頼性においても問題はないでしょう。情報が項目ごとに色分けされているため単純明快であり、WebデザインやWebマーケティングについての知識を持たない人との議論も容易に行えます。Webサイトのデザインは何もかも専門家の意見を取り入れる事が正解であるとは限りません。時には専門知識を持たない「ユーザー目線」に近い人の意見が重要になる場面もあるのです。

ヒートマップツールで何が分析できるの？

ヒートマップツールでは分析する要素に合わせて表示方法を変更可能です。例えば「ユーザーがそのWebページをどこまで読んで、どこで離脱したのか」を分析する際には「スクロールマップ」と呼ばれる画面を参照します。「アテンションマップ」という表示方法に切り替えると、今度は「ユーザーがどの場所でスクロールを止めて、どれくらい滞在していたか」を分析する事が可能です。滞在時間が長いという事は、ユーザーがその部分を熟読しているという事を意味しています。この2つのマップで分析を行う事でユーザーの関心が高い部分と低い部分を洗いだし、ユーザーがWebページから離脱する可能性を下げられるでしょう。なお、スクロールマップとアテンションマップは画面全体がサーモグラフィーのグラデーションで表示されます。ヒートマップは基本的に赤やオレンジといった暖色系はユーザーの関心が高く、青っぽい寒色系がユーザーの関心が低い部分です。

Webページの中でどこがクリックされたのかを分析する場合には「クリックマップ」を使用しましょう。この表示方法ではクリック頻度が高い箇所が赤く、クリック頻度が低い箇所は青く部分的に色分けされます。また、「ホバーマップ」という表示方法では「ユーザーがどこにカーソルを置く傾向にあるか」を調べる事が可能です。カーソルの動きを追う事も出来るので、ホバーマップとクリックマップの分析結果を参考にすればWebページ上に効率の良い導線を作れるでしょう。

ヒートマップの導入のしかた

ヒートマップツールは様々な製品がリリースされているものの、基本的にはどのツールでも導入方法は同じと考えて問題ありません。無料ツールと有料ツールで必要となる入力事項が若干異なる場合はありますが、どちらもまずはユーザー登録を行いましょう。メールアドレスやログインパスワードなどの設定はほとんどのツールで必須となっていますが、氏名・企業名・電話番号などは任意となっている事もあります。

ユーザー登録が完了すると管理画面にログイン出来るようになるので、次にそこから「解析タグ」を取得して分析したいページに設置しましょう。解析タグを手動で設置するには、管理画面内にある「埋め込み用解析タグ」をコピーします。次に解析対象となるページのHTMLソースを表示させて「」のタグ内に解析タグをコピペして追加しましょう。なお、解析対象のWebページがWordPressで作成されている場合はプラグインから設定が可能な場合があります。WordPressの新規プラグイン検索欄から使用するヒートマップツールをインストールしたら、ヒートマップツールの管理画面にある「サイトID」をWordPressのプラグインページに入力しましょう。この場合は手動で解析タグを設置する作業は不要です。

ヒートマップツールのメリット・デメリット

ヒートマップツールを用いる事の大きなメリットは、やはり「色」という視覚的に分かりやすい表現方法を採用している点にあります。専門知識がなくてもユーザーの動向が細かく分析可能となっているため、誰でもすぐにツールを有効活用する事が出来るのです。また、Webマーケティングではしばしば「アクセス解析ツール」と呼ばれるものが用いられますが、アクセス解析ツールの多くは「Webサイト」という大きな括りで分析を行います。これに対してヒートマップツールは「特定のWebページ内」という小さな単位での分析が可能です。

ヒートマップツールは細かくユーザーの動きを追う事に長けています。「ユーザーの関心はどのようなポイントにあるのか」「見て欲しいポイントはユーザーの目にしっかり留まっているのか」というように、ヒートマップツールはWebサイトの運用・管理・改善に必要となる具体的な情報を得るのに適したツールなのです。

一方で、ヒートマップツールはWebサイト全体でユーザーがどのように動いているのかを把握する事が難しいというデメリットもあります。例えば「ユーザーがどのようにして自社のサイトに辿り着いたのか」「自社サイト内でユーザーに取って欲しいアクションは達成出来ているのか」といった大きな枠組みの分析は、アクセス解析ツールの得意分野です。ヒートマップツールとアクセス解析ツールは併用しながら必要に応じて情報を選択する事で、ミクロな視点でもマクロな視点でも自社サイトの改善に繋げられるでしょう。

ヒートマップツールを駆使してユーザーの本質をつかもう

ECサイトは顧客の表情や行動が目に見えない分、改善が難しいと感じる人も少なくありません。しかしヒートマップツールを正しく活用すれば、ユーザーの本質的な関心を細かく分析する事が可能なのです。ヒートマップツールはミクロ視点での分析には長けていますが、Webサイト全体の分析は苦手と言えます。アクセス解析ツールやユーザーテストなどと組み合わせて運用すれば、自社サイトのクオリティを飛躍的に向上させられるでしょう。