お知らせ

News

BLOG

30分無料相談

わたしたちのアウトプット

ヒートマップとは? 活用事例と改善方法を解説

2023.08.27更新

Web解析で活用する、ユーザーの行動を色などで可視化するツールのことをヒートマップといいます。この記事ではヒートマップに関する基礎知識や導入方法、活用する際の注意点などを解説しています。ヒートマップを利用できる無料ツール […]

Web解析で活用する、ユーザーの行動を色などで可視化するツールのことをヒートマップといいます。この記事ではヒートマップに関する基礎知識や導入方法、活用する際の注意点などを解説しています。ヒートマップを利用できる無料ツールや利用者の声、活用事例も紹介しているため、ヒートマップの活用方法がわからない方にもおすすめです。

ヒートマップとは?

ヒートマップは、ユーザーがWebページ内でとった行動を可視化する技術です。注視されているエリアや離脱するエリア、クリックされた位置などを色付けすることができます。ヒートマップを利用することで、Webサイトの改善点を直感的に見つけ出しやすくなります。

ヒートマップの機能

ヒートマップの主な機能は、「熟読エリア」「終了エリア」「クリックエリア」の4つです。各機能について説明します。

熟読エリア

熟読エリア(アテンションヒートマップ)は、ページ内で注目されているコンテンツを色で可視化する機能です。例えば、よく読まれている箇所は赤色で、あまり読まれていない箇所は青色で表示されます。

終了エリア

終了エリア(スクロールヒートマップ)は、ユーザーがページのどの位置で離脱したかを色や数値などで可視化する機能です。例えば、到達したユーザー数が多いエリアは赤色で、少ないエリアは青色で表示されます。

クリックエリア

クリックエリア(クリックヒートマップ)は、ユーザーがどの箇所をクリックしたかを色や数値で可視化する機能です。例えば、クリック率が高い箇所は赤色で、クリック率が低い箇所は青色で表示されます。

全クリックエリア

全クリックエリアはクリックエリアの一種です。ヒートマップツール「User Insight」の場合、クリックエリアが主にリンクに対するクリックを表示するのに対して、全クリックエリアはリンク以外のクリックも色付けして可視化します。

ヒートマップを活用するメリット

ヒートマップを活用するメリットは、ユーザーの動きに基づいてページを改善できることです。ヒートマップの機能別に、具体的なメリットを2つ紹介します。

ユーザーが読んでいる箇所がわかる

熟読エリアや終了エリアを特定することで、ユーザーが読んでいる箇所を判別することが可能です(具体例は下表に記載)。このデータを基に、コンテンツや構成の見直しを行うことができます。

 

熟読エリア ユーザーが関心をもったエリアを把握できる
終了エリア ユーザー数が減少するエリアは、「コンテンツが不適切」または「リンクが十分に機能している」可能性がある

 

ユーザーの選択範囲がわかる

クリックエリアを特定することで、ユーザーがリンクと間違えてクリックした文字や画像、ユーザーの関心などを知ることが可能です。このデータを根拠に、リンクのデザインを変更したり情報の追加を行ったりすることで、CVRの向上やユーザビリティの改善につなげることができます。

ヒートマップを活用するデメリット

ヒートマップの主なデメリットは、ユーザーの行動や心理の把握に限界があることです。この2つのデメリットを改善策と併せて説明します。

全体の行動は把握不可能

ヒートマップはページ単位で分析を行います。そのため、サイト全体の行動を把握することはできません。サイト全体を改善したい場合は、Googleアナリティクスなどのアクセス解析ツールを利用しましょう。

ユーザー心理は把握不可能

ヒートマップはユーザーの行動データを視覚化したものです。そのため、ヒートマップでユーザー心理を正確に把握することはできません。

 

例えば熟読エリアの場合、内容に興味があり熟読したのか、内容がわかりづらいため読むのに時間がかかったのかは不明です。ユーザー心理を明らかにしたい場合は、ユーザーテストやアンケートツールなどの併用をおすすめします。

