• はてなブックマーク
  • RSS
  • Line

作業が捗る!クリエイティブワークが楽になる作業効率化「Tips」

2024.05.28 Tue

マイクロソフトが提供する無料で使えるヒートマップ「Microsoft Clarity」を使ってみよう!

文・画像:塚本建未

Webサイト/Webアプリを制作・運営する上で、非常に役立つヒートマップですが、その多くは有料で提供されているサービスです。中には無料プランを提供するサービスもありますが、機能が限定されているお試しプラン的なものが多く本格的な分析には向きません。無料で使えるヒートマップを探しているWeb担当者、Web制作関連の方も多いと思いますが、なかなか良いものが見つからないのが現状ではないでしょうか。

そこで、今回はMicrosoft社が無料で提供するMicrosoft Clarity(マイクロソフト クラリティ)というヒートマップ・分析ツールについて、基本的な使い方や活用法を詳しく解説します。

Microsoft Clarityの概要

▶︎Microsoft Clarityとは
Microsoft Clarity(クラリティ)とは、Microsoft社が提供する無料のヒートマップ・Web解析ツールです。オープンソースで構築されたツールですが、サポート面も充実しており日本語対応もされているので、有料級のサービスを誇る無料ツールといっても過言ではありません。セットアップは簡単で、数分でデータの取得を開始できる点も便利なポイントです。

また、サンプリング(標本調査)ではなくサイトを訪問したすべてのユーザーの行動を記録・分析するシステムが採用されているので、高精度で信頼性の高いデータ収集・分析が可能です。

加えて、Microsoft ClarityはEUが定めた個人データの取り扱い規則であるGDPR(General Data Protection Regulation:EU一般データ保護規則)と、米国カルフォルニア州のプライバシー権と消費者保護に関する州法であるCCPA(California Consumer Privacy Act:カリフォルニア州消費者プライバシー法)に準拠するように設計されています。これらの法規制は域外適用されるため、日本企業にも適用される可能性があります。そういった観点からMicrosoft ClarityはEUやカルフォルニア州からのアクセスデータに関しても安心して利用可能できる分析ツールの一つであると言えます。

▶︎Microsoft Clarityの機能
Microsoft Clarityにはヒートマップ、セッション録画、イベント分析、デバイス別分析、国・地域別分析、A/BテストといったWebサイト・Webアプリを訪問するユーザーの行動を分析する機能が搭載されています。また、Google アナリティクスと連動できる機能もあり、総合的な分析ツールとして活用できます。

Microsoft Clarityの使い方

▶︎アカウント作成と設定(簡潔に)
最初に新規アカウント作成と初期設定について簡単に解説します。

1.公式ページにアクセスしてサインアップ

「サインアップ」もしくは「使い始める」をクリック
サインイン先を選択しログイン

Microsoft Clarityの公式ページへアクセスします。TOPページにある「サインアップ」もしくは「使い始める」をクリックします。次に、サインイン先をMicrosoftアカウント、Facebookアカウント、Googleアカウントから選択しログインします。

2.新しいプロジェクトを追加してセットアップ

新しいプロジェクトを追加
セットアップを開始

アカウントにログインすると新規アカウントが作成されます。サインアップが完了すると「新しいプロジェクトを追加する」というモーダルウィンドウが表示されますので、データを分析したいWebサイトやモバイルアプリの名前やURLを入力します。新しいプロジェクトが追加されると、セットアップに移行します。セットアップは7項目ありますがガイドツアー形式で設定できるので、Web担当者、Web制作関連の方であれば問題なく設定できると思います。

▶︎ヒートマップの確認
1.画面上部のメニューからヒートマップをクリック

データを見たいページをクリック
ヒートマップが表示される

画面上部にあるメニューから「ヒートマップ」をクリックします。ヒートマップのページに遷移すると、人気急上昇中のページ一覧が表示されていますので、ヒートマップを確認したいページのURLをクリックします。画面が遷移すると選択したページのヒートマップが表示されます。

▶︎セッション録画の視聴
1.ヒートマップのサイドバーから「レコーディングを表示」をクリック

左サイドバーから「レコーディングを表示」をクリック
閲覧したいレコーディングのエリアをクリック

レコーディングを表示するには、いくつか方法がありますが、ここではヒートマップのデータから見る方法を紹介します。ヒートマップのページには左にサイドバーがありますので、サイドバーが折りたたまれている場合は、左サイドバーを表示させる「>>」のアイコンをクリックします。左サイドバーには、ヒートマップのデータに基づいたランキングが表示されていますので、任意の項目を選択し「レコーディングを表示」をクリックします。画面が遷移し、レコーディングのページが表示されます。レコーディングの左サイドバーから閲覧したいユーザーのレコーディング項目のエリアをクリックします。

1.レコーディングの再生

レコーディングが再生される
「ライブ収録」からリアルタイムのユーザー行動を確認可能

「レコーディングを表示」をクリックすると左上の画像のようにレコーディングが再生されます。レコーディングの左サイドバー上部に、「ライブ収録」という項目が表示されている場合は、リアルタイムのユーザー行動も確認可能です。「ライブ収録」をクリックすると、ユーザーに関する項目が表示されますので、任意のユーザーの項目エリアをクリックするとリアルタイムの行動を閲覧することができます。

