0120679026 営業時間:10時~19時(土日祝除く)
今すぐダウンロードする

成果追求型Webマーケティングメディア

無料ヒートマップツール「Clarity」の使い方と4つの特徴

  • RSS購読
  • リンクをコピー
Clarity サムネイル

皆さまは、Webマーケティングをするにあたって自社サイトにヒートマップツールを導入されていますか?

ヒートマップとは、サーモグラフィーを利用してサイト訪問者がよく見たコンテンツやページがどの部分か直観的に理解できるように可視化する手法のことです。

ヒートマップを使用した参考例

ヒートマップを使用して作成したレポート例

ヒートマップを使うことでサイト訪問者がページをどこまで読んだのかや読んでほしい箇所がきちんと読まれているかなどが分かります。これらの情報を活用してLPO(ランディングページ最適化)に役立てることで、より成果を出せるウェブサイトになります。

この記事ではMicrosoftが無料で提供しているヒートマップツール「Clarity(クラリティ)」の導入方法とLPOに役立つ特徴をご紹介します。

関連記事:『LPO(ランディングページ最適化)とは?基礎知識と改善ポイント5選!

Clarityとは?

Clarity画面

ClarityはMicrosoft社が無料で提供しているヒートマップツールです。無料であるにも関わらずデータ分析はほぼリアルタイムで表示され、アカウントあたりのサイト数の制限もなく、トラフィックの制限もないため大規模のウェブサイトでも使用することが可能です。

女性編集者A
女性編集者A

はじめてヒートマップツールを利用する方やお試しで利用してみたい方にオススメのツールです。

参考:『Clarity公式ウェブサイト』

Clarityの導入方法

 事前に用意が必要なものは以下になります。

  • Googleアカウント/Microsoftアカウント/facebookアカウント
  • サイトURL
  • Googleタグマネージャー(任意)
  • Google Analyticsアカウント(任意)

Step.1 Clarityのタグを発行する

最初にMicrosoftのClarity公式サイトにアクセスし、画面中央下もしくは右上にある「Sign up」をクリックしてユーザー登録します。

はじめてログインする場合、最初にプロジェクトを作成する必要があります。「Name」にプロジェクト名、「Website」にヒートマップを導入したいウェブサイトのURLを記入し、ウェブサイトにあてはまる「Site category」をプルタブの中から選択します。

Site categoryには以下の項目があります。

  • E-Commerce
  • SaaS
  • Blog
  • Marketing
  • Consulting
  • Media
  • Education
  • Community
  • Non-profit
  • Other

入力後、「Create」をクリックするとプロジェクトができます。

注意点として、Clarityはヘルスケア、金融サービス、政府関連情報など、機密性の高いユーザー情報を含む可能性のあるコンテンツのあるウェブサイトの利用を非推奨とする旨が公式ヘルプに記載されています。これらのデータを含むウェブサイトはClarityの登録が出来ない場合もあります。

参考:『MICROSOFT CLARITY – TERMS OF USE』

Clarityのタグ発行方法

 

作成したプロジェクトに入り、上部メニューバーにある「Settings」を選択し、左メニューのなかにある「Setup」を選択します。「How to install Clarity」のなかにある「Copy to clipboard」をクリックするとトラッキングコードをコピーできます。

Step.2 Googleタグマネージャーの導入準備をする

※すでにGoogleタグマネージャーのコードをウェブサイトに貼り付けている場合はStep.3に進んでください。

GoogleタグマネージャーのコードをWebサイトに張り付ける方法

タグの管理はGoogleタグマネージャーを使うと便利です。ここではGoogleタグマネージャーにトラッキングコードを埋める方法を紹介します。

Googleタグマネージャーの公式ページにアクセスします。ページの中央もしくは右上にある「無料で利用する」をクリックしてユーザー登録します。※すでに利用したことがある方は「タグマネージャーにログイン」をクリックします。

タグマネージャーアカウント取得1

はじめて利用する場合は最初にアカウントを作成し、タグマネージャーのタグをウェブサイトに貼り付ける必要があります。右上にある「アカウントを作成」をクリックします。

タグマネージャーアカウント取得2

アカウント名」に自分が識別できる名前を入力し「」を選択します。

コンテナ名」はサイト名やURLがわかりやすくてオススメです。今回はウェブサイトに埋め込むため、ターゲットプラットフォームは「ウェブ」を選択して「作成」をクリックします。

タグマネージャーアカウント取得3

アカウントを作成すると「Googleタグマネージャーをインストール」という画面が表示されるので、画面の指示に従ってウェブサイトのHTMLファイルにコードを貼り付けてください。

