無料のヒートマップツール「Clarity」とは｜創業手帳が実際に使ってみた！

無料のヒートマップツール「Microsoft Clarity」使い方まとめ

2020年10月、Microsoft社から、新たに「Clarity（クラリティ）」という無料のヒートマップツールがリリースされました。このヒートマップツール、完全無料ながら一定以上のサイト解析ができるため、リリース直後から注目を浴びているツールです。

ヒートマップツールは、サイト訪問者の行動や、LPでどこが見られているかなど、サイトやページ改善に大いに役立ちます。
創業手帳がさっそく登録してみました。設定方法や使い方について解説します。

※この記事を書いている「創業手帳」ではさらに充実した情報を分厚い「創業手帳・印刷版」でも解説しています。無料でもらえるので取り寄せしてみてください

「Microsoft Clarity」とは

「Microsoft Clarity」とは、前述の通りマイクロソフト社が提供する無料のヒートマップツールです。ヒートマップツールは有料や課金形態のサービスが多い中、完全無料ということでWeb解析士なども注目しているツールです。

Googleアカウント／Microsoftアカウント／facebookアカウントのいずれかがあれば登録可能。

では、ヒートマップツール「Clarity」ではどのようなことができるのでしょうか。

ヒートマップでユーザーの操作箇所を可視化

Clarityでできることとして第一に、ヒートマップツールが挙げられます。
ヒートマップツールとは、Webサイトの各ページでのユーザーの行動を、わかりやすく色で表現してくれるツールのこと。

LPなどでどこがよく見られているのか、どこがクリックされているのかが一目でわかります。
例えば、LP下部にもかかわらずよく見られている部分は引きの良い箇所ということなので、ページ上部に持ってくる、など対応すると良いでしょう。

パソコン、タブレット、モバイル端末それぞれ選択可能で、それぞれの結果を確認することができます。

フィルター機能も充実しており、期間変更やOSを指定することも可能。
サイト全体での連携なので、サイト内なら全ページ、指定して見ることができます。

ユーザーの行動を動画再生「レコーディング」

Clarityでできることはヒートマップだけではありません。今回のリリースで注目をあびているのが、レコーディング機能です。セッション再生（リプレイ）とも呼ばれています。

これは、ユーザーのスクロール動作やクリック動作が動画で再生される機能です。

訪問者別に滞在時間やクリックの動作が動画になって残っているので、どの記事のどの部分を見ているのか、など視認することができます。
URLを指定して確認できるため、必要なページだけチェックすることが可能です。

さまざまなインサイトにアクセスできる「ダッシュボード」

Clarityのダッシュボードでは、サイト内のユーザーの行動に関する様々な数値をまとめてくれています。

例えば、クリックしても何も起こらない領域をクリックした割合を示すデッドクリック率、別のページに移動しすぐに前のページに戻ったクイックバック率など、サイト側からすると好ましくない行動をとっているユーザーがどのくらいいるのか、またどのページで行われていたのかが一目でわかります。

気になる部分をクリックすると、より詳細なデータを確認することも可能です。

その他人気のあるページやブラウザの割合、リファラ（サイトに飛んでくる前のページ）も確認できるため、サイトの状況把握に役立ちます。

Microsoft Clarityの使い方

Clarityの設定方法と、使い方について解説します。

設定方法

Clarityの設定方法は簡単で、問題なく進めば15分程度で完了します。
まだ日本語には対応しておりませんが、簡単な英単語で説明されているため、必要に応じて単語を調べながら行えば設定できると思います。

もし下記以外の画面が出てきた場合でも、費用が発生することはありませんので安心して指示に従い登録してみてください。

大まかな流れは以下の通りです。

• Clarityのサイトでサインイン
• プロジェクト作成
• トラッキングコードを取得し、サイト内のコードに貼り付け
• Google Analyticsと連携

以下にて詳しく流れを解説します。

①Clarityのサイトでサインイン

まず、Clarityのサイトにアクセスします。

サイトにアクセスしたら、「Get started」を選択。
すると「Sign up with Clarity」というポップアップにてサインインの方法がでてくるので、利用したいアカウントを選択しましょう。

