Microsoft Clarity（クラリティ）は無料でここまで分析できる！Webページ改善のヒントも紹介

「Clarity（クラリティ）」は、Microsoft社から公開されている無料のヒートマップツールです。

ヒートマップツールは、「Webサイトに訪問したユーザーがどのページのどこまでを見ているか」「ページ内のどこがクリックされているか」など、Webサイトやページ改善に役立つヒントが得られます。

本記事では、Clarityをこれから導入する方へ向けて、設定方法から使い方までをまるっとご紹介します。

無料で使用できるので、ぜひ「Clarity（クラリティ）」を活用してみてくださいね！

Table of Contents

Microsoft Clarity（マイクロソフトクラリティ）とは

Microsoft社のClarity（クラリティ）とは、ユーザーがWebサイト上でどのように行動しているかを視覚的に分析できる無料のヒートマップツールのこと。

ヒートマップツールは一部機能を無料で使用できる反面、すべての機能を使用するには有料のアップグレードをしなければならないケースが一般的です。

しかし、Clarityはひとつのアカウントで分析できるサイト数や閲覧回数の制限がなく、完全無料ですべての機能を使用できます。初めてヒートマップツールを使う方で「いきなり使いこなせるか心配」という場合でも、試験的に導入しやすい点はメリットと言えるでしょう。

Clarityの主な機能

無料ですべての機能を使えるClarityの主な機能3点を紹介します。

ダッシュボード

ダッシュボードでは、Clarityで取得できる情報を表やグラフなどの視覚的なデータで把握できます。

ヒートマップ

ヒートマップでは、ユーザーがどの場所をクリックしたのか、ページ内のどこまでスクロールしたのかといったユーザーの行動に関する情報を知ることができます。

取得したい情報は、URLや計測期間などでフィルタリングをかけて抽出することが可能。また、特定のセッション時間を超えるデータのみを表示したり、ユーザーが起こしたアクションごとに絞り込んだりすることもできます。

レコーディング

レコーディングでは、Webページへ訪問したユーザーによるマウスポインターやスクロールなどの詳しい動作を、動画で一人ひとり確認できます。ユーザーがページ内のどの部分を熟読しているか、問い合わせボタンをクリックするまでにどんな動作をとっているかなどをより詳細に把握できるのがポイント。

こちらもヒートマップと同様に、さまざまな指標でフィルターをかけて必要な情報を抽出することが可能です。

Clarity（クラリティ）を導入するメリット

Microsoft社のClarityは無料でありながら、ヒートマップツールの基本的な機能が網羅されています。

Clarityを導入することで、具体的には以下のようなメリットがあります。

無料でサイトの現状把握・分析が可能
PV数やサイト数に制限がない　※データ保存期間は無制限（2024年9月時点）
Google Analyticsと連携でき、より高度な分析が可能
画面録画機能が使用でき、ユーザー行動の追跡状況が視覚的に分かりやすい

実際に「ユーザーがどこをクリックしたか」「どのページを見たか」「どこで離脱したのか」といった細かい行動を確認することが可能です。

また、アクセス解析ツールGoogle Analyticsと連携すればデータを照らし合わせやすくなり、より分析の精度を高められます。

Clarity（クラリティ）の導入手順

Clarityの設定手順についても確認しておきましょう。

アカウント登録
プロジェクト作成
Clarityタグの設置
Google Analyticsとの連携

1.アカウント登録

1-1. TOPページからサインアップ<h4>

まずはMicrosoft Clarityの公式サイトにアクセスし、TOPページ右上の『サインアップ』または真ん中の『使い始める』をクリックします。そうすると、以下のような画面が出ます。

次のいずれかのアカウントを選んでログインすることで、Clarityに登録できます。

Microsoft
Facebook
Google

1-2. ログイン後、メールアドレス確認を行い登録完了

メールアドレスを確認して問題なければ「承諾します」のチェックボックスにチェックを入れ、「続ける」を押せば登録完了です。

2. プロジェクト作成

ログインページを開き、「+新しいプロジェクト」をクリックして新しいプロジェクトを作成します。

分析したいサイトについて、以下の情報を入力したら完了です。

名前
WebサイトURL
Webサイトの業種

3. Clarityタグの設置

プロジェクトを追加すると、タグ設置に関する画面が表示されます。

タグ設置の方法は、以下の2通りです。

GTM（Google Tag Manager）を使用
Clarityコードをサイト内に直接記述

3-1. GTM（Google Tag Manager）を使用

プロジェクトに設定したサイトURLでGoogleタグマネージャーを設定済みの方の画面には、「Google タグマネージャを使用してインストールする」という表示が出てきます。

「セットアップの開始」をクリックし、設定を進めれば簡単に連携が可能です。

次のページで「今すぐつながりを申請」をクリックします。

チェックボックスにチェックを入れ、「続行」をクリックしましょう。

サイトを管理しているアカウントとコンテナーを選択し、最後に「作成と実行」をクリックします。

