Microsoft Clarity 研究所 https://clarity.kosgis.com Microsoft Clarity(マイクロソフト クラリティ)の機能や可能性を探っています Thu, 10 Oct 2024 05:05:31 +0000 ja hourly 1 https://wordpress.org/?v=6.6.2 https://clarity.kosgis.com/wp-content/uploads/2024/01/cropped-HEm0sWv4_400x400-32x32.jpg Microsoft Clarity 研究所 https://clarity.kosgis.com 32 32 Microsoft Clarity(クラリティ)で関係者を除外する、4つの方法 https://clarity.kosgis.com/blog/how-to-exclude-stakeholders/ Thu, 10 Oct 2024 04:53:09 +0000 https://clarity.kosgis.com/?p=802

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 Clarity を導入後、大切な初期設定のひとつとして、自分や担当者を解析のデータに含めないために関係者除外があります。すぐにでき […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。

Clarity を導入後、大切な初期設定のひとつとして、自分や担当者を解析のデータに含めないために関係者除外があります。すぐにできる簡単な方法と、しっかりとした方法と、ひねり出した折衷案をまとめました。

結論からいうと、①接続しているIPをブロックするか、②ログインしている管理者を判別して Clarity を実行させないか、③Cookie とカスタムタグで関係者を判別するか、④utmパラメータを使うかのどれかです。どれも一長一短があります。

接続しているIPをブロックする

Clarity 側で用意されている機能です。シンプルでカンタンですが……メリットとデメリットはこんなかんじ。

メリット

  • カンタンに自分や自社を除外できる
  • 除外したいIPをいくつも設定できる
  • 接続元をサクッと登録できる

デメリット

  • IPアドレスが変わったら再設定が必要
  • リモートワークの社員全員に適用させるのは非現実的
  • 社内のアクセスすべてに適用されてしまう
STEP
Clarity の設定 → IP ブロックに進む

「設定」画面の左にあるメニューから「IP ブロック」に進むと、除外したいIPが設定されてなければ以下のような画面が表示されます。

ここで、[+ IP アドレスをブロックする]をクリックします。

Microsoft Clarity のIPブロック画面
STEP
除外したいIPアドレスを設定する

以下のような画面が開き、名前(日本語でもOK)を入力して「現在の IP をブロックする」にチェックを入れると、自動的にIPアドレスが入力されるため、[追加]ボタンで完了させます。

Microsoft Clarity のブロックIPの設定

はい、めちゃくちゃカンタンですね。

ただし、中規模以上の企業などグローバルIPアドレスを取得していないケースのほうがほとんどだと思うので、いつの間にかIPアドレスが変わっていることはありえます。実際、この記事を書いている時点で自宅のIPアドレスが変わっていましたし。

ちゃんと関係者を除外したデータを取得したいなら、Google タグマネージャーを使うのが一番です。

そもそも Google タグマネージャーの使い方がまったくわからない場合や、アクセス解析ツールの導入や設定について不安が残る場合、お話を伺ったり代行設置したりすることも可能です。「わからないことがわからない」状態でも問題ありません。ツールの導入の必要性も含めてお伺いできますので、どうぞご一報ください

ログインしている管理者を判別して Clarity を実行させない

Clarity は一度実行されると必ずデータを取得するため、Google タグマネージャーで Clarity を制御して、管理者は Clarity を実行させないようにするのが、この方法です。

今回は、WordPress のようなCMSにログインしているケースを想定しています。

この方法は Google タグマネージャーで Microsoft Clarity を導入していることが前提です。HTMLとして直接トラッキングコードを入れていたり、プラグインなどで導入済みの場合は、Google タグマネージャーの Microsoft Clarity(Official)タグのみにしておいてください。

メリット

  • WordPress にログインできる人を一気に除外できる
  • スマートフォンからのアクセスにも対応できる
  • 不要なデータを含めなくて済む

デメリット

  • 管理者ログインを見極める必要がある
  • Google タグマネージャーで JavaScript を使用するので誰でも簡単に設定できるわけではない

ログインしているユーザー全員を関係者として除外するには、WordPress なら#wpadminbar の有無で判別できます。これを Google タグマネージャー(以下、GTM)で取得し、例外トリガーとして利用できます。

WordPress でなくても、管理画面にログインしていることが取得できれば応用できます。

STEP

カスタム JavaScript で変数を新規追加

管理バーのID #wpadminbar の有無を JavaScript で取得し、ユーザー定義変数 is_user_logged_in を追加します。

画像:GTMでWordPress が自動的に発行しているIDの有無を取得
function() {
    return document.querySelector('#wpadminbar') !== null;
}

返り値は true / false のシンプルな boolean 型です。

もし、ログインユーザー全員ではなく、管理者や編集者など一部の権限を除外したい場合は、JavaScript とトリガーの条件を調整してください。

STEP

トリガーを新規追加

STEP1で設定したユーザー定義変数 is_user_logged_intrue の条件をトリガーとして新規追加します。

画像:GTMのトリガーとして、ログインユーザーである場合を設定します。
STEP

Microsoft Clarity 公式タグで例外を設定

Microsoft Clarity は、この Official(公式)タグを使用することでインストールできます。配信トリガーに「All Pages」を設定することが一般的(GTMをインストールしたすべてのページで実行させる)なので、ここに「例外」として、STEP2で作成したトリガー「WordPress ログイン中なら」を追加します。

画像:GTMでMicrosoft Clarity公式タグに除外トリガーとしてWordPressログイン中を設定
{{ClarityID}} はユーザー定義変数で設定済みの Clarity IDです

これによって、ログインしている管理者ユーザーのアクセスは取得しません

スマートフォンからもログインしておけば除外されるようになりますし、他のアクセス解析ツールでも使える方法なので、変数を調整してトリガーをつくっておくと便利です。

上記はそもそも取得しない方法ですが、以下はあえて取得してから判別する方法です。

Cookie とカスタムタグで関係者を判別する

関係者を Cookie で判別して、Clarity のカスタムタグでフィルタリングして除外するのが、この方法です。

この方法は何らかの方法ですでに Microsoft Clarity を導入していれば使えます。Cookie の取得とカスタムタグを JavaScript で送信すれば良いので、GTMを使うと効率的ですが、最悪なくても使えます。

メリット

  • システムにログインしなくても対象にできる
  • ユーザーグループを設定できる
  • スマートフォンからのアクセスにも対応できる

デメリット

  • 必要な仕様を把握して設定・管理できる上級者向け
  • 他の方法よりやや工数がかかる
  • 関係者に周知して依頼する必要がある

GTMを使う前提での設計ポイントは、以下の3つ。

  1. 同じドメイン内で Cookie を発行するPHPを置く
  2. GTMで、Cookie の情報を取得する変数を作成
  3. GTMで、取得した Cookie の情報をカスタムタグとして Clarity に送る

Clarity でカスタムデータを取得する際にはカスタムタグを使用する方法がベストです。

当初、カスタムセッションIDで判別しようと考えましたが、カスタムユーザーIDに紐づくために見送りました。カスタムユーザーIDは、ユーザーが個別に持つ場合(会員IDやメールアドレスなど)を使います。今回はそこまで具体的でなくても良いので、カスタムタグを使用します。

STEP
同じドメインで Cookie を発行する

Cookie を発行するPHPファイルをFTPでアップロードして、アクセスすると、ファーストパーティ Cookie が発行されます。

Cookie が発行された画面
開発者用ツールで確認できます
Cookie 発行用のPHPコード

ChatGPT に作ってもらったものなので、著作権はありません。適宜変更して使ってください。なお、mogmog が関係者の判別用として Clarity に送信されるため、必要に応じて適切な名前を設定してください。

<?php
// Cookie の有効期限を1年間に設定(60秒 * 60分 * 24時間 * 365日 = 1年)
$expiryTime = time() + (60 * 60 * 24 * 365);

// Cookieを設定(名前: cookie_monster, 値: ユーザーの初回訪問日時)
setcookie('cookie_monster', 'mogmog', $expiryTime, "/");

// Cookieが存在するか確認し、メッセージを表示
if(isset($_COOKIE['cookie_monster'])) {
    echo "Looks like you've met the Cookie Monster before! 🍪";
} else {
    echo "First time meeting the Cookie Monster, huh? 🍪 Welcome!";
}
STEP
ファーストパーティ Cookie を取得する変数を新規作成

Cookie が発行されたら、その情報をGTMで取得します。STEP1 で作成したファーストパーティ Cookie を取得する変数で「cookie_monster」を新規に作成しましょう。

GTMの変数→ユーザー定義変数の新規→変数名とCookie名に「cookie_monster」と入力
cookie_monster ゲットだぜ!
STEP
Clarity に Cookie の情報を送信するタグを新規作成

STEP2 で取得した情報をカスタムタグ「stakeholders」として Clarity に送るため、GTMのカスタムHTMLタグを作成します。トリガーは「All Pages」にしてあります。

<script>
  window.clarity("set", "stakeholders", "{{cookie_monster}}");
</script>
GTM で Microsoft Clarity (official) を使っているなら

以下のように、カスタムタグをサクッと送信することができます。

GTMのMicrosoft Clarity の公式タグでカスタムタグを設定

ページタイトルとコンテンツグループも、変数で設定しておけばこのとおり。

STEP
GTMのプレビューで確認

以下のように、プレビューの変数でファーストパーティ Cookie の中身が確認できれば準備完了です。

STEP
Cookie を発行したブラウザからサイトにアクセス後、Clarity のライブレコーディングを確認

PCやスマホから Cookie を発行するページにアクセスし、Cookie が発行できていれば stakeholders に値が入っていることを確認できます。

Microsoft Clarityのライブレコーディングで自分のアクセスを確認
セルフアクセスの詳細を確認
詳細から進むとカスタムタグを確認できる
Microsoft Clarity のフィルタでも使えるようになります

Clarity のフィルターで選べるようになれば、抽出も除外もできるようになります。

Cookie を発行したりカスタムタグを入れたりと忙しいですが、柔軟性が高いので一番オススメです。成果を見越してしっかり解析するなら、GA4 と Clarity を組み合わせて使う必要があるため、GTMの導入は必須になります。最低限、このくらいの知識は必要です。Cookie の発行はともかく、複雑なことはしていないのでがんばりましょう(/・ω・)/

残る方法は、難しくはないけれど(正直)メンドクサイです。GTMを使えるようになったほうが、将来性ありますよ。

utm パラメータをつけて判別する

「どこから来たのか」の情報によってフィルタリングして除外する方法です。広告を GA4 で効果測定している方なら、「utm パラメータ」にピンと来る方もいらっしゃるかもしれません。

メリット

  • 実装は比較的カンタン
  • システムにログインしなくても対象にできる
  • スマートフォンからのアクセスにも対応できる

デメリット

  • URLを共有する際に毎回手間がかかる
  • お気に入りのURLを周知する必要がある
  • パラメータがなければ一般ユーザーに紛れてしまう

Clarity のトラフィックカテゴリーには、「選択範囲を除外する」として一部のデータを除外できるフィルターが多いです。ここにある「ソース」は utm_source(utm パラメータのキャンペーンソース)が使えるため、社内向けメディアのウェブサイトや社員向けのお気に入りURLなどを設定して、除外設定を活かそうという考え方です。

Microsoft Clarity のトラフィックフィルター

もし、すでに不要なトラフィックソースが判明しているなら、それ除外するだけである程度の関係者を除外(もしくは抽出)できます。たとえば、トラフィックソースに gtm-msr.appspot.com とあれば、それはGTMのプレビューによるアクセスだとわかります。

今回は、「自社のウェブサイトにお知らせを掲載し、営業部の写真向けに Microsoft Teams で共有したい場合」を想定します。「あれ?関係者を除外したいんだけど??」と思った方、設定は同じなので以下に進んでみてください。

STEP
営業部の社員向けにURLを共有する際のパラメータを定義しておく

すでに広告を使用している場合などは、utm パラメータが競合しないようにご注意ください。

今回は、以下のようにしました。utm_campaign も使えるので、部署ごとに設定するなどして使うことができます。今回は営業部向けにしてあります。

  • utm_source(ソース):Teams(Slack とか Discord などもイケます )
  • utm_medium(メディア):referralreferral 固定)
  • utm_campaign(キャンペーン名):for_sales(なんでもOK)
STEP
共有するURLにパラメータを付与して利用する

たとえば https://example.com/archive/96631073/ を共有したい場合は、以下のようなURLにして使用します。

https://example.com/archive/96631073/?utm_source=teams&utm_medium=refferal&utm_campaign=for_sales

長くてわかりにくくて間違えそう!と思いますよね。Campaing URL Buider を使うと便利です。英語ですが難しいことはないので慣れましょう。

Campaign URL Builder での設定方法
STEP
パラメータ付のURLによるアクセスを確認する

URLを共有できたら、次の日に確認してみましょう。フィルターからソースを選んだ際に、設定したソース名が入っていればOKです。抽出も除外も思いのままです。

ウェブサイトにおける社員アクセスの行動分析は可能ですが、一般ユーザーよりも匿名性が下がるため、個人情報には特に注意してください。今回はお知らせの告知を例に上げていますが、社員がログインして使うようなサイトはマスクをして匿名性を厳守していることを周知しましょう。

*弊社サイトを例に試してみた

以下のURLをSlack に貼り付けて、スマホから4Gでアクセスしてみました。

  • URL:https://coaching.kosgis.com/column/category/strengthsfinders-talent/
  • utm_source(ソース):Slack
  • utm_medium(メディア):referral
  • utm_campaign(キャンペーン名):family
https://coaching.kosgis.com/column/category/strengthsfinders-talent/?utm_source=slack&utm_medium=refferal&utm_campaign=family

次の日にフィルターを確認したところ、しっかり取得できていました!

Microsoft Clarity のフィルターでソースを確認できました

以上が utm パラメータをつけた除外方法です。自分がアクセスする際には、パラメータをつけたURLをお気に入りに入れておくと使いやすいかもしれません。ただし、パラメータに左右されるため、使用する際には定義して管理しておきましょう。

関係者除外方法のまとめ

長くなったので、簡単にまとめるとこうなります。

スクロールできます
方法メリットデメリット結論
IPブロックカンタン柔軟性がない個人・初心者向け
ログイン除外CMSとの親和性が高いGTMの知識が必要WordPress 管理者向け
カスタムタグ柔軟性が高いウェブの知識が必要しっかり解析するならコレ
パラメータ付与開発不要URLの管理が必要折衷案

帯に短しなんとやら……ですが、カスタムタグを使う方法が一番おすすめです。横文字に慣れてしまえば作業そのものはシンプルですし、今後のアクセス解析に欠かせないので、この機会に挑戦してみてください。

また、関係者の除外は不要なデータを含めないことが目的なので、関係者のアクセスが少ないのなら、こだわりすぎなくても問題ありません。ただし、コンバージョンのテストなどは気をつけてください。

関係者除外に関するQ&A

IP設定では対応しきれず、Google タグマネージャーは難しすぎます……。パラメータを使うのはなんとなくわかりますが、忘れてしまいそうです。

そうですよね……お気持ちお察しします。

私(コスギ)も、Chrome のアドオンを入れているユーザーは除外したり、WordPress の公式プラグイン側で関係者を除外する設定ができたらいいのにと思ってやみません。せめて、JavaScript を使わない方法でもあれば良いのにと。

アクセス解析そのものが広範的になってきたので、Microsoft Clarity もただ分析できるツールではなく、個人情報にも配慮しながら活用していくためのマーケティングツールになってきたと感じています。当然、業務範囲も広がっているため、余計な情報を取得しないようアクセス解析ツールを使わないか、外部の力も借りてマーケティングやブランディングに向き合うかの選択を迫られているともいえます。

ですので、やりたいことはあるのに難しさを感じたら、次のステージに進める分岐点かもしれません。

とはいえ、どこから考えたら良いのか混乱しますよね。そういった「わからないことがわからない」状態でも思考の整理をするためのご相談も伺っています。関係者除外が重要なら、設定代行も行っています。

Microsoft Clarity の「Clarity ユーザーID」をフィルターで使えばよいのでは?

フィルターとして特定の Clarity ユーザーID を抽出することはできますが、除外することはできません。また、複数の Clarity ユーザーID を設定することもできません。

関係者が多い場合は、Google タグマネージャーで振り分けしたほうが間違いないと考えています。

Microsoft Clarity の Chrome アドオンでは対応できませんか?

確かにClarity には Chrome アドオン(Microsoft Clarity Live)があり、管理画面に行かなくてもリアルタイムで情報を見ることができます。……が、これで自分のアクセスを除外できるものではありません。

このアドオンは、Google でいうところの Tag Assistant アドオンと同じように、タグが実行されてどのように動いているかを確認するのが目的です。

Microsoft Clarity はウェブサイトに来てくれた方をファンにするためのヒントを得られるツールです。もっと活用したい事業主や法人、またはクライアントに提案したい企業の担当者さん向けのサポートを行っています。「わからないことがわからない」という方でも、ご安心ください。

