平日金曜日の、2025年2月7日。新宿のTIME SHARINGさんにて「企業とビジネスライター商談会」が初開催されました。

先にお伝えしておくと、私はライターではありません。コンテンツマーケティングは担っていますが、情報設計とその検証・改善がメイン業務です。Open AIがDeep Reserchを発表してからは、ChatGPT Proをゴリゴリに使っています。とはいえ、ホームページ制作の一環でSEOやCROをサポートする関係上、言葉へのこだわりはありました。配置と言葉を変えるだけで、導線が光るのですよね。

要するに「ウェブに関する何でも屋」という明らかに場違いな出展者としての参加レポートとなります。結論は「企業を相手に仕事をしているライターさんなら出展して損はありません」です。

開催に至るまでの背景は、主催であるトイアンナさんが書かれていらっしゃいます。私が抱いた印象としては、「ビジネスライターの社会的認知・地位向上」という思いが大きな軸として感じられました。

出展されたライターさんのご紹介（一部・順不同）

まず、出展されたライターさん（一部）をご紹介します。とても真摯に対応していただける方ばかりです！気になるライターさんがいらしたら、お問い合わせください。

• 2025年2月7日現在の内容です。
• お名前の前にある肩書きは、私の印象からつけているケースもあります。

当日の振り返り

設営までに行ったこと

私は新潟（長岡）からの参加のため、7時すぎの新幹線で新宿へ。方向音痴なうえ、都内では Google マップが仕事しないことも多いので早めに出発したのですが、越後湯沢を過ぎてトンネルを抜けたら春でした。連日、大雪への警戒が叫ばれていたというのに、ユニクロの極暖が……暑い……！

都内のイベント会場って、入口がわかりにくいことも多いじゃないですか。なんとか目的のビルにはたどり着いたものの、「関係者以外入っちゃアカンよ」的な掲示。おそらくここしか入口はないはずだけど……と、5分ほどその近辺で右往左往しつつも、慣れた様子で入っていく方がいたので一緒に入らせていただきました。違う階の方でしたが、特に不審がられなかったので、問題なかったと信じたい……。

少し早めに到着したので、いそいそと設営していたら「逆だよね？」とツッコまれ、改めて動線に気づくくらいにはテンパっておりました。この緊張は、一日中ずっと続くことになります。暑い。

持っていったのは、チラシ100枚、A5を掲示できるスタンド、名刺、テーブルクロス、カエルのぬいぐるみ。

名刺は、瞬殺でした。「200枚用意しておいたほうがいい」と言われていたのに、残っていたのが30枚くらいだったらしく。ライターさんに挨拶して終わりだろうと思っていたら、参加者さんとも名刺交換させていただくことができ、ついには「名刺代わりに……」とチラシをお渡しするしかなくなってしまいました。200枚が多いと思うなら、100枚は必須ですね。電子名刺が流行っていますが、こういうときは紙が間違いありません。

チラシは Canva で作成し、上下3ミリの塗り足しを含めたJPG（216mm×303mm）を3倍サイズにして保存し、プリントパックの画像入稿を利用しました。この方法は初めてだったので心配はあったものの、すんなり工程が進んで問題なく使えるレベルのものをいただきました。プリントパックさん、いつもありがとうございます！

このチラシのスタンドがなくてですね……ダイソーのカタログスタンド A4 3段（550円）の評判はいいらしいのですが、売っておらず。Can★Do の NEW カタログスタンド A4（110円）はあとから知りました。やっぱり、立てておけると遠くからでも見てもらえるので便利です。他にも、目立つ工夫をされている方は多かったので、きっと出展された方のレポート記事で、次回開催に初参加したい方向けの知見が集まることでしょう……！

ちなみにチラシは、5m離れていてもキャッチコピーが目に入ってくるのがわかりやすいと思っています。私は紙モノが得意というわけではないのですが、セミナーのスライドと似たようなものですよね。おかげで、AIを活用したライティングについて興味を持っていただけました。

それと、皆さんのチラシを見て、コレもっと知りたいなと思ったときに気づいたのですが……QRコードだけだと、パソコンで見たくても見られません／(^o^)＼ そもそも、ブース巡りされている方は紙でチェックしながらまわっておられたので、アナログ最強ですね。検索キーワードを載せておくのは、まだまだ有効かもしれません。

早々に自分の価値に見切りをつけることにした

今回、どんな参加者さんが来られるのかはまったく想像できておらず、「ライターを求める企業の方が来られるんだろうな」という程度の浅い認識でした。実際、「ライターを求める企業の方」ではあったのですが、代理店や編集者、制作業者の方がほとんど……全員だったような？？

私は他のライターさんとの差別化を狙って「AIを活用して効率的にライティングをおこない、改善しましょう」にしたのですが、盛大にコケました。コンテンツを育てる方法なので、とにかく量を増やしたい要望にはマッチしません。開始30分後には、一番の目的だった「ライターさん全員のことを知ってつながる」に振り切りました。

クライアントとペルソナの共通認識をつくるためのシンプルなプログラムを用意して、そのペルソナをAIで動かすためのプロトタイプをつくりました。興味を持たれたらご連絡ください。

自社のリソースを言語化して一緒に盛り上げてほしい企業さんが来られていたら、また違っていたのかもしれませんが、そういった企業にアプローチするのが代理店ですし、地方と違って直接商談するなんてことはないのでしょうね。中小企業なら直接取引したほうが、全力で応えられるライターさんがたくさんおられたので、もったいないなあ……と、無邪気に考えていました。つぶされてきたライターさんの話も伺うことができたのでなおさら……

それでも、しっかりと商談されているライターさんの姿を拝見できたことで、改めて「誰にどんな価値を、どのように届けるのか」という問いを突きつけられたイベントでもありました。

今回はライター業界でしたが、これは制作業者にもデザイナーにもフォトグラファーにもコンサルタントにも、「業界」と称されるものすべてに関わる話なんですよね。自分は何者かって話。おかげでアイデンティティが崩壊しかけ、数日間鬱状態になるほどに……。（夫には「なんかすごいところに行くといつもそうなるよね」と言われました）

なお、次の日にはライターさんからいただいた資料を拝見し、一人ひとりの紹介文をつくって送って了承いただいたものが冒頭の紹介文ですが、（スルーしてもらえれば何もしないつもりだったので）返信期限を短く設定したことで急かしてしまい、数字の間違いや転記ミスも多く、申し訳ないことをしてしまったと反省しています。それでも、快諾していただいた方、主催のトイアンナさん、ありがとうございました。皆さんのフットワークの軽さも、見習わせていただきます。

ビジネスライターなら、参加して損はありません

あとは、ブックライターの方からお話を伺えたことで、ずっと検討中だったクラリティの本をKindleで出してみてもいいなと思えました。これはMicrosoft社の機能追加状況を伺いつつ、6月までにはやれたらいいなあ。

次回以降も人気のイベントになることが想定されます。ビジネスライターといっても、本当にさまざまな方が出展されていたのでとても刺激的な一日でした。同業者の方々とつながれる機会も貴重だと思いますし、皆さんが配布されていたチラシには費用も掲載されているので、それらを知ることができる機会もなかなかないのでは……？

3月末で5年目を迎えるため、2月中にMVVを固め直そうとしていたところだったので、私自身「何をするか・しないか」を改めて深く深く考えさせられる、転換期を迎えるほどの機会となりました。

正直、私のような異物は、初開催ならではの手探り感のおかげで受け入れられたようなものです。今後の参加は見送りますが、きっとまた素敵なライターさんが集まることでしょう。寛大に迎えていただき、本当にありがとうございました。次回以降の盛会もお祈りしております。

ごめんください。コスギです。

SWELL で有名な了さんのプラグイン「SEO SIMPLE PACK」を拡張し、サイトマップを自動生成するためのプラグインを開発しました。

公式プラグインにはなっていないので、使えそうなら使ってください、という感じ。案件として使っているので、それなりにメンテはします。

作ろうと思ったきっかけ

SEO SIMPLE PACK は国産のシンプルなSEOプラグインとして、使いやすさが魅力です。しかし、サイトマップ機能は備わっておらず、別途プラグインを入れるか自前で生成しないといけませんでした。

また、「noindex」設定を反映させた柔軟なサイトマップが欲しかったため、SEO SIMPLE PACK で noindex にした投稿やタクソノミーをサイトマップに含めないようにして、自動的にアップデートされるシンプルなサイトマップを手軽に導入できる仕組みが必要でした。

そこで、SEO SIMPLE PACK の noindex 設定をそのまま利用しつつ、WordPress の「パーマリンク構造」や「投稿タイプ」「タクソノミー」などに応じて自動生成するサイトマッププラグインを作成しました。

プラグインの主な特徴

noindex 設定を尊重

• 「SEO SIMPLE PACK」で noindex が設定された投稿やタクソノミーを、自動的にサイトマップから除外します。
• カスタム投稿タイプやタームごとの noindex 設定にも対応します。

サイトマップの構成をシンプル化

• /sitemap.xml へのアクセスでサイトマップインデックスを生成し、そこから各年別・投稿タイプ別・タクソノミー別のサイトマップファイルへリンク。
• 大規模サイトにも耐えられるように年別のURLを分割していますが、余計なオプションは極力排除。

軽量＆拡張しやすいコード構成