タグマネージャーと連携されたアカウントとコンテナー名が表示されますので、設定作業はこちらで完了です。

3-2. GTM（Google Tag Manager）を使用

GTMの設定がない場合は、手動でタグをサイトに設置することで連携が可能です。「手動でインストールする」の「追跡コードを取得する」をクリックし進みます。

タグをコピーし、Clarityを導入したいWebサイトの<head> の要素に貼り付ければ設置完了です。

4. Google Analytics（Googleアナリティクス）との連携

次に、左サイドのメニューにある「セットアップ」をクリックし、「Google アナリティクスの統合」内の「開始する」をクリックします。その後、Google アナリティクスに登録しているGoogleアカウントを選択します。

Googleアカウント選択後、「接続するサイト」にあるプルダウンをクリックすればWebサイトの一覧が出てくるので、該当のサイトを選択し保存をクリックしたら完了です。

Clarity（クラリティ）でWebページを改善するためのヒント

Microsoft社のClarityで収集したデータについて、「実際にどこを見てどのように改善したら良いか」といったヒントを解説します。

フィルターのかけ方

左上にある「フィルター」をクリック。

データの表示期間を選択します。

「パス」の「閲覧済みURL」に分析・改善したいページのURLを入力します。

データの見方は、「ダッシュボード」「レコーディング」「ヒートマップ」に分けて解説します。

ダッシュボード

ダッシュボードでは、とくに「アクティブに費やした時間」と「インサイト」を確認しましょう。

アクティブに費やした時間

ここでは、セッション（サイトに訪れてから離脱するまで）の平均時間が表示されます。

アクティブ＝ユーザーがサイトに注目した時間
非アクティブ＝他のタブやウィンドウの後ろにサイトが隠れてしまった時間

インサイト

ここでは、ユーザーが取った具体的な行動の割合が表示されます。

イライラしたクリック

連続して素早く複数回にわたってクリックされた割合です。この割合が高いと、ユーザーが何らかの不満を感じている恐れがあります。

デッドクリック

ユーザーがサイト上でクリックしたのに何も反応がなかった割合です。リンクが機能していないなどの問題がある場合があります。

過剰なスクロール

ページを垂直にスクロールした回数が通常よりも多かったかどうかを意味する割合です。ページのロード時間が遅かったり、内容の薄い情報が掲載されていたりなど、ユーザーがページを読まずにスクロールしている可能性があります。

クイックバック

ユーザーがページを訪れてから、すぐに前のページに戻った割合です。この割合が高いと、ページの内容がユーザーインサイトとズレている可能性があります。

▼見直すポイント
アクティブに費やした時間が長かったり、クイックバックの割合が高かったりするのは、「ページの内容がそもそもユーザーインサイトに合っていない」「ページの内容が分かりにくい」などの原因が考えられます。このような場合には、ページの内容を以下の視点で見直しましょう。

・ユーザーの検索意図に沿っているか
・情報が分かりやすく整理され記載されているか

また、デザインに関わる部分も滞在時間に大きく影響します。ユーザーが読みづらいと感じるような以下のポイントを見直し、デザイン部分でも改善を行ってみましょう。

・テキストの改行が適切になされているか
・文字色の視認性が良いか

ヒートマップ

ヒートマップでは、次の3つのデータを確認できます。

クリック
スクロール
領域

ここでは、「クリック」と「スクロール」についてとくに押さえておきたいポイントを解説します。

クリック

ページ内で「どこがクリックされているか」を確認できます。左サイド部分に、そのページでクリック数が多いエリアが順番に並んでいます。

ここでは、以下の視点でデータを確認してみましょう。

クリックされたいところが実際にクリックされているか
リンク設置されていないところがクリックされていないか

▼見直すポイント
リンク設置されていない箇所がある程度クリックされているなら、ユーザーがその箇所のコンテンツやキーワードに興味がある可能性があります。

ただし、そのコンテンツやキーワードに興味があるのにクリックできないと、ユーザーがストレスを感じてページ離脱につながる恐れも。テキストリンクを設置し関連記事に遷移させるなど、クリックできるように対策を講じましょう。

また、リンクが付いているように誤解をさせるデザインとなっている可能性もあるため、その点も確認します。

スクロール

ページ内で「どのくらいユーザーがスクロールしているか」を確認できます。ページのどの部分までスクロールされているかが割合に応じて色分けされており、視覚的に分かりやすくなっています。

ページの下部に行けば行くほど割合は下がるのが一般的ですが、ページの上部などで急激に下がっている箇所がないかをチェックすると良いでしょう。

▼見直すポイント
一例として、当社が運営しているオウンドメディアでは、h1下の目次前でスクロール90％程度、目次下では80％以下に急激にスクロール割合が下がっている箇所がありました。

そのため以下のポイントに注目し、改善を行いました。

・目次のテキストが長く読みづらい可能性があった⇒簡潔にリライト
・目次のテキスト色がすべて赤だったため、視認性が悪い可能性があった⇒テキスト色を黒に変更