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

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

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

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

ヒートマップとは

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

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

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

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

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

クリック種類の絞り込み

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

ヒートマップの比較

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

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

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

Copilot による要約 (Heatmaps Insights)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Microsoft 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 勉強会の今後の予定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

［Catch］弊社カエルコムニスの事例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

＼ わからないことがわからなくてもOK！ ／

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

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

……そうです。具体的なソースは、後ほど追記するとして。

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

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

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

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

＼ UNCEALで自社サイトを改善したい！ ／

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

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

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

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

Microsoft Clarity の主要な指標と意味

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

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

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

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

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 のドキュメントを参照してください。

パフォーマンス分析

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

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

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

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

JavaScript エラー

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

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

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

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

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

コンテンツウィジェット

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

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

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

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

ECウィジェット

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

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

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

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

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

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

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

改善例

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

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

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

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

Microsoft Clarity 勉強会の今後の予定

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

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

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

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

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

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

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

主な機能と活用方法

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

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

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

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

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

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

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

アカウントを登録

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

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

インストール方法

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

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

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

設定を確認しておく

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

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

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

Microsoft Clarity 勉強会の今後の予定

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

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

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

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

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

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

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

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

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

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^)／

特に、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 で動的に変更するコンテンツには注意が必要です。以下のようなものが要件に入っていたら要注意。

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

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

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

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 開催マップがすごくわかりやすいです！

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

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

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

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

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

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

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

STEP

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

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

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

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

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

STEP

Microsoft Clarity のタグ（luratic）を設定する

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

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

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

STEP

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

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

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

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

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

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

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

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

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

CTAのクリック

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

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

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

特定の項目の表示

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

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

動画の再生割合

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

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

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

コンテンツグループ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ファネルを追加する

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

STEP

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

［新しいフィルター（New funnel）］から進みましょう

STEP

「ページのアクセス数」でURLを設定

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

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

STEP

ステップを最後まで追加

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 でファネル落ちを絞り込んで改善する

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

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

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

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

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

ユーザー①

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

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

ユーザー②

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

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

ユーザー③

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実際どうだったの？

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

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

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

私がオーガナイザーをつとめていたオフラインの 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 アナリティクスにも権限が細かくありましたし、これができれば各々の画面で好きなように確認できますから、ミートアップでも役立つだろうなって。次回が楽しみです！

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

去る2024年5月17日の19時より、ウェブ解析士協会 近畿支部さま主催のセミナーに登壇いたしました。金曜日とはいえ、平日にも関わらず60名以上のお申込みをいただき、中でもオフライン参加は25名と多く、そのまま懇親会へと流れる大盛況っぷり。ウェブ解析士の資格を持っていない一般の方も参加され、とても熱量が高かったことを付記しておきます。

今回はそのセミナーについての反響と、いただいた質問に対する回答をいたします。

ちなみに、会場に来られた方々は全員懇親会まで参加されるほどの熱量でした！

今回の Microsoft Clarity セミナーで大切にしていたこと

Microsoft Clarity の基本的な情報はお伝えしたので、手段と目的を履き違えないことにさえ気をつければ使いやすいツールです。そのため、なまじツールをいじっている人よりも、事業やユーザーのことしか見ていないお客様のほうが、活用しやすいツールかもしれませんね。

施策検証に使うことはもちろん、「ユーザー動線の交通整理ができているかどうかを確認しましょう」とお伝えしました。（だからイラストは交通誘導マンにしてあるんですが……私の誘導マンの認識が甘すぎる気がする……）

私自身、昔はとにかく様々なセミナーに参加して知見を得ることが多かったのですが、今ではAIに聞けば何でも教えてくれますし、わかりにくいところも噛み砕いて説明してくれますので、情報を得られるだけのセミナーに参加することはなくなりました。ですから、私がセミナーに登壇する際には、一方的な知識の共有という形式はしていません。それをしていたら、AIに替えられるためです。

つまり、私が登壇する際にはワークやディスカッションを必ず取り入れています。オフラインのほうが間違いなく目の前に人がいるので考えやすいですし、オンラインでもチャットで考えを共有していただけるようにしています。特に今回、大阪会場では全員ペアをつくれたために、ディスカッションタイムではオンラインでチャット参加している方にフォーカスするように意識していました。

知るのとやるのとでは天地の差があるのだから、考えることを放棄しているレベルでは話になりません。なぜなら、技術課題よりも適応課題のほうが多いためです。以下は参考として共有したスライドですが、これは問題や課題に対して持っておくべき大前提だと、私は思っています。

ですから、隣の人と話したことや、チャットに入力したことは全部知識のアップデートをするための土台になります。正解はないからこそ、考えて行動して経験していかないと判断できないんですよね。早速、導入して分析して知見を得た方もいます。Microsoft Clarity を導入できるのなら、まずは楽しんでみてください。

アンケート結果（n=41）

解析系のセミナーはいつも男性が多いイメージですが、女性が半数近いのは意外でした。感性に合うツールなのかもしれませんね。

40代以上が80％以上を占めるのは高齢化の波を感じますが、セミナーで持ち帰ったものを企業に展開できるのもこの年代ならではなのかなとも思います。

企業：個人＝６：４くらいの割合でした。今回は企業としても個人として考えることもできる内容でしたが、個人のほうがフットワーク軽く使えるのではないかと思います。