ヒートマップの導入方法

ヒートマップの導入は、解析タグをサイトに埋め込むことで完了します。後述する3つの無料ツール(Microsoft Clarity、UserHeat、Ptengine)の導入手順は以下のとおりです。

 

【Microsoft Clarityの導入手順】

はじめにMicrosoft Clarityにサインアップします。サインアップで使用できるアカウントは「Microsoft」「Facebook」「Google」の3つです。いずれのアカウントも所有していない場合は、先にアカウントを作成してください。

 

次に、入力フォームにサイトの名前やURLを入力して、新規プロジェクトを作成します。プロジェクトが作成できたら、Clarityコード(タグ)をサイトに埋め込みます。タグの設定手順は次のとおりです。

 

1.歯車アイコンをクリック

2.セットアップをクリック

3.「Googleタグマネージャーを使用」または「手動」でインストールする

 

以上で導入完了です。

 

【UserHeatの導入手順】

はじめにユーザー登録を行います。UserHeatの申込みフォームにWebサイトのURLを入力して、その後表示される入力フォームにメールアドレスやパスワードなどを入力してください。

 

次に、発行された解析タグをサイトに埋め込みます。計測したい全てのページにタグを埋め込んだら、導入完了です。

 

【Ptengineの導入手順】

はじめにメールアドレスやパスワードなどを入力して、アカウントを作成します。Googleアカウントで登録することも可能です。アカウントが作成できたら、解析タグをサイトに埋め込みます。これで導入は完了です。

ヒートマップを活用する際の注意点

ヒートマップを活用する際の注意点は、ヒートマップからコンテンツやサイトの質は判断できないです。以下で判断できない理由や対処方法について説明します。

コンテンツの質は判断できない

ヒートマップの場合、ユーザー心理はユーザーの行動から推測することになります。推測を誤っている可能性もあるため、ヒートマップのみでコンテンツの質を判断することは不可能です(詳細は「ヒートマップを活用するデメリット」を参照)。コンテンツの質を判断する際には、ユーザーテストやアンケートツールなどを併用しましょう。

Webサイト自体の質は判断できない

ヒートマップはページ単位でユーザーの行動を把握するツールです。サイト全体の行動やユーザーの満足度は測定不能であるため、ヒートマップでサイトの質を判断することはできません。

 

サイトの質を高めるためには、ユーザビリティの向上を図る必要があります。ユーザビリティが高いサイトの主な特徴は次の5つです。

 

・有益な情報が掲載されている

・ページの表示速度が速い

・視認性が高い

・信憑性が高い

・ユーザーのニーズにマッチしている

ヒートマップが使える無料ツール3選

ヒートマップが無料で利用できる3つのツールを紹介します。PVやページ数の制限、利用できる機能などにそれぞれ差があるため、用途に応じて使いやすいツールを選びましょう。

Microsoft Clarity

Microsoft Clarity (クラリティ)は、Microsoftが提供しているユーザー行動分析ツールです。PVに制限はなく、1つのアカウントで分析できるサイト数も無制限です。ヒートマップでは、スクロールヒートマップやクリックエリアなどが利用できます。

 

このほかに、サイトのアクセス解析に必要な情報を表示する「ダッシュボード」や、ユーザーのページ内の動きを記録して表示する「レコーディング」などの機能もあります。Googleアナリティクスとの接続も可能です。

 

■公式サイト:https://clarity.microsoft.com/

UserHeat

UserHeat(ユーザーヒート)は株式会社ユーザーローカルが提供しているヒートマップツールです。1サイトあたり月間30万PVまで分析可能です。次の5種類のヒートマップを無料で利用できます。

 

熟読エリア どのようにページが見られているのかをマウスの動きや滞在時間をもとに色付けして表示
終了エリア ページがどこまで読まれたかを数値などで表示
クリックエリア ページのどこがクリックされたかを色付けして表示
マウスムーブ ユーザーのマウスの動きを表示
離脱エリア ユーザーがどのくらいスクロールして離脱したかを表示

 

