ヒートマップとは?ページ改善に役立てる方法や成功事例を紹介
2021/07/14 (Wed)
ヒートマップとは?ページ改善に役立てる方法や成功事例を紹介
Kaizen 編集部

著者: Kaizen 編集部

UX

ヒートマップ

商品・サービスのLP(ランディングページ)、オウンドメディアなど、ユーザー獲得や認知向上、売上向上に向けて作り上げた各種ページも、ユーザーに届かなければ意味がありません。

またアクセス数が多くとも、それに比例したCVR(コンバージョンレート)がなければ効果的な施策とはいえないでしょう。

そこで活用したいのがヒートマップ分析です。ヒートマップは、ユーザーがページのどこを閲覧し、どこに興味を持っているのかを視覚的に表示できるツールです。

「ページを公開したものの、伝えたい情報をユーザーが見ているのかわからない」「アクセス数は目標に達しているが、CVRが低い」など、各種Webページに課題を感じているのなら、ヒートマップを用いた分析を実施してみましょう。

本記事では、ヒートマップ分析の基本から、ヒートマップ分析を用いた改善事例、さらにはおすすめのヒートマップツールを紹介します。

ヒートマップ分析の活用方法を知り、自社のWebサイトやLPの改善に役立てましょう。

”Webサイト改善”にお悩みはありませんか?

サイト改善に取り組みたいけど「自社にノウハウやリソースがない……」「DXってなにから始めれば良いの……?」といったお悩みはありませんか?そんなときは、WebサイトのUX改善を実現できる「KAIZEN ENGINE」の活用をご検討ください。特徴は以下のとおり。

    • タグを1行挿入するだけで導入可能。開発コストを大幅に削減
    • 既存システムに影響することなく分析・改善施策を実行でき、CVR(コンバージョンレート)の改善に貢献
    • DMPやCRMデータと柔軟に接続。より深い顧客理解が可能

これからDXに取り組まれる方や、Webサイト改善による事業成長を実現したい方へ、「KAIZEN ENGINE」の概要やこれまでの導入事例を掲載した資料をご用意しました。ぜひご一読ください。

まずは無料資料をダウンロード

▼目次

1.ヒートマップとはユーザーの行動を可視化するツール

2.ヒートマップ分析から得たデータの活用方法

3.ヒートマップ分析を行うポイント

4.ヒートマップ分析の活用事例

5.ヒートマップ分析のおすすめツール

6.まとめ|ヒートマップで効果のある施策をピンポイントに

1.ヒートマップとはユーザーの行動を可視化するツール

ヒートマップ

ヒートマップとは、ユーザーがWebページ上でとった行動や反応を確認できるツールです。ページのどこが見られているのか、ページ上のどこでクリックやタップをしているのかが色や図形で表示します。また、ユーザーのスクロール状況、離脱ポイントの可視化も可能です。

たとえば、ページ上でよく見られている部分が赤色に、見られていない部分をが青色に表示されたり、ユーザーがクリック・タップしている場所が色や形の違うドットで表示されたりします。これにより、直感的にページの良い部分・悪い部分を認識できます。

「新しいLPを公開したけれど、ちゃんと読まれているのだろうか」「ページへの訪問数は多いけれど、申し込みや購買につながらない」など、マーケティング施策に対する効果に疑問を感じている場合、ヒートマップを用いて読了箇所やクリックエリアを把握することで、Webページの課題の洗い出しや、改善に役立てられます。

 

2.ヒートマップ分析から得たデータの活用方法

ヒートマップで得た情報を、どのようにして改善施策に落とし込めばよいのでしょうか。

とあるWebサイトでは、トップに設置した動画しか閲覧されておらず、ページ下部の重要コンテンツがほとんど閲覧されていない状況でした。これでは、いくらコンテンツを更新してもユーザーの目に届くことはありません。そのため、読んでもらうための工夫、たとえば読んでもらいたいコンテンツをページ上部に配置するようコンテンツの入れ替えを検討します。

重要なのは、「見せたいものは、見られる位置に置く」ことです。ファーストビューでほとんど離脱している状態なら、ページ内の要素の順番を入れかえます。トップ部分にボタンや重要コンテンツを入れるなどページ改修を行いましょう。