• WordPress のフックを使って動的にXMLを吐き出すだけなので、速度への影響は最小限。
• クラスごとに処理を分割しているため、開発者が機能を差し替え・拡張しやすくなっています。

SEO SIMPLE PACK 本体との連携

• 管理画面の「設定」→「Sitemap Settings」を開くと、
  • noindex が適用されている投稿やタームの一覧
  • 投稿タイプ・タクソノミーごとの index/noindex 設定状況を確認でき、SEO SIMPLE PACK本体の該当設定画面へジャンプできます。

使い方

ダウンロード

前提条件

• WordPress 5.0以上（PHP 7.4以上推奨）
• 「SEO SIMPLE PACK」プラグインが有効化済みであること

インストール

• 管理画面の「プラグイン」の「新規追加」画面で zip ファイルをアップロード
• 管理画面の「プラグイン」から「SEO SIMPLE PACK Sitemap」を有効化

基本的な設定

• 「設定」→「Sitemap Settings」にアクセスすると、投稿タイプやタクソノミーの index/noindex 状況が一覧表示されます。
• noindex を切り替えたい場合は、各リンクからSEO SIMPLE PACKの「一般設定」ページへ飛び、投稿タイプ/タクソノミーのインデックスをON/OFFしてください。

サイトマップの確認

• /sitemap.xmlにアクセスするとサイトマップインデックスが表示されます。
• 投稿、固定ページ、年別投稿、カテゴリー、タグなど、noindexじゃないものだけ自動的に反映されます。

今後の展望

• ページネーション対応
  大規模サイトでは1年分の投稿でも多い場合があるため、サイトマップをさらに細分化（月別など）できるようにしたいですね。5万件の限度もありますし。
• 翻訳対応
  シンプルなので問題ないとは思うのですが、英語のみなので多言語対応できたらと思っています。
• 重要度と更新頻度対応
  サイトマップの重要度と更新頻度には対応していません。それらが必要なら他のプラグインでもいいかなと思っているのですが、noindex を引き継げるのが良いので検討します。
• 公式プラグインへの登録
  これは憧れみたいなものです。

参考リンク

• SEO SIMPLE PACK (WordPress.org)
• WordPress Codex: Sitemaps

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

「Microsoft Clarity って、スクロールマップはあるけどアテンションマップないんだよね……」と常々思っていましたが、2025年1月、ついにアテンションマップが搭載されました！！待ってた！待ってたよ！！

「（なんか盛り上がってるけど）アテンションマップって何？」「便利そうなのはわかったけど、どうやって活用したらいいの？」と思う方向けに解説した記事です。

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

Microsoft Clarity のアテンションマップとは？

Microsoft Clarity は無料で使えるユーザー行動分析ツールで、ヒートマップ機能やレコーディング機能などが強みのサービスですが、ついにアテンションマップまで搭載されるようになりました。

アテンションマップを簡単にいうと「ページを見ている人が、画面上のどこを注視しているかを推定できるツール」です。これまでもクリックやスクロールなどのヒートマップはありましたが、どこに注目が集まっているかを手軽にチェックできるのがアテンションマップです。違いもあとで説明しますね。

アテンションマップでわかること

Microsoft Clarity のヒートマップ機能から「注意」を選ぶと確認できます。和訳ｪ……

• 重要なコンテンツが注目されているか
  「ここはスクロールを止めてほしい！」という推しポイントが赤い（注視度が高い部分）かどうかを確認できます。
• （逆に）注目が集まっていない部分はどこか
  青いエリア（注視度が低い）は「画面が止まっていない」だけなので、その理由を考えましょう。スムーズに読めている証拠ともいえます、が……？
• ボタンやバナーが見られているのにクリックされない要素
  スクロールマップやクリックマップと掛け合わせると、根拠や分析に深みが出ます。現実的な問題に向き合うことになります。

スクロールマップとアテンションマップの違い

Clarity にはもともとスクロールマップの機能があり、「ページのどこまでユーザーがスクロールしているか」がわかりました。ただし、スクロール率が高いからと言って「本当にそのコンテンツを読んでくれているかどうか」は不明だったんですよね。

スクロールマップは「移動の情報」、アテンションマップは「視線の情報」と捉えるとわかりやすいです。Clarity のヒートマップとしてもうひとつあるクリックマップは「クリックの情報」です。これはそのままですね。ヒートマップの活用に関してはこちらもどうぞ。

アテンションマップで見落としがちな注意点

ということで、アテンションマップを利用する際の注意点です。特に以下の3つは活用のポイントにもなりますので、押さえておきましょう。

注視しているとは限らない

アテンションマップは「ユーザーが該当箇所でブラウザを止めていた時間」をベースにしています。そのため、他タブで作業している間に画面が放置されている場合でも赤く表示されることがあり、実際に読んでいない可能性を含む点に留意が必要です。

クリックマップも合わせ、ヒートマップでわかることをコンビニに例えると、以下のような違いがあります。

アテンションマップを「コンビニの店内で立ち止まっている」と考えたら、商品を見ずにスマホを見ていることもありますよね。実際の画面でも、似たようなことが起きていますから、ユーザーの意図を捉えましょう。

赤くないエリアを見逃さない

赤いエリア（注目度が高い部分）にばかり目を奪われがちですが、実は青色や緑色の注目されていないエリアこそ重要かもしれません。「これは読んでほしい情報なのに読まれていない」「配置やデザインに問題があるかも」といった発見につながります。

行動データ（クリックやスクロール）との関連を確認

アテンションマップはあくまで「見ているかもしれない」だけであり、実際にクリックや購入、問い合わせといった行動につながっているかどうかは別問題です。アテンションマップ上で赤くなっているのにクリック率が低い部分や、逆に注目度が低くても成果を上げている要素がないかを合わせて検証しましょう。

アテンションマップの目的別活用チェックポイント

アテンションマップを活用しやすい目的ごとの活用パターンをご紹介します。単赤い部分を探すだけのツールではなく、「なぜそこが注目されている（されていない）のか」を、他の指標と合わせて考えることで得られるものが大きいのですよね。

ページの離脱率を下げたい

「このページでサイトを去ってしまうのをなんとかしたい」と思うことは多いです。サンクスページでの離脱はともかく、重要なページの離脱率が高いのは悩ましいですよね。スクロールマップを見て「ファーストビューを見ただけで帰ってしまう」「中盤で急に離脱が増える原因が知りたい」といった声も、サイト運営者あるあるではないでしょうか。特に、広告使ってファーストビューで離脱しているのを見るのは、叫びたくなるやつ……

スクロールマップもアテンションマップもファーストビューに集中しているなら、ユーザーの期待とのズレが大きいことがほとんどです。こういった現実を突きつけられるのも、Microsoft Clarity の良さであり痛さであり……

CTA（ボタン）のクリック率を上げたい

「ボタンを置いているのに、クリックしてもらえない」という悩みもあるあるです。「購入はこちら」「お問い合わせ」などがスルーされているのは、悲しいですよね……。

ウェブサイト上に「お問い合わせ」などざっくりしたコンバージョンポイントしかない場合は、「メルマガ登録」「友だち登録（LINE）」「SNSをフォロー」「資料請求」など、もっと手前のステップを新たにつくることが効果的な場合もあります。ユーザーの熱量の見極めも大切ですね。

コンテンツの配置を最適化して、読みやすさを向上させたい

私のように、つい情報量が多くなりがちなサイト運営者は、「本当に読まれているかな……というか、途中で疲れ果てていないかな……」と気になることがあります。渾身のネタを入れても「スベってないかな……」と気になるのも人の常。

人は「見たいものだけ見る」生き物なので、情報量は多いに越したことはありません。ただ、多すぎて到達できない要素があるなら、改善の余地がありますよね。自分の事例を参考情報として出しているものでも、「自分語り」と判断されて読み飛ばされることも少なくない……です……

その他の改善ヒント

フォームの離脱率を下げたい

フォームでアテンションマップを活用できるケースはありますが、項目が混んでいることが多いため、そこまで具体的なヒントは得られない事が多いのではないかと思います。

むしろ、エリアマップでフォームの項目ごとにエリアを調整して、クリックやタップの状況を見極めるほうが参考になるのではないでしょうか。

ユーザーの混乱や不満ポイントを発見したい

Clarity では「使いにくさ」でいうとイライラしたクリックやデッドクリックが挙げられるのですが、これはクリックマップでわかることがほとんどです。レコーディングと合わせて確認するのがオススメです。

大切なのは、データだけを見て決めつけるのではなく、関係者（デザイナーやカスタマーサービス担当など）とのコミュニケーションに基づいて改善していきましょう。

Microsoft Clarity のアテンションマップに関するよくある質問

あなたはアクセス解析のヒートマップデータから、ビジネス上の課題を見極めて改善アドバイスをするプロです。
添付した Microsoft Clarity のヒートマップデータから、この＊＊＊＊＊（例：トップページ、サービス概要）ページの問題点と改善案をアドバイスしてください。

Microsoft Clarity のヒートマップを活かすのは、人。

アテンションヒートマップそのものは、ヒートマップツールでは割と一般的な機能なので、やっとの印象も拭えないのですが、ウレシイことです。ページ分析がはかどりますね。

Microsoft Clarity で使えるヒートマップをまとめると、以下の3つです。