\ 単発相談からパートナー契約まで /

]]>
Microsoft Clarity(クラリティ)の使い方:レコーディング(録画)を知って活用しよう https://clarity.kosgis.com/blog/microsoft-clarity-seminar-04/ Sat, 05 Oct 2024 06:01:44 +0000 https://clarity.kosgis.com/?p=777

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第4回は「レコーディング」の機能を詳しく扱いまし […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第4回は「レコーディング」の機能を詳しく扱いました。まとめると、以下のような内容です。

レコーディングとは
  • 「録画データ」だけれども、「録画」ではなく画面とマウスなどの動きを再現しているだけ
  • 個人情報を取得しない設定は必須(マスク設定する前のデータはマスクされない)
  • 録画データはAIと詳細と合わせて使うと便利
レコーディングを活用するコツ
  • 録画データは “なんとなく” ではなく、コンバージョンに近いセッションに絞って見ること
  • 絞り込んだ録画データを20件眺めてみよう
  • 公式のケーススタディも参考に

レコーディング機能はユーザーの行動が録画されているものなので、実際に動いている画面を見ないことには「どういうこと……?」とわかりにくいかもしれません。勉強会でも動画で説明している部分が多いので、ヒートマップ同様、デモやご自身の Clarity の画面を実際に動かしてみてください

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

「レコーディング」機能で知っておきたいこと

実は、“録画” しているわけではない

動画として録画すると膨大なデータ量になってしまうため、ページとアクションの情報を記録して再現しているだけです。エコですね。ただしその分、時々情報が足りなくて読み込みがおかしかったり、コケることがあります。

Clarity session recordings aren’t video streams of users interacting with your site. Instead, this is how they work: Clarity records all the page information a user sees (the DOM content) and the actions they take as they browse your site. A session recording is an animation that captures all user actions across devices, such as mouse movements, clicks, scrolls, and more.

(意訳)Clarity のセッション録画は、ユーザーがサイトとやり取りしているビデオストリームではありません。その代わり、このように動作します:Clarityは、ユーザーがサイトを閲覧する際に表示するすべてのページ情報(DOMコンテンツ)ユーザーのアクションを記録します。セッション録画は、マウスの動き、クリック、スクロールなど、デバイスを介したすべてのユーザーアクションをキャプチャするアニメーションです。

via. Frequently asked questions | Microsoft Learn

だからこそ、一部の情報をマスク(秘匿)することができるのですよね。ほら、動画形式だとボカシとかモザイクになっちゃうじゃないですか。

データのマスク設定は最初にやっておくべし

Clarity には、個人情報などのデータを保護するマスク設定(データを秘匿する機能)があります。このマスク設定は、設定した時点から有効になるため、マスクしていなかったデータをあとからマスクすることはできないことに注意が必要です。マスクされていない情報は Microsoft に送信されることを認識しておきましょう。

Microsoft Clarity のフォームのあるページのレコーディング画面
●●●となっている箇所は文字が秘匿されわかりません

フォームのデータはデフォルトでマスクされるため、最低限の個人情報保護はできています。しかし、確認画面でマスクされないことは少なくありません。特に、独自開発したツールなどは Clarity 側で自動対応できない場合が多いです。サイト内でフォームを使っている箇所は洗い出しておきましょう。

Q&Aでも言及していますが、一度取得したデータは最長13ヶ月は削除されないことも大きいです。

レコーディングの画面でできること

レコーディングのデータは簡単に時間を溶かしてしまうので、分析を効率化できる方法を知っておきましょう。

レコーディングの要約

Microsoft Clarity:レコーディングの要約

Clarity のレコーディング機能は、特定のデータや上位10個までのデータを要約表示できます。長時間のデータや特定のセグメントをまとめて分析したい場合に役立ちます。

私(コスギ)は長時間のデータ(10分以上など)はセッション分析と合わせていますし、フィルタリングしたセグメントの精度が高ければまとめて要約してもらうこともあります。ただ、コンテンツと合わせて観察しているので「倍速で見たほうが結果的に早い」ということは少なくありません。

セッションリストの確認

Microsoft Clarity:セッションリストの確認

レコーディングデータの一覧であるセッションリストでは、データの表示順を、日付の新しい順、ページ閲覧数、クリック数、セッション発生日時など、様々な条件で並べ替えることができます。これにより、特定のページを多く閲覧したセッションや、特定期間に集中したセッションなどを抽出できます。

また、セッションリストには、「ライブユーザー」として、現在サイトを閲覧中のユーザー情報もリアルタイムで確認できます。ライブユーザー情報では、直近5分間のデータが表示され、ユーザーID、地域、デバイスなどの情報が含まれます。

セッション情報とイベントタイムライン(詳細)

Microsoft Clarity:セッション情報とイベントタイムライン(詳細)

セッション情報では、選択したセッションのデバイス情報、行動データ(クリック数、ページビュー数など)、訪問経路(エントリーページ、離脱ページ、参照元)などの定量的なデータを確認できます。イベントタイムラインでは、ユーザーの行動を時系列で可視化し、各イベント(クリック、スクロール、ページ遷移など)がタイムライン上に表示されます。イベントの詳細情報として、イベント発生時間や対象要素などを確認でき、カスタムタグを設定している場合は、イベントタイムライン上で該当イベントを確認することができます。

レコーディングの再生(インラインプレイヤー)

Microsoft Clarity:レコーディングの再生(インラインプレイヤー)

選択したセッションのユーザー行動を動画として再生できます。再生速度の変更や任意の時点への移動、ヒートマップの表示などができます。これにより、スクロール速度や特定要素への滞在時間、マウスの動きなどを視覚的に把握できます。再生中には、デッドクリックや非表示ページへの遷移など、イベントの詳細情報が表示され、クリックすると該当イベント発生時点へジャンプできます。ヒートマップでは、再生中のセッションにおけるクリックの集中箇所を可視化します。

……なんて、画像で説明はしていますが、YouTube 動画の 8:18 頃から見たほうがわかりやすいです。

レコーディングを活用するコツ

機能そのものは、直感的にわかりやすくて理解しやすいですよね。ただ、活用するには「コンテンツの理解」と「ユーザーの理解」の両方が必要です。

レコーディングはセッションとユーザー単位で活用する

Clarity のレコーディングは、セッションとユーザー単位で分析することが重要です。ヒートマップはページ単位なので、補完関係にありますね。以下のようなポイントで使うことが多いです。

  • 項目の多いフォームの使いにくさを確認する
  • CTAをクリックしたあとに問題がないか確認する
  • デッドクリック、イライラクリックが起きる問題を確認する
  • エラーが起きていないかを確認する
  • ヒートマップの情報を具体的に検証する
  • 上記をデバイスやユーザー状況でフィルタリングして調査 など

ユーザーがサイトに訪れてから離脱するまでの行動を時系列で追うことで、ページ単位での分析では見落とされる可能性のある、ユーザー体験上の問題を特定できるのが、このレコーディング分析の醍醐味。

たとえば、フォーム入力時の離脱や、CTAボタンのわかりにくさ、エラー発生時の行動などを、その前後の行動と関連づけて分析することで、改善策のヒントを得られます。よくA/Bテストをしているなら、使わない手はないでしょう。

レコーディングのデータを分析する流れ(コスギの例)

Clarity は問題発見ツールではなく、すでにある問題に対して解決策を探るツールです。つまり、定期的に観察するよりもアドホックな利用に適しています。そのため、最初は解決すべき問題の設定が重要です。

  1. 解決したい問題を設定する
  2. そのために確認したいユーザーの設定を絞り込む
  3. Copilot による概要を参考にしつつ、2倍速で目視する
  4. 率直に気づいた点をメモしていく
  5. 20件くらい繰り返し、改善点を洗い出す(この内容を NotebookLM に渡して分析するのもアリ)

ページのスクショと気づいた点をメモして生成AIに分析を依頼してみても、得られる事があるかもしれません。

気づいた点をまとめて施策にし、優先順位を定める

YouTube 動画ではレコーディングを見ながらウンウンカンヌン言っているのをざっとお見せしてますが、気づいた点をまとめたものが以下です👇(クラリティ3分クッキング)

  • 興味を持った人は(スマホでも)流れをしっかり見ている?
  • 費用に躊躇して?自分で解決したい意欲もみられる?
  • サービスページをスマホで見ると文字ばかり
  • スマホで「まとめ」が目に入ると離脱したくなる
  • 予約カレンダーが目に入ると反射的に戻っている?
  • お知らせにリンクがないため迷っている
  • メニューから来ることは意外と多い
  • 自分でできる情報によって滞在時間が伸びている→増やせる

これを「すぐできる」「やるべき」の2軸に並べるとこうなりました。なお、✔の項目はすでに終わっています。

Clarity のレコーディング分析で得られた施策のまとめ

緊急度と重要度にまとめても良いですが、個人的にはそこにこだわってもしょうがないので、このくらいざっくりとしています。

「すぐ終わるなら、やらないよりやったほうが良い施策」は、拍子抜けするほど数字には表れません。道端の小石を拾うような作業なので、固執せずに粛々と進めましょう。

だからこそ、やるべき課題を見つけたら、KPIを設定してプロジェクトとして進めることが大切です。これは道を整備するようなものなので、しっかりと取り組みましょう。私の例でいえばコンテンツの追加なので、回遊ページが増えて滞在時間が伸びる、もしくはリピーターが増えることが想定されます。

公式のケーススタディも参考にしてください。すべて英語ですが、ページごと Google 翻訳にかければすぐに読めます。レコーディングを活用した事例は多いですよ。

https://clarity.microsoft.com/case-studies

Microsoft Clarity のレコーディングに関するよくある質問

ヒートマップの使い方とも重複するため、Microsoft Clarity のヒートマップに関するよくある質問も合わせてご参照ください。

ズバリ、録画機能を活用するポイントは?

前向きな気持ちを損なわせるポイントを見つけることです

何の準備もなくセッション録画を見ても、何もわかりません。なぜなら、欲しい人は買うし、欲しくなければ買わないのが現実だからです。ですが、欲しいと思った人の気持ちを損なうことなく、気持ちに寄り添ってエスコートできれば、人は買ってくれます。

自社のサービスや商品を欲しいと思う人は具体的にどんな行動をするのか、その気持ちをどのように損ねているのか、毎日眺めてみてください。ご自身の欲しい気持ちに向き合うのもオススメです。

録画データを削除したり、ダウンロードできますか?

できません

ヒートマップはCSVやPNG画像としてダウンロードできますが、セッション録画データを共有するには、URLでの共有のみです。

特定の録画を削除することもできません。

特定のページは録画したくないのですが

Clarity のタグを設置しないのが一番カンタンです

Google タグマネージャーなどを使っている場合、トリガーで特定のページを除く設定をしておくことで対応できます。

つまり、Clarity でデータを取得したあとは消せません。

録画データはどれくらいの期間保持されますか?

30日間ですが……

公式によると基本は30日間で、お気に入りの録画と一部のランダムに選択された録画は13ヶ月間保持されるようです。

Clarity retains recordings for 30 days from the time of recording. However, Favorite recordings and randomly selected sample of recordings are retained for up to 13 months.

Frequently asked questions | Microsoft Learn

ヒートマップ機能を有効にし、レコーディング機能は無効にできますか?

どちらか一方のみを使うことはできません。

なぜなら、ヒートマップとレコーディングをセットで使うのが、Clarity の醍醐味だからです。ヒートマップで得られたデータを深堀りするために、レコーディングは欠かせません。

Microsoft Clarity 勉強会の今後の予定

次回は Microsoft Clarity 活用のキモ、フィルターとセグメントを扱います。日本語環境だと「フィルター」は「絞り込み」と「ファネル機能」の2つがあるのですが、両方取り上げる予定です。

お申し込みは以下からどうぞ👇

https://kosgis.peatix.com

Microsoft Clarity はウェブサイトに来てくれた方をファンにするためのヒントを得られるツールです。もっと活用したい事業主や法人、またはクライアントに提案したい企業の担当者さん向けのサポートを行っています。「わからないことがわからない」という方でも、ご安心ください。

\ 単発相談からパートナー契約まで /

7回目以降の勉強会、どうしようかな……?アーカイブなしの、ざっくばらんな質問雑談会にしましょうか。

]]>
Microsoft Clarity(クラリティ)の使い方:ヒートマップを知って活用しよう https://clarity.kosgis.com/blog/microsoft-clarity-seminar-03/ Mon, 26 Aug 2024 13:37:23 +0000 https://clarity.kosgis.com/?p=716

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第3回は「ヒートマップ」の機能について詳しく説明 […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第3回は「ヒートマップ」の機能について詳しく説明しています。まとめると、以下のような内容です。

ヒートマップとは
  • クリックマップ、スクロールマップ、エリアマップの3種類があり、必要に応じて選ぼう
  • AI(Copilot)からの概要やアドバイスを参考にしつつ、ヒートマップの比較機能も活用しよう
ヒートマップを活用するコツ
  • ビジネスで使うなら、CTAの定義は絶対
  • ヒートマップはページ単位で使うもの
  • 次の行動促進や成果から目をそらさないこと
  • 主要なページで利用例を参考にしてみよう
  • 公式のケーススタディも参考に

動画では実際に動いている画面を紹介していますが、文章だけでは説明しにくい(特に機能説明の箇所は動画のほうがわかりやすい)ため、ご自身の Clarity の画面を実際に動かしてみてください。理解してから手を動かすより、手を動かしながらのほうが理解しやすいです。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

ヒートマップとは

Clarity における「ヒートマップ」とは

ウェブサイト上のユーザーの行動、特にクリックやスクロールの状況を、色や濃淡を用いた視覚的な表現方法です。 天気図のように、多くのデータを含む情報をわかりやすく表示するために用いられます。

Clarity における「ヒートマップ」とは

Clarity では、主に3種類のヒートマップが提供されています。

  • クリックマップ
    ユーザーがページ上のどの要素をクリックしたかを視覚化します。クリックの種類ごとに絞り込むことも可能です。
  • スクロールマップ
    ユーザーがページをどの程度スクロールしたかを視覚化します。どの部分が読まれずに離脱されているかなどを分析できます。
  • エリアマップ
    選択したエリア内での合計クリック数を視覚化します。特定のエリアにおけるクリック数を数値で把握できます。

Clarity のヒートマップならではの機能

クリック種類の絞り込み

クリック種類の絞り込みとそれぞれの特徴

通常のクリックだけでなく、「イライラしたクリック」「デッドクリック」「エラークリック」「最初のクリック」「最後のクリック」など、クリックの種類に基づいて絞り込み表示が可能です。 これにより、ユーザーの行動をより深く理解し、ウェブサイトの改善に役立てることができます。

ヒートマップの比較

ヒートマップの比較

異なるセグメント(例:1ページしか閲覧していないユーザーと複数ページ閲覧したユーザー)のヒートマップを比較することで、ユーザー行動の違いを分析できます。

スクリーンショットの変更

スクリーンショットの変更

ヒートマップを表示する際のスクリーンショットを、過去の異なる時点のものに変更できます。 図のように、メニューが表示されてコンテンツが隠れているままだと(スクロールマップはともかくクリックマップで)分析しにくいため、この画面を変更することができます。

Copilot による要約 (Heatmaps Insights)

Copilot による要約 (Heatmaps Insights)

Microsoft の AI である Copilot(コパイロット)が、クリックマップとスクロールマップの両方の情報を分析し、ユーザー行動の要約と改善提案を提供します。

以上が基本機能ですが、大事なのはこれをどう活用するか、ですよね。

ヒートマップを活用するコツ

ヒートマップを活用するための最重要事項は、明確なCTAを定めておくことです。

CTAとは「Call to Action」の略で、直訳すると「行動喚起」を意味します。ウェブサイトやマーケティングにおいて、ユーザーに特定の行動を促すための要素のことを指しますが、簡単にいうと「そのページにアクセスしたからには、確実にクリックしてほしいリンク(ボタン)」のこと。

「今すぐ購入」「無料で試す」「詳細を見る」といったボタンやリンクを見たことはあると思いますが、これらが一般的なCTAです。これらは、ユーザーに次の行動を明確に示し、サイトの目的(商品の購入、会員登録、資料のダウンロードなど)に向けて誘導する役割を果たします。

ビジネスで Clarity を使うのであれば、成果につながる重要な要素としてCTAの定義は絶対です。一般的な文言で効果が出なければ、ユーザーとのマッチングを徹底的に考えてみましょう。

ヒートマップを活用できる、7つのポイント

ヒートマップは「閲覧ページ」単位で、以下の項目が基本です。資料請求フォームへ遷移するボタンや購入を促すボタンなど、「成果につながるボタン(リンク)のあるページ」のヒートマップを開いて確認してみてください。

  1. 重要なボタンやリンクが意図どおりにクリックされているか
  2. 重要な情報がスクロールせずに見える位置にあるか
  3. 使われていないグローバル/サイドメニューはあるか
  4. 新しく作成したページや記事の効果を検証
  5. デザインやレイアウトなどを改善した効果を検証
  6. コンバージョンの有無など、セグメント別の興味関心の差異を比較
  7. 上記をデバイスやユーザー状況でフィルタリングして調査 など

ヒートマップを活用する際の注意点

ただ「面白い」だけでなく、「成果につながる」こと、そして「改善施策を実施する」ことが肝心です。好奇心のまま見ているだけではわかった気になるだけで、何の成果も得られません。当たり前のことですが、意外と盲点なんです……

  1. 成果に近いところから確認する(時間がいくらあっても足りない)
  2. “成果” の定義はウェブサイトの数だけある(勝ちパターンは千差万別)
  3. 割合だけでなく絶対数も考慮する(集客数がなければただの誤差)
  4. わかるのは因果関係ではなく相関関係(思い込みに気をつける)
  5. 平均値のユーザーはいない(セグメントを駆使する)
  6. 具体的にいつ何をするかの改善サイクルを回す(好奇心対応はしない)

ヒートマップの機能別・主な活用シーン

①クリックマップ:クリック率が低い要因を考える

Clarity のクリックマップで最優先で確認したいのは、CTAがクリックされているかどうかです。クリックしてほしいのにクリックされていない場合、ページ内のリンクの量と重要性、前後の文脈を見直しましょう。

Clarity のヒートマップ画面
CTAがほとんどクリックされていない例
  • リンクが多すぎてユーザーの意識を散らしていないか?
  • CTAが営業クサくてスクロールされていないか?
  • CTAの配置は自然で、ユーザーの動線を考慮しているか?
  • そもそもCTAまでスクロールされているか?(スクロールマップも確認)
  • テキスト / ボタン / バナー画像でA/Bテストを実施した結果は?

ページを読んでくれたユーザーに対して、つい、アレもコレもとリンク先を増やしがちになってしまいますが、リンクの重要性が不明確な場合、ユーザーを混乱させてしまい、結果的にクリックされない可能性が高まってしまいます。次にどこに行けば良いのかがわかるよう、エスコートするくらいがちょうどいいのですよ。

また、周囲のコンテンツと関連性の低いリンクやボタン、特に、バナー画像のように作り込んでいると浮いてしまい、広告と見なされて無意識のままスルーされます。コンテンツの文脈に合わせて、自然なテキストリンクにしたほうがクリックされやすいことも少なくありません。

大きな変更でなくても効果が大きいので、小さくチャレンジしてみたいですね。

②スクロールマップ:スクロールされない要因を考える

ユーザーがページを訪れても、そのページの下まで読まれることは、そんなに多くはありません。

次のページへ遷移(回遊)したのか、ページを完全に離脱したのかで考え方が変わりますが、まずは Clarity のスクロールマップでCTAまでスクロールされているのか、されていないならどこでスクロール率が大幅に落ちているのかを確認しましょう。色が急に変わっている箇所がポイントです。わかりにくければ数値も合わせて確認しましょう。

Clarity のスクロールヒートマップ画面
位置が下すぎてCTAが見られていない例

ウェブサイトを離脱している場合

  • 重要なコンテンツを上に配置(ユーザーが離れるものは逆効果)
  • 終わりを想起させない(横幅100%のCTAや「まとめ」など)
  • モバイル環境での表示を最適化(CWV指標も参考に)

サイト内の別のページに遷移(回遊)している場合

  • 見られていないコンテンツを動線に合わせる
  • ページ内リンクでページの途中に遷移させる動線をつくる
「CWV」って?(クリックで開きます)

CWV「Core Web Vitals(コア ウェブ バイタル)」の略称で、Google が定義したウェブサイトのユーザー体験を測定するための重要な指標群です。

CWVは主に以下の3つの指標で構成されています。

  1. LCP(Largest Contentful Paint):ページの読み込み速度
    LCPは要するに「ユーザーがページの主要な内容を見られるようになるまでの時間」です。この時間が短いほど、ユーザーは素早く欲しい情報を得られるため、重視されている指標です。
    例:オンラインショップを訪れた時、商品の大きな画像が表示されるまでにかかる時間
  2. FID(First Input Delay):インタラクティブ性
    FIDは「ページを使えるようになるまでの最初の待ち時間」です。この時間が短いほど、ページの反応が良いと感じられます。Google 系のツールではINP(Initial Page Load Time)に変更していますが、Clarity はFIDです。
    例:ログインページにアクセスして、ユーザー名を入力するために入力欄をクリックしてカーソルが点滅(入力準備が完了)し始めるまでの時間
  3. CLS(Cumulative Layout Shift):視覚的安定性
    CLSは「ページを開いて、開ききるまでのズレ具合」の指標です。ページが開いたのでスクロールするためにタップしようと思ったら、画像が読み込まれてそちらをタップしてしまった、といったことがないようにするためのものです。こういったイラッとする体験が少ないほど、CLSの評価は高くなります。
    例:ニュースサイトを読んでいる時、突然広告が表示されて記事の位置が下にズレ(このズレ具合がCLS)、読んでいた場所を見失ってしまうような状況

これらはユーザー体験の質を評価する指標です。Google は検索順位の決定要因の一つとしてCWVを使用しているため、ウェブサイト運営者にとっても重要な指標となっています。以下の Google 公式ページも参考にどうぞ。

https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja

特に、モバイル環境での最適化は、意外と見落としやすいです。バイアスに注意して、実機で確認しながら印象を確かめましょう(ほろ酔いくらいの思考力で見てみるくらいがちょうど良いかもしれません)。パソコンで見ているだけでは見落としてしまいがちなことも多いです。

スクロールされないコンテンツには、ページ内リンクも有効です。ブログの記事などには多く見かけるようになった、「目次」がその役割を果たしているといえるでしょう。

スクロールされないコンテンツは、ユーザーの導線として適切な場所にない可能性もあります。そのコンテンツがユーザーのどのフェーズで必要になるのか、考え直して配置換えするだけで、効果が出る可能性は十分にありますよ。

③エリアマップ:人気の項目からインサイトを考察

クリックマップを見てもわかりにくな、と思ったときに使っていただきたいのですが、「とはいえ、どうやって使えばよいのかわからない」という方は少なくない、このエリアマップ。ページ内の並列の要素それぞれの人気度を視覚的に把握するのに役立ちます。

「なぜその項目がクリックされやすいのか?」を考察して、コンテンツ改善に活かしましょう
(このデータから、人間関係を気にする会社員が多いと推測できます)

エリアマップで重要なのは、要素の価値が並列であり、位置や文言が影響を与えにくいこと。Microsoft の公式では、Clarity のログイン方法として Microsoft アカウント・Google アカウント・Facebook アカウントの3つがあり、そのどれがクリックされているかをエリアマップで確認できる事例があります。

https://clarity.microsoft.com/blog/introducing-area-maps-a-heatmap-to-see-which-elements-are-the-most-popular/

クリック率の高い要素と低い要素を比較することで、それらを選んだユーザーの背景から、コンテンツの改善に活かしましょう。コンテンツの提供者であれば「それが選ばれた意味」がわかるはずです。

④イライラしたクリック:クリック時の挙動を確認

イライラしたクリック(Rage Clicks)は、連続でカチカチしたクリックのことを指します。

イライラしたクリックのみに絞り込んで状況を確認してみると、問題があるかないか、すぐにわかります。何を当たり前のことをと思われたかもしれませんが、解析で「わかりやすく問題が見つかる」のはあまりないんですよ。

Clarity のイライラしたクリックに絞り込んだレコーディングと詳細の画面
特に問題ないイライラクリックの例

問題が起きている場合、文字どおりユーザーが「あれ?」という混乱と共にフラストレーションを高めています。

  • ボタン(リンク)が反応しない
  • 画像が拡大されない
  • コンテンツの表示が遅い
  • ポップアップ画面を閉じにくい
  • スライダーやカルーセルが機能しない
  • フォームの送信ボタンが機能しない
  • 「もっと見る」ボタンが機能しない
  • 「検索する」を押しても画面が変わったように見えない
  • ドロップダウンメニューが正しく開かない
  • フォームの入力欄にフォーカスしにくい

……一部、ずいぶん具体的なものもありますが、そういうことです。「イライラしたクリック」を観察することで、比較的カンタンにページの問題点を洗い出せますので、初心者さんはまずここから試してみてください。

なお、上記の画像にもあるとおり、文章を選択したり画面の端をカチカチしたりしながらコンテンツを読む方は一定数存在します。そのような場合は問題ではありません。ただ、問題ないことが多いと問題を見逃してしまうことには注意しましょう。

⑤デッドクリック:ユーザーの期待を考察

デッドクリック(Dead Clicks)は、リンクではないテキストなど、何も反応しないところのクリックのことを指します。テキストを選択されるときもデッドクリックと見なされやすいですが、そもそも反応を意図していないため、問題ないことも多いです。

Clarity のデッドクリックに絞り込んだレコーディングと詳細の画面
デッドクリックになっていても問題ないときが多い

では、どんなときに勘違いされて問題になりやすいかというと、以下のようなケースがあります。

  • アクションを促されるのにクリックしても変わらない画像(「詳しくはこちら」などが入っている)
  • 下線が入っていて、リンクのように見えるテキスト(何も起きない)
  • サイトのヘッダーにあるロゴが、トップページへのリンクになっていない
  • パンくずリストがリンクになっていない
  • アイコンがクリック可能に見えるが、機能していない(白抜きになっているなど)
  • 画像がクリックで拡大できそうに見えるが、拡大できない
  • SNSのアイコンがクリックできず、ただのデザインになっている
  • 製品名がクリック可能に見えるが、詳細ページへのリンクになっていない

……これも、ずいぶん具体的なものもありますが、そういうことです。デッドクリックに関しては、デザイン時には意図していなかったユーザーの行動に直面することがよくあります。レコーディング(録画)のデータも合わせ、めげずに改善していきましょう。

⑥最初のクリック:最初の興味関心ポイントを考察

「最初のクリック(First Click)」は、そのページに訪れた際に最初に興味を持ったポイントを直接的に示しています。

ユーザーがどのような情報に最も関心を持っているのか、具体的に把握することができます。例えば、多くのユーザーが最初に特定の製品カテゴリーをクリックしているのであれば、その製品への高い関心を寄せている可能性があるわけです。それが意図どおりのものでなければ、改善する糸口になりそうですね。

なお、この「最初」はあくまで訪問時なので、新規ユーザーと再訪ユーザー(リピーター)が存在していることに注意してください。

Clarity のヒートマップで「最初のクリック」に絞り込んだ画面
購入や診断後などのクリックから新規や再訪のニーズが見てとれます

さらに、新規ユーザーとリピーターの行動を比較してみると、最初のクリックの位置が異なることがあります。

新規ユーザーは、ページの上から順に確認していく傾向があり、メニューや目次などの要素を最初にクリックする可能性が高いです。一方、再訪ユーザーは(以前の内容を覚えていて)特定の目的を持って訪れることが多いため、直接目的のコンテンツに向かう傾向にあります。

つまり、新規ユーザーには全体的な概要や導入情報をより目立つ位置に配置し、再訪ユーザーにはアクセスしやすいショートカットを提供するなどの施策が考えられます。他にも、新規ユーザーがアクセスするページ、再訪ユーザーがアクセスするページのそれぞれから、特定のページ内の需要の高い項目にリンクしておくこともできますね。

⑦最後のクリック:そのページの目的を果たせたかを考察

「最後のクリック(Last Clicks)」は、ユーザーがそのページでの目的を達成したか、あるいは別のページに移動する必要性を感じたかを示す重要な指標です。

例えば、特定の箇所に最後のクリックが集中している場合、その箇所がユーザーにとってページの「終点」と認識されている可能性があります。これが外部へのリンクではなく、CTAであってほしいところ。

Clarity のヒートマップで「最後のクリック(前回のクリック)」に絞り込んだ画面
なお、日本語では Last が「前回の」と訳されていて……

ページの構成によりますが、最後のクリックがCTAではなく、他の要素に集まっているようなら、動線に改善の余地ありです。直接CTAにアクセスさせなくても良いのなら、そのための動線を確保しておきましょう。

また、最後のクリックが「関連商品」など、他の情報を知りたがっているようなら、その箇所のボリュームを増やすことで回遊を促せます。モバイルなら横スクロールで選べるようにしてもいいですよね。

サイト内での滞在時間を伸ばすことは、そのサイトの影響力を高めることになります。とはいえ、ムダにページを分けてもストレスを与えてしまうため、サイトマップをつくって適切な動線を設計しましょう。

公式のケーススタディも参考にしてください。すべて英語ですが、ページごと Google 翻訳にかければすぐに読めます。

https://clarity.microsoft.com/case-studies

Microsoft Clarity のヒートマップに関するよくある質問

初心者が押さえるべきポイントは?

「今日公開したこれを Clarity で確認するのが楽しみ!」が生まれたときに使いましょう。具体的には、以下の点を意識してページを作成し、Clarity で確認していくと良いでしょう。

  • ユーザーはどうやってウェブサイトに訪れたのか?
  • ウェブサイトをどのように閲覧しているのか?
  • どの時点で離脱してしまったのか?
  • なぜ離脱してしまったのか?
  • ユーザーは本来どう行動したいのか?

毎日 Clarity を確認することで、ユーザーの行動パターンやウェブサイトの改善点がより明確に見えてくるでしょう。 最初はわからなくても、とにかく使い続けることが重要です。まずは質より量!

固定メニューがクリックされているのか、わかりますか?

クリックマップで確認したい固定メニュー要素をクリックし、「レコーディングを表示」を選択すると、その要素をクリックしたユーザーの録画データのみに絞り込むことができます。この絞り込み条件をセグメントとして保存しておくと便利です。

YouTube 動画のデッドクリックの箇所(21:46)を参考にしてください。

コンバージョンの有無で絞り込むには?

URLを重複設定できないため、ファネル機能を使いましょう。

あらかじめファネル機能でコンバージョンに至るまでの流れを設定しておき、特定のステップ(例:購入完了ページの表示)を達成したユーザーのみに絞り込みます。その後、確認したいページのヒートマップを表示することで、コンバージョンに至ったユーザーとそうでないユーザーの行動の違いを分析できます。

YouTube 動画でも説明しています(29:14)ので、参考にしてください。

ページ内のどこが一番見られているかわかりますか?

Clarity では、ページ内のどこが一番見られているか(アテンションヒートマップ)を確認することはできません。

ページのスクロール状況はスクロールヒートマップで確認できますが、これはあくまでも「ページのその位置までスクロールされた回数」を示しているだけに過ぎません。特定の箇所が実際にユーザーの目に止まっているかどうかは判断できません。

ページ内のどこが注目されているかを知りたい場合は、アテンションヒートマップ機能を持つ他のツール(例:QA アナリティクス、ミエルカ、Ptengine、SiTest など)を利用する必要があります。

ヒートマップを共有するには?

画像かURLで共有できます。

画像として共有
表示しているヒートマップのスクリーンショットをダウンロードして共有します。ただし、スクリーンショットが正しく表示されないケースもあるため、レポートなどで伝えたい一部をPCの画面のスクリーンショット機能を使うか、URLを共有するようにしてください。

URLを共有
外部の相手にも、設定した有効期限の間だけヒートマップを閲覧できるURLを発行できます。ただし、URL発行までに数秒かかるため、数が多いと地味に面倒です……。場合によっては、共有相手を Clarity のチームに追加してしまう方が効率的です。

ランディングしたページで絞り込みはできない?

上級者向けになりますが、カスタムタグを使用すれば可能です。Google タグマネージャーなどで、ランディングページのURL(パス)をカスタムタグとして設定し、Clarity のフィルターとして使用します。

<script>
if (!sessionStorage.getItem('landing_page_url')) {
  sessionStorage.setItem('landing_page_url', window.location.pathname);
  clarity("set", "landing_page_url", window.location.pathname);
}
</script>

※上記は動画の内容を調整したものです。

Microsoft Clarity 勉強会の今後の予定

次回はレコーディング(録画)機能について解説しつつ、活用のポイントを見ていきましょう。

次回の Clarity 勉強会の予定

お申し込みは以下からどうぞ👇

https://kosgis.peatix.com

Microsoft Clarity はウェブサイトに来てくれた方をファンにするためのヒントを得られるツールです。もっと活用したい事業主や法人、またはクライアントに提案したい企業の担当者さん向けのサポートを行っています。「わからないことがわからない」という方でも、ご安心ください。

\ 単発相談からパートナー契約まで /

]]>
Microsoft Clarity(クラリティ)を徹底的に活用するためのフレームワーク「UNCEAL」 https://clarity.kosgis.com/blog/clarity-cro-framework-unceal/ Sun, 18 Aug 2024 14:17:23 +0000 https://clarity.kosgis.com/?p=631

