【ヒートマップの基礎知識】種類・メリット・可視化できる内容・注意点などわかりやすく紹介

ヒートマップとは？

ヒートマップは、Webサイトに訪れたユーザーの動きをサーモグラフィーのように色や濃淡で表す分析手法のこと。もっとも多く利用されている部分を赤、利用頻度の低い部分を青で表示し、ユーザーの細かな動きを可視化することができます。

サイト全体ではなくページごとにデータの収集ができるため、特定のページのみを改善する際にも役立てられます。すでに多く読まれているページをヒートマップツールで解析し収集したデータを使えば、ユーザーの動きが悪いページの改善にも活かせます。

ただし、PC・スマホ・タブレットなど、デバイスによりユーザーの行動は異なります。Webサイトを利用しているユーザーのデバイス比率を調査した上で、どのデバイスについて調査するのか検討しましょう。

ヒートマップの種類

ヒートマップには、実はさまざまな種類があります。それぞれ分析できる内容が異なるため、目的ごとに使い分けましょう。次に、5つのヒートマップについて解説します。

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

ひとつ目は、アテンションヒートマップです。ユーザーがページ上のどの部分を熟読しているのかを色によって視覚化しているヒートマップです。滞在時間が長い、よく読まれている部分は色が赤く、滞在時間が短い、読み飛ばされているところは青く表示されます。

長いコンテンツの場合、どの部分が読まれているのか気になるポイントです。スクロールの途中でどんな箇所が熟読されているのかを判断することもできます。

2．クリックヒートマップ

2つ目はクリックヒートマップです。名前の通り、ユーザーがクリックしている箇所を色で示すヒートマップです。多くのユーザーにクリックされた部分は色が赤く表示され、クリック率が少ないと緑色や青色で表示されます。

クリックヒートマップでわかるのは、リンクがクリックしやすい位置に設置されているか、わかりやすい位置にあるかなどです。

3．スクロールヒートマップ

3つ目は、スクロールヒートマップ。ページを訪問したユーザーがスクロールするごとに何％滞在したのかを色やファネルで可視化できます。一般的に訪問ユーザー数が多いと赤く、少なくなると緑や青で表示されます。トップページから下にスクロールすればするほど、ユーザーが減少していく傾向があります。ユーザーがどこまでスクロールし、どこで離脱したかが分析ができるツールです。

離脱している理由を検討し、コンテンツの順番を改善したり、離脱しやすい箇所に画像を差し込んだり、テキスト内に散乱していた情報を画像でまとめたりと、さまざまな改善が考えられます。

4．マウスフローヒートマップ

4つ目は、マウスフローヒートマップです。デスクトップ用ページを見にきたユーザーが、どのようにマウスを動かしているのかを可視化できます。マウスの動きと視線の動きには関連性があるといわれています。つまり、マウスがよく動かされている箇所は、視線が向きやすい箇所でもあるのです。どこが一番読まれているのか、逆に視線が集まらない場所はどこなのかを可視化し、サイトのレイアウトを組みましょう。

5．タッチアクションヒートマップ

5つ目のタッチアクションヒートマップは、スマホやタブレット専用のヒートマップ。タップやスワイプ、ピンチイン（縮小）、ピンチアウト（拡大）の動作がページ上のどこに集中しているのかを可視化できます。

これらの動作を分析することで、ユーザーが興味・関心を持っているコンテンツや、読みにくいテキストや見にくい画像などもわかります。

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

ヒートマップには様々な種類があるため、獲得したい情報にあわせて複数のヒートマップを使い分けることが必要です。可視化したい内容や、改善したいポイントにあわせて、必要なヒートマップを導入するようにしましょう。

1．クリックエリアの特定

クリックエリアの特定は、クリックヒートマップを利用します。

ページ内に配置されているリンクに対して、ユーザーがどれくらい関心を持っているかがわかります。リンク以外に、画像やテキストなどに対するクリックの動向もわかるため、ページ内でユーザーが有益だと感じる情報の指標にもなるでしょう。

2．熟読エリアの特定

熟読エリアを特定し、分析するにはアテンションヒートマップを利用します。

ページを訪問したユーザーの滞在時間から、読まれやすいエリアを特定することができます。コンテンツ内で注目を集めている部分は、Analyticsなどのデータでは可視化しにくいデータのため、ヒートマップが役に立つでしょう。

ページ内の改善施策を行う前後にデータを取れば、簡易的なABテストとしても使えて便利です。

3．終了エリアの特定

ユーザーがコンテンツのどこまでを読んだのか、どこで離脱したのかを知りたい場合は、スクロールヒートマップを利用しましょう。

特に、縦長のページを最後まで読んでほしい際は、離脱箇所の分析が役に立つでしょう。ECサイトであれば、決済画面で離脱しているユーザーが多い場合、改善点が見つかるかもしれません。

4．マウスの動き

デスクトップ用ページのみですが、ページを訪問したユーザーが行ったマウスの動きは、マウスフローヒートマップで可視化できます。ツール上では、マウスの軌道に番号を付けて表示され、ページごとのユーザーの動向の傾向が読み取ることができます。

コンバージョンにつながったユーザーと、離脱してしまったユーザーでは、どのような違いがあるのか、ユーザーごとの特徴を掴むことで、コンバージョンを改善するために役立ちます。

ヒートマップを導入する3つのメリット・活用方法