特にアテンションマップは、サイト運営者の推しポイントと、実際にユーザーが見ている部分とのギャップを埋めるのに役立ちます。「見られているのに行動されない」「注目されていないから行動もない」という事実が露わになることも多く、特に制作側にとっては胃の痛い話ですが、「ホームランを打てるのはプロでも3割だから、とにかくバッターボックスに立つ」というスタンスをクライアントと共有して、改善していきましょう。

はい、ごめんください。Microsoft Clarity（クラリティ）研究所のコスギです。

少しずつ広がりつつあるこの Clarity 、「無料でヒートマップが使えて、訪問者の行動がわかる！」という価値を期待して導入した方も多いと思います。あの Windows の Microsoft 社のツールだと知ってビックリする方もいますね。

とはいえ、「うちのサイトはアクセスが少ないから、Clarity を使っても意味あるかな？」と疑問に思う方もいるでしょう。とりあえず入れた GA4 を見ても、月間セッションが100件とかね。その半分は自分のアクセスだったりすると、切ないですね。

この記事では、アクセスが少なくても Clarity を有効活用できるのか、Clarity を使っても意味がないならどうすれば良いのかをまとめました。

ついでに、集客改善の相談に乗ってくれる GPT もつくってみたので、参考にどぞー

アクセス解析のデータが少ないと、何が起きる？

Clarity に限らず、アクセス解析のデータが少ないデメリットは、以下のようなことが挙げられます。

• 一部ユーザーの行動が全体傾向に見えてしまう（データの偏り）
• 分析したいページにユーザーが来ておらず、分析できない
• レコーディング機能で確認できるセッションが極端に少ないため、一般化しづらい
• 季節性やトレンド変動の判別が難しい（外部要因に左右される）
• 問題発見から対策立案までのリードタイムが長くなる（データがたまるまで時間がかかる）

デメリットというより、もはや解析以前の問題です。無い袖は触れません。このように改善効果検証が難しい環境では、アクセス解析を行うのは危険です。

データが少ないと仮説の精度が落ちる

Microsoft Clarity のヒートマップで考えてみましょう。ページ内のクリックやスクロール動向から改善ポイントを見つけるために効果的な機能なので、これが無料で使えることにワクワクした私のような方も少なくないはず。

以下は弊社サイトの中でも、商品の購入導線として重要なページを3日間（22PV、22タップ）と30日間（249PV、203タップ）で単純比較したものです。10倍以上の差がありますね。

上記はデータ量を日数で調整しているだけなので、そもそも別の問題が起きていることもあるでしょうが、得られるデータが少ないために偶然性が高く、仮説が異なっています。これって、結構怖くないですか？

では、どれくらいのデータがあれば良いの？

たとえば、A/Bテストで「コンバージョン率が0.5ポイント程度で変化するとして、それを90〜95%の信頼度で検出したい」となると、一般的には数千〜数万のセッションが必要です。要するに、こういうこと。

• 小さな差異を検出したいほど、必要なデータ量は増える。
• 信頼度を高めたいほど、必要なサンプル数は増える。

事業規模が大きければ数％の変化によって得られるインパクトが大きいため、この2つの重要性は高まりますが、小規模サイトでは「正直、数万のセッションはちょっと……」と感じるでしょう。

あくまで目安として、サイト全体の傾向を把握するなら、数％の差異を見込んで1,000〜5,000セッション以上が妥当だと考えます。あとは信頼度の問題です。競合サイトが気になるところですが、どの市場でどのくらいのシェアを見込んでいるかによります。ニッチな市場なら、そもそも母数が少ないですからね。

そして、Clarity のようにページ単位での行動傾向を把握するなら、せめて数百PVは欲しいところ。これより低い場合、偶然性の方が高くパターンが見いだせません。つまり、集客施策に力を入れたほうが良いフェーズですね。

しっかり解析するなら、この10倍以上が必要になると考えておくとわかりやすいでしょう。また、十分なデータ量が貯まる期間で解析サイクルも変わります。

「見たいページを見る」のではなく「なんのために解析するのか」に立ち戻ると、やるべきことが見えてくるのではないでしょうか。

アクセスが少ないサイトに共通する課題を洗い出す

とはいえ「アクセスが少ないのはわかってる。だから集客が課題だと思ってるけど、どうすればいいのかわからないYO！」という方も少なくないですよね。おつかれさまです。

そもそも、アクセスが少ない原因は、以下の4つに集約できます。

たとえば、紹介で継続的に回っているスモールビジネスの場合など、④のように無理にアクセスを増やす必要がなく、そもそもアクセス解析の必要がないケースもあります。自分のビジネスに注力したほうが良いでしょう。

とはいえ、「将来のためにアクセスはあったほうがいいし……」と考えるなら、いつ、どのようにするために、どこまで目指すのか、具体的に計画して取り組まないことには始まりません。

④を選ばないのであれば、①〜③の問題に取り組む必要があります。ひとりで考えるのがしんどければ、相談してくださいね。まあ、今なら ChatGPT に教えてもらえば、かなり整理されるんじゃないでしょうか。

上記の思考プロセスに基づいて集客課題の改善相談に乗ってくれるGPTをつくってみたので、「もっとアクセスを伸ばしたいんだけどな……！」と思っている方は使ってみてください。

少ないアクセスでもできる Clarity の活用法

明らかに集客改善が最優先の場合を除けば、アクセスが少ない場合でもできることはあります。広く分析できるほどのデータ量に頼れない分、特定の行動やページをじっくり観察することでインサイトを得られるのが Clarity のよいところ。

期間を長めに設定して傾向を把握する

短い期間では、たまたま来訪したユーザー数名の行動が全体を決定づけてしまいがちです。上記の「データが少ないと仮説の精度が落ちる」でも説明している状況ですね。

Clarity の解析対象期間はデフォルトが「過去3日間」になっています。クリックヒートマップを見て「全然クリックされてない！」と判断するのは早計ですが、お金をかけて追加したものだと余計に焦ってしまいますよね。これは制作側も冷や汗かきます。

Clarity の期間を「過去7日間」や「過去30日間」に設定してみると、いかがでしょうか。日ごとのアクセス変動に惑わされず、ユーザーの行動を把握しやすくなります。

特定のページや行動にフォーカスする

全体的にアクセスが少ないウェブサイトでは、トップページから順に分析してみても、薄い情報しか得られません（そりゃそうだよね、くらいのものしかわからない）。

そこで、ビジネス上重要なページ（お問い合わせ、商品詳細、サービス説明など、コンバージョンやコンバージョンの一歩手前のページ）や、特定の行動（必要な項目へのスクロール、CTAボタンのクリックなど）について深めてみると、少ないデータからでも改善のヒントが見つけやすいです。
※コンバージョン：ウェブサイトの目的を達成すること / CTA：コンバージョンに直結する行動を喚起すること

たとえば、「ある特定のランディングページ」がコンバージョンの入口となっているなら、そのページのヒートマップやレコーディングを継続的に確認してみましょう。似たようなランディングページをほかにも作っているなら、共通点も見えてくるかもしれません。

また、「資料請求ボタン」のクリックがあれば、その行動をしているユーザーがどのエリアで滞留しているか、どの要素に注目しているかが見えてくることもあります。

ページやボタンの意図がはっきりしているほど、Clarity の分析はラクになります。

たとえば、以下は弊社の主要コンテンツを一覧できるページで、どのカテゴリが人気なのかがわかります。

また、全体的にモバイルのユーザーが多い（6割以上）ですが、ショップページにアクセスしたユーザーに絞り込んで使用デバイスを確認してみると、以下のとおり。とはいえ購入したのはモバイルユーザーなので、PCでは情報収集に留まっている印象もあります。ここは伸びしろですね〜

改善施策後の行動比較で効果検証する

少ないデータであっても、何らかの改善施策を行った前後で比較すれば「クリックが増えた」「必要なエリアまでスクロールされた」といった小さな変化を捉えられます。データがたまれば、信頼度も高くなりますよね。

たとえば、ボタンのテキストを「こちらをクリック」「リンクはこちら」「もっと見る」などを「無料で相談する」「次：◎◎のデメリット3つ」などに変更するところからでも大丈夫です。汎用的な文言になっているボタンのテキストは比較的簡単に変更できて反応も変わるのでオススメです。

また、お問い合わせフォームの上に厳選したよくある質問を追加したら、そちらをクリックされただけでなく、同様の問い合わせが減ったなど、ビジネスインパクトがあるとウレシイですよね。こういった改善はユーザーのインサイトに共感しながら動線をなぞると見えてくることもあります。

変更前と変更後の2つの期間を Clarity で比較したい場合は多いと思います。ヒートマップなら比較機能がありますがダッシュボードにはないので、今のところ、タブを並べて確認するのが便利です。変化を実感すると、やる気も出ますよね。

以下は、弊社の主要コンテンツ一覧のビフォーアフター施策とその結果（施策前 5/1〜5/31、施策後 7/1〜7/31）です。

Before

After

クリックマップは上記のような感じ。明らかにファーストビューでのクリック箇所が増えています。ハンバーガーメニューに進んでしまっていたことも軽減されました。

これですね、スクロール量を減らして回遊を効率化したため、基本的な定量データとしてはさほどインパクトのある結果にはなっていません。しいてあげるとしたら、以下の2点です。10ポイント以上の改善は大きいですよね。