はい、ごめんください。少しずつ認知されてきたユーザー行動分析ツール「Microsoft Clarity(クラリティ)」が大好きなコスギです。 「興味はあるけど、具体的にどう使えばいいのかピンと来ない」「見たいところだけ見 […]]]>

はい、ごめんください。少しずつ認知されてきたユーザー行動分析ツール「Microsoft Clarity(クラリティ)」が大好きなコスギです。

「興味はあるけど、具体的にどう使えばいいのかピンと来ない」「見たいところだけ見てるけど、もっと活用できるんじゃ?」といった声を耳にすることが増えたので、ユーザーの認識変容をミクロに考えるためのフレームワーク「UNCEAL(アンシール)」と、それぞれのステップのヒントになるケーススタディをまとめました。

ユーザーの認識変容をミクロに考えるためのフレームワーク「UNCEAL(アンシール)」の図解

なお、UNCEAL は弊社カエルコムニスが提唱しています。Clarity を使うときはもちろん、ページに訪れたユーザー行動の促進を改善したいときに使ってみてください。

ただし UNCEAL は視野が狭まるリスクもあるので、ペルソナやCJM(カスタマージャーニーマップ)、VPC(バリュープロポジションキャンバス)、コンセプトダイアグラムなどなど、顧客視座を理解するための手法はたくさんあるので、それらと合わせて深めてくださいね。

「クラリティを活用してサイトを改善したい気持ちはあるけれど、ちょっと何言ってるかわからない」という方は、Microsoft Clarity の活用サポートをご検討ください。ペースに合わせてヒアリングしながら、必要なポイントをご説明します。大事なのは用語の理解以上に、ビジネスを良くすることですから。

Clarity 活用のポイントは「ユーザーの心の声」

Clarity は、ヒートマップツールでもレコーディングツールでもありません。ウェブサイトに訪問したユーザーと意思疎通できているか(インタラクション)を理解しやすい「行動分析ツール(behavioral analysis tool)」です。

ですから、Clarity を使うためには、ユーザーの動線に見通しを立てておく必要があります。これをしないでツールを見ちゃう方が多い(というかほとんど)ので、ユーザーの心の声に思いを馳せるだけでも大きな一歩ですよ。

ユーザーに思いを馳せるためのフレームワーク「UNCEAL」

さて「主要なページ」とは、ウェブサイトの目的を達成するために訪問者の背中を押すようなページのことを指します。資料請求フォームの前にあるページや、カートの前にある商品の詳細ページなどです。

もしウェブサイトの目的が定まっていない場合は、「ウェブサイトを通じて達成できたらいいこと」を考えておきましょう。できれば「お問い合わせ」という言葉は使わずに、具体的にするのがベストです(営業部の商談リストを増やす、など)。その達成のために必要なページを整えてから、UNCEALを使ってください。

そして以下の6つの項目で、該当ページに訪れようとするユーザーについて思いを馳せてみましょう。これを「UNCEAL(アンシール)」というフレームワークにしました。ちなみに User 以外は動詞なので「The user needs ***」といった文にできるとシンプルになります。

  1. User:このウェブサイトは、どんな人のためのものか
  2. User Needs:このページは、ユーザーのどんな期待に応えるのか
  3. User Catches:ユーザーは、このページでまず何を見るか
  4. User Engages:ユーザーは、このページでどんな気持ちでどう反応するか
  5. User Advances:ユーザーが、このページの次に求めるものは何か
  6. User Leaves:このページが、ユーザーを離してしまう理由まとめ
弊社カエルコムニスの公式サイトの場合

(前提)弊社は「ストレングスファインダーというアセスメントについてある程度認知している方」を対象にしています。アセスメントは海外のサービスかつ有料で、診断のためのアクセスコードの販売もしています。そのアクセスコードを購入してもらえることも想定した、診断の流れのページを取り上げました。

