【キャプチャ付き解説】Microsoftの無料ヒートマップツールclarity（クラリティ）とは？

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

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

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

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

Table of Contents

Microsoftの無料ヒートマップツールclarity（クラリティ）とは？

Microsoft社のClarityは、「ユーザーがWebサイト上でどのように行動しているかを視覚的に分析できる」無料のヒートマップツールです。

一般的にヒートマップツールは、一部機能だけが無料で使用でき、すべての機能を使用するためには有料のアップグレードを必要とすることが多いです。

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

Clarityの主な機能

①ダッシュボード（Dashboard）

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

②ヒートマップ（Heatmaps）

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

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

③レコーディング（Recordings）

レコーディングでは、ウェブページへ訪問したユーザーによるマウスポインターやスクロールなどの詳しい動作を、動画で一人ひとり確認できるのが特徴です。

この機能によって、ユーザーがページ内のどの部分を熟読しているか、問い合わせボタンをクリックするまでにどんな動作をとっているかなどがより詳細に分かります。

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

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

Clarityを導入することで、以下のメリットがあります。

無料でサイトの現状把握・分析が行える
PV数やサイト数に制限がなく、ストレスなく使える　※データ保存期間は30日間（2023/3月時点）
Google アナリティクスとの連携ができ、より高度な分析が可能
画面録画機能が使用でき、ユーザー行動の追跡が視覚的にわかる

実際にユーザーがどこをクリックして、どのページを見てどこで離脱したのかが細かく確認できます。

また、アクセス解析ツール「Google アナリティクス」と連携することで、データを照らし合わせ、より分析がしやすくなります。

無料でありながら、ヒートマップツールの基本的な機能が網羅されていることが特長です。

導入手順

Microsoft Clarityの実際の設定手順を紹介します。

Clarityへのアカウント登録
プロジェクトの作成
Clarityタグの設置
Google アナリティクスとの連携

1-1.アカウント登録

まずはMicrosoft Clarityの公式サイトにアクセスし『Sign up』をクリックしアカウント登録を行います。

以下いずれかのアカウントを選んで登録ができます。
・Microsoft　・Facebook　・Google

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

1-3.アカウント管理から、言語を日本語に変更

右上のアカウント管理を選択すると、基本設定から「言語」の変更が可能です。デフォルトでは英語になっているため、「日本語」に変更すると使いやすいです。

2.プロジェクトの作成

分析したいサイトのプロジェクトを作成しましょう。以下の①プロジェクト名　②サイトURL　を入力し③をクリックして完了です。

3.Clarityタグの設置

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

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

①GTM（Google Tag Manager）を使用

プロジェクトに設定したサイトURLでGoogleタグマネージャーを設定済みの方は、「Google タグマネージャを使用してインストールする」という表示が出てきます。「セットアップの開始」をクリックし設定を進めれば簡単に連携が可能です。

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

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

データ収集は2時間ほど待つと開始され、その後ヒートマップやレコーディングが見られるようになります。

②Clarityコードをサイト内に直接記述

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

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

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

最後は、Google アナリティクスと連携です。

①左サイドのメニューにある「セットアップ」をクリック

②「Google アナリティクスの統合」内の「開始する」をクリックし進む

その後Google アナリティクスに登録しているGoogleアカウントを選択します。

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

「Google アナリティクスの統合」の部分にこのような表示が出たら、Google アナリティクスとの連携が完了です。

Clarityを使用したページ改善のヒント

clarityで収集したデータを、実際にどのポイントを見てどのように改善したらよいか、そのヒントを解説します。

①まずは、アクセス数を見たい・コンバージョンのフックに使用したいなど、分析・改善したいページをピックアップします。
②分析するページのピックアップが完了したら、フィルターを設定し確認したいページのデータを表示させます。

・データの表示期間を選択

・「閲覧済みURL」に対象のページURLを入力

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

▼ダッシュボード
・デッドクリック