• 過剰なスクロールが 0.11%（12セッション）→ 0.01%以下（1セッション）
• 一覧から詳細ページへの遷移が 53.65% → 63.89%（10.24ポイント増）

これが7月以降も続いているため、改善効果としては高かったのではないかと思います。

Clarity は SEO と CRO の両方に目を向けられるツール

結局、アクセス解析は改善ポイントがわかる魔法でもなんでもなく、結果を示すものでしかありません。やったことが表れるだけなので、問題発見以上に目的検証のために使うほうが効果的なのですよね。

ですから、提供するコンテンツの価値やマーケティング戦略が欠けていれば、どんなに行動データを可視化しても明確な改善方向は得られません。「なにかイイコトがわかるんじゃないか」と期待する気持ちはわかります（こんなブログを立てているからこそ、私自身が誰よりも期待してます）が、コンバージョンから目を背けているうちは「解析やってるつもり」でしかないんです。

以下はフィルターとセグメントを活用しようで説明している図ですが、4つの改善ポイントに目を向けられることが、Microsoft Clarity の良さでもあるかなと思っています。どこまで解析するのかなんてキリがないので、少なくともこの4つを押さえておけるといいですね。

全体的なアクセス数は、多ければ多いほど良いというものではないですが、改善のためにはある程度必要。それを見極めながら自分のビジネスと未来のカスタマーとをマッチングさせていきたいですね。Clarity でお酒が呑める方は X（@clarityLabo）でお声がけください。お待ちしています✧٩( ‘ω’ )و✧← ほとんど呑めない

ということで、WACA Advent Calendar 2024 の16日目の記事でした。もうウェブ解析士ではありませんが、こうやってお誘いいただけてうれしかったです

はい、ごめんください。Microsoft Clarity だいすきコスギです。

Stripe に明るいわけではないのですが、ノリと勢いで Stripe / JP_Stripes Advent Calendar 2024 に参加しています。

簡単に商品やサービスをクレカ決済できるので、副業とかフリーランスの方は Stripe を使わない理由はないですよ。ウェブサイトがなくても使えるところが Stripe のイイトコロなんですが、今回お伝えしたいのは（ウェブサイトがある前提で）以下の2点です。

Striper の皆さまには今更感あると思いますし、私はエンジニアではないので「こういうのがサクッとできちゃうんだよー」くらいの軽いスナック記事ということで。

あらかじめサンクスページをつくっておこう

まず、プレゼントしてくれる相手に感謝を。「コーヒーごちそうさまです！」の気持ちを伝えられるサンクスページをつくっておきましょう。少額なら、重くならないテキストだけでもイイんですけどね。

サプライズ的に、何かしらの豆知識を仕込んでおいてもいいですよね。検索エンジンに捕捉されないように、noidex 設定をしておくことをお忘れなく。

コーヒーチケットをつくってみよう

コーヒーでもクラフトビールでもクラシックプリンでも、自分の好きなものにしておくのがコツです。今回使う Payment Links（公式ドキュメントも丁寧！） はとても使い勝手が良いので、Stripe 契約しているなら使い倒しましょー！

STEP

Payment Links で新規追加

Stripe にログインしたあと、左メニューから「商品」→「Payments」→「Payment Links」に進んで、［+ 新規 N］のボタンに進みます。

STEP

タイプを選択

今回は「顧客が支払い金額を選択する」を選びます。もちろん、商品を登録しておいて販売することもできます。

私はコーチングサービスを商品として登録してあり、初月の支払いとサブスクの支払いに使っています。URL一本で支払ってもらえるので、めっちゃ便利ー！！

STEP

「支払いページ」の情報を入力

画面左側のタイトル（必須）、説明（任意）、画像（任意）を設定すると、右側にプレビューが表示されます。わかりやすいですね。

• 「事前設定金額を提示」にチェックを入れて金額を入力すると、金額を最初に設定しておけます（設定しなければ0円のまま、ユーザーが金額を入力しなければ次に進みません）。
• 「限度額を設定」にチェックを入れて金額を入力すると、ユーザーはその金額内で選ぶことができます。最低価格は「少なくとも自分がほしい金額」、最高価格は「間違って入力されないようにしておきたい金額」にしておくといいですね。Stripe の決済手数料の都合上かと思いますが、最低額は50円です。

STEP

詳細設定は必要に応じて

今回はただのコーヒーチケットなので、顧客の情報は最低限（メールアドレスとクレカ情報のみ）にしてあります。つまり、詳細設定は何もしていません。

商品やサービスの提供時に顧客の住所や電話番号が必要なら、チェックを入れておきましょう。請求先と配送先も入力できますよー

STEP

「支払い後」の情報を入力

「確認ページを表示する」なら、Stripe 上で決済が完了します。
「デフォルトをカスタムメッセージに置き換える」をチェックすると、右側に表示する画面が変わります。ほとんどの場合問題ないとは思いますが、多言語対応していない点だけ注意。

しかし今回はあえて、Stripe の確認ページは使いません。

STEP

「確認ページを表示しない」を選び、サンクスページのURLを入れる

あらかじめつくっておいたサンクスページのURLを入力します。右側のプレビューが消えます。

今回は「請求書 pdf の作成」にチェックを入れずに使います。必要ならこういうこともできる、ということで。

サンクスページに utm パラメーターを入れることもできますが、ヘタに使うとセッションが切れかねないのと、Stripe の支払いリンクと1対1ならURLだけでCV判定できます。だもんで、そのままでいいんじゃないかな説。

STEP

最後に右上の［リンクを作成 ✓］ボタンをクリックすれば完成！

以下のような画面に変わって、支払いリンクが発行されます。

好きな方法でウェブページに埋め込もう

自由度の高いリンクを使う

https://buy.stripe.com/〜〜〜 というURL（支払いリンク）をコピーするだけで使えます。メールの文章内に使っても良いですし、以下のように独自のボタンでリンクさせてもいいですね。以下から画面を確認できます。

普通に稼働しています。返金はしないのでご注意ください。

ちょっとひねってカード型

［購入ボタン］をクリックすると、さまざまなオプションを設定することができます。一番上にコードが入っているので、少しスクロールすると以下のような画面になります。

［変更を保存してコードをコピー］を押すと、コードがコピーされている状態になります。あとは、購入ボタンを表示させたいページにペーストするだけ。

WordPress なら、HTML ブロックにペーストするだけで、以下のようになります。

普通に稼働しているので、コスギにコーヒーおごりたいって方はポチポチどうぞ(/･ω･)/

コーヒーをおごってくれた方の足跡をたどれるようにしてみる

Microsoft Clarity 研究所の記事としては、これが本題です。

STEP

フィルターを設定してセグメントに保存

Clarity を開き、以下のフィルターを設定してセグメントに保存しましょう。

• ユーザー情報 → 期間：過去30日間
• パス：閲覧済みURL ／ 指定の値で始まる ／ サンクスページのURL

STEP

ウォッチリストに設定

ダッシュボードの「ウォッチリスト」ウィジェット → 新規追加で「セグメント」を選択し、保存したセグメントを選択して［追加］します。

こうしておくことで、数字が変化すれば絞り込んで情報を確認できるようになり、どんな経緯でコーヒーをおごってくれたのかを調べられるようになります。

とはいえ実際には、コーヒーをおごってくれるような奇特な方はなかなかいない（そういう流れにしてあれば別）ので、大切なのは以下です。

実際の商品やサービスで活用してね

はからずも「コーヒーをおごってくれた人をストーキングするには」みたいなアブナイ記事になってしまいましたが、Microsoft Clarity 活用の本質は「ウェブサイトの成果を高めるために、カスタマーがつまづいているところを改善し、もっと使いやすくすることから目を背けない」です。

今回のように、明確な成果となるポイント（コンバージョンポイント）をウェブサイトに導入することは簡単にできます。Stripe の Payment Links を使えば、ネットショップを立ち上げなくても、記事を書いてリンクで売ることもできるわけです。ウェブサイトにアクセスがあるなら、これで十分という方も多いのではないでしょうか。

コンバージョンポイントができたら、導線を設計して動線を検証したくなりますよね。Microsoft Clarity はここで役立ちます。

Stripe を使うために初期費用やメンテナンスコストはかかりませんし、3.6% の決済手数料で済みます。Payment Links を使っても追加コストはありません。コードは書けなくても、ある程度ウェブサービスを使える人なら使えます。「セルフアフィリエイトができる」と考えるとわかりやすいかも？

まあ、Clarity で行動分析をするしないに関わらず、ふだん情報発信している人はコーヒーチケットの窓口を設けておいてもイイんじゃないかなと、私は思います。海外向けにしておいてもいいですよね。ひとりでも送っていただけたら、励みになるじゃないですか

普段は Microsoft Clarity の使い方を発信しているので、ユーザーの行動動線をもっと良くしていきたいと思ったら、活用してください。

イチから始める Microsoft Clarity（クラリティ）入門記事！

アクセス解析ツールといえば Google 社の提供している「GA4（ジーエーフォー）」が有名ですよね。関連書籍も多いです。ですが、ほとんどの場合「GA4 を入れてはみたけど難しくて活用できてない……！」が担当者のホンネではないでしょうか。GA4むつかしいよNE！