https://coaching.kosgis.com/service/assessment
  1. User:ストレングスファインダーというアセスメントについてある程度認知している方
  2. Need:ストレングスファインダーを受けたい(問題なくスムーズに)
  3. Catch:ハッキリとしたタイトルと、つらつら続く文章
  4. Engage:アクセスコードを買う方法や種類で迷いながら、アコーディオンをクリック
  5. Advance:最初のステップとしてコードの購入が必要だと理解して、コードの購入に進む
  6. Leave:選択基準がわからず迷ってあきらめるか、公式サイトに進んで終わる

公式サイトに離脱するのは想定していますが、ここまで考えただけでも、以下のような改善点が浮かびました。

  1. テキストばかりだしスクロールしないと全容がわからないから、流れをまとめた画像をファーストビューに置くと認識しやすそう(画像クリックが増えると予想)
  2. 画面を占有する写真は、書籍で購入する方向けのアコーディオンの中に入れるとスクロールを軽減できそう(アコーディオンを開いたあとの写真のクリックが増えると予想)
  3. アクセスコードの選び方はアコーディオンの上に配置し、その上に購入方法のメリデメを表にしておくと迷わなそう(メリデメの表はスマホだと横スクロールして見られ、アクセスコードの選び方への遷移が増えると予想)
  4. 弊社でコード購入に進むのはボタンにすると行動喚起できそう(クリック率が増えると期待)
  5. わからないことはX(Twitter)に連絡してくれてもいいことを記載してもいいかも……?(ただ、最初からそこまで関わりたくない方は多そうなので優先度低め)
  6. スマホで見る人が多そうだけど、企業向けにPDFを提供すると良さそう(流れの図の下に配置すれば、ダウンロードボタンのクリックが増えると予想)(フォームを用意するほどでもないかな)

上記の施策が済んだら、Clarity で改善効果を検証します。PDF以外は施策実施済み。

次のページに進んだあとや、再訪のケースも同様に考えていくと、2〜3回パターンでコンバージョンページに辿り着きます。もしコンバージョンまで5パターン以上が必要になる場合、サイトの構成を見直す必要があるかもしれません(ECサイトなど、経由するページが多いことはあります)。

大切なのは、いきなりツールを使うのではなく、UNCEAL のパターンを出しておくこと。ユーザーが想定どおりに動いてくれないのは当然としても、道筋を立てておかなければ点でしか捉えられません。

ビジネスを利用するのはどんなユーザーで、どんなニーズを持っているのか、そのニーズを満たすためにあるページが明確になっていればいるほど、UNCEAL は使いやすいです。その逆もしかりなので、何を目的にウェブサイトをつくったのかに立ち返ってください。

目の前の数字を大切にしながらも、ビジネスによってユーザーを幸せにし、社会がよくなることを目指したいですね。

各ステップの考え方と Clarity の活用ケース

以下は UNCEAL の関係を図解したものです。User が中央にあり、Need → Catch → Engage と進み、Advance(前進)するか Leave(離脱)するかを考え、次のページに前進したことで少し変化した Need からまた考えます。

ユーザーの認識変容をミクロに考えるためのフレームワーク「UNCEAL(アンシール)」の図解

Catch どころか Need のタイミングで Leave する可能性も十分あるので、Engage から Leave するとは限らないのですが、Leave はそのページでの離脱要因を総まとめするための思考のステップという位置づけです。

では、U/N/C/E/A/L それぞれのステップについて具体的にみていきましょう。

User:このウェブサイトは、どんな人のためのものか

ここは提供サービスや商品のビジネスモデルにおいて、ウェブサイトが果たす役割が関わってきます。「ホームページがあったほうがいいだろう」というフワッとした理由で作られているサイトは意外と多いのですが、目的や役割を具体的にしなければ始まりません。

ここは Clarity を使う以前の問題なので、しっかりやるなら VPC(バリュープロポジションキャンバス)でまとめると整理しやすいです。とはいえ、まずは簡単に設定するだけでも大丈夫。やっていくうちに欲が出てきますから、重たく考えるよりも手を動かしていきましょう。

ユーザーについて考えるのが困難な場合

現実問題として、VPCなど顧客理解のフレームワークを使っても企業視座から動けず、まったく手が動かないというケースは(地方に限らず)たくさんあります。

そういった場合にのみ、Clarity を使ってどんな人がウェブサイトに来ているのかを観察するところから始めてみても良いでしょう。画面の向こうにユーザーが存在しているという事実を受け入れるのに最適です。

以下の手順で Clarity を確認してみてください(全ページに設定が済んでいる前提です)。

  1. 期間を30日間にして、どれくらいのユーザーが来ているのかを確認する
  2. パソコン、タブレット、モバイルのどれが一番使われているのか確認する
  3. 一番見られているページのヒートマップをパソコン・モバイル別に確認する
  4. レコーディング(録画)を3件くらい確認する
  5. トップページのヒートマップとレコーディングを確認する

この5つを確認するだけでも、ウェブサイトの現状を知ることができます。ここで「へぇ〜」だけで終わるならウェブサイトの改善は不要ですし、最低限の運用でも良いと思います。

ただ、「えっ……思ったより全然読まれてない……」「ちょっとこのままだと、お金をかけてサイトを作った意味が薄いんじゃないかなあ……」と危機感を覚えたら、その思いをお聞かせください。せっかくなら、御社のビジネスを成長させてくれるウェブサイトにしたいじゃないですか。

\ 混乱と絶望を味わってからがスタート /

Need:このページは、ユーザーのどんな期待に応えるのか

この Need のステップで、上記で定義した User の意図と、それに応えられるページを UNCEAL の対象として設定します。

ユーザーは、何かしらの意図を持ってページに来ます。主要なページなら明確な意図を想定しているとは思いますが、もし曖昧な場合は「検索意図」から考えてみるとSEOにも役立ちます。どのみち、ユーザーとの最初の接点は検索からの流入であることが多いですしね。

  • 「◎◎とは?」など、言葉や内容の理解を意図している(インフォメーショナル・クエリ)
  • 「◎◎がほしい」など、購入の検討を意図している(トランザクショナル・クエリ)
  • 「メリデメを知りたい」と、購入の前の比較を意図している(コマーシャル・クエリ)
  • 「駐車場はある?」と、地理的な情報の確認を意図している(ローカル・クエリ)
  • 「Amazonを開きたい」と、特定のサイトへの訪問を意図している(ナビゲーショナル・クエリ)

「お、SEOにも役立つのか!」と検索意図に興味を持たれたら、SEOの第一人者であるボーディーの住さんの記事をご一読ください。ここまで丁寧にSEOを説明しているサイトは、Google の公式ドキュメント以外にまずないですよ。

https://www.bodhi.co.jp/user-search-intent

たとえば、コマーシャル・クエリの「メリデメを知りたい」という意図。この意図にそのまま応えてメリットとデメリットを掲載しておくのでも、Need を考えるうえでは問題ありません。

ただ、これだと競合との優位性がイマイチなので、可能な限り、もう一歩踏み込んでください。

「メリデメを知りたい」と言語化された意図の裏には、「後悔したくない」という「不安感」や「不信感」があると考えられます。こういった言語化されていない “不” を軽減できるよう、メリデメだけでなく選択基準やケース別のお客様の声が明記されていると、安心して信用しやすくなるでしょう。お客様の声は、独自性も高いですしね。これが、期待に応えるということ。

もちろん、こういったユーザーの期待は言語化されていないため、仮説でしかありません。ですが、ユーザーの言語化された意図だけでなく、その裏にある「不◎感」のユーザーの声と、それを払拭できるオリジナリティのあるコンテンツが用意できていると、ユーザーが言語化できていない期待に応えることができ、アドバンテージにもなります。ユーザーの心の声に寄り添った合わせ技が大事。

[Need]弊社カエルコムニスの事例

前提は先述していますので、ここではステップごとの具体的な説明をします。対象ページは以下です。

https://coaching.kosgis.com/service/assessment

*サービス名を知っていることを前提にしているため、選択と集中を徹底した結果「わかる人はわかるけれど、わからない人はサッパリわからない」になっています。事例としてはわかりにくくてすみません。

このページは、ユーザーの直接的な意図「ストレングスファインダーを受けたい」に応えられるよう、流れを説明したものになっています(トランザクショナル・クエリですね)。

ですが、初めての方は「ストレングスファインダーというものがいいらしい、けれど、どうやって受けたらいいのかわからない」と、ゴールは見えているものの、道筋がわからずモヤモヤした不安感を抱えていると想定できます。

流れを知って見通しが立つ以外にも、SNSや知恵袋などの情報からつまづきやすい「モヤモヤ」を洗い出し、一連のタッチポイントで役立つページに仕上げています。

ということをまとめると、

  • User:ストレングスファインダーというアセスメントについてある程度認知している方
  • Need:ストレングスファインダーを受けたい(問題なくスムーズに)

になります。モヤモヤを解消できるよう「問題なくスムーズに」がポイント。

Catch:ユーザーは、このページでまず何を見るか

Catch のステップは、ページを開いて目に入るものを挙げ、考察します。パソコンとスマートフォンの実機で開いたときに、何が並んでいるかを客観的に挙げてください。

Catch から Engage に進めるかどうかを Clarity で確認するなら、以下の項目が参考になります。

  • スクロールされているか?(スクロール率)
  • スクロールされずにホームやパンくずで戻っていないか?(クリックヒートマップ)
  • スクロールされずにグローバルナビゲーションが使われていないか?(クリックヒートマップ)
  • ファーストビューでデッドクリックしていないか?(デッドクリック)
  • 一瞬見られただけで離脱されていないか?(クイックバック)
  • そもそも読み込みまでに待たせていないか?(パフォーマンス指標)

第一印象で期待はずれだと認識されたらもったいないですよね。改善したら確認してみてください。

[Catch]弊社カエルコムニスの事例

以下のように、実機でスクリーンショットを撮って要素を確認してみても良いでしょう。

スマートフォンでの見え方
パソコンでの見え方

はい、見事に文字ばかりです。画像らしい画像なんて、ロゴしかありません。だから Catch は以下のように表現するしかありません。

  • Catch:ハッキリとしたタイトルと、つらつら続く文章

ページを読みこむユーザーには何の問題もありませんが、そうでなければ「難しそう」という心理的ハードルが上がってしまいます。ツールの特性として読むスキルは必要になるものの、Need で「問題なくスムーズに」と掲げているのだから、ハードルを下げる努力はしても良いでしょう。ということで改善済。

Engage:ユーザーは、このページでどんな気持ちでどう反応するか

Engage のステップは、ページに注目しているときの想定行動です。Catch で離脱しなければスクロールしながらコンテンツを読んだり、フォームを操作したりしている状況なので、コンテンツとニーズとの整合性が大切です。

Engage して Advance できるかどうかを Clarity で確認するなら、以下の項目が参考になります。なお、ユーザー心理をすべて理解することは不可能なので、最初に設定した主要なページの閲覧データに絞って確認しましょう。他のページを見始めると、時間が溶けます。

  • タイトルとコンテンツの関連性が不足していないか?(平均スクロール率)
  • 適当に読み飛ばされていないか?(過剰なスクロール)
  • 使い勝手に問題はないか?(デバイス別レコーディングデータ)
  • ページ内リンクや問題ないか?(イライラしたクリック)
  • 拡大を期待されていないか?(デッドクリック)
  • 画像のスライドショーは動作しているか?(JavaScript エラー)
  • コンテンツは期待に応えられているか?(アクティブに費やした時間)
  • 前の画面に戻ってしまっていないか?(カスタムタグ)

私は上記でも紹介した住さん「検索を終わらせろ」という言葉が大好きなので、このコンテンツとユーザーのニーズマッチを全力で満たしたいために項目が多めです。インターネットでは競合だらけなので、ビジネスでウェブサイトを持っているなら「自分ではいいと思っている」では通用しないのですよね。

だからこそ、Engage できずにユーザーを離脱させてしまわないよう、競合も確認しながらページを「育てる」意識が必要です。育てるのは大変だからこそ、重要なページに注力しましょう。

最重要項目は、コンテンツ以上にコンバージョン(成果)ですから。好奇心対応すると、時間が溶けます。

[Engage]弊社カエルコムニスの事例

ページを作り込んでいればいるほど、ユーザーのことが見えなくなるジレンマが起きます。弊社の事例のように、流れを示したページはユーザーの経験に応じてニーズが変わるのに、提供側としては「流れ」として出しているから、ちょっと考えにくいんですよね。

ですので、まずはゼロ経験のユーザーを想定して、新規ユーザーで絞り込んだ Clarity のヒートマップとレコーディングデータを20件くらい確認し、どこで迷いが生まれるのかを観察しました。

流れとしてコードを購入する必要があるため、そのあたりで迷うかもという仮説はあったのですが、結果、

  • Engage:アクセスコードを買う方法や種類で迷いながら、アコーディオンをクリック

となりました。アクセスコードの種類で迷うのはSNSでも話題になるので把握していましたが、購入方法は「お好きなように」でまとめてしまっていたことに気づきました……思い込みって怖いですね……。ということでこれも改善済。

Advance:ユーザーが、このページの次に求めるものは何か

Advance のステップは、次にどこに進むべきかが明確になっているかどうかです。「前進する」の意味を大切にして「アドバンス」としていますが、なじみがなくて忘れてしまいがちな場合は「アクション」や「アテンド」で覚えてもらってもOKです。大事なのは、ユーザーが離脱せずに次に進むこと。

Engage できているなら次に進んでくれるはずなので、確認するのはCTA(コールトゥアクション:次に進むべきリンク)が機能しているかどうか。Clarity で確認するなら、以下の項目が参考になります。

  • CTAが明確に示されているか?(クリックヒートマップ)
  • CTAが多すぎたり、少なすぎたりしていないか?(クリックヒートマップ)
  • CTAまでスクロールされているか?(スクロールヒートマップ)

Clarity でわかることはやったことの結果なので、ないものは検証できません。盲点になりやすいのは以下のようなポイントなので、「これくらいはわかるだろう」「こういうものだろう」のバイアスを排除して実機で確認してみましょう。

  • 関連の高いコンテンツへつながっているか?(ページの内容を分割したり統合したりするほうが良い場合もある)
  • そのページからのCTAは適切か?(何でもかんでも「お問い合わせ」につなげない)
  • CTAの表現方法は適切か?(広告と思われかねない)
  • 検索画面と結果の画面は変わっているか?(同じ内容が表示されたらユーザーは混乱する)
  • スクロールを止める要因があるのではないか?(クリックしてもらいたいリンクの優先度を整理する)
  • CTAはユーザーにフィットした言葉になっているか?(提供側と利用者との言葉が異なる場合がある)

例えば、メールマガジンを「購読する」のと「受信する」のとでは印象が違いますし、「無料」と「100%オフ」でも違いますよね。こういった、丁寧な言葉選びが差を生むことは往々にしてあるため、ページを見ているユーザーの心情に沿った言葉に合わせましょう。神は細部に宿ります。

[Advance]弊社カエルコムニスの事例

コードの購入が必要だと理解できれば、コードの購入画面に進めば良いとわかります。ただ、どこから購入したら良いのか迷わせてしまっていると、コンバージョンの手前で離脱させてしまうことに。

弊社の場合、購入方法は自サイトのショッピングカート・公式サイト・書籍の3つのパターンがあります。自サイトでの販売はコンバージョンポイントにはなりますが、その利益よりも、流れを解説したページが安心できるし役立つと感じてもらうことで信頼性の向上も意図しています。ですので、公式サイトへの離脱は折り込み済みで以下のようになります。

  • Advance:最初のステップとしてコードの購入が必要だと理解して、コードの購入に進む

ただ、UNCEAL を念頭に改めて画面を確認した際、自サイトへのCTAがわかりにくかったのでボタンにしました。改善済。

この Advance で生まれた新たな Need で、また (U)/N/C/E/A/(L) を考えてみてくださいね。コンバージョン後のサンクスページまでやれば、たくさんの改善ができるのではないでしょうか。

Leave:このページが、ユーザーを離してしまう理由まとめ

Leave のステップは、そのページでの離脱要因の総まとめです。これまで見てきた、Need・Catch・Engage・Advance の4つの離脱要因をまとめましょう。重要度と緊急度で優先順位をつけ、いつまでに何をやるかを決め、施策を実施して検証してください。戦略で疲れていては本末転倒です。

また、U/N/C/E/A まで考えている間に解決策はある程度まとまっていると思いますので、余裕があれば、より良くするために以下を考えてみてください。簡単にできるものではないので、どれかひとつでもOKです。

  • Need:ユーザーの意図だけでなく、その裏の声と期待に応えるとしたら、他に何ができそう?
  • Catch:このページの第一印象がポジティブだったら、どんな心の声が聴こえる?それを実現するには?
  • Engage:このページに、信頼性・専門性・権威性・独自性がプラスされるとしたら、それぞれどんなこと?
  • Advance:「これならクリックしたい!」と思える、CTAのサブメッセージは?

CTAの改善は、即効性も高いです。ボタンに添えて背中を押すためのコメント(サブメッセージ)は、できるところから付けてみてください。こんなかんじになります👇

\ わからないことがわからなくてもOK! /

サブメッセージは、ボタンと同じこと(「詳細はこちらから!」など)ではなく、ユーザーの不安や期待に沿っていることが大切です。PVが多いなら、A/Bテストもオススメ。

[Leave]弊社カエルコムニスの事例

これまでのことを振り返ってみると、以下のようにまとまります。

  • Leave:選択基準がわからず迷ってあきらめるか、公式サイトに進んで終わる

無理にまとめなくても良いのですが、重要度がはっきりしているとこれくらいシンプルにまとまります。アタマの中はこんな感じ。

  1. Need)「ストレングスファインダー_受け方」以外のクエリにも対応できるかも
  2. Catch)テキストばかりだしスクロールしないと全容がわからないから、読むのが面倒かも
  3. Engage)画面を占有する写真は大きすぎるので、心理的負担をかけて疲れさせてしまうかも
  4. Engage)アクセスコードの購入方法で迷って公式サイトを選ぶかも(自サイトへの誘導がイマイチ)
  5. Engage)流れが長めなので、スマホだと面倒に思われるかも
  6. Advance)公式サイトに離脱したら戻ってこないかも(特に企業で受ける場合)

「ストレングスファインダーを受けたい(問題なくスムーズに)」の Need に応えることが最優先です。あとはまあ、できることをやる感じで。

せっかくなので、より良くするための項目も考えてみました。

