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

BLOG SEO

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

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

本記事の内容

MicrosoftのClarityは、無料で使えるヒートマップツール。

正確にいうと、ヒートマップ機能も備えたWeb解析ツールでして、2020年10月に一般公開されました。※What is Clarity?

特徴的なのが、無料でヒートマップとレコーディング機能を無制限に使えること。世の無料ヒートマップツールと違って、測定できるPVやページ数に制限がありません。またGoogleアナリティクスと連携できるし、他メンバーと共有もできます。

まさに最強!
世のヒートマップツールは、いずれこのClarityに全て食われちゃうな。。

本記事では、そんなMicrosoft Clarityの導入手順と使い方をわかりやすく解説しました。Webサイトを改善したい方はぜひご覧ください。

Microsoftのヒートマップ「Clarity」の導入手順

まず前置き。
Microsoftのヒートマップ「Clarity」は、日本語化されてません(2021年10月時点)。必要に応じて、Chrome(GoogleのWebブラウザ)で日本語翻訳をお使いください。

ではClarityの導入手順を紹介しましょう。

導入手順1:Microsoft Clarityのアカウントを作成

Microsoft Clarityのサイトに行き、「Sign up」もしくは「Sign up-it’s free!」をクリックします。

サインアップの画面が表示されます。以下のお好きなアカウントでログインしてください。
 ・マイクロソフトアカウント
 ・Facebookアカウント
 ・Googleアカウント

Googleアカウントでサインアップした場合は、以下の画面になるので、アカウントをクリックします。

チェックをつけて、[Continue]をクリックします。

以上でMicrosoft Clarityのアカウント作成は完了です。

導入手順2:プロジェクト作成

次にClarityで使用するプロジェクトの作成です。手順①が終わると、以下の画面になってるので、①②③を入力して[Create]をクリックします。

入力する内容

  • ①:プロジェクト名(後で変更OK)
  • ②:あなたのWebサイトURL
  • ③:サイトの種別(後で変更OK)

上記の入力して、[Create]をクリックしたら、プロジェクト作成は完了です。

導入手順3:トラッキングコードの設置

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

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

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

上記でコピーしたトラッキングコードを、あなたのWebサイトの</head>タグ直前にペーストします。※Googleタグマネージャーを使ってもOK。

以上でトラッキングコードの設置はOK。
ここまで行えば、Clarityの導入は完了です。

データが取れているかの確認

トラッキングコードを設置したら、数時間ほど待って、データが取れているかを確認してみましょう。

Microsoft Clarityのサイトにログインすると、先ほど作ったプロジェクトが表示されてるので、クリックします。

タッシュボードに何かしらデータが表示されていれば、データを正しく取得できています。

おつかれさまでした(^^)/

Googleアナリティクスと連携する設定方法

なお、Microsoft Clarityは、Googleアナリティクスと連携することができるのが特徴。せっかくなので、導入時にあわせて設定しておきましょう。※連携はしなくていいよという方は、使い方へジャンプしてください。

まず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]をクリックします。

以上で、他メンバーと共有する設定は完了です。

Microsoftのヒートマップ「Clarity」の使い方

続いては、Microsoft Clarityの使い方を解説します。
Clarityの機能は主に以下の3つ。

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

上記の3つは連携していてすごく使いやすいです。

例えば、①のダッシュボード画面から②のレコーディング画面に飛べたり、②のレコーディングから③のヒートマップ画面に飛べたりなど。

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

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

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

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

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

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

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

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

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

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

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

画面の上にある[More details]をクリックすると、そのユーザーの詳細情報がわかります。

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

このように、Clarityのレコーディングを使えば、特定ユーザの行動から、サイトの問題点を見つけられます。

Microsoft Clarityの使い方③:ヒートマップ

ヒートマップでは、デバイスごとに、クリック(タップ)とスクロールの様子を確認できます。

上部メニューから[Heatmaps]をクリックすると以下のような表示になります。これは、[モバイル]で[Tap]を選んだときでして、ご覧のようにタップされた箇所が視覚的にわかります。

赤枠のビデオボタンを押せば、先ほど紹介したレコーディングも確認できます。機能が連携していて使いやすい!

画面右上の[Scroll]をクリックすると、スクロールヒートマップが表示されます。サイトのどこで離脱されているかが視覚的にわかります。

このように、Clarityのヒートマップを使えば、ページ内のクリック箇所や離脱箇所が視覚的にわかるので、ページの改善に役立ちます。

参考:Clarityのデータ測定条件を変える方法

画面上部には、データ測定の条件が記載されてます。下図では、[Last 3 days]という薄いブルーがそれ。この条件を変えるときは、左上の[Filters]をクリックします。

以下のような画面になるので、お好きな条件を設定して、[Apply]をクリックしてください。

例えば、データの保有期間は以下の5つから選べます。

  • Today
  • Last 3 days
  • Last 7 days
  • Last 30 days
  • Custom

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

まとめ:MicrosoftヒートマップツールClarityは最強!

本記事では、Microsoftヒートマップツール「Clarity」の導入手順と使い方を紹介しました。いかがでしたか?

MicrosoftのClarityを一言でいえば、今後のスタンダードになりうるだろう最強のWeb解析ツールです。なぜなら、ヒートマップとレコーディング機能を無料で制限なく使えるから。

世のおすすめヒートマップツールは、ヒートマップツールの比較|無料で使えるおすすめ5選!でも紹介してますが、無料での利用となれば、Clarityの足元にも及びません。

有料版ならたしかに機能は豊富ですが、費用の負担が大きく、個人での利用は難しいですよね。しかしClarityなら負けず劣らずの機能を無料で提供しています。しかも使い勝手がよくて、Googleアナリティクスと連携もできる。

ハッキリ言って、これからヒートマップツールを使うなら、MicrosoftのClarityの一択!
ぜひともWebサイトの改善に活用してください。

今回は以上です。