• 「GA4よりわかりやすい Microsoft Clarity（クラリティ）というものがあるらしい」
• 「ヒートマップを無料で使えるらしい」
• 「訪問者の行動も無料でわかるらしい」
• 「GA4 とも連携できるらしい」
• 「Clarity を導入してみたいけど、注意点なども含めた全体像が知りたい」

と、興味を持っている初心者から GA4 経験者までを対象としてまとめましたので、目次から必要な箇所を参考にしてください。また、Microsoft Clarity を使う前にポイントをチェックできるリスト（PDF）も合わせてどうぞ。

思ったより難しい……という方には、Clarity の導入から活用までのサポートも行っています。必要な設定を代行し、導入後のレクチャーも可能です。オンラインで画面を見ながら一緒に進めていきましょう。

ようこそ Clarity 沼へ！

Microsoft Clarity を使う前に確認しておくべきこと

Clarity を導入する前に、そもそも本当に使って良いのか・導入できるのかどうかをあらかじめ確認しておきましょう。

特に注意が必要な3つのポイント（リスク）

1. AI を導入できていない企業は（ポリシー的に）Microsoft Clarity を使えない
   ＝ （解析ツールの導入を相談される）制作会社は把握して対応できる必要がある
2. ユーザー行動データは個人情報なのかどうかは人それぞれ
   ＝ だからプライバシーポリシーに個人情報の範囲を明記しておくべし
3. 氏名やメールアドレスなど明らかな個人情報はマスキングしておくべし

上記は、Microsoft Clarity（クラリティ）のデメリット（リスク）と対処法にも詳しくまとめています。ここは必ず押さえておきましょう。また、導入時に注意が必要なポイントは以下の3つです。

ログインは個人アカウントに紐づく

メールアドレスとパスワードで登録するのではなく、以下のように Google や Microsoft、Facebook のどれかの個人アカウントで登録します。また、メールアドレスが紐づいていないので、他のアカウントで登録しなおすと、別のユーザーになります。継続的に運用するなら、どれかひとつにしておいたほうが良いでしょうね。

あまりよろしくない慣習として、同じログイン情報を外部の方と共有することがあるのですが、それを前提に導入しようとすると「あれっ？」となります。まあ……無理やり新しい Gmail をつくってそれを共有するという手もありますが、そのアカウントを誰がどのように管理するのか明確にしておきましょうね。

導入を支援する立場の方は、こういったツールでクライアントのメールアドレスをオーナー登録することがあると思いますが、Clarity はあとから管理者ユーザーを追加できます。ご安心ください。

改正電気通信事業法に基づく対応

2023年6月から施行された改正電気通信事業法に基づき、個人情報を取得しかねないツールの導入は慎重にならざるを得ません。GA4も含め、アクセス解析ツールが無料だからといって、ほいほい入れて良いものではないのです。Web 担当者フォーラムの記事が一番わかりやすいので、一読しておきましょう。

正直なところ、ここまでやっているウェブサイトがどれだけあるのかという疑問はありますが、だからこそしっかりと対応していただきたいです。ちなみに Microsoft Clarity の公式ページにもサンプルがあり、弊社カエルコムニスのプライバシーポリシーにも記載しています。もし違和感があればご指摘ください。コピペしていいけど自己責任でね！

なお、Microsoft Clarity の利用規約もちゃんと存在します。英語で長いですが、こういったものこそ ChatGPT に解説してもらうことをオススメします。ポイントは、以下。

日本では特に、データ収集・個人情報・ユーザー通知の部分が大切ですね。Microsoft Clarity は無料とされていますが、利用規約には「変えることもあるよ」と書かれています。今後、有料プランの可能性はあるかもしれません。

サーバーの設定によっては使えない場合がある

小規模事業者向けの一般的なレンタルサーバーはたいてい問題ありませんが、狙われやすい中〜大規模の企業が使用するようなサーバーは、コンテンツセキュリティポリシー（CSP）が厳密に設定されている場合があります。

特に、上述の改正電気通信事業法によって、CSPを強化したサーバーも少なくないでしょう。その設定によっては、Clarity が使えません。

実際に Clarity を導入しても動かない場合、Chrome なら開発者用ツールから検証して「Content Security Policy」という文言がエラー文に入っていたらCSPが理由です。Microsoft の公式ページ（英語）は以下のとおり。

「What should I do to add Clarity to my CSP?（CSP に Clarity を追加するにはどうすればよいですか?）」の項で対応方法を説明されています。大企業のウェブサイトに Clarity を導入する際には、サーバー管理者の方に依頼する可能性を共有しておきましょう。Google のツールなら問題ないことが多いのですが、Clarity はまだマイナーなツールということでしょうね。

これらがクリアできたら、早速 Clarity に登録してみましょう。

Microsoft Clarity に登録する

Clarity には、「アカウント」と「プロジェクト」という概念があります。全体構造はこんなかんじ。

最初にアカウントを新規登録し、最初のプロジェクトを作成します。Clarity を導入したいウェブサイトが2つ以上ある場合は、プロジェクトを追加していきます。アカウントがあれば、他のプロジェクトにメンバーとして参加できます。

アカウント：Microsoft Clarity にユーザーとして登録

Microsoft Clarity のトップページ（日本語版）にアクセスして、Google、Microsoft、Facebook のどれかで Clarity に登録します。難しいものではないですが、Google アカウントを使った場合の流れの画像を入れてあるので参考にどうぞ。3ステップで終わります。

Google アカウントを使った場合の3ステップ（クリックで開きます）

Gmail にログインできているパソコンで進めることを推奨します。

STEP

Microsoft Clarity のトップページにアクセス

Microsoft Clarity のトップページ（日本語版）にアクセスして、［サインアップ］もしくは［使い始める］をクリック

STEP

好きなアカウントを選択

Microsoft、Facebook、Google のどれかをクリック（今回は Google を選びました）

STEP

使いたいアカウントを選択

ここに設定されている名前とメールアドレスが、Microsoft Clarity に登録されます。登録後は、Clarity 登録者の名前とメールアドレスを変更できません。

プロジェクト：Microsoft Clarity にウェブサイトを登録する

ユーザー登録が済んだら、そのまま最初の「プロジェクト」を新しく作成し、対象のウェブサイトを登録します。上記の流れでそのまま進んだ方もいると思いますが、日本語で使うには設定を変更する必要があります。画像つきで解説していますので参考にどうぞ。

プロジェクトを新しく作成する3ステップ（クリックで開きます）

STEP

サイト名とドメインを登録する

英語の画面になりますが、日本語で使えますので落ち着いて進めましょう。

• Name：ウェブサイト名
• Website URL：ウェブサイトのドメイン（https://を含めない）
• Website industry：ウェブサイトの業種（※）

• 「Financial Services & Insurance（金融サービスと保険）」もしくは「Health & Wellness（健康とウェルネス）」のどちらかを選択した場合、追加の利用規約への同意が必要です。

（参考）センシティブな情報（金融情報や医療情報など）を扱うサイト向けの追加規約

追加規約のポイントは、以下。これは Google が提唱する「YMYL（Your Money or Your Life）」にも関連していると考えられます。同様に Microsoft も慎重に扱っていますので、対応しておきましょう。

保証事項

• あなたのデータ処理がデータ保護法に準拠していることを保証すること。
• Microsoft Clarity を使用してセンシティブデータを処理しないことを保証すること。
• センシティブデータには、医療情報、健康情報、税情報、非公開個人情報などを含む。

センシティブデータの定義（以下に限定するものではない）

• 米国医療保険携行性と責任に関する法律（HIPAA）およびその規制で定義される保護医療情報
• ワシントン州「My Health, My Data」法や他の州法で定義される消費者健康データ
• カリフォルニア州医療情報機密性法（CMIA）や他の州法で定義される医療情報
• カリフォルニア消費者プライバシー法（CCPA）などで定義されるセンシティブ個人情報
• 米国国税法や他の州法で定義される納税者識別情報または納税者申告情報
• Gramm-Leach-Bliley法や他の州法で定義される非公開個人情報（金融関連情報）
• 公正信用報告法（FCRA）で定義される消費者報告情報または医療情報
• その他のデータ保護法でセンシティブとされる個人データ

補償

Microsoft Clarity を利用することで規約の違反に起因する請求や訴訟による損害が発生した場合、Microsoft や関係者にその損害を賠償すること。

入力したら［Add new project］をクリックして進みます。

STEP

アカウントの設定画面を表示する

英語のままなので、右上のアカウントのアイコンをクリックして、「Manage Account」をクリックします。設定を変更すると毎回この画面に戻るので、慣れるためと思ってポチポチしましょう。

STEP

基本設定を日本人向けに変更する

画面を少しスクロールすると「Preferenses（基本設定）」の項目が出てきます。変更するたび STEP2 の画面に戻りますが、赤枠の部分は設定しておくことをオススメします。

• Language（言語）：日本語
• Country（国）：Japan（日本）← 変更しなくてもOK
• Date Format（日付の形式）：yyyy/mm/dd ← 年/月/日
• Start of week（週の開始）：Sunday（日曜日）← お好みで

Language を日本語に変えたあとは、日本語で使いやすくなります。

実際に Clarity を動かすためには「トラッキングコード」というものを使います。これは、ウェブサイトに訪問したユーザーのデータを収集するためのもので、Clarity 導入のキモです。