ユーザーの意図だけでなく、その裏の声と期待に応えるとしたら、他に何ができそう?

やっぱりPDFを作ったほうが、企業など大量に受けた方に使ってもらえるし、接点もできそうなんですよね。就業時間内にやるところもあれば、自由に受けてもらうところもありますし。

このページの第一印象がポジティブだったら、どんな心の声が聴こえる?それを実現するには?

「わかりやすっ!」「なるほど〜!」だと思うので、図解はしたけれど……漫画……?(予算オーバー)

このページに、信頼性・専門性・権威性・独自性がプラスされるとしたら、それぞれどんなこと?
  • 信頼性:動画で顔出ししてると信頼感増しそう。あとは被リンクをもらえる施策かなー
  • 専門性:このページで専門性を出すなら、企業向けに活用までを想定したPDFをつくると良さそう
  • 権威性:Gallup 認定コーチのバッジ?実績はあまり出してないので、うーん……
  • 独自性:これまでに実際にいただいた質問と回答とか?
「これならクリックしたい!」と思える、CTAのサブメッセージは?

ちょっとCTAが色々ある特殊なページなので、もし企業向けに出すなら「活用までを網羅した30Pが無料!」とかかなあ。この施策は重いので、やるなら研修サービスとの兼ね合いから考え直さないと。

SEOとCROには相関関係がある

住さんの記事から、CROは Navboost(ナブブースト)への好影響と、ポゴスティッキングの抑制につながると考えられます。

https://www.bodhi.co.jp/user-behavior

SEO(Search Experience Optimization)は、検索結果の画面でのユーザー体験を最適化することです。AIが台頭しキーワードの順位を追うだけの時代ではなくなっています(だから私は Engine より Experience 推し)

そしてCRO(Conversion Rate Optimization)も「Customer Relationship Optimization」と言えるくらいには、ただ成果を得られれば良いのではなく、顧客との関係性を最適化すると考えたほうがビジネスは成長する時代でしょう。ユーザー(顧客)の側から考えたら、相関関係があっても不思議はありません。

Microsoft Clarity は、このCROのヒントをたくさん得られるツールですし、UNCEALは、特に主要なページを対象に考えることを前提にしたフレームワークなので、当然、CROに役立ちます。とはいえ、今回初めてつくったフレームワークなので、さまざまなケースを試しながら調整していけたらと思っています。

UNCEAL は個人でも使えるくらいにシンプルなフレームワークですが、オンライン/オフラインでワークショップもできますので、一緒に楽しみたい方はご相談ください。