LPのCVRを向上させたいときには、「ボタン周辺にユーザーが求める情報があるか」をヒートマップで確認します。ページ下部など、ボタン周辺以外の箇所にユーザーが注目している場合、「ユーザーがほしい情報が見やすく整理されていない」可能性があります。注目されている情報をページ上部やボタン周辺に配置することで、ユーザーがほしい情報がボタン周辺に網羅されます。

特にスマートフォンでLPを閲覧する場合、何度もスクロールしないと情報を確認できないページにストレスを感じるユーザーは少なくないでしょう。必要な情報をページ上部にまとめることで、ユーザーがスムーズにアクションできるLPに改善できるのです。

 

3.ヒートマップ分析を行うポイント

ヒートマップ分析でページの改善に取り組む際には、次の3つの分析ポイントを理解したうえで仮説を立て、改善・検証を繰り返します。

熟読エリア

heat_map_01

熟読エリアとは、文字通りよく読まれているエリアを指し、ヒートマップ上では赤色で表示されるエリアです。まず、ユーザーに読んで欲しいコンテンツがページ上で赤色に表示されているか、つまり熟読されているのかを確認します。

読んでほしいエリアが熟読されていない場合、ユーザーにとってわかりにくいコンテンツになっていたり、ユーザーのニーズとは異なる情報を掲載していることが考えられます。熟読してもらうためにコンテンツの入れ替えやデザインの改修を行いましょう。

その際、ページ全体を変えるような大掛かりな改修を行うよりも、課題となる箇所にフォーカスし、A/Bテストを繰り返していくことをおすすめします。テストパターン反映後、一定期間を置いた後に再度ヒートマップを確認し、熟読エリアの変化を見て効果を検証しましょう。

 

終了エリア

heat_map_02

終了エリアとは、ユーザーがページを離脱した場所を指します。上記画像のパーセンテージと図形はユーザーの維持率を示しています。

終了エリアを確認する際には、多くのユーザーが離脱している位置とコンバージョン地点の前後をチェックします。LPのようにユーザーのアクションを明確に求めるページの場合、コンバージョン地点前の離脱は機会損失を示します。

たとえば申し込みボタンや購入ボタンなどの前で多くのユーザーが離脱しているケースでは、ボタンの位置を変えるなどの改修が必要です。

他にも、Webメディアで記事の滞在時間を延ばしたいのにファーストビューで離脱されている、といったケースでは、記事全体の構成やデザインを見直す必要があるかもしれません。

終了エリアが、ユーザーがアクションする位置より下で、行動を促せているのであれば問題ないでしょう。

 

クリックエリア

heat_map_03

クリックエリアでは、ユーザーがページのどこをクリックまたはタップしているのかが分かります。クリックエリアが示すのは、ユーザーが特に興味を持っている場所です。

申し込みボタンや購入ボタンなど、クリックしてほしい場所が多くクリックされているのであれば問題ありません。しかし、クリックやタップをしても意味のない場所で多く行動している場合、ユーザーを迷わせるデザインであることを示しています。

意図する箇所をクリックしてもらうためにも、ユーザーを迷わせない、よりわかりやすいデザインに改修する必要があります。

 

4.ヒートマップ分析の活用事例

ヒートマップ分析を活用し、適切な改善を行うことでどのような効果が現れるのでしょうか。「KAIZEN ENGINE」のヒートマップ機能から得た分析結果をもとに行った、改善施策が実を結んだ事例をご紹介します。

SBI証券|ユーザのニーズを反映してCVR110%を達成

SBI証券

ネット証券大手のSBI証券では、新規口座開設の増加、NISA・つみたてNISAのユーザー拡大を目的としてLPを設けていました。

LPから口座開設の申し込みはそれなりにあったものの、さらにLPの効果を生み出したいと考えたとき、どの要素がユーザーに刺さっているのかわからず改善ポイントも導きだせない状況でした。