▶︎その他の機能

メニューからダッシュボードをクリック
各種分析データを確認可能

画面上部のメニューからダッシュボードをクリックすると、各種分析データを確認できます。確認できる項目は「セッション」「セッション別のページ数」「スクロールの奥行き(スクロール深度)」「アクティブに費やした時間」といった基本項目と、「ユーザーの概要/すべてのユーザー」「インサイト」「ウォッチリスト」「スマートイベント」「参照元/チャネル/キャンペーン/ソース」「ブラウザー/デバイス/オペレーティングシステム」「パフォーマンスの概要/URLのパフォーマンス」「人気急上昇中のページ」「JavaScriptのエラー」といった各種項目に関する分析データの機能が搭載されています。

Microsoft Clarityの活用方法

ここからは、Microsoft Clarityの主な活用法について解説します。

▶︎ユーザーの行動分析
Microsoft Clarityのヒートマップ、セグメント機能、フィルター機能などを活用することで、ユーザーの動向を詳細に分析できます。ヒートマップは、ユーザーがページ上でどこをクリックしているか、どこを見ているかを可視化できるので、UI・UXデザインやカスタマーサクセスの改善などに役立ちます。セグメント機能では、ユーザーの属性や行動履歴に基づいてユーザーをグループ化できるので、今後の施策でどの層にターゲティングしていくべきかといったことを検討できます。フィルター機能では、特定の期間、デバイス、地域などの条件でユーザーを絞り込むことができるので、より詳細なユーザー像をイメージすることを可能にします。

▶︎セッションのレコーディング分析
セッションのレコーディング(録画)機能を活用することで、ユーザーが実際にWebサイト・アプリを閲覧している様子を詳細に確認でき、ユーザーの視点に立ったWebサイト・アプリの改善に役立てることができます。

▶︎A/Bテストの仮説を立てる
ユーザーの行動分析や、セッションのレコーディング分析の結果に基づいて、A/Bテストの仮説を立てることができます。スクロールの奥行き(スクロール深度)、インサイト、LCP(Largest Contentful Paint)、FID(First Input Delay)、CLS(Cumulative Layout Shift)といったパフォーマンス指標などまでデータ分析されているので、より精密で効果的な仮説を立てることを可能にします。

Microsoft Clarityの注意点

最後に、Microsoft Clarityを使う上での注意点も確認しておきましょう。

▶︎個人情報の取り扱いやプライバシーポリシーには十分に注意する
Microsoft Clarityは、IPアドレス、ブラウザや端末といった閲覧環境、閲覧履歴など詳細なユーザー情報を収集できるツールです。これらのデータは個人情報保護法などで定義されている個人情報の要件を満たしてはいませんが、ユーザーを特定できてしまう可能性も否定できません。そのため、データの扱いやプライバシーポリシーには十分に配慮する必要があります。
利用規約のページ

▶︎データが蓄積されていくのでデータを整理する
Microsoft Clarityでは、無料ツールであるもののデータが無期限に保存できるのがメリットです。ただ、無期限に保存できるため、長期的に利用しているとデータ量が増え管理が難しくなります。したがって、定期的にデータを整理したり、不要なデータを削除することが重要です。

まとめ

Web制作周りのツールにはサブスクリプションで課金されるサービスも多く、どのツールにコストをかけていくべきかは企業によっても異なるでしょう。Microsoft Clarityは、ヒートマップや分析に関してコストはかけられない環境で、第一候補となるサービスです。特にMicrosoftが提供するサービス、ツール、端末を多く導入している企業との相性は抜群でしょう。

Microsoft社が提供するツールは、なんらかの形で有料プランと紐づけられているイメージがありますが、近年はGoogleの提供する無料ツールの影響もあるのか、無料で利用できるサービスも増えています。ただ、こうした無料ツールは、大々的には宣伝されておらずアプリやサービスの一覧をスクロールした下のほうにあったり、その他の項目にあったりするので、あまり知られていません。Microsoft Clarityもそうしたツールの一つですので、本記事で初めて知ったというWeb担当者、Web制作関連の方も少なくないかもしれません。導入しやすいツールですので、まずはアカウントを作成して試用してみてください!

塚本 建未
ライター・編集者・イラストレーター
フリーランスのライター・編集者・イラストレーター。高校はデザイン科を卒業し、大学は、文学部とスポーツ科学部の2つの学部を卒業。フィットネス・トレーニング関連の専門誌で編集者・ライターとしてキャリアを積む。メインの活動の場をWebメディアに移行してからは、ITツール紹介やWebマーケティング分野などを得意領域として活動を続けている。
  • Twitter
  • Instagram
読込中...

Follow us!

SNSで最新情報をCheck!

Photoshop、Ilustratorなどのアプリの
使いこなし技や、HTML、CSSの入門から応用まで!
現役デザイナーはもちろん、デザイナーを目指す人、
デザインをしなくてはならない人にも役に立つ
最新情報をいち早くお届け!

  • Instagram