\ UNCEALで自社サイトを改善したい! /

]]>
Microsoft Clarity(クラリティ)「ダッシュボード」の使い方 https://clarity.kosgis.com/blog/microsoft-clarity-seminar-02/ Mon, 29 Jul 2024 07:50:37 +0000 https://clarity.kosgis.com/?p=601

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第2回は「ダッシュボード」がテーマでした。「ダッ […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第2回は「ダッシュボード」がテーマでした。「ダッシュボード」とは、複数のデータをひとつの画面にまとめて表示する機能のこと。まとめると、以下のような内容です。

ダッシュボードでわかること
  • ユーザーの行動に関わる指標がたくさんある
  • 仮説を立ててフィルターを設定しよう
  • ベンチマークも参考に
ダッシュボードを使ってみよう
  • ウィジェットを移動させて自分好みにしよう
  • セグメントを作成して保存しておこう
  • コンテンツウィジェットは取り入れやすい

ダッシュボードには Microsoft Clarity で使用している指標の(カスタムタグは除いた)すべてが入っているので、クラリティの機能を網羅できますよ。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity の主要な指標と意味

基本的なパフォーマンス指標は、画面の上部にあります。

  • セッション数
    ユーザーがウェブサイトに訪問した回数です。Microsoft Clarity では、ボットによるアクセスは除外されます。Google アナリティクス(GA4)とは数値が異なる場合があるので、どちらを基準にするかを決めておくことが重要です。私はクラリティの数値を見ています。
  • セッション別のページ数(平均値)
    ユーザーが1回の訪問で閲覧したページ数の平均値です。「会社概要を見に来ただけ」「調べ物をしたらたどり着いた」「スマホで見つけたからあとでパソコンでじっくり読みたい」など、ユーザーの背景(インサイト)によって、訪問時に閲覧するページ数が大きく異なる場合があることを想定しておきましょう。
  • スクロールの奥行き(平均値)
    ユーザーがページをどれだけスクロールしたかの平均値(%)です。 この数値が30%を下回る場合、画面の上部で次のページに遷移しているか、離脱しているかしているので、理由を調べてコンテンツを改善する必要があるかもしれません。
  • アクティブに費やした時間(平均値)
    ユーザーが実際にページを閲覧していた時間の平均値です。 別のタブを開いている間などは閲覧時間としてカウントされません。 これはクラリティ独自の指標です。

これらの指標は、ユーザーがウェブサイトに訪問し、滞在したり回遊したりする際に重要な指標とされています。ただ、平均値は中央値とは限らないことには注意しましょう。アクティブに費やした時間の平均値が1分でも、数秒見ていたユーザーと、30分見ていたユーザーとに分かれていることも少なくありません。指標はひとつのみではなく、複数組み合わせて考えましょう

Microsoft が公開しているベンチマークも合わせてどうぞ。あくまで参考として、「ここまではイケるんだな」くらいに思っておくのがオススメです。

https://clarity.microsoft.com/benchmark

Microsoft Clarity の各ウィジェットでわかること

ユーザー関連情報

ユーザーウィジェット
  1. ライブユーザー
    過去10分以内にウェブサイトにアクセスしたユーザーの数です。多少タイムラグはあるものの、リアルタイムで変化します。Microsoft Clarity を開いているときにアクセスがあると、お知らせもしてくれます。
  2. 新規ユーザーリピーター
    ウェブサイトへのアクセスが初めての新規ユーザーと、2回目以降のリピーターの比率です。新規ユーザーとリピーターは、アクセスに利用したデバイスが変わると、同一人物でも別人としてカウントされることがあります。理想的な比率は、ウェブサイトの目的や業種によって異なります。
  3. 上位ユーザー
    セッション数が多い、つまりウェブサイトに何度も訪問している(ウェブサイトに興味や関心を持っていると考えられる)ユーザーです。上位ユーザーの行動を分析するには、ユーザーIDカードのようなアイコンをクリックしてみてください。いつ何回アクセスしているのかがわかります。

この「上位ユーザー」に関係者や自分自身が表示されないよう、事前に「設定」から関係者の除外設定を行っておきましょう

インサイト機能

これは Microsoft Clarity 独自の機能なので過去にも説明していますが、とてもわかりやすく使いやすい指標です。

インサイトウィジェット
  1. イライラしたクリック
    ユーザーが短い間に同じ場所を連続で「カチカチカチカチ」とクリック(タップ)している状態です。これは、ページの反応が遅い、リンク切れ、期待する動作をしないなどの問題を示している可能性があります。
  2. デッドクリック
    ユーザーがリンク以外の場所をクリックしている状態です。ユーザーがテキストを選択してコピーする行動も含まれますので、デッドクリックの発生率は他の指標と比べて高めです。
  3. 過剰なスクロール
    ユーザーがページを一気に最下部までスクロールしている状態です。 これは、ページが短すぎる、表示エラーが発生している、またはユーザーが目的の情報を見つけられずにスクロールを続けているなどの問題が起きていることに気づきやすいです。
  4. クイックバック
    いわゆる「直帰」、つまりユーザーがページを開いた直後に前のページに戻ってしまう状態です。 これは、ユーザーがページを間違えたか、またはページの内容が期待と異なっていたことが原因として考えられます。

上記の項目から録画を確認することで、緊急性が高く対処もしやすい改善点を見つけやすいです。たとえば、「イライラしたクリック」の録画から、リンクがうまく動作していなかったことに気づいたり、「過剰なスクロール」の録画から、エラーページが表示されていたりなどがわかります。

トラフィック分析

このあたりは、GA4で馴染み深いかもしれません。

トラフィックウィジェット
  1. 参照元
    ユーザーがウェブサイトにアクセスする直前に閲覧していたウェブサイトのURLが表示されます。例えば、”https://www.example.com” のリンクをクリックしてウェブサイトにアクセスした場合、参照元は “www.example.com” となります。ウェブサイト内での回遊の場合は、自ドメインが表示されます。
  2. チャネル
    参照元をいくつかのカテゴリに分類したものです。代表的なチャネルは以下の通りです。
    • Organic Search
      Google、Yahoo、Bingなどの検索エンジンからのアクセス。
    • Direct
      ブラウザに直接URLを入力してアクセスした場合や、ブックマークからのアクセス、メールやチャットツールなどのリンクからのアクセスなど、参照元が明確でないアクセス。
    • Referral
      X(Twitter)、FacebookなどのSNSや、他のウェブサイトからのリンクからのアクセス。
    • Other
      上記以外の参照元からアクセスがあった場合。
  3. キャンペーン
    広告などの特定のキャンペーン経由でウェブサイトにアクセスした場合に、そのキャンペーン名がこの指標に表示されます。 Google 広告やYahoo! 広告などの広告キャンペーンを設定している場合に特に役立ちます。
  4. ソース
    キャンペーンを設定していない場合は、参照元と同じ情報が表示されます。キャンペーンを設定している場合は、キャンペーンのソースに関する詳細情報(例えば、特定の広告グループやキーワードなど)が表示されます。

これらの指標を分析することで、どのチャネルから集客できているか、どのキャンペーンが最も効果的かなどを把握することができます。

Microsoft Clarity では、各チャネルや参照元ごとにヒートマップや録画を分析できるのが大きなメリット。たとえば、X(Twitter)から流入したユーザーを閲覧ページビュー数などで更に分類し、ウェブサイト内でどのような行動を取っているのかを具体的に把握することができます。

ユーザー環境分析

安定した運営を続けていれば、大きく変わることは(ほとんど)ありません。ユーザーの環境と提供側の環境とのギャップがあるか、ユーザーの環境で問題ないかを確認しておきましょう。

ユーザー環境ウィジェット
  1. ブラウザー
    ユーザーがウェブサイトを閲覧する際に使用しているブラウザーの種類が表示されます。例えば、Google Chrome、Microsoft Edge、Apple Safari などです。制作者(提供者)は、自分たちが普段使用しているブラウザーとユーザーの使用ブラウザーが違う場合、ユーザーの使いにくさに意識が向きにくいことがあります。チェックしておくに越したことはありません。
  2. デバイス
    ユーザーがウェブサイトにアクセスした際に使用しているデバイスの種類が表示されます。例えば、スマートフォン、パソコン、タブレットなどです。この3つの環境で見比べた際、大幅に低い指標を見つけたら、早めに改善しておきましょう。
  3. オペレーティングシステム
    ユーザーが使用しているデバイスのオペレーティングシステム(OS)が表示されます。例えば、iOS、Android、Windows、macOSなどです。たいていの場合は気にしなくても問題ありませんが、エラーが発生した場合などに絞り込み条件として活用すると便利です。

人気コンテンツ分析

人気ウィジェット
  1. 人気上昇中のページ
    ページビュー数の多い順にページが表示されます。これにより、ウェブサイトの中で最もユーザーの注目を集めているページを簡単に把握することができます。ページの並び替えを逆にすることで、アクセス数の少ないページを把握することも可能です。
  2. 人気の商品
    ECサイト内にある商品の、ページビュー数の多い順に表示されます。 ECサイト以外では、あまり利用する機会がない指標と言えるでしょう。

クラリティには基本的なパフォーマンス指標にページビュー数は含まれていませんが、サイト全体のページビュー数より、ページごとのページビュー数のほうが有益だと判断されているのでしょう。実際、ほとんど見られていないページには他のページからの動線がないことも想定されますので、閲覧を増やしたいページには動線を確保しましょう。

なお、「人気の商品」を表示させるには、商品スニペットの構造化データを追加することで対応できますが、Eコマース用のシステムに実装されている場合がほとんどです。Eコマース機能があるのに表示されないときは、以下の Google のドキュメントを参照してください。

https://developers.google.com/search/docs/appearance/structured-data/product-snippet?hl=ja

パフォーマンス分析

ユーザーがウェブページを快適に表示できるかを把握できる「コアウェブバイタル(Core Web Vitals:CWV)」の指標を元に、ウェブサイト全体や個々のページのパフォーマンスを把握することができます。

パフォーマンスウィジェット
  1. パフォーマンスの概要
    Google の PageSpeed Insights (PSI) と同様の機能で、コアウェブバイタルの指標として、ウェブサイト全体のパフォーマンスを100点満点のスコアで確認できます。
    スコアは、「良い」「改善が必要」「良くない」の3段階で評価され、スコアをクリックすると、改善点に関する詳細情報が表示されます。
  2. URLのパフォーマンス
    ページごとの PSI 結果をスコアで確認でき、スコアが低い順に並べ替えることができます。これにより、パフォーマンスの低いページを特定し、改善すべきポイントを絞り込むことができます。

これらの指標を分析することで、ユーザーが快適にウェブサイトを閲覧できるよう、パフォーマンスの改善に役立てることができます。Google がコアウェブバイタルを提唱したのが2021年の6月で、2024年3月以降、「FID」は「INP」に置き換わっていますが、クラリティでは「FID」が使われています。

「パフォーマンスを向上させる方法の詳細情報」から詳細を確認しようとしても英語のページなので、より深めたい方は、コアウェブバイタルそのものを確認することをオススメします。

https://www.suzukikenichi.com/blog/google-will-be-replacing-fid-metric-with-inp-metric-for-core-web-vitals-in-march-2024/

JavaScript エラー

JavaScriptのエラーウィジェット

このウィジェットでは、ウェブサイトで発生している JavaScript エラーを確認できます。「クリックエラーのみを表示する」をオンにすると、ユーザー体験に悪影響を与えている可能性のあるエラーに絞り込むことができます。

エラーが発生した時のユーザーの行動は、録画で確認できます。エラー発生時にユーザーがデッドクリックなどをしている場合は、早急に修正する必要があります。また、パソコンでは問題なく表示されていても、スマートフォンでは読み込みが遅くなったり、表示が崩れていたりすることにも気づきやすいです。

とはいえ、JavaScript エラーは環境やタイミングによって再現しにくい場合が少なくありません。致命的なエラーが発生している場合を除き、JavaScript のエラー修正に固執するよりも、ウェブサイトの本質的な改善を優先する方が良いでしょう。

ダッシュボードで特殊なウィジェットを表示させるには

クラリティのダッシュボードには、デフォルトで用意されているウィジェット以外にも特殊なウィジェットがあります。

コンテンツウィジェット

コンテンツウィジェットは、ブログ記事などのコンテンツ(本文)に対するユーザーの行動を詳細に分析できる機能です。data-clarity-region="article" で囲まれた箇所が対象になり、対応しているCMSもあります。

コンテンツウィジェット
  1. 閲覧者の種類
    一度のセッションで何ページ閲覧したかによって、ユーザーを「一度で完了」「カジュアル」「重度」の3つの種類に分類します。
    • 一度で完了:1ページのみ閲覧
    • カジュアル:2〜3ページ閲覧
    • 重度:4ページ以上閲覧
  2. 閲覧動作
    記事を最後まで読んだのか、途中で離脱したのかを「関与」「ヘッドラインで破棄」の2種類に分類します。
    • 関与:記事を最後まで読み終えた
    • ヘッドラインで破棄:ほぼ直帰(見出しを表示しただけ)

たとえば「カジュアル」で絞り込むと、3ページくらいは読んでいるのにコンバージョンに進まない、などのもどかしいユーザーのインサイトを探ることができます。ユーザーの行動を見ると、何度か来てくれていることがわかったりもするんですが。

なお、別タブで記事を開いているなど、アクセスしているのにアクティブになっていない場合は、「ヘッドラインで破棄」と判定されるのではないかなという印象はあります。公式ドキュメントは以下に。

https://learn.microsoft.com/en-us/clarity/insights/content-insights

ECウィジェット

Shopifyと連携し、ユーザーの購買行動を分析(ECサイト向け)できるウィジェットです。購入割合の指標は Shopify の Clarity プロジェクトにのみ対応しており、一般的なECサイトでは使用できません。また、Shopify Plus サイトの Clarity プロジェクトなら、購入完了前に離脱したユーザーを支払いステップごとに細かく絞り込むことができます。公式ドキュメントは以下に。

https://learn.microsoft.com/en-us/clarity/insights/e-commerce-insights

Shopify ユーザーなら使ってみる価値はありますが、個人的にはファネル機能(日本語では「フィルター」と表示されている機能)を設定することで似たようなウィジェットを作れると思います。以下も参考にどうぞ。

https://clarity.kosgis.com/blog/leverage-the-funnel-with-microsoft-clarity/

その他にも、レシピサイト向けのウィジェットHubspot との連携など、かゆいところに手が届くような改善が進んでいるので、今後もどんな機能が出てくるか楽しみですね。

おまけ:Clarity Copilot も始まっています

私の環境ではプライベートプレビューにアクセスできたので、Clarity Copilot の機能も使えています。

たとえば「過去7日間の、イライラしたクリックが一番高いページの具体的な改善例を教えて」と、時期を指定して具体的な回答を依頼すると、以下のような回答が返ってきます。録画やヒートマップを確認しやすくなりますが、もうちょっと、ページのコンテンツに合わせたアドバイスが欲しいところですかね。

過去7日間でイライラしたクリックが一番高いページは、こちらのページで、合計52回のイライラしたクリックが発生しています。以下に具体的な改善例をいくつか挙げます。

改善例

  1. ページの読み込み速度を改善する:
    • 画像や動画の最適化
    • 不要なスクリプトの削除
    • キャッシュの利用
  2. ユーザーインターフェースの改善:
    • ボタンやリンクの配置を見直し、クリックしやすい位置に配置する
    • フォームの入力フィールドを簡潔にし、必要最低限の情報を求める
  3. コンテンツの明確化:
    • 重要な情報を目立たせるために、見出しや箇条書きを使用する
    • 誤解を招く表現を避け、ユーザーが求める情報を迅速に提供する
  4. フィードバックの提供:
    • ユーザーがクリックした際に、即座にフィードバックを提供する(例:ロード中のインジケーターを表示する)
    • エラーメッセージをわかりやすく表示し、次に取るべき行動を示す

これらの改善を行うことで、ユーザーのイライラを軽減し、より良いユーザー体験を提供することができます。

公式ドキュメントは以下。

https://learn.microsoft.com/en-us/clarity/copilot/clarity-copilot

Microsoft Clarity のダッシュボードに関するよくある質問

Microsoft Clarity の、ダッシュボードの主要な指標は何ですか?

セッション数、セッション別ページビュー数、平均セッション時間、アクティブ時間などです。これらの指標は、ユーザーがサイトに滞在し、回遊する際に重要です。なぜこの指標が選ばれているかについては公式な解説はありませんが、ユーザー行動分析の際に頼りになる指標と言えます。

Microsoft Clarity のウェブサイトベンチマークも参考になります。

インストール後、どれくらいで指標を確認できるようになりますか?

Microsoft Clarity のインストールが完了すると、データの収集を開始します。ダッシュボードでデータが表示されるまでには、30分程度〜数時間かかるとされています。もちろん、アクセスがなければデータは取得できません。

Looker Studio のように、ダッシュボードを自由にカスタマイズできますか?

現状では、ウィジェットの入れ替えのみで、自由にカスタマイズできる機能はありません。ただし、フィルターをセグメントにして保存しておくことで、すぐに見たいデータにアクセスしやすくすることはできます。

また、カスタムタグの使用によって独自の指標を作ることはできますが、それらを自由にウィジェットにすることはできません。

Microsoft Clarity のダッシュボードのデータをダウンロードできますか?

ダッシュボード全体と、それぞれのウィジェットは、CSVとPNG (画像)でダウンロードできます。ダッシュボード全体なら、PDFでもダウンロードできます。

表示されている画面そのものを画像としてダウンロードできるので、特に日本語だと改行位置が気になるなど、若干の崩れはあるかもしれません。加工して使いたいなら、CSVを選びましょう。

位置をカスタマイズしたウィジェットをリセットできますか?

現状では、リセットする方法はありません。ウィジェットの位置をあれこれ変えた後、デフォルトに戻したいときもあるかもしれませんが、一度変えたら使いやすい並び方を追求する方が現実的です。

なお、非表示にしたウィジェットは再度表示させることができます。削除されることはありません。

データの異常値や急激な変化を自動的に検知できますか?

現状では、自動検知機能はありません。GA4にはカスタムインサイトを設定して通知する「カスタムアラート」機能があるので、そちらを併用することをおすすめします。

https://support.google.com/analytics/answer/1033021?hl=ja

Microsoft Clarity は定性分析の方が得意なので、定量分析としてGA4の併用を推奨します。

Microsoft Clarity 勉強会の今後の予定

次回はヒートマップを徹底的に活用する予定です。

Microsoft Clarity 勉強会の今後のテーマ(次回はヒートマップ)

お申し込みは以下からどうぞ👇

https://kosgis.peatix.com

Microsoft Clarity はウェブサイトに来てくれた方をファンにするためのヒントを得られるツールです。もっと活用したい事業主や法人、またはクライアントに提案したい企業の担当者さん向けのサポートを行っています。「わからないことがわからない」という方でも、ご安心ください。

\ 単発相談からパートナー契約まで /

]]>
Microsoft Clarity とは?基本から導入までをデモを見ながら確認しよう https://clarity.kosgis.com/blog/microsoft-clarity-seminar-01/ Thu, 27 Jun 2024 01:51:49 +0000 https://clarity.kosgis.com/?p=569

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。先日開催した、第1回 Microsoft Clarity 勉強会を記事化しました。内容は以下のとおりです。 実際の画面を触ってみたデ […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。先日開催した、第1回 Microsoft Clarity 勉強会を記事化しました。内容は以下のとおりです。

Microsoft Clarity の基本を知っておこう
Clarity をインストールして設定しよう

実際の画面を触ってみたデモも動画にありますので、合わせて参考にしてください。Microsoft Clarity を知りたいのなら、実際にデモ画面を触ってみるのが一番です。登録なども不要ですし。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity の基本:できること・注意点

Microsoft Clarity(クラリティ)は無料で利用できるユーザー行動分析ツールです。ホームページに訪れたユーザーの行動を詳細に把握し、改善に役立てるための機能が充実しています。

主な機能と活用方法

  1. クリックヒートマップ
    ページ内のどこがクリックされたかを視覚的に表示します。 グローバルナビゲーションのクリック率や、ページ内の特定要素への関心の度合いを把握できます。
  2. スクロールヒートマップ
    訪問者がページのどこまでスクロールしたかを色分けして表示します。 ユーザーが離脱しやすいポイントを把握し、重要な情報が適切な位置に配置されているかを確認できます。
  3. エリアヒートマップ
    ページ内の特定エリアへのクリック率を分析できます。 クリックヒートマップでは散らばってしまうクリックデータを集約し、ボタンやバナーなどの要素に対する反応を正確に把握できます。 ただし、使いどころが難しい側面もあります。
  4. レコーディング機能
    訪問者の実際の行動を動画で再現できます。 マウスの動き、クリック、スクロールなど、ユーザーがサイト上でどのように行動したかを詳細に把握できます。 レイジクリック(怒りのクリック)などの問題行動を発見し、改善につなげられます。
  5. 多様なフィルター機能
    ユーザーの行動を様々な条件で絞り込み、分析できます。 レイジクリック、デッドクリック(無効なエリアへのクリック)、過剰なスクロール、クイックバック(短時間でのページ離脱)など、特定の行動パターンに絞り込んで分析できます。
  6. AIによる自動要約
    MicrosoftのAI「コパイロット」が、ヒートマップやレコーディングデータの概要を自動でまとめてくれます。 ユーザー行動の概要把握、改善のアドバイスなどを提供します。 すべての分析結果が正確とは限りませんが、分析時間の短縮に役立ちます。

Clarity を導入する前の注意点は、以下の記事を参考にしてください。

https://clarity.kosgis.com/blog/microsoft-clarity-risks-and-remedies

Clarity と他ツールとの比較:GA4、サーチコンソールとの違い

Clarity と Google Analytics 4(GA4)、Google サーチコンソールとの違いを比較します。

項目ClarityGA4サーチコンソール
主な分析対象ユーザー行動アクセス状況、コンバージョンなど検索パフォーマンス
プライバシー対応要注意要注意検索データのみ
リアルタイム解析可能可能1日程度のラグあり
使いやすさ初心者向け中〜上級者向け中〜上級者向け
コスト無料無料(一部有料機能あり)無料
機能連携Microsoft関連サービスGoogle関連サービスGoogle関連サービス

定量データと定性データを、自社サイトの内外で評価しましょう。ユーザーインタビューやアンケートも大切なので、Microsoft Clarity を使う際には他のツールも合わせて使いましょう。視野が狭くなりかねません。

Clarity、GA4、サーチコンソールの使い所

Clarity のインストールと設定:登録方法と設定項目

Microsoft Clarity の導入手順と設定項目について解説します。

アカウントを登録

Microsoft Clarity のアカウント登録

Microsoft アカウント、Facebook アカウント、Google アカウントのいずれかを使用して登録します(Google アカウントでの登録が人気のようです)。

メールアドレス+パスワードでの登録はできませんので、上記3つのどれかのアカウントが必要です。

インストール方法

アカウントを登録できれば、自社サイトに導入するのはそれほど難しくありません。ただ、ウェブサイトの管理権限がない場合は担当者(ウェブサイトの管理業者)にしてください。

WordPress ユーザーなら、Microsoft Clarity のプラグインをインストールするだけです。JavaScript でタグを設定することもできますが、管理画面で Clarity のデータも確認できるのでプラグインを使うのが間違いありません。

WordPress で Microsoft Clarity のプラグインをインストールすると、管理画面から最小限のデータを確認できまs

中級者以上なら、Google タグマネージャーを利用するのがオススメです。なお、タグマネージャーのテンプレートギャラリーには Clarity 用の非公式タグも存在しており、カスタムタグを使う際にちょっと便利です。以下の記事も参考にしてください。

https://clarity.kosgis.com/blog/clarity-custom-tags

設定を確認しておく

Clarity の「設定」で、以下をチェックしておくのがオススメです。

  • Google アナリティクスとの連携
    GA4 のデータで絞り込めるまでには至っていませんが、基本的な指標を確認できるので設定しておきましょう。
  • マスク設定
    フォームの入力内容は自動的にマスクされますが、確認画面やサンクスページなどで個人情報が含まれる可能性のある要素には、必ずマスク設定を行いましょう。
  • IPブロック
    関係者のアクセスデータを除外するために、IPアドレスをブロックします。IPアドレス以外のブロック方法を検討する余地もあるんですけどね。
  • Chromeアドオン「Clarity Live」
    Clarity の動作確認や簡易的な分析に役立ちます。入れておいて損はないかな、くらい。

Microsoft Clarity に関するよくある質問

Microsoft Clarity は今後も無料で使えますか?

公式に、無料であると公言されています。 Microsoftは、収集したユーザー行動データを匿名化し、AIの開発やサービス改善に活用することで無料提供を実現しています。もちろん現時点なので、AI活用に目処が立ったなどの理由で、将来的に有料になる可能性は否定できません。

Microsoft は、ユーザーの行動に関する大量の匿名データを処理して、Microsoft の多くの製品とサービスを強化する分析情報を取得し、機械学習モデルを改善しています。Clarity は、Microsoft がこの重要なデータを収集する方法のうちの 1 つなので、無料で利用できるようになりました。

無料の理由 – 価格 – Clarity より

日本語で使えますか?

はい、ほとんどの機能が日本語化されています。 ただし、「ファネル」が「フィルター」に訳されているなど、翻訳が不自然な箇所もあるため、正確出ない場合があります。違和感があったら、英語表示に切り替えて確認することを推奨します。

初期設定でやってしまいがちなミスはありますか?

関係者のアクセスデータ除外とマスク設定は盲点になりやすいかもしれません。特にマスク設定は、どの要素をマスクするかを明確に設定する必要があります。

なお、初期設定とは異なりますが、成果を考えずにツールを使ってしまいがちな、手段が目的化している事に気づかないことは多いようです。

Microsoft Clarity を導入することで、ウェブサイトが重くなりませんか?

公式回答としては「いいえ」です。個人的に PageSpeed Insights で計測した際にも、大きな負荷をかけている様子はありませんでした。

No, not at all. Visitors to your site notice no change in site speed or performance. The Clarity JavaScript is asynchronous. It doesn’t affect how quickly a website loads.
訳:いいえ、まったく影響はありません。サイト訪問者はサイトの速度やパフォーマンスの変化に気づきません。Clarity JavaScript は非同期です。Web サイトの読み込み速度には影響しません。

Will Clarity reduce my site’s performance? – Frequently asked questions | Microsoft Learn

Microsoft Clarity で収集されたデータの保持期間は?

30日間とされています。アカウント数やトラフィック量などの上限はありません。ただし、お気に入りのレコーディングは最大13ヶ月保持されます。

The data is retained for the webmaster’s consumption up to 30 days from the time of recording.
訳:データは記録時から最大 30 日間、ウェブマスターが使用できるように保存されます。

How long can web admins access their Clarity data? – Frequently asked questions | Microsoft Learn

マスクされたデータはどのように扱われるのですか? GDPR、CCPAへの準拠は?

マスクされたデータは Microsoft に送信されませんが、Copilot がどのように扱うのかは検証の余地があると考えています。GDPR や CCPA には準拠しているとの記載はありますので、詳細は Microsoft 社のプライバシーポリシーを参照してください。

Is Clarity GDPR compliant?
Clarity is GDPR-compliant as a data controller. For more information, see the Microsoft Privacy Statement.

How does Clarity comply with California Consumer Privacy Act (CCPA)?
Clarity processes data in compliance with the CCPA. For more information, see Microsoft Privacy Statement.

Privacy – Frequently asked questions | Microsoft Learn

クリックヒートマップでモバイル表示に切り替えてもパソコンのビューが出てしまうことがあります。なお、レスポンシブデザインのサイトです。

レスポンシブデザインが関わっているとは思いますが、私ならユーザーIDでフィルタリングして、そのユーザーの意図を探ります。同業者や関係者の可能性もあるため、成果につながらなければスルーしても良いのではないでしょうか。

明らかにバグだと思われたら、Microsoft Clarity の Github に Issue として申し立ててみても良いかもしれません。

ユーザーIDはブラウザ別に発行されるのですか?同じスマホの Safari と Chrome で見た場合、別ユーザーと判別されますか?

そうですね、Microsoft Clarity はユーザーを Cookie で判断しているようなので、ブラウザ別になります。パソコンでも、通常のウインドウとシークレットウインドウでアクセスすると、別ユーザーとして判別されます。

ですので、クロスデバイスで追いたいのなら GA4 などと同様に、ログインしたユーザーを判別できるIDをカスタムタグに設定することで同じユーザーの行動を追いやすくなります。 ただし、ユーザーIDは個人情報に近いため、適切な取り扱いが必要だということをお忘れなく。

モバイル画面のヒートマップでハンバーガーメニューが開きっぱなしで表示されている時があるのですが、メニューを閉じた状態のヒートマップを見る方法はありますか?

ヒートマップ画面右上の「スクリーンショットを変更する」ボタンをクリックし、メニューを閉じた状態のスクリーンショットを選択することで、該当のヒートマップを確認できます。 データ数が少ない場合は、期間を30日間に延長してみてください。

Microsoft Clarity 勉強会の今後の予定

当初は、勉強内の内容をそのまま YouTube に掲載できれば良いなと思っていたのですが、想像以上にパソコンが追いつかないことがわかったことで、動画は撮り直しています。同様の方法で続けるのは再考の余地がありますが、テーマとしては以下の内容で行っていく予定です。

Microsoft Clarity 勉強会の今後のテーマ

Microsoft Clarity はウェブサイトに来てくれた方をファンにするためのヒントを得られるツールです。もっと活用したい事業主や法人、またはクライアントに提案したい企業の担当者さん向けのサポートを行っています。「わからないことがわからない」という方でも、ご安心ください。

\ 単発相談からパートナー契約まで /

]]>
新潟&静岡 WordPress Meetup の開催レポート #wpmeetup https://clarity.kosgis.com/blog/wordpress-meetup-240610/ Tue, 11 Jun 2024 22:16:59 +0000 https://clarity.kosgis.com/?p=544

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。今日は WordPress のネタです。 WordPress は特定の企業がつくったものではなく、コミュニティでつくられているもので […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。今日は WordPress のネタです。

WordPress は特定の企業がつくったものではなく、コミュニティでつくられているものです。そのコミュニティは世界中にあり、日本にも28のグループ(2024年6月現在)があります

このグループごとのコミュニティイベントを「WordPress Meetup」と呼んでいるのですが、割とノリで開催されることが多いのですよね。内容は、セミナーっぽい勉強会や手を動かしてみるハンズオン(ワークショップ)がほとんどですが、なんでも質問会やもくもく会、フォトウォークやみんなで美味しいものを食べるなど、多岐にわたります。だいたい誰かが「これやってみたいんだけど」と手を挙げて開催されます。

ちなみに私(コスギ)は新潟のオーガナイザー(世話人)でして、今回は静岡のオーガナイザーの遠藤さん(以下、たぬきさん)に「WordPress の静的化」をテーマにハンズオンをしてもらいました。

WordPress を静的化するのは難しくない

たぬきさん曰く、「別に大したことはしていない、プラグインを入れるだけだからカンタンだよ」とのこと。「その “カンタン” が知りたいんだよー!!」ってことで始まりました。思ったより人数が多かったので、自己紹介をチャットで送っていただいたのを読み上げて、ハンズオンスタート。スライドも参考にどうぞ(手を動かすまでのことは記載されています)。

https://www.docswell.com/s/tanuki-wp/Z38RQY-2024-06-10-150719

静的化するための流れとやったこと

具体的なことが一切わからなかったのですが、今回、やってみてよくわかりました!

STEP
公開用の環境とは別に、開発用の環境を作る

ローカル環境でも良いのですが、私はエックスサーバーにサブドメインを取って開発環境をつくりました。たぬきさんと同じ構成です。

STEP
開発用の環境に、WordPress を構築する

今回は、この Microsoft Clarity 研究所のブログを静的化してしまおうと思ったので、本番環境を All-in-One WP Migration and Backup で Dropbox にエクスポート(有償アドオン)し、開発用環境でインポートしました。

開発用環境には Basic 認証も設定してあります。IP制限もできるとベストですかね。

この時点で、公開環境のバックアップができていますが、同じサーバー内だとバックアップも消えてしまうので、Zip ファイルとしてダウンロードしておいたり、Dropbox や Google ドライブなど別の場所に保管しておくことを強くオススメします。何かあっても復旧できるようにしておくの、だいじ。

STEP
開発用の WordPress に Staatic をインストール

静的化用のプラグインにはいくつか種類がありますが、今回は Staatic を使いました。全部英語なので、日本人にとって心理的ハードルが高いかもしれませんが、そんなに難しくはないです。プラグインの検索で出てくるので、インストールして有効化しましょう。

https://ja.wordpress.org/plugins/staatic
STEP
Staatic で設定し、Publish(公開)

ここの設定を間違うと公開中の別のサイトに影響してしまうため、慎重に行ってください。怖かったら、関連サイトのバックアップを外部に持っておきましょう。私みたいになっちゃうよ!\(^o^)/

Staatic の Build で公開用のサイトのURLを設定
Build で公開URLを
Staatic の Deployment で公開先のルートディレクトリを設定
Deployment でディレクトリを
開発環境に Basic 認証をかけているので、Advanced の設定をしておく
適宜 Advanced 設定を

特に、Deployment Method で Local Directory を選ぶと、自分の契約しているレンタルサーバーに関連する箇所に影響するため、「Target Directory には公開先のルートディレクトリを設定する」と聞いてもわからない人は、わかる人に頼んだほうが良いでしょう。余談に記載しましたが、私はやらかしました/(^o^)\

設定が済んだら、「Publications」→[Publish now]で公開されます。確認のアラートは出ません。

STEP
公開環境がまるっと、静的化された WordPress に置き換わって公開完了

公開環境を確認すると、静的化されたサイトに置き換わっているはずです。ファイルマネージャーなどでも確認してみると、WordPress で使用するPHP類がないことがわかります。ただ、画像などは wp-content ディレクトリの中に入っているので、WordPress の管理機能だけを失ったサイトってことになります。

Deployment Method で 「Zipfile」を選ぶと、静的化されたサイトを ZIP ファイルとしてダウンロードできるので、公開する前に構成が気になる方は確認してみてください。

また、WordPress 側のパーマリンク設定によっては、URLが「/archive/?p=XXX」となっている場合もあるかと思います。その場合、HTML化したら(当然)動かないので、/archive/XXX/index.html というディレクトリ構造にすべて変わっています。内部リンクもそのようになるみたいですね。

静的化して、PSIは変わった?

PageSpeed Insights(PSI)で、ページの表示速度などをチェックできるのですが、ビフォーアフターはこんな感じです。デスクトップはもともと悪くないので、モバイルの方です。

ビフォー

アフター

その他の指標も改善していますが、特に Speed Index が大幅に改善しました!つまり、アクセスしたらすぐに表示されやすくなったってことですね。あとは画像、CSS、JavaScript を圧縮したりなどの改善が考えられますが、個人的にはこれで十分かなと思います。

静的化の際に気をつけること

PHP のできることと JavaScript のできることの違いがわかっていれば、静的化のための条件はだいたいわかると思います。つまり、PHP で動的に変更するコンテンツには注意が必要です。以下のようなものが要件に入っていたら要注意。

  • お問い合わせや資料請求などのフォーム
  • サイト内検索フォーム
  • ログインが必要な会員機能
  • 管理者のログイン状況で出し分けているコンテンツ
  • アクセスごとに変わるランダムコンテンツ
  • リアルタイムでPVランキングを出すコンテンツ
  • 定期的に裏で AJAX を読み込んでいるコンテンツ
  • GET パラメータを使ったパーマリンク(?p=XXX など)
  • PHP で稼働するリダイレクト など

これらはプラグインで対応していることが多いので、「静的化したらこのプラグイン機能、使えないじゃん!」ってことはよくあると思います。だから、ある程度想定していても、実際にやってみないとわからないことは多いのですよね。

こういった難しさ……というか、「見えないメンドクサさ」みたいなものはありますが、企業サイトやブログなどのシンプルな構成なら難しくはないだろうなという印象です。それどころか、条件が合うならやらない手はないかもしれないと思ったほど。

当然、なんでもかんでも静的化すれば良いというものでもありません。

WordPress 静的化のメリット・デメリット

表示速度向上のメリットは、上述のとおりとして。それ以外に私が感じた部分です。

メリット①:セキュリティ的に安心できる

WordPress を使い慣れていると、WordPress じゃなくてもいいサイトに WordPress を入れて、メンテナンスできずに放置し、いつの間にか乗っ取られている……みたいなことは少なくありません。

WordPress を使い続けるなら、WordPress そのもの(コア)や、プラグインやテーマの更新はもちろん、データベースやPHPも最新版に更新していくメンテナンスが必須なんですが、

  • デザインが崩れかねなくて、でもステージング環境を用意してメンテする予算もなくて……
  • 制作会社に作ってもらったけど、サブスクを継続する予算がなくなったから……

なんて理由で更新されない → 脆弱性を突かれてインシデントに、みたいなことは日常茶飯事です。こういう背景があるので「WordPress はセキュリティ的に問題があるから」と言われることが多いですが、世界中でたくさんの人に使われていて狙われやすいってだけなんですよ!(力説)

ですから、更新頻度が低くて危険にさらされるリスクが高いのなら、

静的化する → 公開サイトには WordPress の管理機能がなくなる → 悪さされない!

ということができます。もちろん、開発環境は外部から侵入されないローカル環境に置いたり、別の開発用環境のセキュリティは高めておく必要があります。セキュリティ管理の対象を集めておくと、管理しやすいのではないでしょうか。

メリット②:WordPress を静的サイト構築ツールとして使える

「更新情報は note と SNS でやってるから、存在証明としてのウェブサイトがほしい、更新はそんなにしない」というニーズは、結構あります。自前でブログを持つ前から発信している方に多い印象なので、特に最近は増えているのではないでしょうか。

公開サイトをメンテナンスする必要がないため、「更新する際にはお申し付けください」として、静的化したものだけを納品することもできますね。当然、説明と合意と契約を交わす必要があるので、静止画を納品したら「PSDの著作権もこっちにあるんでしょ?納品されないのはおかしい」と言われるような事案と同じ轍を踏まないようにしておきましょう。そもそも「更新頻度が低い」って、月1なんでしょうか?年1なんでしょうか?だいぶ違いますし、状況が変わることもありますもんね。

開発環境が離れていることで、オリジナルテーマ論争にも終止符を打てます。つまり、デザインを優先させたことでプラグインなどの更新を滞らせることになったとしても、公開環境は HTML や画像、CSSなどの静的化された環境ですから、更新せずに WordPress を使い続けることはできます。

制作方法が変わることでメンテナンス契約を見直すこともできますから、制作会社なら、このメリットは結構大きいのではないでしょうか。公開環境のメンテ工数と開発環境の保持工数のプランを出すのもアリですよね……まあ、オトナの事情って色々あるので……

デメリット:手放しで対応できるわけではない

プラグインを入れて設定して公開すれば静的化できてしまうため、やっていることは非常にシンプルです。ただ、設定を一歩間違うと、公開している他のサイトを書き換えてしまいかねません。そこで復旧できればまだしも、下手すりゃ損害賠償を求められる可能性はゼロではありません。

また、実際に静的化した際、プラグインが稼働しているかどうかをチェックする必要もあります。フォームなどを自前で持てないのもそうですし、開発者用ツールでネットワークを確認し、一定の間隔でPHPにアクセスするような機能も使えません。

静的化して得られる恩恵は大きいですが、必要な機能とのバランスを取る必要があります。PHPで動くツールを外部サービスに頼ってしまうのも、メンテナンスを軽減させるために良い方法だと思うのもひとつです。

なんでもかんでも静的化すれば良いというものでもないですが、静的化の手段を持っておくと、提案の幅が広がることは間違いないですね。

余談

実はやらかしてました

私は Meetup 中に、チャットを見ながらみなさんの反応を見つつ、実際にサブドメインを足したり、開発用環境をつくったり、プラグインを設定したりして、静的化の流れを一通りやってたんですよね。もちろん、バックアップも取って。

そこで何を思ったか「Target Directory」にこのブログではなく、もうひとつの公式サイト(会社用)のパスをいれてしまっていたんです。だから、「お、こっちのブログなら簡単に静的化できた!……けど、管理バーが表示されるのは、まだキャッシュが残っているせいかな?」と、楽観的に構えていました。

そして夕方、自分の会社サイトにアクセスしたら大惨事。ヒュッと血の気が引いて、レンタルサーバーのバックアップから復旧することにしました。前日、何もしてなくてよかった……。

慌てたせいで2回ほど「バックアップの取得」をしてしまっていましたが、「バックアップから復旧」することで事なきを得ました。当然、つくったサブドメイン用の環境は作り直しですが、データベースは残っていましたし、何よりこっちのブログは Migration で Dropbox にバックアップを取っていたのですぐに復旧できました。

そしてサクサクと開発用環境をつくりなおし、今度はパスを間違えることなく、無事に静的化できました。自分のサイトで失敗しておくのは経験になります……。バックアップは定期的に外部に持っておくのがオススメデスヨー

今回の Meetup は30分くらいではじまった

ちなみに、今回の新潟&静岡合同 WordPress Meetup は、こんなノリで始まりました。13:52に声をかけて、14:35にはイベント立ってます。

お互いにフッ軽すぎて「わたしたち、ひまじん……?」と思ってて、当初、「月曜日の午後だし、5人くらいくればいいほうだろう」と思っていたのに、フタを開けたら20人くらいの参加応募がありましてね。テーマが良いとこうなります。

たぬきさんに質問するとなんでも打ち返してくれるので、それも良いテンポで楽しかったです。やっぱり課題感を持っていた方が集まったおかげで、質問もポコポコ出ていたのもとても良き。たぬきだけに。

この日は金曜日から連続で各地域で開催されていたので、お近くの地域でもやっているかもしれません。オンラインでも開催しているので、まだ Meetup に参加したことのない方はぜひチェックしてみてください。@Toro_Unit さんが作ってくれた国内の WordPress Meetup 開催マップがすごくわかりやすいです!

WordPress Meetup Map
]]>
Microsoft Clarity のカスタムタグの使い方とオススメ指標 https://clarity.kosgis.com/blog/clarity-custom-tags/ Fri, 07 Jun 2024 14:03:26 +0000 https://clarity.kosgis.com/?p=477

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 クラリティを使っていると、「コレが取れたらいいのにな〜……」と思うこともありますよね。そんなときは「カスタムタグ」を使って、デフォ […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。

クラリティを使っていると、「コレが取れたらいいのにな〜……」と思うこともありますよね。そんなときは「カスタムタグ」を使って、デフォルト指標にはないデータを取得しましょう。

ということで今回は Google タグマネージャー(GTM)を扱える、中級以上の方向けです。

まあ……サクッとデータレイヤーに設定するだけで終わるので、すでにGTMでインストール済みでカスタムタグを使いたいだけなら、カスタムHTMLでデータレイヤーを直接ゴニョゴニョするのが地味に早いかもしれません。

クラリティをGTMで導入しているなら、公式が提供しているタグを利用している方が多いと思いますが、APIを簡単に参照できるタグがあります。公式ブログでカスタムフィルターを簡単に活用するために紹介されていた、非公式のものなんですけど(こういうノリ、MSさんにしてはオープンソースっぽさある)。APIに関する公式ドキュメントは以下なので、だいたいコレを扱えると思っておくと良きですね。

https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-api

Luratic Microsoft Clarity でカスタムタグを設定しよう

では、早速カスタムタグを設定!……と言いたいところですが、まずはカスタムするための中身を用意してから設定しましょう。鍋があっても素材がなければ、料理できませんからね。

STEP

使いたい変数をつくっておく

ページタイトルを取得する変数
JavaScriptで色々取得できます

今回はカスタムタグに「ページのタイトル」を使いたいのですが、GTMの組み込み変数にはありません。

そこで、ユーザー定義変数「Page Title」をつくっておきます。「Javascript 変数」を選んで、document.titleって入れておくだけ。

こうしておくと、{{Page Title}}と設定するだけでページのタイトルを取得できます。

GTMの組み込み変数には色々あるので、先に眺めておくといいですよ。

STEP

Microsoft Clarity のタグ(luratic)を設定する

GTM→タグ→検索
名前が短いほうです

Google タグマネージャーのタグを追加する際に、テンプレートギャラリーから「Microsoft Clarity」と検索すると、2つ表示されます。

Official がついておらず、提供元が luratic になっているものを選びましょう。一瞬、こっちが公式だと思っちゃうくらいの存在感。

3つの権限を求められるので、進めていきます。

STEP

カスタムタグにページタイトルを設定する

GTMでMicrosoft Clarityを設定した画面
モザイクの場所はプロジェクトIDです

タグの設定を完了させましょう。クラリティの Project Id を入れるだけでも動きますが、Add Custom Tags に以下を追加します。

  • key:pageTitle(クラリティで使います)
  • value:{{Page Title}}(さっき作った変数)

※トリガーを All Pages にしておけば、ページが読み込まれるたびにクラリティのタグが発火します。私自身のデータは取りたくないため、WordPress にログインしている場合のページビューは例外としています。

設定し終えたら、[プレビュー]で確認しておきましょう。当然、自分を除外しているとデータは取れないことを加味しておいていただきたいのと、プレビューでも Microsoft Clarity はデータを取得するので、参照元に gtm-msr.appspot.com というドメインが含まれることを把握しておいてください。知らないと不審なドメインからアクセス来てる!?ってビックリするでしょうから。

この一連の流れで、カスタムタグの設定は完了です。説明はちょっと長いですが、やっていることは単純なのですぐ使えますよ。

その他のカスタムタグの実装例

汎用的にオススメできるカスタムタグをご紹介します。

Microsoft Clarity の最大の特長は、ユーザーの行動をさまざまな角度からフィルタリングできること。とはいえ、ただでさえ時間が溶けるツールですし、下手すればストーキングになりかねません。だからこそ、適切な理由をもって顧客理解を深める一助として考えてください。

CTAのクリック

CTA クリックのトリガー
特定の箇所を指定して使えます

まずはわかりやすいところから。CTA(Call To Action:コンバージョンに直結するボタンやリンクのこと)のクリックを取得して、「とりあえず興味は持ったらしい」ユーザーを絞り込むためのカスタムタグをつくってみましょう。CTAをクリックしているということは、「お店で商品を手に取ったけれど、カゴに入れるかどうかは別」みたいな心理状態です。

公式記事を参考に、カスタムタグに設定してみましょう。私のサイトはCTAに .cta-coaching という class を設定してあるので、これがクリックされたかどうかを取得するだけで済みます。

  • 「CTAがクリックされやすいページはどれか」を知りたい場合は、GA4側でCTAクリック数も測定しておき、PVで割ってCTAのクリック率を Looker Studio に渡して確認すると考えやすいです。クラリティはあくまで定性分析。

特定の項目の表示

CTA 表示トリガー

Microsoft Clarity にはアテンションヒートマップがないため、ページ中の項目がどれだけ見られているかどうかはハッキリわかりません。それを、GTMにある「Percent Visible」や「On-Screen Duration」で確認するものです。「施策としてコレを追加したから、どれだけ見られているのか確認したい」という場合にも使えます。

今回は、上記のCTAボタンがそもそも表示されているのかを「ボタンがすべて(100%)表示されているならtrue」としました。個人的には、Microsoft Clarity で分析するなら「何%見えているか」を確認するより「見てるのか・見てないのか」を確認したほうがユーザーの意図を検証しやすいと考えています。

動画の再生割合

動画の再生トリガー
上級の項目にチェックを入れるのがコツ

プロモーションや使い方などの目的はさまざまですが、ページに埋め込まれた動画を見てくれた人の興味関心度は、相当高いと思われます。そんなユーザーの行動、気にならないわけがないですよNE!

「動画を再生割合」なら、動画の長さに限らずどれくらい再生されたかを取得できます。動画用の組み込み変数「Video Percent」を利用すれば、難しくありません。実際に再生した割合ではなく進捗割合なので、飛ばし飛ばしで80%ということもあります。それでも、ある程度は参考になるのでは。

YouTube 動画そのものは YouTube アナリティクスのほうが詳細に分析できますので、Microsoft Clarity ではあくまでユーザーの行動にフォーカスして分析します。

コンテンツグループ

カスタムタグ設定
クラリティの設定に追加できます

ウェブサイトに存在するページには、それぞれ役割があるはず。それらをコンテンツグループとして取得し、活用することもできます。これはカスタム変数でデータレイヤーを取得するためのプログラムが必要になります。

最初からそこまで考えていないなら、ブログやお知らせのように記事のカテゴリを取得するところからやってみましょう。そうすると、「特定のコンテンツグループに興味を持っている人の行動」から見えてくるものがあります。

  • 「どのコンテンツグループが〇〇しやすいか」を知りたい場合は、GA4側でコンテンツカテゴリのカスタムディメンションを設定しておくと使いやすいです。絶対数や割合から考えたい場合は、定量分析のほうが得意です。

カスタムタグを設定したら

Microsoft Clarity のカスタムフィルター
除外設定はタグすべてが対象です

GTMの[プレビュー]でウェブサイトを操作しながら「Data layer」でデータを取得できていることを確認できたら、バージョンを公開して完了です。

GTMで設定できていれば、クラリティ側でやることは何もありません。30分〜2時間くらいで取得され、カスタムフィルターで使えるようになります。適切にカスタムタグを実装しておくと、ファネルにも活用できます

他にも、ログインユーザーの性別や年齢、ネットワークドメインなどをデータレイヤーに入れて取得することもできますが、個人的には、こういった属性情報で絞り込んで Microsoft Clarity を見ても、得られるものはないと考えています。やるなら Microsoft Clarity ではなく、別途安全な環境で顧客情報の分析を行ったほうが良いですし、「取得できるデータ」と「活用できるデータ」は異なることを認識しておくことを強くオススメします。

素敵なカスタムライフを(/・ω・)/

]]>
Microsoft Clarity でファネルを活用するための流れとコツ https://clarity.kosgis.com/blog/leverage-the-funnel-with-microsoft-clarity/ Tue, 04 Jun 2024 02:25:25 +0000 https://clarity.kosgis.com/?p=457

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 Microsoft Clarity は、ユーザーの行動動線をさまざまな切り口で観察できるツールなのですが、ここにファネル機能が追加 […]]]>

はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。

Microsoft Clarity は、ユーザーの行動動線をさまざまな切り口で観察できるツールなのですが、ここにファネル機能が追加されました!(2024年6月4日現在、日本語だと「フィルター」になってるんですが……)

公式ページは以下。ちなみにセッションベースなので、サイトを離れたユーザー行動(AIDMAなど)ではなく、カートのカゴ落ちやユーザー登録時のエラーなど、一連の流れをドロップアウトしていないかどうかを観察するのに適しています。

https://learn.microsoft.com/en-us/clarity/setup-and-installation/funnels
https://clarity.microsoft.com/blog/introducing-funnels-in-clarity

実際に Microsoft Clarity のファネルを設定してみよう

クラリティでファネルに設定できるのは、スマートイベントURLの指定です。すでにスマートイベントを設定している方は話が早いと思うので、初めての方はURLの指定からやってみましょう。

確認画面を含んだフォーム(問い合わせ、資料請求、メルマガ登録、会員登録、カートなど)を実装しているウェブサイトで使いやすいです。本来ならスムーズに進んでもらいたいのに、どこのステップで落ちてしまっているかどうかを確認できます。

ファネルを追加する

ダッシュボードからでも進めますが、[設定]からいつでも行けます。

STEP
[設定]からファネルアイコンのメニューに進む

[新しいフィルター(New funnel)]から進みましょう