コードが記載されている項目の右上にあるファイルアイコンをクリックするとコードをコピーできます。

女性編集者A
女性編集者A

Googleタグマネージャーを利用することによって、Clarity以外の複数のタグも一元管理することができます。

関連記事:『Google広告のコンバージョンタグをタグマネージャーで設定する5ステップ

Step.3 GoogleタグマネージャーにClarityのコードを登録する

タグマネージャーにClarityのコード登録1

Googleタグマネージャーのタグをウェブサイトに貼り付けたら、次はClarityのタグをタグマネージャーに登録する作業をします。左メニューにある「タグ」を選択し「新規」をクリックします。

タグマネージャーにClarityのコード登録2

画面左上でタグの名前を設定します。名前は自分が分かりやすいように設定(Clarityなど)してください。その後「タグの設定」をクリックします。

タグマネージャーにClarityのコード登録3

タグタイプの一覧が出るので「カスタムHTML」を選択します。

タグマネージャーにClarityのコード登録4

Step.1で表示させたClarityのトラッキングコードを貼り付けます。

タグマネージャーにClarityのコード登録5

続いて「トリガー(タグが動作するための条件設定)」をクリックします。

タグマネージャーにClarityのコード登録6

サイト内の全ページを計測したい場合は「All Pages」を選択します。特に条件指定がない場合は「All Pages」にして問題ありません。その他、特定のページやクリックのみヒートマップを適用したい場合は、新たにトリガーを作成する必要があります。

タグマネージャーにClarityのコード登録7

保存」をクリックします。

タグマネージャーにClarityのコード登録8

公開」をクリックします。

タグマネージャーClarityのコード登録9

こちらの画面でどのような変更を加えたかメモを残すことができます。バージョン名に「Clarityを新規追加」など分かりやすい名前を付けておくことで、後から履歴を見返したときにツールを導入した地点が明確になります。記入後、もう一度「公開」をクリックします。

タグマネージャーにClarityのコード登録10

続行」をクリックします。これでタグの登録が完了しました。

Step.4 Clarityがきちんと設定できているか確認する

Clarityの設定確認

Googleタグマネージャーに登録したClarityがきちんと作動するか確認をします。まずは「プレビュー」をクリックします。

Clarityの設定確認2

URL記入欄に今回Clarityを導入したサイトのURLを入力します。その後「Connect」をクリックします。

Clarityの設定確認3

Tags Firedという表記の中にClarityのコードを入れたタグ名(ここでは”Clarity”)があればタグが発火(動作)している証拠です。

LPOに役立つ4つの特徴

ここからは弊社が運営するメディアの1つ「テクテク」のClarityデータを例にしてLPOに役立つ4つの特徴を紹介します。

特徴1. ヒートマップでよく見られている部分が確認できる
特徴2. ダッシュボードで細かくデータを確認できる
特徴3. ユーザーの動きを動画で確認できる
特徴4. Googleアナリティクスと連携できる

1つずつ詳しく見ていきましょう。

特徴1. ヒートマップでよく見られている部分が確認できる

Heatmaps」タブでは、ユーザーがどの場所をクリックしたのか、ページ内でどこまでスクロールされたのかなどが分かります。こちらも「Recording」同様、さまざまな指標でフィルタをかけることが可能です。

Heatmaps」には「Click」モードと「Scroll」モードがあります。「Click」ではユーザーがどのボタンをどのくらいクリックしたかが分かります。

特徴1の開設画像

クリックして欲しいのに、あまりクリックされていないボタンは配置や大きさを変えてみたり、ボタンを外してみたりなどの施策を考えるのに役立ちます。

Scroll」では、ページがどこまでスクロールされたのかを色とパーセンテージで確認できます。スクロールとともに注目度が低くなると、赤色から緑や青へと徐々に色が変化してきます。

特徴1の解説画像2

読んで欲しい箇所があまり読まれていない場合は該当箇所をページ上部に移動してみたり、ユーザーにとって重要度が低そうな箇所は外すなどの施策を考えることに役立ちます。

関連記事:『ファーストビューとは?LPの直帰率を改善する6つのポイントとは

特徴2. ダッシュボードで細かくデータを確認できる

Clarityにアクセスすると、まずダッシュボードが表示されます。ここでは特に設定をすることなく、はじめから主要な解析データが表示されています。

Clarityのダッシュボード データ

たとえば、「Dead clicks」(無効なクリック)ではユーザーがページ内のいずれかの箇所をクリックしたにもかかわらず、ページが切り替わったり、リンク先に遷移したりといった挙動が起きなかった割合が分かります。