ヒートマップによるWebサイトの分析は、サイトの改善点を見つけるために大きな力になってくれるツールです。次に、ヒートマップを導入することによる3つのメリットをご紹介します。

メリット1．ユーザーのサイト上の細かい動きを把握できる

ヒートマップを導入する1つ目のメリットは、ユーザーの細かい動きを把握できることです。Google AnalyticsやGoogle Search Consoleなどのツールでは計測できないユーザーの動向を、ヒートマップでは細かく把握できます。

例えば、スクロールヒートマップを使えば、どこまでページをスクロールしたのかがわかります。ほかにも、マウスの動きがわかるヒートマップでは、デスクトップ専用ページを検証可能。

Analyticsなどのツールでは、クリックされた数は把握できるものの、クリックヒートマップで分析すれば、リンク以外の場所のクリック数を集計できます。クリックされやすいテキストや画像なども把握でき、それらの情報からCVRの改善に有効な改善策を考えることができるでしょう。

メリット2．ユーザビリティの向上からSEO改善につながる

ヒートマップを導入する2つ目のメリットは、ユーザービリティの向上、それによりSEO改善につながることです。

ヒートマップを使いユーザーの導線を把握し、適切な改善を行うことは、ユーザビリティが高いページを作ることにつながります。例えば、離脱率が高いページをスクロールヒートマップで分析し、原因を追求し改善へ導くこともできます。ユーザーが使いにくい、見にくいと感じる点をさまざまなヒートマップで洗い出すことにより、適した改善案を実行できます。

ユーザビリティが高いページを作ることは、SEOでも重視されている項目のひとつ。ヒートマップを導入して、適切な改善をすることで、結果的にSEO改善にもつながるといえるでしょう。

メリット3．CVR向上施策を検討できる

ヒートマップを導入する3つ目のメリットは、CVR向上施策を検討できることです。ヒートマップによる分析では、つい改善するべき点に注目してしまいますが、よい点を活かした施策を考えるのもひとつの手です。

クリックヒートマップで分析を行えば、クリックされやすいリンクのデザインの傾向なども把握しやすくなります。ユーザーの動きがよいなど、好感触なページの傾向を他のページにも展開し、CVR向上の施策も検討して見てください。

ヒートマップを導入する前に知っておきたい4つの注意点

ヒートマップは導入すれば自然と改善がのぞめるというものではありません。あくまでも、ユーザビリティ向上に適した施策を見つけやすくするサポートツールです。

効果的に利用するには、ヒートマップで可能なことと不可能なことを正しく知っておく必要があります。最後に、導入する前に知っておきたい4つの注意点を解説します。

注意点1．ヒートマップの導入のみでユーザーの行動心理は把握できない

1つ目の注意点は、ヒートマップの導入のみでは、ユーザーの行動心理までは把握できないことです。ヒートマップは、あくまでもユーザーの行動に焦点を当てて計測するツール。そのため、ユーザーの行動心理は推測でしか判断できません。

5種類のヒートマップを使えば、ページのどの箇所に時間をかけて読んでいるのか、クリックやタップ、スクロールなどを使ってどんな動きをしたのかはわかります。

ただ、それらの行動が「なぜ」行われたのかをデータとして収集することはできません。集計したデータをもとにさまざまな推測を立て、Webサイトの改善につなげることを意識しましょう。

注意点2．ヒートマップツール単体でサイト全体の傾向を把握するのは難しい

2つ目の注意点は、ヒートマップツール単体で、サイト全体の傾向を把握するのは困難ということです。

ヒートマップは基本的に、ページごとのユーザーの動向しか解析ができません。そのため、ページをまたぐコンテンツの分析や、サイト全体のアクセス傾向を知りたい場合は、Google Analyticsなどの別の分析ツールと組み合わせる必要があります。

注意点3．必要な機能を吟味する

3つ目の注意点は、機能を吟味することです。

ヒートマップツールは導入する際、サイト規模に対して機能を持て余したり、不要な機能が多かったりと、コストに対するメリットを感じられない場合も考えられます。

「とりあえず収集」したデータは、使い道がないケースもあります。「何を目的として導入するのか」「そのためにはどのような機能が必要なのか」を検討し、導入に必要な機能があるものを選びましょう。

また、ヒートマップを導入して改善案を実行した際のインパクトを算出し、導入する意義があるのかを検討できるとよいでしょう。

注意点4．解析できるデータの量や保存期間には制限がある

4つ目の注意点は、解析できるデータの量や保存期間に制限があることです。

ヒートマップツールは、さまざまな製品があり、解析可能なデータ量や保存期間に制限が設けられているものもあります。導入前にどの程度の解析が可能なのか、保存可能な期間は事前に確認しておくと安心です。

ヒートマップはWebサイトを成長させ、よりよいユーザー体験を生み出す手助けになるツール

ヒートマップツールは、Webサイトを改善する際に役立つ手法のひとつです。「熟読されている部分を知りたい」「離脱されている場所が知りたい」といった場合は、ヒートマップが役立つでしょう。

Analyticsなどの解析ツールではわかりにくいユーザーの動きを可視化できるヒートマップツールは、様々な種類やプランがあります。自社のWebページの分析に必要な機能がついたヒートマップを導入し、Webページ改善のヒントを見つけるきっかけにしてみてはいかがでしょうか。