【最強】MicrosoftヒートマップツールClarityの導入手順と使い方

BLOG SEO

Clarityに興味ある人「ヒートマップツールを探しています。MicrosoftのClarityが割と良いって聞いたので、使ってみたい。導入方法や使い方を初心者向けに教えてください」

こういった疑問に答えます。

本記事の内容

  • ヒートマップツール「Clarity」の導入手順と使い方

記事の信頼性

本記事を書いている私はブログ歴2年以上。記事数は350を超えました。SEOに関する記事も多数アップしています。

今回は、ヒートマップツール「Clarity」の導入手順と使い方を解説します。

Clarityは、Microsoftが提供する無料ヒートマップツールで、2020年10月に一般公開されました(参照:Microsoft公式サイト)。

ヒートマップツール比較の記事でも紹介したとおり、無料のヒートマップツールのなかでは、1番おすすめです。

本記事では、そんなClarityの導入手順と使い方をわかりやすく解説しました。

ヒートマップを活用してサイトを改善したい方は、ぜひご覧ください!

目次

Clarityとは無料で最強のヒートマップツール

Clarityとは、Microsoft社が2020年10月に公開した完全無料のヒートマップツール。

無料とはいえ、

・スクロールヒートマープ
・クリックヒートマップ
・画面録画

の3つを、

・ページ数:無制限
・PV数:無制限
・期間:無制限

で利用できるんです。

まさに最強って感じ。

無料のヒートマップツールの中ではダントツのNo1。

っていうか、有料のヒートマップツールと比較しても遜色ありません。
「ページ数やPV数が無制限」というところは、Clarityの方がむしろ上です。

Clarityのデメリット

Clarityの気になる点は、当初は日本語対応していないことでした。

しかし、ある時期を境に日本語にも対応したので、そのデメリットはなくなりました。

アカウント作成時は英語ですけど、アカウント作成後に日本語に変更できるのでご安心ください。

となると、デメリットといえば特に見当たりません。

このように、Clarityは超おすすめのヒートマップツールです。

Clarityの導入手順3ステップ

続いては、Clarityの導入手順を解説します。

導入手順は以下の3ステップ。

  • 手順①:アカウントを作成
  • 手順②:プロジェクト作成
  • 手順③:トラッキングコードの設置

順に見ていきます。