手癖でクリックされる場合もありますが、正しく動作していなかったり反応が遅い要素があるためにDead clicksが発生している場合も考えられますので、そういった問題が発生していないか確認することに役立ちます。

Dead click

視聴者が怒ってアクションしていることを表す指標として、狭いエリアで何回もタップされた割合を示す「Rage clicks」(怒りのクリック)があります。この指標では、バグなどの不備の発見やUI改善に役立てることができます。

Rage click

通常よりも速い速度でスクロールされた割合を示す「Excessive scrolling」(過度なスクロール)ではユーザーに見てもらいたいコンテンツが読み飛ばしされていないかどうかを確認するときに利用すると良いでしょう。

Excessive scrolling

Quick backs」(即座のブラウザバック)はユーザーがあるページに移動した後、即座に前のページに戻った箇所や割合を意味します。ユーザーが意図したページに遷移する構造になっていないなど、混乱の原因になる箇所を発見することに役立ちます。

Quick backs

他にもJavaScriptのコンテンツでエラーになった割合である「JavaScript errors」や視聴者がどのようなデバイス、OS、ブラウザを利用してウェブサイトを閲覧しているのか、どこの国から見ているのか、よく見られているページなども分かります。

特徴3. ユーザーの動きを動画で確認できる

Recording」(記録)タブでは、レコーディングした動画でウェブページへ訪問したユーザーの行動履歴を確認できます。

Recordingタブ

レコーディングを表示する際にはURLや計測期間などでフィルタをかけることが可能です。

たとえば、特定のセッション時間を超えるデータのみ表示したり、ユーザーが起こしたアクションごとに絞り込むこともできます。ほかにも、ページ内でユーザーが何回クリックしたのかなども確認することが可能です。

この機能を活用してユーザーがウェブサイト上でどんな操作をしているかを確認すると良いでしょう。

具体的には、記事ページではどの部分が重点的に読まれているのかを確認したり、問い合わせフォーム入力中に離脱したユーザーがどこまで入力し、どこで手を止めて離脱したのかを確認することも可能できますので離脱ポイントを重点的に改善するなどの施策を取ることが出来ます。

 

女性編集者B
女性編集者B

動画でユーザーの動きを確認することは、静的なデータでは分かりにくいことに気が付く機会にもつながり、ユーザーエクスペリエンスを高めることに役立ちます。

関連記事:『EFO(入力フォーム最適化)とは?CVRを改善する6つのポイントとは

特徴4. Googleアナリティクスと連携できる

Google Analytics」タブはGoogleアナリティクスを連携している場合に、Googleアナリティクスのデータが表示されます。Googleアナリティクスに蓄積されたデータでフィルタをかけることも出来るので、ユーザーの年齢や性別などで区切ってデータを見たい場合に活用することが有効です。

Google アナリティクスと連動

Googleアナリティクスの連携方法は、「Settings」(設定)タブにある「Google Analytics integration」(Googleアナリティクス連携)を選択し、その中で「Get started」(開始)ボタンをクリックします。連携の許可を聞かれるので許可しましょう。その後、「Active」(有効化)をONにします。

Googleアナリティクス セットアップ

関連記事:『Googleデータポータルでアナリティクスレポートを作る3つのメリット

まとめ

ご紹介した通り、Clarityは無料にも関わらず十分に使える機能を備えているヒートマップツールであると言えます。しかし、ツールで収集したデータを有効に使えるかどうかは使用者次第なところもあります。

もしもLPOをしたいけどヒートマップツールを使いこなす時間やノウハウがなくてお困りの企業様がいらっしゃいましたら、株式会社Unionへお気軽にご相談ください。詳しいお話をお伺いして最適なご提案をいたします。

この記事をシェア

  • RSS購読
  • リンクをコピー

この記事のカテゴリー

この記事のタグ

  • 資料請求をする
  • 無料相談をする

【資料ダウンロード(無料)】
DX時代の最適なWebプロモーション

Web広告運用代行のプロ集団「Union」
継続率95%以上の秘密!気になる実績やプランを掲載!

DX時代だからこそ効果が出る最適なWebプロモーション

【無料相談】メール24時間受付中!

Web広告運用のプロ集団がお悩みを解決します!

  • 広告の費用対効果が合わない
  • 社内で運用するリソースがない
  • 代理店の対応が遅い
  • 完全成果報酬型広告に興味がある
  • YoutubeやTikTokに動画広告を出したい
  • 効果の出る動画広告を作りたい etc.
tolist