ここで出ている数値は、ユーザーがサイト上でクリックしたのに何も反応がなかった割合です。

「ユーザーにクリックできると誤解させるような箇所がないか」という視点でコンテンツを確認してみるといいでしょう。

・クイックバック

ここで表示されている数値はユーザーがページを訪れてからすぐに前のページに戻った割合です。

「ページの内容がユーザーインサイトとずれていないか」という視点でコンテンツを再確認しましょう。

・費やした時間

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

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

クイックバックで出ている数値とも関係しますが、滞在時間が短い場合、ユーザーの探していた情報や求めていた答えが書かれておらず、ページの内容がそもそもインサイトにあっていない、もしくは内容がわかりにくいなどの様々な原因が考えられます。

ページ内容がキーワードの検索意図に合った内容になっているか、改めて見直しをしましょう。

また、デザインに関わる部分も、滞在時間に大きく関係があります。

テキストの改行が適切になされていなかったり、文字色の視認性が悪かったりなど、ユーザーにとって読みづらいポイントがないかを見直し、デザイン部分でも改善を行ってみましょう。

▼ヒートマップ
ヒートマップは「クリック」「スクロール」「領域」と3つのデータが確認できます。ここでは、「クリック」と「スクロール」について解説します。

・クリック

ここでは、ページ内のどこがクリックされているかを確認できます。

左サイドの表示部分に「クリック数の多い順にランキング」が表示されています。

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

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

リンク設置されていない箇所にある程度クリックがされている場合は、ユーザーがその箇所のコンテンツ・キーワードに興味がある可能性があります。

その先に興味があるのにクリックができないとユーザーのストレスになり、ページ離脱につながることもあるので、テキストリンクを設置し関連記事に遷移させるなど、対策を行いましょう。

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

・スクロール

ここでは、どのくらいユーザーがページをスクロールしているかが確認できます。

ページのどの部分までスクロールされているかが、割合に応じて色分けされ、視覚的に分かりやすく表示されています。一般的にページの下部に行けば行くほど割合は下がるものですが、急激に下がっている箇所などがないかチェックをしましょう。

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

・目次のテキストが長く読みづらい可能性があった
　⇒簡潔にリライト

・目次のテキスト色がすべて赤だったため、視認性が悪い可能性があった
⇒テキスト色を黒に変更、「h2見出し」「h3小見出し」が一目で分かりやすいようにデザインを修正

▼レコーディング

レコーディング機能では上記のように「マウスカーソルの動き」や「どこをクリックしたか」などユーザーの実際のサイト上での動きを動画で確認することができます。

たとえばコンバージョンが発生したページなどで、ユーザーがどのような行動でクリックまで至ったのかを確認することで、改善のヒントが見出せます。

「マウスカーソルの動き」を確認すれば、実際のユーザーがサイトを閲覧する際の視点、つまり「どの部分を主に見ているか」が分かります。

見てほしい箇所が見られていないということであれば、導線やレイアウトなどの見直しを行うことをおすすめします。

まとめ

ここまで、無料ヒートマップツールclarity（クラリティ）の導入手順・使い方を紹介しました。

Webサイトの改善を行いたい場合は、まず訪れているユーザーがサイト上でどんな行動をしているのか、現状把握から始めましょう。

現状把握を行うにあたっては、ユーザーがWebサイト上でどのように行動しているかを視覚的に示せるヒートマップツールが有効です。なかでも無料にもかかわらず、基本的な機能が網羅されている「Clarity」の導入はおすすめです。「まずは使ってみたい」という方は、ぜひClarityを試してみることをおすすめします。

なお、サイト改善を行い成果につなげるためには、Clarityだけではなく他ツールも併用し分析を行うことが大切です。

より本格的に分析をサイト改善に取り組みたいという企業様は、株式会社ファングリーにお問い合わせください。Googleアナリティクス4（GA4）の導入設定や現状分析、サイト構造の見直しや記事のリライトといった改善案の提案、実行まで一貫してお任せいただけます。