それでは、トラッキングコードをウェブサイトにインストール（意訳：クラリティをホームページに導入）していきましょう。

Microsoft Clarity の導入方法は3つある

次は、ウェブサイトに訪問したユーザーのデータを Microsoft Clarity で取得するための設定です。

ウェブ制作の知識がある方ならサクッと導入できると思いますが、3つの方法があることを覚えておいてください。最適な方法を選べるといいですね。

1. 仕組みがあれば簡単：Clarity のプラグインを使う
2. 将来性高めのイチオシ：Google タグマネージャーの Clarity 公式タグを使う
3. ウェブ担当者に共有：Clarity のトラッキングコードを直接記述する

仕組みがあれば簡単：Clarity のプラグインを使う

WordPress（ワードプレス）や Wix（ウィックス）など、一般的によく使われているシステム（CMS）には Clarity のプラグインがあります。それを使うと、アカウントやプロジェクトを設定するだけで使えます。

以下では、WordPress の Microsoft Clarity プラグインを使った Clarity の導入方法を画像つきで解説しています。

Microsoft Clarity プラグインを WordPress で使う4ステップ（クリックで開きます）

STEP

WordPress のプラグイン新規追加画面で「Microsoft Clarity」を検索

管理画面で「プラグイン」→「新規追加」と進んだところにあります。見つけたら［インストール］ボタンをクリックしてしばらく待ったあと、［有効化］ボタンをクリックしてください。

STEP

［Setup Clarity（Clarity のセットアップ）］ をクリックして設定画面に進む

プラグインを正常にインストールできたら、設定画面に進みましょう。画面が変わって以下のような表示が出ますので、［Setup Clarity］をクリックして進みます。

STEP

プロジェクトを選択

Microsoft Clarity にログインしていれば、以下のようにプロジェクト選択画面が表示されます。プロジェクトを選んで［続ける］をクリックしましょう。

STEP

Microsoft Clarity の画面が表示されれば成功

「プロジェクト ○○ 正常に統合されました」といった表示のあとに、Clarity の画面が表示されれば完了です。WordPress の管理画面から、いつでも確認できますね！

導入できたら「Microsoft Clarity が正常に稼働しているか確認」に進んでください。

将来性高めのイチオシ：Google タグマネージャーの Clarity 公式タグを使う

すでに他のアクセス解析ツールを導入しているなら、Google タグマネージャー（GTM）などの管理ツールでトラッキングタグを管理しているのではないかと思います。

ということで、GTM を使える方なら説明不要だと思いますが、GTM の画面を開かなくてもインストールする方法が公式ページにまとまっていますので、こちらを合わせてどうぞ。トリガーは「All Pages」で本当にええんか？という素朴な疑問は残ります。

導入できたら Clarity の画面に戻り、「Microsoft Clarity が正常に稼働しているか確認」に進んでください。

ウェブ担当者に共有：Clarity のトラッキングコードを直接記述する

特にシステムを入れておらず、Google タグマネージャーも導入していない場合、トラッキングコードをそのまま HTML 内に記述する方法があります。個人的にオススメはしないので、制作の知識がある担当者と相談してください。

トラッキングコードを取得する3ステップ（クリックで開きます）

STEP

セットアップ画面を開く

「設定」→「セットアップ」に「手動でインストールする」の項目があります。ここの［追跡コードを取得する］をクリックして進みます。

STEP

Clarity コードをコピー

<script>〜</script>で書かれているトラッキングコードをコピーします。［クリップボードにコピー］ボタンをクリックするだけ。

STEP

ウェブサイトの <head>〜</head> 内にペースト

基本的に、位置はどこでも問題ありません。

トラッキングタグを記述したページのみ解析できるため、ウェブサイト内の動線を分析したい場合には、すべてのページに記述する必要があります。

これで、Microsoft Clarity の導入が済んだので、正常に稼働しているかどうかを確認しましょう。

Microsoft Clarity が正常に稼働しているか確認する

データを取得するまでは最大2時間くらいかかりますが、早ければ30分経たずに取得することが多いようです。データを取得して訪問者が現れると、こんなふうに（ほぼ）リアルタイムに表示されます。［すぐに観る］をクリックして進み、レコーディングデータを確認してみましょう。

ただし、数時間経っても自分のアクセスデータすら取得できない場合、以下のような要因が考えられます。Chrome なら開発者用ツールを使うと確認しやすいですよ。

GA4との連携

すでに GA4 を導入している方は、ここが気になるポイントかと思います。

GA4 と Clarity それぞれの得意分野

GA4 だけでなく、Google サーチコンソールなどとも合わせると、以下のように対応分野が分かれます。

上記の四象限をそれぞれ連携させると、効果的ですよね。

GA4とのシームレスな連携はできない

GA4 と Google サーチコンソールはシームレスに連携できますが、Microsoft Clarity とは同じような連携ができません。

• GA4 のキーイベントを Microsoft Clarity で取得してフィルタに使う → 使えません
• GA4 でつくったカスタムセグメントを Microsoft Clarity で使う → 使えません
• GA4 を使えるユーザーを Microsoft Clarity のチームに同期できる → できません
• GA4 からシームレスに Microsoft Clarity のヒートマップやレコーディングを見る → 見れません

じゃあ何ができるのかというと、GA4の一部のデータを Microsoft Clarity で確認できるだけです。Clarity のフィルタなども有効になりません。

時々、「Microsoft Clarity は GA4 と連携できる！」と伝えている記事もありますが、連携できているといえるかどうかは疑問が残ります。公式も（UA時代の）GA と連携できる（GA4 のセグメントはサポートしてないよ）と言っています。

• Currently, Clarity doesn’t support segments in GA4.
  （現在、Clarity は GA4 のセグメントをサポートしていません。）
• Clarity doesn’t send playback URL to GA4 as it cannot accept High Cardinality rows.
  （Clarity は高基数行を受け入れることができないため、再生 URL を GA4 に送信しません。）

Google Analytics4 Integration with Clarity | Microsoft Learnより

今後に期待。

GA4とどのように “連携” させるか

では、GA4 とどのように連携して考えれば良いかというと、「GA4 で得られたパターンを Clarity で深堀りする」のがシンプルかと思います（これをシームレスにできるといいんですけどね……）。これは、先日開催された a2i のセミナーで、JADEの村山さんも話されていました。

セミナー後半の村山氏のセッションでは、より踏み込んだ分析アプローチが提示されました。特に注目すべきは、定量分析（GA4など）と定性分析（Clarity）の組み合わせ方です。「仮説の精度を高める」という視点から、定量データで見つけたパターンをClarityで深掘りする手法が、実例を交えて解説されました。

【活動報告】オンラインセミナー「Microsoft Clarityで深める真のユーザー理解」｜2024/9/25(水) – 活動報告 – アナリティクス アソシエーション

私も、GA4 や Google サーチコンソールを Looker Studio で閲覧できるようにしておき、伸びしろのあるパターンが見えると Clarity で絞り込み、レコーディングを10件くらい観察して背景を確認し、施策に落とし込んでいます。

よく忘れがちになってしまうのは、コンバージョンから目を背けないこと。つまり、シームレスに連携できたとしても目的志向でツールを扱わなければ、わかった気になってしまうだけです。そういったことを念頭に置いて、まずは Microsoft Clarity を楽しんでみてください。

Microsoft Clarity を導入できたら次にやること

データが取れることを確認できたら、ダッシュボードを見てみましょう。このあとの活用は以下の記事にまとめていますので、ひとつずつ確認すれば Clarity の機能をひととおり把握できます。

思ったより難しい……という方には、Clarity の導入から活用までのサポートも行っています。必要な設定を代行し、導入後のレクチャーも可能です。オンラインで画面を見ながら一緒に進めていきましょう。

Microsoft Clarity に関してはよくつぶやいていますので、導入方法や活用について気になることがあれば https://x.com/clarityLabo へお声がけください。

よくある質問と回答

他にもわからない点がありましたら、X（Twitter）の @claritylabo へお気軽にご相談ください。

Microsoft Clarity を使う前に備えておきたいチェックリスト

上記の内容をふまえ、Microsoft Clarity を導入する前に全体像を知っておくためのポイントを1枚のPDFにまとめました。以下から、ダウンロードしてお使いください（登録不要です）。

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

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会。これまで初心者向けに解説してきましたが、第5回は Clarity 活用のキモといえる「フィルター」について深めました。以下のような内容です。

Clarity を効果的に活用するためには、お客様（カスタマー）の理解とウェブサイトの動線把握が重要となります。ここに向き合わないまま Clarity を活用しようとしても、「オモシロイ」以外の感想はなかなか出てきません。シンプルでカンタンだからこそ、顧客理解の有無で得られるものが変わります。要するに、

[ 何のために、誰の動きを見たいのか ]

Clarity の活用は、この一言に尽きます。正解はないからシンドくもあり、楽しくもあり。最近はAIにLP添削をしてもらうことも流行っているので、「このページは、誰のどんな目的で作られ、その人はこのサイトにどんなことを期待していると思いますか？」みたいにお願いしたら提案してくれるかもですね。

まずは、Microsoft Clarity のフィルター機能を知ることをメインに説明しています。これまでも使っているので、気になる箇所は Microsoft Clarity の使い方をまとめた過去の記事も参考にしてください。

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