Microsoft Clarity の上部メニューにある[設定]から進み、ファネルのアイコンのメニューから設定できます
日本語だと「フィルター」になってますが Funnels です……
STEP
「ページのアクセス数」でURLを設定

「ページのアクセス数(Page visits)」から、ユーザー動線に必要なURLを選びましょう。

以下のように、URLの途中まで同じURLが混在していることもあるため、完全一致や前方一致を間違わないように設定する必要があります。正規表現も使えます。

[新しいフィルター(ファネル)]からページのアクセス数を選択し、URLを指定して追加できます
URLを入力すると候補が表示されます
STEP
ステップを最後まで追加

URLを追加すると右側に設定されるので、ステップ名を設定しておきましょう。このステップ名には日本語を使えます

何も入力しなければURLが設定されます
STEP
最後にファネル名を設定

このファネル名は英数字のみ(スペースは使える)なので、そこだけご注意ください。

日本語はマルチバイト文字なので文字と認識されないぽい……

ダッシュボードでドロップオフを確認

Microsoft Clarity のダッシュボードに戻ると、設定したファネルを確認できます。

カエルコムニスのカートのフローができました
  • コンバージョン率(Conversion rate
    ファネルを正常に完了したセッションの割合。一般的なCVRではなく、あくまでファネルベースです。
  • 変換されたセッション(Sessions converted
    ファネルを正常に完了したセッションの数。ファネルの完了をコンバージョンとしています。日本語ェ……
  • 変換する時間の中央値(Median time to convert
    ファネルを正常に完了するまでにかかった時間の中央値。Median なので平均値ではなく中央値です。

上記の画面は、30日間に2回のCVがあった(購入された)という弊社のデータです。

ECがメインのサイトではないため、(ECとして提供している)CV数は毎月これくらいで問題ないのですが、カートに入れたにも関わらず、購入手続きに進んだ人は4割しかいないのはちょっと意外でした。なお、購入完了はこの3分の2なので、まさに「カゴ落ち」が起きている状態です。

100%にすることはまず不可能とはいえ、原因を探ってできることはやっておきたいですよね。

ここからが、クラリティの本領発揮です( ・ω・ )و✧

Microsoft Clarity でファネル落ちを絞り込んで改善する

Microsoft Clarity はダッシュボードの項目からデータを絞り込める

ダッシュボードのファネルには、それぞれ「◎% この手順に到達しました/到達しませんでした」という項目があり、セッション数も記載されています。

この項目をクリックすれば、データのフィルタリングがなされたダッシュボードを見ることができますし、ここからレコーディングやヒートマップを確認することもできます。

つまり、どうしてカゴ落ちしたのかを探索できるんです!

実際にカゴ落ちしたレコーディングを見た洞察と対策

4セッション(3ユーザー)しかいないため、2倍速でレコーディングを見て思ったことの箇条書きです。結果的に、CV数は落ちるけれど、UX的に適切な動線の整備を対策として選びました。

ユーザー①

参照元がカートになっているので、一度切れたセッションで戻ってきてるのかもしれない。実際、ユーザーIDで絞り込んでみるとセッションが2件あった(今回絞り込んだ4件のうちの2件だった)。[購入手続きに進む]ボタンが押されているところで動画が切れているので、ツール側の問題は少なからずあるかもしれない。

  • 【洞察】どうやら、1件しか買えない商品を複数購入したくてもできない状況に思えた。
  • 【対策】複数購入したい場合は、公式サイトへの動線を設定しておくと良さそう。

ユーザー②

メリデメ記事からの流入なので、興味はあるけれどしっかり知っておきたいユーザーの様子。流れも丁寧に確認している様子が見て取れた。最終的に、公式サイトのほうで購入したような動作のように見える。

  • 【洞察】流れのページはスマホだとスクロールが長すぎて読み飛ばしがち。中間にもCTAはあるものの、ユーザー②のようなニーズの相手には、一気にスクロールしたあとのラストのCTAとはニーズが異なってしまう。
  • 【対策】ラストのCTAに、購入用の動線を追加しておく。また、流れをそれぞれアコーディオンにして、必要な部分だけクリックして表示できるようにしておくと、スクロールがエコになりそう。(ただし、ユーザー②はクリック後に開きっぱなしだったので完全とはいえない)

ユーザー③

価格更新のお知らせから記事からの流入で、その後も該当ページをよく読んでいたため、価格についてしっかり知っておきたいユーザーの様子。ユーザーIDで絞り込んでみたところ、次のセッションでは購入後の使い方のページに(検索から)流入していた。

  • 【洞察】おそらく、カートに入れた際の価格を確認したあとに「安くならないなら、公式サイトで購入しよう」となったのではないかと思われる。
  • 【対策】ショップページか商品ページに、追加費用はなにもないことを記載しても良いかもしれないけれど、自分の目で確認しないと気が済まないと思うので、キャンペーン時以外は気にしなくても良さそう。

ということで、実際におこなう施策案は以下のとおり。

  • 複数購入したい方向けのメッセージを出し、公式サイトへの動線を設定する(ショップページ)
  • ラストのCTAに、購入用の動線を追加しておく(流れを説明したページ)

流れのページはスマホ環境におけるUI/UX改善の余地がありそうだけれど、また別途行動分析して改善したほうが良いと判断しました。

それほど大きな影響はないどころか誤差程度のネタですが、一連の分析行動をなぞっておくのはオススメしますよ。楽しいYO!

他にもファネルを使えそうなパターン

以下のようなファネルで使えそうです。似たようなファネルもあると思うので、実際のウェブサイトの動線を洗い出してみてくださいね。

  • 広告流入 → ダウンロードフォーム → ホワイトペーパーダウンロード
  • 新規登録 → ユーザー情報入力 → 登録完了 → ログイン
  • 記事詳細 → メルマガ登録画面 → 登録完了 → バックナンバー閲覧
  • お問い合わせ入力 → 確認画面 → 送信完了
  • イベント詳細 → 申込画面 → 確認画面 → 申込完了
  • ログインフォーム → ログインエラー → パスワード再設定 → ログイン
  • 見積入力フォーム → (必要なステップ)→ 完了

なお、上記は個人情報の入力にも関わる部分なので、レコーディングを確認するうちに、「個人情報が見えちゃってる!!」ってことを発見できるかもしれません。そんなときは、以下の記事を参考に、マスクを設定しておくことを強くオススメします。そんなに大したことはしていないけれど重要なので、知らなかったでは済まされないですよ。

https://clarity.kosgis.com/blog/microsoft-clarity-risks-and-remedies/#howto
]]>
初開催のQAアナリティクス会・参加レポート #QAAnalytics https://clarity.kosgis.com/blog/qa-analytics-meetup-vol1/ Thu, 23 May 2024 06:49:54 +0000 https://clarity.kosgis.com/?p=423

はい、ごめんください。クラリティ大好きコスギです。 Microsoft Clarity セミナーの日中、QAアナリティクスミートアップ が開催されたので、新潟(長岡)から神戸にファシリテーターとして参加してきました。つま […]]]>

はい、ごめんください。クラリティ大好きコスギです。

Microsoft Clarity セミナーの日中、QAアナリティクスミートアップ が開催されたので、新潟(長岡)から神戸にファシリテーターとして参加してきました。つまり、半分(以上)裏方です。そんな立場の振り返り記事。

そもそも「QAアナリティクス」って……?

要するに、WordPress 用のアクセス解析ツールです。このサイトを見ている方なら「アクセス解析……?」ってことはないと思いますが、ウェブサイトがうまくいってるかどうかを評価するツールですね。Google アナリティクスよりも使いやすい感じのやつ。

https://quarka.org

WordPress の公式プラグインディレクトリに登録されているため、「QAアナリティクス」と検索すると以下のように出てきますので、あとは[インストール]→[有効化]とポチポチするだけで導入できます。

QAアナリティクスのプラグイン画面

“カンタン” なアクセス解析ツールなんですが、説明文は Cookie 問題などを知っている方向けなので、ターゲットによってはちょっとわかりにくいかなという印象は拭えません。どこまで初心者向けにするのかは悩ましいところですが、個人的には、初心者向けに見せておいて上級者も納得のツール、みたいな出し方のほうがわかりやすいのではないかなあとは思います。ただ、これをやるとウェブリテラシーが低い方を相手にすることが増えてサポートが大変なのでバランスが大事ですねえ……。

ただ、うちのブログを読んでいるような方にはめっちゃオススメです。解析データを自社で持つ(ファーストパーティーデータ)ので、このあとの活用につながるんですよー

ちなみに以下から進んでもらったら、上限3,000PV が 5,000PV まで上がるフレンドライセンスで導入できます。「もう公式からQAアナリティクス入れちゃったよー」という方にも適用されるので、まだフレンド登録していない方はぜひ(/・ω・)/

Google アナリティクスと何が違うの?

今の Google アナリティクスといえば GA4 ですが、QAアナリティクスは、昔のユニバーサルアナリティクス(UA)に近いです。それ以外の違いとして、私が認識しているのは以下の4点。

  1. 解析データを Google ではなく、自社のウェブサーバーに持っている
  2. 数字だけでなく、ユーザーの行動が色でわかる(ヒートマップ)
  3. 数字だけでなく、ユーザーの行動を動画でリプレイできる
  4. 開発しているのが神戸住まいの日本人

つまり、UA と Clarity が連携されたようなツールです。サンクスページの閲覧などを目標に設定することもできますし。まあ、3つめまでは「ふーん、便利なんだな」という印象を持つことでしょう。

大きいのは4つめの「開発者が日本人」という点です。開発元は、神戸のウェブジョブズさん。つまり、ユーザーの細かい要望が届きやすいのです。QAアナリティクスはここに大きな可能性があります。

コミュニティであってセミナーにはしたくないという思い

開催前に打ち合わせランチ。ウェブジョブズさんはみんないい笑顔してるんですよね。ステキ。

ということでQAアナリティクスのミートアップは、ただのツール紹介イベントではなく「日本人がつくっている WordPress のプラグインだからこそ、一緒に解析を楽しんで役立つものにしていきたい」というコンセプトがあります。

ただし一般的なユーザーは、使い勝手が良ければ使うし、悪ければ使わないので「もっとココがこうなったらウレシイ」と声を上げる人はほとんどいません。WordPress のコミュニティで活動していると忘れがちですが、そもそも WordPress ユーザーは目的を持った建設的な対話に慣れている方が多いわけではない、という前提があるんですよね。だから基本姿勢が「情報収集」になりがち。目的がほんのりしているから、「勉強になった」で終わることも少なくありません。

普段からアクセス解析をしているような方は、アクセス解析が手段でしかないことを認識できています。目的はウェブサイトを通じたビジネスの改善だから。でも、こう考えている方は少数派です。「意外と、ホームページを改善したいと思っている方ってあまりいないのかも」とはウェブジョブズのコダマさんの弁。

それでも、今回の参加者さんからは「解析って手段でしかないのはわかってるんだけど、どうやって活かしたらいいのかはピンと来ていないから、それがツールを触るだけでわかるといいんだけどな」というニーズを強く感じられました。これは GA4 にも Clarity にも感じるものだと思います。

「ウェブサイトに訪問したユーザーの情報」に価値を感じられるかは、マーケットインの感性を持っているかどうかで決まるんじゃないかと、個人的には思います。プロダクトアウトは悪ではありませんが、バイアスにはなると考えています。ウェブコンサルティングをやっていると、こういったメンタルモデルへのアプローチをすることが多いのですが、技術課題の解決に追われてしまうこともよくある話で。

だからこそ目先の課題解決だけでなく、ユーザーの行動を見ることで、自分たちのマーケットをじっくり悩める時間がミートアップになってもいいんじゃないかなあ、とも思うのですよね。もちろん、「そんな悠長に考えてられない!」ということなら、自分たちでデータを見るより、プロにコンサルティングを依頼したほうが早いです。タイムイズマネー。マネーイズタイム。

とはいえ「ツールベンダーなんだから、サポートしてくれなきゃ困る」という思いを持つ方もいらっしゃると思います。そこをコミュニティ “だけ” で吸収するのは、私も少し違和感があるものの、基本は「WordPress を使うなら自己責任」論主義者なので、お互い対等な立場で建設的な対話ができればいいと思っています。あ、バグはすぐ調査してくれますよ。

「やっぱりこういう機能がほしいよね」と言語化できるようになれば、めっちゃいいツールになると思うんですよ。QAアナリティクスも、そういった場をつくろうとしているようですし、私はそこに共感してお手伝いしています。

実際どうだったの?

そもそもの対象者が「WordPressをお使いでウェブの活用に興味をお持ちの方」なので、「ウェブサイトの改善といっても、何をどうしたらいいのかわからない」「データをもっと活かしたい」といったニーズを持つ方々が集まりました。

車座になって自己紹介スタート

会場設営は椅子とテーブルを持ち込むところからだったので、ちょっと時間はかかりましたが……会場に入られた方は、前の方にテーブルが追いやられて、不格好な円形に並べられた椅子にギョッとしたのではないでしょうか。セミナー形式にしたくないという思いを、環境で表現した結果です。

私がオーガナイザーをつとめていたオフラインの Niigata WordPress Meetup ではたまにやっていた方式(下の写真)で、きれいなサークルに並べることで、対等な雰囲気をつくることができます。これを最初から聴講型(前を向いて数名ずつ座る感じ)に並べてしまうと、当然、気持ち的にも聴講するものだという意識が生まれます。そういうことは最初から書いておけって思いましたよね、すみません。

2019年に行っていたNiigata WordPress Meetup の一場面
こんな感じのきれいな車座になれるとベストだったんですけどね……?

最初は10名くらいかと思っていましたが実際には20名以上来られたので、2つの円に分かれて自己紹介をしあっていただきました。その後、くーすけ(QAアナリティクスのマスコットキャラクター)のぬいぐるみを投げながら質問しあっていただき、自己紹介タイムは終了。

なお、くーすけのぬいぐるみは一度も落とされることはなかった模様です。みんなありがとう。

運営課題のディスカッション

次に、1つのテーブルに4名程度座っていただき、それぞれのグループでディスカッションタイム。ウェブサイト運営で感じている課題について、自由に話していただきました。ウェブジョブズの皆さんには、それぞれのテーブルで参加者さんから出てきた話題を付箋に書いていき、あとでまとめる書記役になっていただきました。

私も書記役として入ったのですが、割とウェブの問題を解決する側の方が集まったこともあり、ウェブサイト以外の話に脱線していたこともあり(笑)、出てくる話題を片っ端から解決しつつ、話したいことを話していましたね。LINE公式アカウントとかどうなんだろうね?とか。

なお、私は突然のポンポンペインで若干離席してました……

QAアナリティクスの画面を見てみよう

先のディスカッションで得られた付箋をホワイトボードに貼って、出てきた課題から共通しそうなテーマで解析をしてもらおうかと思っていたんです。が、眺めてみたら内容があまりにもバラバラだったので、グループごとにQAアナリティクスをすでに導入している方の画面を見てもらったほうが良さそうだと判断。

ということで「トップページのデータを見て、改善案をみんなで出し合おう」というテーマで見ていただきました。

1つの画面を4人で見ているので、当初想定していたようなハンズオン形式にはなりませんでしたが、「これってどうなの?」「他に何が見れます?」と活発に質問が出されており、各テーブルのウェブジョブズの皆さんが答えるような感じになりました。私のテーブルにはちょうど中級者以上の方が集まっていたので、ディスカッションの続きをしつつでしたねー(腹痛が続いていたのでちゃんと聞けていなかったですゴメンナサイ)

そもそもネット回線が遅すぎてどうしようレベルだったので、ここはちょっと会場の再考は必要かもしれません。

振り返りタイム

各テーブルに再度くーすけのぬいぐるみを置き、話したら次の人にくーすけを回してもらいながら、今日の振り返りをしてもらいました。喋りながら両手でぬいぐるみを包み込む人、しっぽを持って振り回す人、ムニムニいじりながら話す人、などの個性が出るなあと思いながら眺めておりました。

ミートアップ全体を振り返ると、初回から伸びしろだらけですが、何かしら持ち帰っていただけたものがあったようなので一安心です。主催者側の「セミナーにはしたくない」という思いは尊重しながらも、それでもある程度のレクチャーの必要性は感じたので、今後も継続しながら模索できたら良いんじゃないかなと思っています。

めちゃくちゃレトロな喫茶店の外観なのに、ビールと唐揚げがウマいといわれたお店で懇親会

QAアナリティクスの今後

「やっぱりこういう機能がほしいよね」とみんなで言語化できるようになれば、めっちゃいいツールになる ―― それはそうだと思います。ただ、早い馬を追い求めても、自動車には敵いませんよね。QAアナリティクスは、この自動車になる可能性を秘めています。

QAアナリティクスで取得したデータはすべて、自分たちの管理しているウェブサーバーに入っています。このデータとAIを組み合わせたら、「アクセス解析データと会話できる未来」が実現するんです。つまり、わざわざデータを見て読み解く必要がなくなります。

それが、会場でちょろっとお知らせした「Brains」。ウェブサイトの規模やニーズに応じたAIが、アクセス解析データを分析してアドバイスしてくれる機能……って、すごくないです?めっちゃワクワクしますよね!!データを見ながらコンサルティングをしている私が、ずっと願っていた機能でした。ただでさえ、Microsoft Clarity の Copilot を ChatGPT に食わせたりしているくらいですし。

個人的には、マーケットインの認識を深めてくれる問いを出してくれるブレーンがいてくれると、アクセス解析データの活用をしやすくなるんじゃないかなあと思っています。結局、データを扱うのも人ですから。何より「なぜそのような情報を発信して、ユーザーを求めているのか」の答えは、提供側である人の中にしかありません

GA4 や Microsoft Clarity はベンダーが大きいので、提供される機能の意図などを読み取りながら扱うことができますが、QAアナリティクスはやっぱり、私たちで育てていける余地のあるツールだと思っています。

一緒に楽しみませんか?

とりあえず私としては、「みんなで画面を覗き込むのはしんどいから、QAアナリティクスの閲覧のみができるユーザー権限が欲しい」と伝えておきました。Google アナリティクスにも権限が細かくありましたし、これができれば各々の画面で好きなように確認できますから、ミートアップでも役立つだろうなって。次回が楽しみです!

]]>