Clarityには、独自のIDやパスワードは用意されておらず、GoogleアカウントかMicrosoftアカウント、facebookアカウントのいずれかがあれば誰でも利用できます。
ここでは好きなアカウントを選択しましょう。
わざわざパスワードなど記憶する必要がないのは便利な点と言えるでしょう。

②プロジェクト作成

サインインが完了すると、「New project」という画面が表示されます。
こちらは解析したいサイトや、ブログなどの大きな枠組みです。

サイト名、URLを入力し、「Site category」ではサイトの種類が選択できますので、選択。
創業手帳はメディアを選択しました。

Createボタンを押すと、プロジェクトの完成です。

③トラッキングコードを取得し、サイト内のコードに貼り付け

次に、解析用のjavascriptを取得します。これを行わないと数値の取得ができません。

Settingsタブ内ののSetupメニューにて、「Clarity tracking code」とコードが表示されています。
コピーして、サイト内のタグ直前に入力し、保存して適応させましょう。

自動的にデータ収集が始まります。

④Google Analyticsと連携

最後に、Google Analyticsと連携させましょう。
同画面内で、「Google Analytics integration」とあるので「Get started」ボタンを選択。
連携の許可を聞かれるので、許可し、完了すると以下の画面になります。

設定から最大2時間ほどで連携が完了するとのこと。連携が終わるとActiveのスイッチがONになるはずなので、確認しましょう。

Clarityの使い方

Clarityのサイトにアクセスすると、まずダッシュボード画面が表示されます。

ここでは特にカスタマイズや設定をする必要なく、はじめから主要な解析データが表示されています。

人気記事（Popular pages）一覧などで炎のアイコン、ビデオのアイコンが表示されますが、炎のアイコンをクリックするとヒートマップ画面、ビデオのアイコンではレコーディング画面にとび、それぞれ該当記事のユーザーの行動を確認することができます。

その他Clarityでできることは冒頭の『「Microsoft Clarity」とは』で説明したとおりです。
まずは画面を弄ってみて、気になるデータを見ていきましょう。

ユーザーの追加方法

Clarityにログインし、上部のメニューの中から「Setting」を選択、サイドメニューの「Team」という項目で、「Add team member」をクリックしてください。
「Email」の枠内に招待したいユーザーのメールアドレスを入力して、「Add」ボタンをクリックすれば完了です。

招待したメールアドレスに招待メールが飛ぶので、「Join ○○○（プロジェクト名）」のリンクから、ログインしてもらってください。
管理者か閲覧者かの権限は、「Team」の画面内で変更できます。

Microsoft Clarityの注意点

無料でここまでできるなんて！と感動すら覚えるツールですが、注意点もあります。
活用を考えている方は、以下の点に注意しておきましょう。

注意点1：リリース直後であること

本ツールは2020年10月に一般にリリースされたばかりです。現在使用できている機能が使用できなくなる、UIが変わるなども起こりえますので、今後変化がある可能性も把握しておきましょう。

注意点2：だらだら見過ぎないこと

ユーザーの行動が可視化されるということは大変参考になることですが、ただ見ているだけではサイト・ページ改善にはつながりません。

レコーディング機能など、動画になっていて目新しい分、だらだらと見続け気づけば時間が経っている、なんてことも多いに考えられます。時間を区切るよう気を付けましょう。

また少人数のユーザーの行動や短い期間での結果で早急に判断をしてしまうのも危険です。

• どのページをなんのために改善したいか
• このツールで何を見たいのか

など目的をもって活用するのがおススメです。

まとめ

Microsoft社が提供するアクセス解析・ヒートマップツールClarityですが、思っていた以上にいろいろなデータを見ることができ驚きでした。

無料ながら基本的な機能が備わっているため、まずヒートマップツールを導入してサイトの解析をしてみたい、と考えていた方には大いにおすすめです。

まだ分析できるようなホームページやLPを持っていないという方は、ホームページの作り方をまとめた「ホームページ制作ガイド」を創業手帳が提供しておりますので、ぜひ活用してみてください。