「一般は参加できないんですよね？」という反応も聞いていたのですが、1割以上の参加をいただきましたが……SNSマネージャーの皆さん説ある。

弊社カエルコムニスのセミナーは、及第点（平均値）を4点としています。今回はどれも4.5点（5点満点）を上回る評価をいただくことができました。そして「あなたにとって、全体的にいかがでしたか？（10点満点）」の有意義だったかどうかを問う設問は平均値 8.6点（中央値 10点）をいただき、参加者の皆さんそれぞれで得られたものはあったかと思います。

以下、いただいたご感想。

今回は Zoom をつなぎながら大阪会場で行ったものの、どちらから参加されたのかを伺う設問がなかったのは致命的でした……オフライン（会場）の方々のほうが盛り上がるのは当然なので、ディスカッションタイムは意図的に Zoom チャットの方々にフィードバックしていたんですが、どうだったかな。今度は項目忘れません……！

いただいた質問と回答

質問を6ついただいたので、お答えします。

まとめとゆるぼ

今回の Microsoft Clarity のセミナーでは、「初めて知ったのでこれから使ってみたい」「とりあえず入れていたけど理解が深まった」といった方が大半でした。無料で便利なツールだからこそ、リスクも把握したうえで使っていただきたいと願っています。リスクは以下でまとめていますので、参考にどうぞ。

企業でワークショップをしませんか？

「Microsoft Clarity を導入したけれど、どうやって使えばいいのかわからない」という組織の方向けに、ユーザー行動から30個くらいの改善課題を洗い出すワークショップ型研修をご提供できます。正式な内容は50万円以上を想定していますが、5名程度のチームを対象に5時間程度・15万円（＋税・旅費交通費）で実施いたします。モニターとして先着2社のみ限定とさせていただきますので、興味を持たれた方はカジュアルにご相談ください。

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

アクセス解析界隈でも Cookie に関して賑やかになりつつあるのですが、そもそも Microsoft Clarity はどういう Cookie を取得しているのか、どんな情報を送っているのか、セッションはどれくらい保持しているのか、などを調べてみた備忘録です。「Cookie（クッキー）」がどのようなものかはわかるくらいのニッチな中級者向け。

考察はいらんという方は、公式サイトを見てください。

Microsoft Clarity が扱う Cookie

他にも、Chrome の拡張機能で確認する限りでは、ANON と NAP を確認できたサイトもありました。clarity.ms がドメインなので、サードパーティー Cookie でしょうか。

これらは Microsoft Clarity だけでなく、MS関連の Cookie のようなので、Microsoft のプライバシーに関する声明で確認できます。

MUID や ANON や NAP は、異なるドメイン（bing.com）でも同じ値を確認できています。有効期限はバラバラですが、1ヶ月以上先ですね。

つまり、_clck と _clsk はファーストパーティ Cookie、それ以外はサードパーティー Cookie と判断できます。Google はサードパーティー Cookie を段階的に廃止する予定というアナウンスしている（そして延期している）ようですが、Microsoft はどうなるか、今後まったりと追っていきます。サードパーティー Cookie の廃止でどんなことが想定されるのかは、Web担当者フォーラムの以下の記事がわかりやすいかも。

Microsoft Clarity におけるセッション保持の考え方

まず、用語が似ていてわかりにくい「セッション Cookie」は、有効期限を設定せずにブラウザが閉じられたら一緒に消滅する Cookie です。ですが、最近のブラウザは見ていた画面を復元する機能がついているので、一緒にセッション Cookie も復元されるんですってね。

ですが、Microsoft Clarity で使用している Cookie はどれも有効期限を確認できたので、「持続的 Cookie」といえます。

同一ユーザーかどうかを判断している _clck の有効期限は1年間。つまり、意図的に削除しなければ最短でも1年間は、再訪問しても同じユーザーだと判断されるわけですね。Microsoft Clarity 側では、ユーザー ID に絞り込んで追うことができます。ただ、録画データの保持期間は30日間であることは覚えておきたいところ。

そして、同じセッション（訪問）だと判断している _clsk の有効期限は24時間。つまり、何度サイトを離れても、24時間以内に（同じブラウザから）戻ってくれば一連の録画データとして確認できると考えられます。

このセッションの考え方は、Google アナリティクス（GA4）とは異なるかもしれません。UA時代は「セッションは30分」が一般的だったんですが、Microsoft Clarity の場合はそれより長いんですよね。一連のユーザーの行動にどこまで連続性を考えるのかツールによってスタンスが違うため、その特徴は押さえておきましょう。Microsoft Clarity に関しては「ユーザー行動分析ツール」と銘打っていますし。

あとはソースを見てみないとわからない部分ではあるのですが、「同一ユーザーがスマホで調べた後にパソコンでじっくり読む」みたいな行動は少なからずあるので、ここを Microsoft さんはどう考えているのか気になるところです。サードパーティー Cookie で、MSログインが有効なユーザーは追えるのかな。Chrome は Cookie を別デバイスで引き継ぎそうなものですが、このあたりは実際どうなんだろうとか。

大したオチはないですが、ユーザーは1年、セッションは1日って覚えておけば、ニーズに応えられそうでしょうか。