ヒートマップツールを探しています。MicrosoftのClarityが割と良いって聞いたので、使ってみたい。導入方法や使い方を初心者向けに教えてください
hideharuこういった疑問に答えます。
今回は、ヒートマップツール「Clarity」の導入手順と使い方を解説します。
Clarityは、Microsoftが提供する無料ヒートマップツールで、2020年10月に一般公開されました（参照：Microsoft公式サイト）。
ヒートマップツール比較の記事でも紹介したとおり、無料のヒートマップツールのなかでは、１番おすすめです。
本記事では、そんなClarityの導入手順と使い方をわかりやすく解説しました。
ヒートマップを活用してサイトを改善したい方は、ぜひご覧ください！
Clarityとは無料で最強のヒートマップツール
Clarityとは、Microsoft社が2020年10月に公開した完全無料のヒートマップツール。
無料とはいえ、
・スクロールヒートマープ
・クリックヒートマップ
・画面録画
の３つを、
・ページ数：無制限
・PV数：無制限
・期間：無制限
で利用できるんです。
無料のヒートマップツールの中ではダントツのNo1ですね。
っていうか、有料のヒートマップツールと比較しても遜色ありません。
「ページ数やPV数が無制限」というところは、Clarityの方がむしろ上です。
Clarityのデメリット
Clarityの気になる点は、当初は日本語対応していないことでした。
しかし、ある時期を境に日本語にも対応したので、そのデメリットはなくなりました。
アカウント作成時は英語ですけど、アカウント作成後に日本語に変更できるのでご安心ください。
となると、デメリットといえば特に見当たりません。
このように、Clarityは超おすすめのヒートマップツールです。
Clarityの導入手順３ステップ
続いては、Clarityの導入手順を解説します。
導入手順は以下の３ステップ。
- 手順①：アカウントを作成
- 手順②：プロジェクト作成
- 手順③：トラッキングコードの設置
順に見ていきます。
手順①：Microsoft Clarityのアカウントを作成
まず、Microsoft Clarityのサイトにアクセスします。
https://clarity.microsoft.com
[Sign up]あるいは [Sign up-it’s free！]をクリックします。
サインアップの画面が表示されるので、以下のお好きなアカウントでログインします。
・マイクロソフトアカウント
・Facebookアカウント
・Googleアカウント
Googleアカウントでサインアップした場合は、以下の画面になるので、アカウントをクリックします。
チェックをつけて、[Continue]をクリックします。
以上でMicrosoft Clarityのアカウント作成は完了です。
手順②：プロジェクト作成
次に、Clarityで使用するプロジェクトの作成です。
手順①が終わると、以下の画面になってるので、①②③を入力して[Create]をクリックします。
- ①：プロジェクト名（後で変更OK）
- ②：あなたのWebサイトURL
- ③：サイトの種別（後で変更OK）
上記を入力して、[Create]をクリックしたら、プロジェクト作成は完了です。
手順③：トラッキングコードの設置
次にトラッキングコードを設置します。
トラッキングコードの設置は、
- 方法①：手動でコードを埋めこむ
- 方法②：GTMを利用する
の２種類があります。
お好きな方法で行えばOK。
方法①：手動でコードを埋めこむ
プロジェクトを作成すると、以下のSetting画面になるので、[Copy to clipboard]をクリックします。
上記でコピーしたトラッキングコードを、あなたのWebサイトのheadタグ終了直前にペーストします。
方法②：GTMを利用する
トラッキングコードの設置方法の２つ目は、Googleタグマネージャー（GTM）を利用すること。
GTMを利用してトラッキングコードを設置するには、[How to install Clarity] > [Install tracking code on third-party platforms] > [Google Tag Manager] をクリックします。
あとは、以下のヘルプに従っていけば設定できます。
トラッキングコードの設置はこれでOK。
以上で、Clarityの導入は完了です。
データが取れているかを確認する
トラッキングコードを設置したら、数時間ほど待って、データが取れているかを確認してみましょう。
Microsoft Clarityのサイトにログインします。
https://clarity.microsoft.com
先ほど作ったプロジェクトが表示されているので、クリックします。
タッシュボード（画面上部のメニューはDashboard）に何かしらデータが表示されていれば、データを正しく取得できているってこと。
おつかれさまでした(^^)/
Googleアナリティクスと連携する設定方法
なお、Microsoft Clarityは、Googleアナリティクスと連携できるのが特徴です。
せっかくなので、Clarityの導入時にあわせて設定しておきましょう。
まずMicrosoft Clarityで、[Setting] > [Setup]をクリックし、Googleアナリティクスの見出し下にある[Get started]をクリックします。
アカウント確認画面に移るので、Googleアナリティクスのアカウントをクリックします。
アクセス権限の確認を求められます。チェックをつけて、[Continue]をクリックします。
あなたのサイトURLを選び、[Save]をクリックします。
アナリティクスとの連携が成功すると、以下のような表示になります。
以上で、Googleアナリティクスとの連携は完了です。
参考：他メンバーと共有する設定方法
Microsoft Clarityは、測定結果を他メンバーと共有できるのも特徴。チームでClarityを使う方向けに、設定方法を紹介します。
まずMicrosoft Clarityで、[Setting] > [Team] > [Add team member]をクリックします。
追加するメンバーのメールアドレスと役割を入力します。
役割は、
・Member（閲覧のみ）
・Admin（管理者）
のいずれか。
[Add]をクリックしたら完了。
他メンバーと共有できるようになります。
メニューを英語から日本語に変更する設定方法
Clarityは、アカウント作成時は英語ですけど、アカウント作成後に、日本語に変更することができます。
画面上部右上のユーザー名をクリックして、[Manage Account]をクリックします。
Languageで[日本語]を選択します。
すると、ご覧のとおりメニューは日本語になります。
以上、Clarityの導入手順でした。
Clarity」の使い方３つ（ダッシュボード／レコーディング／ヒートマップ）
続いては、Microsoft Clarityの使い方を解説します。
Clarityの機能は主に以下の３つ。
- 使い方①：ダッシュボード
- 使い方②：レコーディング
- 使い方③：ヒートマップ
Clarityの画面でいえば、上部にこの３つのメニューが並んでいます。
３つの機能は連携していて、すごく使いやすいです。
たとえば、ダッシュボード画面からレコーディング画面にジャンプできたり、レコーディングからヒートマップ画面にジャンプをできたりなど。
では、順に見ていきましょう。
使い方①：ダッシュボード
ダッシュボードでは、セッション数やページ滞在時間などの他に、ユーザビリティの低下要因を見つけるのに役立ちます。
上部メニューから[Dashboard]をクリックすると、以下のような表示になります。
データの種類と用途は以下のとおりです。
| データの種類 | 用途 |
|---|---|
| Dead clicks | ユーザーがページ内のいずれかの箇所をクリックしたのに、何も反応しないこと。UXの問題を見つけるのに役立つ |
| Rage clicks | 短い時間で特定の箇所が連打されること。ユーザがイライラしている箇所を見つけるのに役立つ |
| Excessive scrolling | 標準的なスクロールのスピードに比べ、高速でページをスクロールされること。読み飛ばされている箇所を見つけるのに役立つ |
| Quick backs | ユーザーがあるページに移動した後、すぐに前のページに戻ること。意図したページに遷移していないなど、ナビゲーションの問題を発見するのに役立つ |
上記のとおり。
なお、ダッシュボード画面内で[Recordings]ボタン、もしくはビデオのマークをクリックすると、レコーディングの画面にジャンプします。
また、炎のマークをクリックすると、ヒートマップの画面にジャンプします。
使い方②：レコーディング
レコーディングでは、特定のユーザに着目し、そのユーザがサイト上でどんな操作をしたのかを、録画された動画で確認できます。
上部メニューから[Recordings]をクリックすると、以下のような表示になります。左のリストの中から、確認したいページをクリックします。
すると、以下の感じで画面録画の再生がスタートします。実際に使ってみると驚きで、ユーザー操作が手に取るようにわかるんです！
画面左上の[More details]をクリックすると、「セッション情報」や「イベント情報」が表示されます。
特に、左下に表示される「イベント情報」のメニューは分析時に便利です。各イベントをクリックすると、イベントが発生した瞬間にジャンプできるから。
このように、Clarityのレコーディングを使えば、特定ユーザの行動を元に、改善点のヒントを発見できます。
使い方③：ヒートマップ
ヒートマップでは、デバイス（PC／Tablet／Mobile）ごとに、
- クリックヒートマップ
- スクロールヒートマップ
を確認できます。
上部メニューから[Heatmaps]をクリックすると、アクセス上位の５ページが表示されます。他のページのヒートマップを見たいときは、[Show more]をクリックする、あるいは、左上の検索窓にURLを入力します。
クリックヒートマップ
見たいページを選ぶと、クリックヒートマップが表示されます。クリックされた箇所（色濃くマークされた箇所）を見て、サイト改善のヒントを探します。
左列に表示されたカードを押すと、該当のクリック箇所にジャンプできるので便利。
上部の[Click]メニューの右端をクリックすると、
・Dead clicks
・Rage clicks
・First clicks
・Last clicks
に絞って確認できます。
スクロールヒートマップ
画面上部の[Scroll]をクリックすると、スクロールヒートマップが表示されます。
左列には、5％スクロールごとに、何パーセントのユーザーが閲覧しているか（裏を返すと離脱率）が表示されます。右列は、左列のデータを色つきで可視化したもの。
上図の例では、スクロール率が35％から40％の間に、閲覧割合がガクッと減っていることがわかります。こういった箇所をパッと探すには、右列のヒートマップがわかりやすいですね(^^)/
この離脱率の高い箇所に、なんらかの対策を行うかを検討します。たとえば、下の方に記載しているコンテンツと記載順を入れかえるなど。
共通の使い方
クリックヒートマップとスクロールヒートマップとで、共通の使い方を紹介します。
表示しているページから他のページに変えるときは、左上のURL検索窓にURLをする、もしくは、現在表示しているURLの「ｘ」マークをクリックします。
フィルター条件を追加したいときは、[Filters]をクリックします。
お好きな条件を設定して、右上の[Apply]をクリックします。
なお、データの保有期間は、
・直近1週間
・直近1か月
・カスタム
などを選べます。
２つのページを比較したいときは、右上の[Compare]をクリックします。
すると、以下のようにヒートマップが2列で表示されて便利です。
右上の[Clear]をクリックすると、現在表示されているページ含めて、全てのフィルター条件がリセットされます。
以上、Clarityのヒートマップの使い方を紹介しました。
おさらいすると、Clarityでは、
- クリックヒートマップ：クリックされた箇所が視覚的にわかる
- スクロールヒートマップ：離脱された箇所が視覚的にわかる
ので、この情報をヒントにしてサイトを改善できるというわけです。
まとめ：無料のClarityをサイト改善に役立てよう！
Microsoftヒートマップツール「Clarity」の導入手順と使い方を紹介しました。
Clarityは完全無料とはいえ、
・スクロールヒートマープ
・クリックヒートマップ
・画面録画
の３つを、
・ページ数：無制限
・PV数：無制限
・期間：無制限
で利用できます。
さらに、シンプルなUIで使い勝手も良好。
まさに最強のヒートマップツール！
本記事で解説した導入手順や使い方を参考に、Clarityをご活用ください。