Microsoft Clarityとは?無料で使えるヒートマップの設定・使い方を解説
![](https://toriblo.net/wp-content/uploads/2021/03/19748-@@ic.jpg)
- サイトに訪れたユーザーの行動を分析したい
- 無料のヒートマップツールを探している
より良いサイト(ホームページ)を運営するには、実際にサイトを訪れたユーザーの行動分析がとても重要です。
自分はとても良い記事を書いていると思っていても、ユーザー視点で見ると「見にくい」「読みにくい」ということがよくあります。
そこでこの記事では、無料で使えるマイクロソフトのユーザー行動分析ツール「Microsoft Clarity」を紹介します。
この記事を参考にしてユーザーの行動分析をすれば、よりユーザー満足度の高いサイト(ホームページ)が作成できるようになるはずです。
このブログも開設してから「Aurora Heatmap」という無料ヒートマッププラグインを使っていましたが、Microsoft Clarityは完全に上位互換です。
Microsoft Clarity(マイクロソフトクラリティ)とは?
![](https://blog.toriblo.net/wp-content/uploads/2021/03/b1737a81625fa46f010d60abe8ba2ef9.jpg)
![](https://blog.toriblo.net/wp-content/uploads/2021/03/b1737a81625fa46f010d60abe8ba2ef9.jpg)
Microsoft Clarity(マイクロソフトクラリティ)は、Microsoftが提供する無料のユーザー行動分析ツールです。
2020年10月より利用可能になった新しいツールです。
Microsoft Clarity(マイクロソフトクラリティ)でできること
Microsoft Clarityでは以下のことができます。
- ダッシュボード(Dashboard)でサイト分析
- セッションレコーディング(Recordings)でユーザーの行動分析
- ヒートマップ(Heatmaps)でユーザー行動の可視化
- GA(Google Analytics)との連携
ダッシュボード(Dashboard)でサイト分析
![Microsoft Clarity Dashboard](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-001.jpg)
![Microsoft Clarity Dashboard](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-001.jpg)
ダッシュボードでは、サイト全体のトラフィックデータをわかりやすく表示してくれます。
セッション情報(Sessions)や人気のページ(Popular pages)、デバイス(Devices)などの定番の情報に加えて、Dead clicks(本来クリックする箇所ではない箇所のクリック率)、Rage clicks(ユーザーが要素を繰り返しクリックした)などの情報も教えてくれます。
セッションレコーディング(Recordings)でユーザーの行動分析
![Microsoft Clarity Recordings](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-002.jpg)
![Microsoft Clarity Recordings](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-002.jpg)
セッションレコーディングでは、サイトを訪れたユーザーが実際にどのような操作(スクロールやクリック)をしているのかを動画で再生できます。
無料でありながらセッション数に制限がないのも大きな特徴です。
ヒートマップ(Heatmaps)でユーザー行動の可視化
![Microsoft Clarity Heatmaps(Click)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-003.jpg)
![Microsoft Clarity Heatmaps(Click)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-003.jpg)
ヒートマップでは、ページを閲覧したユーザーが「どこをクリックしたか」が一目でわかります。
![Microsoft Clarity Heatmaps(Scroll)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-004.jpg)
![Microsoft Clarity Heatmaps(Scroll)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-004.jpg)
また、ユーザーがページのどの位置までスクロールしたか(どこまで読んだか)を確認できるスクロールマップに切り替えることもできます。
Google Analytics(グーグルアナリティクス)と連携
![Microsoft Clarity Google Analytics](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-005.jpg)
![Microsoft Clarity Google Analytics](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-005.jpg)
Microsoft ClarityはGoogle Analyticsと連携することもできます。
連携するとGoogle Analyticsのカスタムディメンションに「ClarityPlaybackURL」(該当ページのセッションレコーディングURL)が追加されます。
Microsoft Clarity(マイクロソフトクラリティ)の導入・設定方法
![](https://blog.toriblo.net/wp-content/uploads/2021/03/cd2ae80a583ceb5fb72ccdae19aee0e5.jpg)
![](https://blog.toriblo.net/wp-content/uploads/2021/03/cd2ae80a583ceb5fb72ccdae19aee0e5.jpg)
Microsoft Clarityの導入から初期設定までの手順を解説します。
事前にBing Webmaster Tools(ウェブマスターツール)に登録しておいてください。
Bing Webmaster Toolsにログインし、「マイクロソフトクラリティ」をクリックします。
![Bing Webmaster Tools マイクロソフトクラリティ](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-006.png)
![Bing Webmaster Tools マイクロソフトクラリティ](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-006.png)
「Microsoftのクラリティ準拠の条件を読んで同意しました。」にチェックをし、「承諾」をクリックします。
![Bing Webmaster Tools マイクロソフトクラリティ利用規約](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-007.png)
![Bing Webmaster Tools マイクロソフトクラリティ利用規約](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-007.png)
画面に表示されたスクリプトをコピーします。
![Microsoft Clarity クラリティスクリプト](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-008.png)
![Microsoft Clarity クラリティスクリプト](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-008.png)
コピーしたスクリプトを自分のサイトの<head>セクションに貼り付けます。
※<head>セクションへの貼り付け方法はご自身の環境にあわせてください。
![headセクションに貼り付け](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-009.png)
![headセクションに貼り付け](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-009.png)
Microsoft Clarityのサイトに戻り、「続行」をクリックします。
![Microsoft Clarity サイト追加](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-019.png)
![Microsoft Clarity サイト追加](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-019.png)
「サイトがクラリティ プロジェクトに追加されました」と表示されていることを確認し、「Clarityに移動」をクリックします。
![Bing Webmaster Tools Clarityに移動](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-020.png)
![Bing Webmaster Tools Clarityに移動](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-020.png)
Microsoft Clarityにログインする方法を選択します。
※自分がアカウントを持っているサービスでログインすればOKです
![Microsoft Clarity ログイン](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-021.png)
![Microsoft Clarity ログイン](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-021.png)
先ほど登録したサイトが追加されているので、クリックしてMicrosoft Clarityの画面を開きます。
![Microsoft Clarity サイト選択](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-022.png)
![Microsoft Clarity サイト選択](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-022.png)
初回ログインではSetupの画面が表示されます。
※表示されない場合は、「Settings」→「Setup」とクリックします。
Google Analytics integrationの「Get Started」をクリックします。
![Microsoft Clarity Google Analytics integration](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-023.png)
![Microsoft Clarity Google Analytics integration](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-023.png)
Microsoft Clarityへの権限の付与は「許可」をクリックします。
※権限の付与は何回か表示される場合があるので、すべて「許可」をクリックします。
![Microsoft Clarityへの権限の付与](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-024.png)
![Microsoft Clarityへの権限の付与](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-024.png)
最後の確認画面も「許可」をクリックします。
![Microsoft Clarityを信頼できることを確認](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-025.png)
![Microsoft Clarityを信頼できることを確認](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-025.png)
接続するサイトを選択し、「Save」をクリックします。
![Microsoft Clarity Google Analytics接続サイト](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-026.png)
![Microsoft Clarity Google Analytics接続サイト](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-026.png)
画面上部に「Successfully linked Google Analytics」と表示されたことを確認し、「Finish setup」をクリックします。
![Microsoft Clarity Google Analytics連携成功](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-027.png)
![Microsoft Clarity Google Analytics連携成功](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-027.png)
連携がうまくいっている場合は、このような画面になります。
![Microsoft Clarity Google Analytics連携成功](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-028.png)
![Microsoft Clarity Google Analytics連携成功](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-028.png)
画面上部の「Dashboard」をクリックします。
おそらく↓のような画面が表示されると思いますが、“It may take up to two hours.”(最大2時間かかる場合があります)とあるようにデータの取得には少し時間がかかります。
※私の場合は約25分後には見れるようになっていました。
![Microsoft Clarity ダッシュボード(設定直後)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-029.png)
![Microsoft Clarity ダッシュボード(設定直後)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-029.png)
データが取得されるとこのような画面になります。
![Microsoft Clarity ダッシュボード](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-030-1-e1614986850591.jpg)
![Microsoft Clarity ダッシュボード](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-030-1-e1614986850591.jpg)
Microsoft Clarity(マイクロソフトクラリティ)の使い方
![](https://blog.toriblo.net/wp-content/uploads/2021/03/91a8d7e4f817eb9cd5c381176d2ec68b.jpg)
![](https://blog.toriblo.net/wp-content/uploads/2021/03/91a8d7e4f817eb9cd5c381176d2ec68b.jpg)
ここからはMicrosoft Clarityの簡単な使い方を解説します。
ダッシュボード(Dashboard)でサイトを分析する
ダッシュボードでは、サイトのトラフィックデータがグラフで表示されます。
![Microsoft Clarity ダッシュボード](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-031.jpg)
![Microsoft Clarity ダッシュボード](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-031.jpg)
特徴的な項目をいくつか説明しておきます。
![Microsoft Clarity Dead clicks](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-033.png)
![Microsoft Clarity Dead clicks](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-033.png)
Dead clicks
ユーザーがページのどこかをクリックしたのに応答が検出されなかった場合に記録されます。
- 壊れた要素
- 高遅延のリクエスト
- または誤解を招くUX
を見つけるのに役立ちます。
![Microsoft Clarity Rage clicks](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-034.png)
![Microsoft Clarity Rage clicks](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-034.png)
Rage clicks
ユーザーが短時間内にクラスター化された領域を繰り返しクリックしたときに記録されます。
- ユーザーが要素を繰り返しクリックした(応答を期待している)
- サイトのナビゲーション中にイライラしたUIのバグ壊れた要素
を見つけるのに役立ちます。
![Microsoft Clarity Quick backs](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-035.png)
![Microsoft Clarity Quick backs](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-035.png)
Quick backs
ユーザーが新しいページに移動した後、すぐに前のページに戻ったときに記録されます。
- 後続のページをクリックしようとした後、すぐにサイトのホームページに戻るなど、ユーザーが混乱するナビゲーション
を見つけるのに役立ちます。
![Microsoft Clarity Excessive scrolling](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-041.png)
![Microsoft Clarity Excessive scrolling](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-041.png)
ユーザーが標準のコンテンツ消費で予想されるよりも高い速度でサイトコンテンツをスクロールしたときに記録されます。
- ユーザーがすばやくスクロールして特定のコンテンツを探す
- レイアウトの配置の問題
- 重要なコンテンツの特定
を見つけるのに役立ちます。
他にもサイト分析に必要な情報は一通り確認できます。
- セッション情報(Sessions)
- スクロールの深さ(Scroll depth)※ページのどの部分まで読まれたか
- 人気のページ(Popular pages)
- JavaScriptエラー(JavaScript errors)
- ブラウザ(Browsers)
- OS(Operating systems)
- 国(Countries)
- 流入元(Referrers)
- デバイス(Devices)
また、フィルター(Filters)を使えば、
- 特定の期間
- 特定のデバイス
- 3回以上クリックされたセッション
など、必要な情報を簡単に絞り込むことができます。
![Microsoft Clarity フィルター(Filters)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-044.png)
![Microsoft Clarity フィルター(Filters)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-044.png)
セッションレコーディング(Recordings)でユーザーの行動を分析する
「Recordings」では、セッションごとにユーザーの実際の行動を再生することができます。
※セッションごとなので、途中で同じサイト内の別のページに遷移した場合も記録は続きます
![Microsoft Clarity セッションレコーディング(Recordings)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-045.jpg)
![Microsoft Clarity セッションレコーディング(Recordings)](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-045.jpg)
「More details」をクリックすれば、そのセッションの詳細な情報を表示しながら実際の行動を確認することができます。
![Microsoft Clarity セッションレコーディング(Recordings) More details](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-046.jpg)
![Microsoft Clarity セッションレコーディング(Recordings) More details](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-046.jpg)
![](http://toriblo.net/wp-content/uploads/2020/06/cropped-twitterロゴ-150x150.png)
![](http://toriblo.net/wp-content/uploads/2020/06/cropped-twitterロゴ-150x150.png)
![](http://toriblo.net/wp-content/uploads/2020/06/cropped-twitterロゴ-150x150.png)
正直、このセッションレコーディング機能だけでも有料級
ヒートマップ(Heatmaps)でユーザーの行動を可視化する
ヒートマップは、ページでユーザーがクリックした場所を可視化してくれる機能です。
「Heatmaps」では、ページごとにヒートマップを確認することができます。
![Microsoft Clarity Heatmaps](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-003.jpg)
![Microsoft Clarity Heatmaps](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-003.jpg)
クリックが多い箇所ほど、赤色に近い色になります。
![Microsoft Clarity ヒートマップ(Heatmaps) Most popular Least popular](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-047.png)
![Microsoft Clarity ヒートマップ(Heatmaps) Most popular Least popular](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-047.png)
「Scroll」をクリックすると、スクロールマップに切り替わります。
ユーザーがページのどの部分まで読んだかを知るのに便利です。
![](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-004.jpg)
![](https://blog.toriblo.net/wp-content/uploads/2021/03/19748-004.jpg)
![](http://toriblo.net/wp-content/uploads/2020/06/cropped-twitterロゴ-150x150.png)
![](http://toriblo.net/wp-content/uploads/2020/06/cropped-twitterロゴ-150x150.png)
![](http://toriblo.net/wp-content/uploads/2020/06/cropped-twitterロゴ-150x150.png)
このページもここまで読んでくれたユーザーさんには感謝。
Microsoft Clarity(マイクロソフトクラリティ)FAQ
![](https://blog.toriblo.net/wp-content/uploads/2021/03/673682df34859e43cc5123bedf416457.jpg)
![](https://blog.toriblo.net/wp-content/uploads/2021/03/673682df34859e43cc5123bedf416457.jpg)
まとめ:ヒートマップツールは無料のMicrosoft Clarity(マイクロソフトクラリティ)を使っておけばOK
![](https://blog.toriblo.net/wp-content/uploads/2021/03/2ea728c9f045a964cba180655c6abe2d.jpg)
![](https://blog.toriblo.net/wp-content/uploads/2021/03/2ea728c9f045a964cba180655c6abe2d.jpg)
Microsoft Clarityでは無料で以下のことができます。
- ダッシュボード(Dashboard)でサイト分析
- セッションレコーディング(Recordings)でユーザーの行動分析
- ヒートマップ(Heatmaps)でユーザー行動の可視化
- GA(Google Analytics)との連携
無料でこれだけの機能が使えるサイト分析ツールは他にありません。
実際にサイトを訪れてくれた人がどのような行動をしているかが視覚的にわかるので、Microsoft Clarityのデータはより良いサイト作りの参考になります。
データが蓄積されるまでには多少の時間がかかるので、早めに設定しておきましょう。
コメント ※スパム対策のため管理人確認後の掲載となります