フィルターを使うための大前提

Microsoft Clarity は、ウェブサイトにおける「カスタマー（見込み客も含む）」の行動を分析し、つまずきを減らすためのツールです。

フィルターを使うための大前提は、行動を絞り込む相手、つまり、分析対象となるカスタマーを明確に定義することが重要です。Clarity でカスタマーにならないユーザーを観察しても時間が溶けるばかりですし、SEOにも直結するため、少なくともカスタマーのニーズくらいは想定しておきましょう。マーケティングにおける「誰に」ですから。

この図でいうところの、集客を担う［認知］→［訪問］の部分を改善するのがSEO、実際にウェブサイトの成果につながる［訪問］→［回遊］→［CV（コンバージョン）］を改善するのがCRO（Conversion Rate Optimization＝コンバージョン率最適化）です。

ただし、私（コスギ）としては、CRO＝Customer Relationship Optimization（顧客との関係性を最適化）と捉えています。この方が、ウェブサイトの改善を考えやすいのでオススメです。

例えば、ウェブサイトへの訪問数 10,000 件に対して申込数が 100 件であれば、100/10000＝0.001 で、1% のコンバージョン率になります。このコンバージョン率を 2% にするなら、以下のような2パターンが考えられます。

カスタマーにならないユーザーが多いようなら、集客対象のクエリやコンテンツの動線をカスタマーに最適化する（CRO）ことで、訪問数が減少しても申込数は次第に上がります。カスタマーに最適化されたサイトは、SEOにも効果を発揮し、訪問数も上がります。

ただしもちろん、カスタマーを見誤ってしまうとどちらも減って大爆死してしまうので、覚悟と勇気を持つ前に、しっかりとカスタマーを定義しておくことは必須です。徹底的に顧客理解を深めて実施した施策は、後悔ではなく経験が残ります。次につなげましょう。

Microsoft Clarity で使えるフィルター

ウェブサイト上でユーザーがつまずくポイントは、さまざまです。

ご自身でも、こういったことに少なからず「イラッ」としたことがあるのではないでしょうか。あなたの感じる「イラッ」は、誰かにとっても「イラッ」とします。使い慣れた自分のサイトは盲点になりやすいですが、初心に返って、実機で確認してみてください。このアンテナは、少なからず改善のヒントになります。

さて、Clarity にはたくさんのフィルターが用意されており、こういったつまづきを定量的・定性的にチェックすることができます。「イライラしたクリック」など、GA4では見たこともない、特徴的なフィルターは以下に紹介しています。合わせて参考にしてください。

ちなみに「この条件のユーザーは除外したいんだけどな〜！！」という場合には、一部のフィルターが使えます（すべてではないのですが）。カスタムフィルターは除外対象を設定できるので、使っていくうちに必要になったら思い出してください。「関係者除外」が一番わかりやすい例ではないでしょうか。

フィルターを保存してセグメントにしよう

Clarity では、設定したフィルターを保存したものを「セグメント」と呼びます。保存しておけばいつでも呼び出せるので、よく使うフィルターをセットしておくと良いですよね。

では、よく使うフィルターをどう見極めたら良いかという点で、STP分析を応用すると効果的です。

補足：STP分析とは

STP分析では、まず市場をいくつかのセグメントに分割します (セグメンテーション)。分割の方法でよくあるのが、性別や年令ですが、業種、規模、サービス内容など、ケースバイケースで検討する必要があります。

どのような軸で分割するかによって、求める顧客像が変わります。曖昧なまま進めると、違和感のある顧客しかいなかったり、市場が狭すぎて顧客がいなかったりが起こりますので、納得感のある軸を採用しましょう。

次に、分割したセグメントの中から、どのセグメントをターゲットとするかを決定します (ターゲティング)。

最後に、ターゲットとするセグメントにおいて、自社の立ち位置を明確化します (ポジショニング)。 同じセグメントには競合も存在するため、差別化や共創を図りながら、自社の強みを活かせるポジションを確立することが重要です。

UAV あなたが知らない あなたの会社だけの強み ― 顧客に選ばれ続ける「最強ブランド」のつくり方 #PR

STP分析では物足りないな……自社の強みをちゃんと出していきたい！という方は、UAV（ユニーク・アトラクティブ・バリュー）の思考プロセスを知れるこちらがオススメです。まだ市場ができていない場合は、VPC（バリュー・プロポジション・キャンバス）で考えてみるのもオススメ。PMFの全体像と合わせて、才流さんの記事も合わせてどうぞ。

https://sairu.co.jp/method/13700/

わかりやすい軸で考えてみましょう。たとえば、顧客単価と購入頻度の軸だと「高単価・リピーター」、「高単価・単発購入」、「低単価・リピーター」、「低単価・単発購入」の4つのセグメントに分けられます。すると、B（高単価・リピーター）のアップセルやクロスセルのために Clarity でフィルタリングして確認したり、A（高単価・単発購入）のリピートを促すためにBとの違いを Clarity で探索したり、などが考えられます。

フィルターは「なんとなく見たい切り口」でも使いやすいのですが、戦略に基づいたセグメントでフィルタリングしたほうが、得られるものは大きいのではないでしょうか。ただでさえ、時間が溶けるツールですから……

また、セグメントは、作成した後にウォッチリストに追加することも可能です（フィルターの設定とウォッチリストへの登録手順は動画でも説明しています）。ウォッチリストに追加しておけばいつでも確認できますし、すぐに絞り込むこともできます。期間の設定が含まれてしまうので、それだけちょっとややこしいんですけども。

フィルターの活用ケース

ダッシュボードから使うのが一番カンタンです。ぜひ知っておいてほしいのは、ダッシュボードの中でも「フィルター」と訳されている「ファネル機能」からのフィルタリング。物足りなくなったらカスタムフィルターもどうぞ。

ダッシュボードから使う（まずはここから）

「ダッシュボード」は、Clarity を開いてさまざまな数字が書かれている最初の画面のこと。「定性分析ツールじゃないんかーい！」とツッコみたくなるような、ウェブサイトのアクセス状況やユーザーの行動に関する様々なデータが表示されています。

問題のありそうなユーザー行動を絞り込んで分析したい場合、ダッシュボード上で該当する項目をクリックするだけで、簡単にフィルターを適用することができます。たとえば、デッドクリックが多い場合は、「デッドクリック」の項目をクリックすることで、デッドクリックが発生したセッションに絞り込むことができます。この辺は動画でも説明していますので、合わせてどうぞ。

さらに、Microsoft 社の AI である Copilot が搭載された「Clarity Chat」を使うことで、分析のヒントを得ることも可能です。カンタンな質問、たとえば、「過去7日間で、モバイルでタップの問題が起きているページを教えてください」と入力すると、Clarity Chat はデッドクリックが多いページを提案してくれます。また、「過去30日間のデータをもとに、トップページの改善ポイントを教えて」という依頼には、いくつかの指標から提案してくれます。コンサル的にアドバイスしてくれるというよりは、「ヒントはこの辺」と提示してくれる感じですね。

まだ回答精度は不安定ですが、たまに構ってあげると成長している印象はあります。

ファネル機能で使う（初級〜中級者向け）

（和訳では「フィルター」となっている）「ファネル機能」は、Microsoft Clarity のイチオシ機能です。

Clarity には、GA4の「キーイベント」のようにコンバージョンポイントを「設定」画面から設定すれば、それを追っていけるような仕様とはちょっと異なります。「スマートイベント」として設定することは可能ですが、ファネル機能でユーザーが目標達成までに通過するステップを定義し、各ステップにおけるユーザー数を可視化できると効率的に分析しやすいです。

ファネル機能はユーザーの直線的な動線分析に使いやすいです。ウェブサイトにフォームがあったら、ぜひ使ってみてください。動画では、弊社の公式サイトにあるショッピングカートでのファネルを確認し、レコーディング機能で何が起きているのかを確認して考察するまでを説明しています。

カスタムフィルターを使う（中級者以上向け）

Clarity には、デフォルトで用意されているフィルター以外にも、カスタムフィルターを作成することができます。カスタムフィルターは、デフォルトのフィルターでは取得できないデータを分析したい場合に役立ちます。だんだん物足りなくなってくるんですよ。

カスタムフィルターには、汎用的に使えるカスタムタグ以外にも、ログインユーザーを分析しやすいカスタムユーザーID、カスタムセッションID、カスタムページIDのセットがあります。カスタムラベルもありますが、レコーディングの判別に使用するものなので、大別すると2種類のカスタムフィルターが使えます。

カスタムタグは、Googleタグマネージャー (GTM) を使用することで、簡単に設定することができます。取得したいデータを変数に設定すれば、Microsoft Clarity 公式タグの Custom Options に設定するだけ。

上記で設定しているカスタムタグの変数は、以下のページで説明していますので参考にどうぞ。

GA4と自動的に連携できているわけではないので、GA4用に設定した変数があれば Clarity にも使えますね(/･ω･)/

Microsoft Clarity のフィルターに関するよくある質問

ダッシュボードの右上と枠内に「フィルター」があるのですが？

「フィルター」は「絞り込み」の意味ですが、下記のような違いがあります。

英語版なら「Filters」「Funnels」になっているのですが、和訳がわかりにくいだけです……