「ユーザーがどこまでLPを見ているのか知りたい」「申し込みを増やすために、訴求内容やページの構成要素を見直したい」という課題からヒートマップを用いた分析を実施。ユーザーの動きを可視化した結果、ページトップだけでなく、ページ下部にもユーザーが興味を示している要素があることがわかりました。それが、「100円から積立スタート」という文言です。

そこで、「ユーザーは手軽に始められることに魅力を感じている」という仮説に基づいて、ページ上部で『100円から積立スタート』の部分を強調する改修を実施。新デザイン案のLPを公開し検証したところ、LPのCVRは110%の改善が見られました。

ヒートマップ分析ではユーザーの行動を客観的に把握できるからこそ、主観にとらわれないインパクトのある改善策が実施できました。

 

吉本興業|読まれる記事づくりにヒートマップを活用

吉本興業

多くの芸人が所属する大手芸能プロダクションの吉本興業は、「ラフ&ピース ニュースマガジン」という月数百本ペースで記事を公開するオウンドメディアを運用しています。

同メディアの目的は、所属する芸人の認知拡大や新たに芸人を目指す人を吉本興業に勧誘することにあります。芸人自らが書いた記事や芸人を紹介する記事によって、芸人それぞれの魅力やコメディアンという職業の魅力を伝えています。

日々多くの記事を公開する同メディアは、公開した記事のアクセス数はわかるものの、訪問ユーザーが記事をどこまで読んでいるのかを把握できていませんでした。所属するタレントの魅力をユーザーに伝えるためには、できれば最後までじっくり読んでもらう必要があります。トップで離脱される記事ではほとんど目的を果たせません。

そこで、種類の異なる複数の記事をピックアップし、ヒートマップで分析・比較しました。すると傾向として、「記事内に適宜写真が挿入されている」「1記事内に複数の芸人が登場する」「芸人のSNSの投稿を引用している」といった記事が、最後までよく読まれているとわかりました。

同時に、内容が充実した記事でも、文字ばかりで適宜写真が挿入されていないなど、前述の要素がなければファーストビューで離脱されていた現状が浮き彫りとなりました。

ヒートマップ分析と分析データの活用によって、1記事あたりの平均滞在時間を長くし、最後まで読まれる記事を作るための要素が明確になりました。以来、制作サイドにもポイントを共有し、「読まれる記事の量産」が可能となったのです。

 

5.ヒートマップ分析のおすすめツール

ヒートマップ分析ツールはWebページにある課題を視覚的に表出させてくれる、Webページ分析初心者にも使いやすいツールです。

これからヒートマップ分析を取り入れる場合、数あるヒートマップ分析ツールの中からどれを選べばよいのでしょうか。無料のものから有料版まで、すぐに導入できる使いやすいヒートマップ分析ツールをご紹介します。

 

User Heat|無料で使えるのに高機能

User Heat

※出典元:User Heat|株式会社ユーザーローカル

「User Heat(ユーザーヒート)」は株式会社ユーザーローカルが提供するヒートマップツールです。

熟読エリア、終了エリア、クリックエリアなど、ヒートマップツールの基本的な分析機能を有しています。1サイト当たり月間30万PVまでなら無料で使えます。

入力フォームに分析したいサイトのURLを入力するだけで、ヒートマップ分析を行える手軽さも特徴です。「User Heat」は無料ながら、PCだけでなくスマートフォンユーザーの行動も把握できます。

コストを掛けずにヒートマップを活用したい企業やこれからヒートマップを導入したい企業は、このツールから利用してみましょう。

 

User Insight|ユーザー属性解析機能つき

User Insight

※出典元:User Insight|株式会社ユーザーローカル

「User Insight(ユーザーインサイト)」は、基本の機能に加えてユーザーの年齢や性別、インターネットの利用頻度を推測できる属性解析機能を備えたツールです。こちらもUser Heatと同じく、株式会社ユーザーローカルが提供しています。

これまで数多くの企業が導入しているツールで、LPはもちろん、メディアやECサイト、広告、SaaSやBtoBなど分野やターゲットの特徴に特化した分析も可能です。

属性分析機能を用いて「User Heat」よりも詳細な分析を行いたい、自社のサービス・商品に適するヒートマップツールを使いたい企業におすすめです。

 