■公式サイト:https://userheat.com/

Ptengine

Ptengine(ピーティーエンジン)は、株式会社Ptmindが提供しているサイトのパフォーマンスを向上させるツールです。無料版では月間3,000PVまで計測可能です。ヒートマップのほかに、アクセス解析やA/Bテストなども利用できます。ヒートマップに関する主な機能は次の4つです。

 

クリックヒートマップ ユーザーがクリックしている箇所を色付けして表示
アテンションヒートマップ ユーザーが注目している箇所を色付けして表示
スクロール到達率 ユーザーの何パーセントがどこまでスクロールしたかを表示
要素分析 ページ内の各要素のクリック数やクリック率を表示

 

■公式サイト:https://www.ptengine.jp/

ヒートマップの導入効果

前述の無料ツール利用者の声をもとに、ヒートマップの導入効果をまとめました。ヒートマップ導入の主な効果は次の5つです。

 

・アクセス解析ツールではわからないページ内でのユーザーの行動を把握できるため、ユーザーの行動理由を推測して、ランディングページ(ユーザーが最初にアクセスするページ)や入力フォームなどの改善につなげられる

 

・視覚的にサイトの課題を抽出できる

 

・直感的に理解できるデータのため、専門知識がないメンバーにもそのまま提示したり、他部署への説明に利用したりできる

 

・コンテンツの配置が不適切なために生じていた、サイトに掲載している内容に関する問い合わせが減少した

 

・ユーザーが熟読しているコンテンツや、想定外のクリック(リンクを張っていない箇所をクリックしている)などを知ることができる

 

ヒートマップを導入することでサイトの課題を視覚的に抽出したり、専門知識がない相手への説明にデータを利用したり、根拠をもってページを改善したりすることが可能になります。

まとめ

ヒートマップはユーザーの行動の把握に役立ちます。ヒートマップを導入することで、ユーザーの熟読エリアやクリックエリアなどを視覚的に理解することが可能になります。しかし、ヒートマップの分析結果に基づいてユーザー心理を推測することはできますが、ヒートマップはユーザー心理を把握するツールではないため、必ずしも正確ではありません。また、コンテンツやサイトの質は判断できません。ヒートマップを活用する際はこの2点に注意が必要です。ヒートマップ活用は、何を検証したいのかを明確にすることです。検証のポイントを基に分析結果から改善点を見極めて、ページの改修を行います。ヒートマップを活用して、効果的にページを改善しましょう。



早坂遊羽

株式会社koujitsu 取締役 COO


京都大学卒業後、大手SIerにてITコンサルタントとして従事。官公庁や大手民間企業のプロジェクトにおいてメンバーとして関わる中で、よりハンズオンの支援に携わりたいと考えるようになる。その後PRコンサルタント、事業会社広報、人材事業立ち上げを経てkoujitsuへ参画。現職ではマーケティング事業部を統括しながら、プレイヤーとしてクライアントのマーケティング戦略企画・実務運用にも携わっている。

「koujistuらしさ」で
日々向上し、
マーケティングの
力で未来を変える

わたしたちは、「koujistuらしさ」である
7つの心を大切にします。
持つべき心でもあり、『核』になります。
日々業務を行う際、自分自身で考え
チーム全体で力を発揮します。
リモートワーク/フレックスで結果を出すには

1人1人の自律した心が大切だと考えております。

会社情報を見る

Contact Us

マーケティングの力で、顧客の未来を変える

わたしたちの原点でもある
「身近な人を幸せにする」ことと、
「お客さまと長く信頼が出来るパートナー企業で
あり続ける」ことを大事に
しております。
少しでも気になることがございましたら
お問合せください。
ご相談の段階では、料金はいただいておりませんので
お気軽にご相談ください。

お問い合わせはこちら