グシオ経営マーケティング・地方創生研究所@中小企業診断士 
こんにちは！グシオです！
以前投稿した『【2022年最新】ホームページの分析・改善に使えるオススメ無料ツール』でホームページの改善に使える無料ツールをいくつか紹介しました。そのなかでヒートマップツールの1つであるMicrosoftのClarityについても触れましたが今回はこのClarityをテーマにお話しします。
Clarityは無料で使えるにも関わらず有料の他社ヒートマップに劣らない機能を保有しているので個人的にイチオシのヒートマップツールです。中小企業の方はWebマーケティングのツールに使う予算の確保が難しい場合もあるかもしれませんが、そんなときこそClarityをオススメします。中小企業診断士の方も企業のWebマーケティングの相談に乗る際には無料かつMicrosoftのブランドもあるClarityは推しやすいツールなのではないかと思います。今回はClairtyについて3つの特徴と実際の使い方について具体的に解説したいと思います。
参考：前回の記事
関連記事：『無料のヒートマップツール「Clarity」で実際にホームページデータを分析してみた【完全保存版】』
目次
そもそもヒートマップってなに？
ヒートマップ（Heatmap）は、サイト上のコンテンツでユーザーがどのように行動したかを、色の濃淡によって表したグラフです。ユーザーのマウスの動きやクリック箇所から、コンテンツのどの部分に注目しているのか関心度を直感的に分析できます。
通常、赤くなるほどよく見られている部分で、青くなるほど見られていない部分になります。ページの一番上はたいてい最初から画面に表示されるので赤くなりますが下にいくほど青くなっていきます。もし一番上から下まで赤くなっていたら、それはユーザーの関心度がかなり高いページと言えます。
その他にも、ユーザーがページのどの部分で読むのを辞めたか分かる離脱率の確認や各URLリンクのクリック率なども確認できます。
Googleアナリティクスなどのアクセス解析ツールは、サイト全体や各ページのPV(閲覧数)、ユーザー数・流入経路といったマクロな視点でサイトを分析できますがページの各コンテンツが見られているかどうかのミクロな分析には適していません。
そこで、ページの各コンテンツがどう見られているか分かるヒートマップを併せて活用することで、アクセス解析だけでは見えなかったユーザーのインサイトやサイト改善に向けての課題を発見することが可能になります。
たとえば、ページの下部に配置しているのに注目されているコンテンツをページ上部に持ってきたり、見られていないコンテンツは外すか差し換えるなどの対応をすることで、よりユーザーに好まれるページに改善していくことができます。そのため、ホームページを改善していくうえでヒートマップの利用は非常に有用です。
Microsoft Clarityの3つの特徴
ClarityはMicrosoft社が提供している無料のヒートマップツールです。無料にも関わらずデータ分析はほぼリアルタイムで表示され、利用するホームページの数に制限がなく、トラフィック(分析できる閲覧数)の制限もないので大規模のウェブサイトでも使用することが可能です。
Clarityには大きく分けて3つの特徴があります。
Clarityは大きくわけて3種類のヒートマップを利用できます。
①クリック ヒートマップ
クリック数と Web ページのどこでクリックが発生したかを表示します。
②スクロール ヒートマップ
ユーザーが Web ページをどれだけ下にスクロールしたかを表示します。
③アテンション ヒートマップ
複数のタイプのインタラクションデータを組み合わせて、ユーザーのアクティビティを集約したビューを表示します。クリック数、クリックがどのように発生したか、到達したページの部分、およびページ上のマウスの動きが含まれます。これらすべてのアクティビティの時間の長さは、アテンション ヒートマップに表示されます。
ユーザーがホームページ上でどのように操作しているか動画形式で記録が残ります。これによってユーザーがどの部分を長く見ているのか、読み飛ばしているのはどこなのか等をより詳細に分析することが可能になります。
Googleアナリティクスと連携が可能で設定も簡単にできます。おそらく初期設定に5分もかからないでしょう。Googleアナリティクスと連携することで、たとえばアナリティクスで作成した特定のユーザー層やセグメントでフィルターをかけて、彼らがホームページ上でどこに注目して見ているかなどがClarityのヒートマップで確認できます。
Microsoft Clarityの導入方法
事前に以下を用意しておくと作業がスムーズに進みます。今回は中小企業の多くが利用していると思われるワードプレスを例にして導入方法を解説します。
- Microsoft / Facebook / Googleいずれかのアカウント
- Googleアナリティクス
- Googleタグマネージャー、ワードプレス、Wixいずれか
ワードプレスについては以下記事をご参考ください。
まずはClarityの公式ホームページにアクセスして画面右上の「Sign up」をクリックしてユーザー登録します。ユーザー登録の際にはMicrosoft / Facebook / Googleいずれかのアカウントが必要になりますので任意のアカウントを指定してください。
ログインしたら新規にプロジェクトを作成します。
「+New project」をクリックします。
Nameの項目に自分が分かりやすい名前（ホームページの名前など)を、Website URLにヒートマップを導入したいホームページのURLを入力して、「Add new project」をクリックします。
画面が切り替わるので左メニューの「Overview」を選択、右上にあるタブメニューから「Settings」を選択し、Site categoryから任意の項目を選択して「Save」をクリックします。
Site categoryには以下の選択肢があります。
- E-Commerce
- SaaS
- Blog
- Marketing
- Consulting
- Media
- Education
- Community
- Non-profit
- Other
注意点として、Clarityはヘルスケア、金融サービス、政府関連情報など、機密性の高いユーザー情報を含む可能性のあるコンテンツのあるウェブサイトの利用を非推奨とする旨が公式ヘルプに記載されています。これらのデータを含むウェブサイトはClarityの登録が出来ない場合もあります。
参考：『MICROSOFT CLARITY – TERMS OF USE』
次にClarityのタグを発行してホームページに埋め込みます。方法を2パターン紹介します。WordPressのプラグインを利用する方法とGoogleタグマネージャーを利用する方法です。どちらもWordPressに対応しています。
左メニューの「Setup」を選択し、Clarityをホームページの導入するためのタグが発行します。Googleタグマネージャーを利用している方は一番左の項目の「Start setup」を選択するのですが今回はプラグインを想定して解説しているので一番左の項目の「Use anther platform」を選択します。
選択肢のなかから「WordPress / WooCommerce」を選択します。
「Copy project ID」をクリックしてプロジェクトIDをメモしておいてください。あとで使います。
一旦Clarityから離れてワードプレスにログインします。
ワードプレスの管理画面で左メニューにある「プラグイン」をクリックし、切り替わった画面内にある「新規追加」を選択します。
検索ウィンドウで「Clarity」と入力して検索して検索結果に表示された「Microsoft Clarity」の「今すぐインストール」をクリックします。その後、プラグインを「Activated」(有効化)してください。
プラグイン一覧にある「Microsoft Clarity」内の「Settings」をクリックします。
さきほどClarityのページでコピーまたはメモしたプロジェクトIDを「Project Id」の項目に入力して「変更を保存」をクリックします。
これで導入は完了です。登録から半日ほど時間をおけばデータが見れるようになるので、少し待ちましょう！
GoogleアカウントのGmailにClarity連携の本人確認メールが来ている可能性があります。忘れずに承認しておきましょう。
もしもうまく導入できず解決手段も分からなかった場合はGoogleタグマネージャーのアカウントを取得後、②を試してみてください。
Clarity管理画面の左メニューの「Setup」を選択し、Clarityをホームページの導入するためのタグが発行します。Googleタグマネージャーを利用してタグを埋め込む場合は一番左の項目の「Start setup」を選択します。その後「Connect now」を選択します。
今回分析したいホームページを管理しているGoogleタグマネージャーのGoogleアカウントでログインし、確認チェックリストにチェックを入れて「続行」を選択します。
Select a GTM accountおよびSelect a GTM containerで今回分析対象のものを選び「Create and publish」を選択します。これで連携が完了しました。登録から半日ほど時間をおけばデータが見れるようになるので、少し待ちましょう！
GoogleアカウントのGmailにClarity連携の本人確認メールが来ている可能性があります。忘れずに承認しておきましょう。
Clarity管理画面の左メニューにある「Setup」を選択し、ページ中部にあるGoogle Analytics integrationの「Get started」をクリックします。直後Googleアカウントログイン画面がポップアップされるので、今回分析したいホームページのGoogleアナリティクスを利用しているGoogleアカウントを選択します。
確認チェックリストにチェックを入れて「続行」を選択します。
Clarityと連携させたいGoogleアナリティクスアカウントを選択して「Save」をクリックします。
これで連携設定は完了です。
Microsoft Clarityの画面の見方
Clarityの画面の見方を簡単に紹介します。Clarityのメニューは大きく分けて「Dashboard」「Recordings」「Heatmaps」「Google Analytics」「Settings」の5種類があります。「Google Analytics」はGoogleアナリティクスを連携しているときのみ利用可能です。
「Dashboard」には様々な数値データが表示されます。「Last 30days」という箇所をクリックすれば数値データを見たい計測期間や条件を指定できます。
基本はGoogleアナリティクスで計測できる情報と同じなので用語も分かりやすいかと思いますが、あまり馴染みがないと思われる用語だけここで解説します。
「Dead clicks」（無効なクリック）
ユーザーがページ内のいずれかの箇所をクリックしたにもかかわらず、ページが切り替わったり、リンク先に遷移したりといった挙動が起きなかった割合が分かります。
手癖でクリックされる場合もありますが、正しく動作していなかったり反応が遅い要素があるためにDead clicksが発生していないか確認することに役立ちます。
「Rage clicks」（怒りのクリック）
狭いエリアで何回もタップされた割合が分かります。これの意図は、視聴者が怒って何度も連打しているシーンを想定して設定されている数値です。これの数値が大きいということはバグなどの不備やUIに問題があるかもしれません。
「Excessive scrolling」（過度なスクロール）
通常よりも速い速度でスクロールされた割合を示します。ユーザーに見てもらいたいコンテンツが読み飛ばしされていないか確認できます。数値が明らかに高い場合、コンテンツの根本的な見直しが必要になる場合もあるかもしれません。
「Quick backs」（即座のブラウザバック）
ユーザーがあるページに移動した後、即座に前のページに戻った箇所や割合を示します。ユーザーが意図したページに遷移する構造になっていないなど、混乱の原因になる箇所を発見することに役立ちます。
Clarityの特徴の項目でも紹介しましたが、ユーザーがどのようにホームページを閲覧していたかが分かるビデオトラッキングデータを見れます。
たとえば問い合わせに至ったユーザーのみにフィルターを掛けて行動の様子を見るなど傾向分析に使うこともできます。フォームに個人情報を入力するなどのシーンでは自動でマスキングがされるのでプライバシーもしっかり守られています。
「Heatmaps」はメイン機能であるヒートマップを見れる項目です。期間やデバイスなどでフィルターをかけてユーザーのヒートマップを確認することもできます。設定を変えたい場合は「Last30days」のところをクリックして条件をフィルター条件を指定できます。
ヒートマップは「Click」「Scroll」「Click area」の3つを見ることができます。
「Click」
ページでクリックされた場所に印がつき、ユーザーがどこを沢山クリックしているのかが分かります。あまりにもクリックされないリンク先は配置を変えたり目立たせるなどの対応が考えられます。
「Scroll」
「Scroll」はユーザーがページをどこまで見たかが分かります。あまりにもページ上部で離脱する割合が高い場合は、より興味を惹くコンテンツを上に持ってくるなどで対策を立てる必要があります。
「Click area」
「Click area」はどの場所がどれくらいクリックされたかパーセンテージで分かります。「Click」では赤ポチが沢山ついているかどうかでどれだけ注目されているのかを分析するのに対し、「Click area」はページ内の他のリンク先との比率で分析する形になります。
「Google Analytics」のメニューではGoogleアナリティクスの数値が反映されます。アナリティクスとClarity両方の画面を開かなくても良いようになっています。上記図表はあえてGoogleアナリティクスの細かいデータが表示されてない状態でキャプチャしていますが、皆様が利用するときはここにGoogleアナリティクスのデータがそれぞれ表示されます。
「Settings」は様々な設定ができます（そのままですが）。
「Clarity tour」
設定方法や操作方法で分からないことがあった場合はでチュートリアルを受けながら習熟できます。
「Team」
ヒートマップの閲覧権限や管理権限を自分以外にも付与する設定ができます。
「Setup」
導入手順で紹介したようにホームページに設置するClarityのタグを発行できます。
「Masking」
ユーザーのプライバシーレベルをどこまで高めるか設定ができます。
「IP blocking」
データを計測したくない対象のIPを指定できます。たとえば自分自身のIPをブロックすることでより客観的なデータを見ることができます。
まとめ
いかがでしたしょうか。
MicrosoftのClarityを使うことによってヒートマップでホームページの計測・分析を促進できます。単にホームページの情報を更新するだけではなく、更新した情報がユーザーにとってどの部分がどれだけ有益になっているのかミクロな視点で分析をして改善し、ノウハウを蓄積して他のコンテンツにも反映させていくことでより良いホームページにアップデートしていくことができます。
ヒートマップはClarity以外にも色々ありますが、何を使うか迷ったらまずはお試しで使ってみるのも良いと思います。操作方法などで何か分からないことがありましたらお気軽にご質問ください。Webマーケティングに関するお仕事のご相談などもお待ちしております！