手順①: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]をクリックしたら、プロジェクト作成は完了です。

    手順③:トラッキングコードの設置

    次にトラッキングコードを設置します。

    ※トラッキングコードとは、Webサイトに訪問したユーザの操作を記録するためのもの。

    トラッキングコードの設置は、

    • 方法①:手動でコードを埋めこむ
    • 方法②:GTMを利用する

    の2種類があります。
    お好きな方法で行えばOK。

    方法①:手動でコードを埋めこむ

    プロジェクトを作成すると、以下のSetting画面になるので、
    [Copy to clipboard]をクリックします。

    上記でコピーしたトラッキングコードを、あなたのWebサイトのheadタグ終了直前にペーストします。

    方法②:GTMを利用する

    トラッキングコードの設置方法の2つ目は、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の導入時にあわせて設定しておきましょう。

    ※アナリティクスとの連携が不要な方は、こちらをクリックして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」の使い方3つ(ダッシュボード/レコーディング/ヒートマップ)

    続いては、Microsoft Clarityの使い方を解説します。

    Clarityの機能は主に以下の3つ。

    • 使い方①:ダッシュボード
    • 使い方②:レコーディング
    • 使い方③:ヒートマップ

    Clarityの画面でいえば、上部にこの3つのメニューが並んでいます。

    3つの機能は連携していて、すごく使いやすいです。

    たとえば、ダッシュボード画面からレコーディング画面にジャンプできたり、レコーディングからヒートマップ画面にジャンプをできたりなど。

    では、順に見ていきましょう。

    使い方①:ダッシュボード

    ダッシュボードでは、セッション数やページ滞在時間などの他に、ユーザビリティの低下要因を見つけるのに役立ちます。

    上部メニューから[Dashboard]をクリックすると、以下のような表示になります。

    ダッシュボードで確認できる有用なデータ

    • Dead clicks:ユーザーがページ内のいずれかの箇所をクリックしたのに、何も反応しないこと。UXの問題を見つけるのに役立つ
    • Rage clicks:短い時間で特定の箇所が連打されること。ユーザがイライラしている箇所を見つけるのに役立つ
    • Excessive scrolling:標準的なスクロールのスピードに比べ、高速でページをスクロールされること。読み飛ばされている箇所を見つけるのに役立つ
    • Quick backs:ユーザーがあるページに移動した後、すぐに前のページに戻ること。意図したページに遷移していないなど、ナビゲーションの問題を発見するのに役立つ

    上記のとおり。

    なお、ダッシュボード画面内で[Recordings]ボタン、もしくはビデオのマークをクリックすると、レコーディングの画面にジャンプします。

    また、炎のマークをクリックすると、ヒートマップの画面にジャンプします。

    3つの機能が連携していて、とっても使いやすい(^^)/

    使い方②:レコーディング

    レコーディングでは、特定のユーザに着目し、そのユーザがサイト上でどんな操作をしたのかを、録画された動画で確認できます。

    上部メニューから[Recordings]をクリックすると、以下のような表示になります。左のリストの中から、確認したいページをクリックします。

    すると、以下の感じで画面録画の再生がスタートします。実際に使ってみると驚きで、ユーザー操作が手に取るようにわかるんです!

    画面左上の[More details]をクリックすると、「セッション情報」や「イベント情報」が表示されます。

    特に、左下に表示される「イベント情報」のメニューは分析時に便利です。各イベントをクリックすると、イベントが発生した瞬間にジャンプできるから。

    ※参考:画面上部の[Click]もしくは[Scroll]をクリックすると、後ほど説明するヒートマップもすぐに確認できます。連携していてとても使いやすい!

    このように、Clarityのレコーディングを使えば、特定ユーザの行動を元に、改善点のヒントを発見できます。

    使い方③:ヒートマップ

    ヒートマップでは、デバイス(PC/Tablet/Mobile)ごとに、

    • クリックヒートマップ
    • スクロールヒートマップ

    を確認できます。

    ※補足:その他のヒートマップには、アテンションヒートマップやマウスフローヒートマップがあります。こちらで解説してます。

    上部メニューから[Heatmaps]をクリックすると、アクセス上位の5ページが表示されます。他のページのヒートマップを見たいときは、[Show more]をクリックする、あるいは、左上の検索窓にURLを入力します。

    クリックヒートマップ

    見たいページを選ぶと、クリックヒートマップが表示されます。クリックされた箇所(色濃くマークされた箇所)を見て、サイト改善のヒントを探します。

    左列に表示されたカードを押すと、該当のクリック箇所にジャンプできるので便利。

    上部の[Click]メニューの右端をクリックすると、
    ・Dead clicks
    ・Rage clicks
    ・First clicks
    ・Last clicks
    に絞って確認できます。

    ※参考:ビデオのアイコン、あるいは、[View recording]をクリックすると、先ほど紹介したレコーディングも確認できます。機能が連携していて使いやすい!

    スクロールヒートマップ

    画面上部の[Scroll]をクリックすると、スクロールヒートマップが表示されます。
    左列には、5%スクロールごとに、何パーセントのユーザーが閲覧しているか(裏を返すと離脱率)が表示されます。右列は、左列のデータを色つきで可視化したもの。

    上図の例では、スクロール率が35%から40%の間に、閲覧割合がガクッと減っていることがわかります。こういった箇所をパッと探すには、右列のヒートマップがわかりやすいですね(^^)/

    この離脱率の高い箇所に、なんらかの対策を行うかを検討します。たとえば、下の方に記載しているコンテンツと記載順を入れかえるなど。

    共通の使い方

    クリックヒートマップとスクロールヒートマップとで、共通の使い方を紹介します。

    表示しているページから他のページに変えるときは、左上のURL検索窓にURLをする、もしくは、現在表示しているURLの「x」マークをクリックします。

    フィルター条件を追加したいときは、[Filters]をクリックします。

    お好きな条件を設定して、右上の[Apply]をクリックします。

    なお、データの保有期間は、
    ・直近1週間
    ・直近1か月
    ・カスタム
    などを選べます。

    ※世のヒートマップツールだと、データの保有期間に制限がありますが、Clarityに期間の制限はありません。これで無料なんてマジ最強。

    2つのページを比較したいときは、右上の[Compare]をクリックします。

    すると、以下のようにヒートマップが2列で表示されて便利です。

    右上の[Clear]をクリックすると、現在表示されているページ含めて、全てのフィルター条件がリセットされます。

    以上、Clarityのヒートマップの使い方を紹介しました。

    おさらいすると、Clarityでは、

    • クリックヒートマップ:クリックされた箇所が視覚的にわかる
    • スクロールヒートマップ:離脱された箇所が視覚的にわかる

    ので、この情報をヒントにしてサイトを改善できるというわけです。

    まとめ:無料のClarityをサイト改善に役立てよう!

    Microsoftヒートマップツール「Clarity」の導入手順と使い方を紹介しました。

    Clarityは完全無料とはいえ、

    ・スクロールヒートマープ
    ・クリックヒートマップ
    ・画面録画
    の3つを、

    ・ページ数:無制限
    ・PV数:無制限
    ・期間:無制限
    で利用できます。

    さらに、シンプルなUIで使い勝手も良好。

    まさに最強のヒートマップツール!

    本記事で解説した導入手順や使い方を参考に、Clarityをご活用ください。

    今回は以上です。

    ↑記事の先頭に戻る↑