コンバージョンページのURLが変わるのですが、Microsoft Clarity で取得する方法は？

正規表現を使って対応できます。

正規表現がわからない場合は、ChatGPT などに教えてもらいましょう。

「ページサイズを変更しました」というフィルターはどう使えば？

重要度は高くないため、参考程度で問題ありません。

「ページサイズを変更しました」という指標で絞り込んでみると、モバイルの割合が高いことがわかります。これにより、ユーザーが画面を（指で）拡大するような動きの可能性が考えられます。ユーザーにとってはコンテンツが小さいのかもしれませんね。スマホの縦横を変えたことが示唆されていますが、個人的には疑問が残ります。

ただし、Clarity の指標は定義が曖昧なものが多く、レコーディングを見て問題なければ気にする必要はありません。テキストを選択しながら読んでいる行動がデッドクリックとして見なされるのと同じようなものと考えておいても良いのではないでしょうか。

あまりに多いなら、表示されている文字が小さい可能性があります。また、画像を拡大しようとしたりする行動が見られるなら、視認性を改善する余地があるかもしれません。

クリックヒートマップで、デッドクリックのみを絞り込む方法は？

フィルターの一覧ではなく、クリックヒートマップ → クリックの種類から選択します。

ヒートマップを表示して、クリックの種類のドロップダウンメニューを開くと、「すべて」「停止（デッドクリック）」「激怒（イライラしたクリック）」「エラー」「最初（ファーストクリック）」「前回（ラストクリック）」などから選べます。

クリックの種類や意味は、以下の記事からどうぞ。

https://clarity.kosgis.com/blog/microsoft-clarity-seminar-03/#index_id6

カスタムタグを設定するには？

カスタムタグの設定には、Googleタグマネージャー（GTM）の使用が推奨されています。

Clarity 公式が提供しているGTM用のタグを設定することで、簡単にカスタムタグを取得できます。上記のカスタムフィルターの設定も合わせてご確認ください。変数でKPIを取れるといいですよね。

Microsoft Clarity のカスタムタグは、GA4 の連携できない？

Clarity と GA4 の連携は限定的です。

Clarity 上で GA4 のデータを見れるタブはありますが、フィルターやキーイベントの連携はなく、基本的な指標が見えるだけとなっています。当然、カスタムタグも GA4 とは連携できません。

2024年12月現在、Microsoft Clarity 公式ドキュメントGA4 Integration でも以下のように記載されています。高基数は「データがめっちゃ多いから (other) としてまとめとくわ」みたいな処理をされるほど値が多いこと（意訳）を指します。つまり、再生URLが膨大になると (not set) になってしまって意味がなくなるので、やめたそうなんですよね。

• Currently, Clarity doesn’t support segments in GA4.
  （現在、Clarity は GA4 のセグメントをサポートしていません。）
• Clarity doesn’t send playback URL to GA4 as it cannot accept High Cardinality rows.
  （Clarity は高基数の行を受け入れることができないため、再生 URL を GA4 に送信しません。）

「カスタム」がついている「カスタムイベント」はどうやって使うのですか？

スマートイベントで利用できます。

スマートイベントはコードを書かなくても使えますが、イベントAPIを使用することで自由にカスタマイズして設定できます。これが、「カスタムイベント」。

個人的に、カスタムイベントはウェブサイトよりもモバイルアプリでの活用シーンが多いんじゃないかと考えています。

Microsoft Clarity 勉強会の今後の予定

これで一連の Microsoft Clarity に関するノウハウはまとまったので、定期的な勉強会は一旦終わります。これまでの勉強会の内容は、以下をご参照ください。

はい、ごめんください。Clarity 大好きコスギです。最近は WordPress のリニューアル案件のご相談をいただいてウレシイです。

リニューアル案件では「今までよくわからずに写真を撮ったものそのまま使ってました」ということはザラにあります。とはいえ、すべてではないので大きいものくらいはなんとかしたいですよね。

コピペで使えるスニペット

そんなわけで、ChatGPT とアレコレ話してまとめたスニペットがこちら。Code Snippets で追加すれば使えます。翻訳関数を通してないこともあり、プラグイン化するほどでもないかな……。

// メディアファイルの一覧表示調整
add_filter( 'manage_media_columns', function ( $posts_columns ) {
    $posts_columns['filesize'] ='ファイルサイズ';
    return $posts_columns;
});

// メディアファイルのカスタムカラムにデータを表示
add_action( 'manage_media_custom_column', function ( $column_name, $post_id ) {
    if ( 'filesize' !== $column_name ) {
        return;
    }
    // 保存済みのファイルサイズを取得
    $file_size = get_post_meta( $post_id, '_wp_attached_file_size', true );
	if ( ! empty( $file_size ) ) {
        echo size_format( $file_size, 2 );
    } else {
        echo __( 'Unknown' );
    }
}, 10, 2 );


// ファイルサイズでソートを有効化
add_filter( 'manage_upload_sortable_columns', function ( $columns ) {
    $columns['filesize'] = 'filesize';
    return $columns;
});

// ソート用クエリをカスタマイズ
add_action( 'pre_get_posts', function( $query ) {
    global $pagenow;
    // メディアライブラリのメインクエリにのみ適用
    if ( is_admin() && $query->is_main_query() && 'upload.php' === $pagenow ) {
        $orderby = $query->get( 'orderby' ); // 現在の並び替え条件を取得

        if ( 'filesize' === $orderby ) {
            $query->set( 'meta_key', '_wp_attached_file_size' ); // メタキーを指定
            $query->set( 'orderby', 'meta_value_num' );         // 数値としてソート
        }
    }
} );

// ファイルサイズを保存（初回保存時やアップデート時）
add_action( 'add_attachment', 'update_filesize_meta' );
add_action( 'edit_attachment', 'update_filesize_meta' );
function update_filesize_meta( $post_id ) {
    $file_path = get_attached_file( $post_id );
    $bytes = filesize( $file_path );
    if ( false !== $bytes ) {
        update_post_meta( $post_id, '_wp_attached_file_size', $bytes );
    }
}

// 一括処理で既存のファイルサイズを保存
function batch_save_file_sizes() {
    $attachments = get_posts( [
        'post_type'      => 'attachment',
        'posts_per_page' => -1,
    ] );

    foreach ( $attachments as $attachment ) {
        $file_path = get_attached_file( $attachment->ID );
        $file_size = filesize( $file_path );

        if ( false !== $file_size ) {
            update_post_meta( $attachment->ID, '_wp_attached_file_size', $file_size );
        }
    }
    echo 'ファイルサイズの保存が完了しました！';
    die(); // 実行後スクリプトを停止
}
// URLで `?run_batch=1` を追加して実行
if ( isset( $_GET['run_batch'] ) ) {
    batch_save_file_sizes();
}

あまり関数を使わない派。ご利用は自己責任でどうぞ。

上記のスニペットをつかうポイント

バッチ処理して _wp_attached_file_size をメタ情報に追加しておく

ソートするための情報が必要なので、バッチ処理してメタ情報に追加してください。

[ウェブサイトのトップページURL]/?run_batch=1 にアクセスすれば自動的に終わります。たぶん管理画面のURLでもイケるんじゃないでしょうか。

管理画面のみ有効にしておく

外部で動かすことはないので、管理画面のみ実行できるようにしておきましょう。

改造したい場合は ChatGPT と相談してみてください

備忘録のためにつくったので、「以下の WordPress のスニペットがどのような機能として動いているのか、わかりやすく教えてください。また、ここに［追加したい機能］という機能を追加してください。」として、上記のスニペットをコピペするだけです。便利な世の中ですね。

心配な方は、セキュリティ的なところも確認してみてください。

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

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

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

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

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

STEP

Clarity の設定 → IP ブロックに進む

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

ここで、［＋ IP アドレスをブロックする］をクリックします。

STEP

除外したいIPアドレスを設定する

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

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

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

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

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

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

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

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

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

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

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

STEP

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

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

function() {
    return document.querySelector('#wpadminbar') !== null;
}

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

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

STEP

トリガーを新規追加

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

STEP

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

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

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

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

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

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 発行用の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」を新規に作成しましょう。

STEP

Clarity に Cookie の情報を送信するタグを新規作成

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

<script>
  window.clarity("set", "stakeholders", "{{cookie_monster}}");
</script>

GTM で Microsoft Clarity (official) を使っているなら

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

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

STEP

GTMのプレビューで確認

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

STEP

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

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

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

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

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

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

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

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

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

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

STEP

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

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

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

• utm_source（ソース）：Teams（Slack とか Discord などもイケます ）
• utm_medium（メディア）：referral（referral 固定）
• 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 を使うと便利です。英語ですが難しいことはないので慣れましょう。

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

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

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

関係者除外方法のまとめ

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

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

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

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

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

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

レコーディング機能はユーザーの行動が録画されているものなので、実際に動いている画面を見ないことには「どういうこと……？」とわかりにくいかもしれません。勉強会でも動画で説明している部分が多いので、ヒートマップ同様、デモやご自身の 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 に送信されることを認識しておきましょう。

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

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

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

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

レコーディングの要約

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

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

セッションリストの確認

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

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

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

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

レコーディングの再生（インラインプレイヤー）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Microsoft Clarity 勉強会の今後の予定

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

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

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