USER DIVE|フィルタ機能でより詳細な分析が可能

USER DIVE

※出典元:USER DIVE|株式会社 UNCOVER TRUTH

「USER DIVE(ユーザーダイブ)」は、多彩なフィルタ機能でより詳細な分析を行えるヒートマップツールです。たとえば、コンバージョンしたユーザーのみ、新規ユーザーのみ、リピーターのみの行動を解析できます。

ユーザーの属性や行動別にデータの違いが可視化されるため、目的に沿ったより効果的な改善施策の立案に役立ちます。

さらに「USER DIVE」は他社ツールと連携できます。例えば、CX(顧客体験)プラットフォーム「KARTE」との連携で行動データから顧客を分類し、セグメントごとのヒートマップを表示して、セグメント別に興味を持っているコンテンツを把握できます。

これらの分析結果をもとに、セグメント別に誘導するLPや商品を変えることで、より少ないクリック数でコンバージョンを得られるのです。

他ツールとの連携によって、多角的な分析が可能となり、よりよい顧客体験につなげる改善を行えます。

 

KAIZEN ENGINE|改善施策をすぐに実行できるデザインエディター機能付き

KAIZEN ENGINE

KAIZEN ENGINE|株式会社Kaizen Platform

KAIZEN ENGINE(カイゼンエンジン)」は、ヒートマップで得た改善ポイントをすぐにデザインに反映できる、デザインエディター機能付きのツールです。

KAIZEN ENGINEにはアナリティクス機能もあるため、他社のツールを連携させる手間なく、サイト全体の成果を可視化できます。

ヒートマップ機能による課題の可視化、課題解消のためのデザイン改修、ページ改善の効果測定をトータルで実施できるのが特徴です。

「KAIZEN ENGINE」は、分析したいサイトにタグを挿入するだけで利用できます。既存のシステムに影響を与えず、タグを挿入したサイトに動画の設置やパーソナライズ機能を付与できます。

ヒートマップ分析で得た課題を手間と時間をかけずに解消したい、PDCAサイクルを効率化させたい企業に向いています。LPやWebメディアの改善にお役立てください。

 

6.まとめ|ヒートマップで効果のある施策をピンポイントに

ヒートマップ分析は、WebサイトやLP等の課題を可視化できるツールです。ヒートマップ分析の結果、ユーザーが目的に沿った行動をしていない場合は、どう改善すればよいのか仮説を立て、ページ要素の入れ替えやデザイン改修を実施して課題の解決に取り組みましょう。

ヒートマップ分析、仮説、改善、検証を繰り返し、目的を達成できるWebページ作りを進めていきましょう。

Webサイト改善のことなら「KAIZEN ENGINE」

サイト改善に取り組みたいけど「自社にノウハウやリソースがない……」「DXってなにから始めれば良いの……?」といったお悩みはありませんか?そんなときは、WebサイトのUX改善を実現できる「KAIZEN ENGINE」の活用をご検討ください。

「KAIZEN ENGINE」は、これまで700社・30,000件以上の改善に取り組み、企業の事業成長を支援してきたKaizen Platformが提供するWebサイト改善のプラットフォーム。Webサイトにタグを1行入れるだけで、既存システムに影響することなく改善環境を構築でき、WebサイトのUX改善を実現します。「KAIZEN ENGINE」の特徴は以下のとおり。

  • タグを1行挿入するだけで、既存システムに影響することなく導入可能。膨大な手間や時間、開発コストを削減
  • 高度な分析やABテストなどパーソナライズWebを実現し、CVR(コンバージョンレート)の改善に貢献
  • DMPやCRMなど多種多様なデータと柔軟に接続でき、より深い顧客理解が可能

これからDXに取り組まれる方や、Webサイト改善による事業成長を実現したい方へ、「KAIZEN ENGINE」の概要とともに、これまでお取り組みをしてきた企業さまとの代表事例を掲載した資料をご用意しました。ぜひご一読ください。

まずは無料資料をダウンロード

 

Kaizen Platformのコラムを定期購読する(月1回)

関連記事

記事一覧へ戻る