Microsoft Clarityを使用したWebサイトパフォーマンスの最適化

• Web Create
• 2024.05.16

Webディレクターのもっちです。

ホームページの改善を行うためには、「現状の何が良くないのか？」と課題抽出・分析が必要となります。
本記事では、このような時に役立つ無料ヒートマップツール「Microsoft Clarity」について解説していきます。

Microsoft Clarityとは

Microsoftが提供する無料のWebサイト分析ツールで、ユーザー行動をヒートマップやレコーディングとして表示・分析ができます。
具体的にはWebサイトを訪れたユーザーの離脱箇所やクリックした箇所などを分析できるため、ユーザーのニーズの把握や製品・サービス向上に役立ちます。Microsoft Clarityは、優れた機能を備えながら完全無料で利用できるため、世界中でSEO対策に取り組む多くのユーザーに利用されているヒートマップツールです。

Microsoft Clarityの機能

Microsoft Clarityには、主に3つの機能が備わっています。
Microsoft Clarityの導入を検討している方は、まずはどのような機能が備わっているのかを確認しておきましょう。

ヒートマップ

ヒートマップ機能では、ユーザーがクリックした位置やスクロール位置・滞在時間を確認できます。
下記のような項目を分析可能です。

・ユーザーがどのようにWebサイトを利用しているのか
・利用してほしいコンテンツが狙い通りに活用されているか

クリックした箇所は色付けで視認でき、ユーザーがスクロールした範囲やクリック数が多い領域をパーセンテージで可視化できるため、Webサイト分析に効果的です。

レコーディング

レコーディング機能は、ユーザーの行動を動画で記録し・再生する機能です。
ユーザーがWebページに訪問した際の、マウスポインターやスクロールなどの動作を動画で確認できます。
そのため、ユーザーのページ滞在時間やスクロール・クリックの流れを把握して、よりインプレッション数の高いWebサイトへ改善可能です。
ホームページ制作者はわかりやすいだろうと思って作ったとしても、初めての方には使いづらいサイトかもしれません。
そういった場合もMicrosoft Clarityを使えば、改善点を見つけられます。

ダッシュボード

ダッシュボード機能は、計測中のWebサイト全体のユーザー数やデバイス別・ページ別・参照元別などの利用頻度の高いディメンションの数値を確認できる機能です。
ダッシュボード機能を活用すれば、下記のようなクリック率を測定できます。

・イライラしたクリック率（Rage clicks）：ユーザーが同じ箇所を素早く何度もクリックした
・デッドクリック率（Dead clicks）：アクションにつながらなかった
・クイックバック率（Quick backs）：ページ移行後すぐに前ページに戻った

ダッシュボードの分析結果を確認すれば、自社のサイトがユーザーにとって有益なページかどうかを判断し、ニーズに沿った改善が可能です。

Microsoft Clarity導入のメリット

Google Analyticsとの連携

Microsoft ClarityとGoogle Analyticsを連携させると、Google Analyticsの目標設定やセグメント・計測データも活用してより詳しく分析できます。Microsoft Clarity上で、Google Analyticsのデータを確認でき、利便性が良くなるのも魅力です。
また、Looker Studioを使えば、Google Search Consoleとの連携も可能です。

完全無料で利用可能

Microsoft Clarityは、すべての機能を無料で利用できるため、予算が限られている場合でも安心して導入可能です。
他の無料ヒートマップツールは使いたい機能が備わっておらず、十分なWebサイト分析ができない可能性もありますが、Microsoft Clarityは無料でありながら権限付与機能も備わっているため、複数の担当者がいる場合などは運用しやすいでしょう。

データの保有期間が無制限

Microsoft Clarityは、データの保有期間に期限がありません。
無料のヒートマップツールの中には、データの保有期間に制限がかけられているケースがあり、長期的なWebサイト分析に向いていません。
一方でMicrosoft Clarityは、データの保有期間に制限がないので、過去のデータとも比較が可能です。
長期的なウェブサイト分析を行いたい企業にとって、Microsoft Clarityは最適なツールといえるでしょう。

セッション数が無制限

Microsoft Clarityは、セッション数に制限がないので、規模が大きいサイトにも対応可能です。
無料のヒートマップツールには、セッション数（PV数）に制限をかけて上限を超えた場合は、課金しなければ利用できないツールも存在します。
そのため、月々のセッション数が多い大規模なWebサイトには利用できず、中小規模のWebサイトでないと正確な分析ができませんでした。
Microsoft Clarityは無制限のため、小規模から大規模までさまざまなサイトに対応しています。

Microsoft Clarityの導入方法

手順①　アカウントの作成

Microsoft Clarityのサイトにアクセスします。
https://clarity.microsoft.com

[サインアップ]あるいは [サインイン]をクリックします。

サインアップの画面が表示されるので、以下のお好きなアカウントでログインします。
・Microsoftアカウント
・Facebookアカウント
・Googleアカウント

手順②：プロジェクト作成

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

入力する内容は以下となります。

①名前
②WebサイトURL
※①は後から変更可能です。

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

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

トラッキングコードの設置は2種類の方法を選ぶことができます。

方法①：手動でコードをソースに埋め込む
方法②：GTMのタグを利用する

どちらの方法でもお好きな方を選択してください。

Microsoft Clarityの使い方

ダッシュボード

ダッシュボードでは、セッション数やページ滞在時間などの他に、ユーザビリティの低下要因を見つけるのに役立ちます。
上部メニューから[ダッシュボード]をクリックすると、以下のような表示になります。

参照元や使用されているブラウザの種類など様々なデータが確認可能ですが、少し分かりづらいインサイトについて、下記で説明しておきます。

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

レコーディング

レコーディングでは、特定のユーザに着目し、そのユーザがサイト上でどんな操作をしたのかを、録画された動画で確認できます。
上部メニューから[レコーディング]をクリックすると、以下のような表示になります。

ユーザーがどのようにページを閲覧したかが分かり、UI / UXの検証に大いに役立ちます。
再生画面左上の[詳細]をクリックすると、「セッション情報」や「イベント情報」が表示されます。

ヒートマップ

ヒートマップでは、デバイス（PC / Tablet / Mobile）ごとに、「クリックヒートマップ」「スクロールヒートマップ」を確認できます。
上部メニューから[ヒートマップ]をクリックすると、アクセス数が多い順に表示されます。
他のページのヒートマップを見たいときは、左上の検索窓にURLを入力します。

クリックヒートマップ
クリックヒートマップではクリックされた箇所（色濃くマークされた箇所）を見て、サイト改善のヒントを探します。
上部メニュー内の[クリック]ボタン右側の下向き矢印をクリックすると、クリックの種類を切り替えることができます。
・すべてのクリック
・停止したクリック
・激怒したクリック
・エラークリック
・最初のクリック
・前回のクリック

スクロールヒートマップ
上部メニュー内の[スクロール]ボタンをクリックすると、スクロールヒートマップが表示されます。
左サイドメニューには、5％スクロールごとに、何パーセントのユーザーが閲覧しているか（裏を返すと離脱率）が表示されます。

まとめ

Microsoft Clarityの導入手順と使い方を紹介しました。
Clarityは完全無料ですが、
・ダッシュボード
・レコーディング
・ヒートマップ
の3つを無制限で利用できます。
シンプルなUIで使い勝手も良好です。
本記事で解説した導入手順や使い方を参考に、是非Clarityをご活用ください。