0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Microsoft Clarity MCP Serverで、AIがサイトのUX問題を自動発見!設定からできることまで完全ガイド

0
Posted at

Microsoft Clarity MCP Serverを使えば、Claude(AI)に「ユーザーはどこでつまずいてる?」と聞くだけで、プロのUX専門家級の分析レポートが手に入ります。

Google Analyticsが「何が起きたか」を数値で教えてくれるなら、
Clarityは**「ユーザーがどう感じているか」**を実際の行動から教えてくれます。

この記事では、技術的な知識がなくても、AIによるClarity分析を始められる方法を、実際の画面を交えながら解説します。


Microsoft Clarity MCP Serverでできること

こんな質問にAIが即答してくれるようになります

あなた:「ユーザーがイライラしている箇所を教えて」

AI:「過去3日間で、資料請求ボタンに52件のレイジクリック
(連打クリック)が発生しています。モバイルユーザーに集中しており、
ボタンのタップ領域が小さすぎる可能性があります。
ボタンサイズを44px以上に拡大することをおすすめします。」
あなた:「TOPページのPLANリンク、どっちがクリックされてる?」

AI:「Informationセクションの『家具レイアウト図面を公開』リンクが
61クリック(13.9%)で、ヘッダーの通常PLANボタン(11.8%)より
効果的です。新しい情報は通常のナビゲーションより注目されます。」

GA4との違い・Clarityならではの強み

GA4の得意分野 Clarityの得意分野
数値・トレンドの把握 ユーザーの感情の理解
コンバージョン測定 UX問題の発見
トラフィック分析 具体的な行動の観察
カスタムイベント設定必要 自動でクリック追跡
「何が起きたか」 「なぜ起きたか」

Clarity MCP Serverが自動で分析してくれること

  1. UX問題の自動検出

    • デッドクリック(反応のないクリック)
    • レイジクリック(イライラして連打)
    • クイックバック(すぐ戻るボタン)
    • 過剰なスクロール
  2. 特定リンク・ボタンのクリック数

    • カスタムイベント設定なしで自動追跡
    • テキスト内容で識別可能
    • デバイス・地域別の分析も可能
  3. セッションリプレイの条件検索

    • 特定の行動をしたユーザーを抽出
    • エラー発生時のセッションを特定
    • コンバージョン直前離脱の原因追跡
  4. スクロール・エンゲージメント分析

    • ページ特定セクションへの到達率
    • テキスト選択(コピー)された箇所
    • リサイズイベントの発生状況

セットアップ手順

必要なもの

  • ✅ Microsoft Clarityアカウント(無料)
  • ✅ Clarityを設定済みのウェブサイト
  • ✅ Claudeアカウント
  • ✅ Node.js環境

ステップ1:Clarity APIトークンの取得

  1. Microsoft Clarityにログイン
  2. 分析したいプロジェクトを選択
  3. プロジェクト上部中央「設定」から → 左メニュー「データのエクスポート」を選択
  4. 「+ 新しいAPIトークンを生成する」をクリック
  5. トークンに分かりやすい名前を付ける(例:「clarityAPI_[プロジェクト名]」等)
    (4文字から32文字の英数字、-、_、および . 文字を使用できます)
  6. 生成されたトークンをコピーして安全な場所に保存

⚠️ 重要: APIトークンは一度しか表示されません。必ず保存してください!

ステップ2:Claude Desktopの設定

  1. Claude Desktopをダウンロード・インストール
  2. Node.jsをインストール(LTS版推奨)
  3. Claude Desktop [設定] > [開発者] > [設定を編集] から
    設定ファイル(claude_desktop_config.json)を編集:
{
  "mcpServers": {
    "mcp-clarity-[サイト名]": {
      "command": "npx",
      "args": [
        "@microsoft/clarity-mcp-server",
        "--clarity_api_token=あなたのAPIトークンをここに貼り付け"
      ]
    },
    // 複数サイトがある場合
    "mcp-clarity-[サイト名2]": {
      "command": "npx",
      "args": [
        "@microsoft/clarity-mcp-server",
        "--clarity_api_token=あなたのAPIトークンをここに貼り付け"
      ]
    }
  }
}

💡 ポイント: サイト名は日本語でもOKですが、英数字の方が管理しやすいです。

ステップ3:動作確認

Claude Desktopを完全に再起動して、新しいチャットで:

「過去3日間のトップブラウザは?」

と入力してデータが表示されれば成功です。


📍 今すぐ使える!効果的な質問テンプレート集

# UX問題の発見:
## 1. デッドリンク・デッドクリックの特定
  「過去3日間のデッドリンク(リンク切れ)とデッドクリック(反応のないクリック)、レイジクリック(連打クリック)が多いページがないか確認して。」
→ リンク切れやユーザーがフラストレーションを感じている箇所を発見できます

## 2. ブラウザ・OS別の体験差
「過去3日間のブラウザ別・OS別のトラフィックとエンゲージメント時間を
比較して、特定の環境で問題がないか確認して。」
→ 特定のブラウザやOSでの問題を早期発見できます

## 3. 特定リンクのクリック分析
「過去3日間のヘッダーナビの『サービス紹介』リンクと、フッターの『サービス紹介』リンク、
どちらがクリック数が多いか比較して。」
(※Microsoft Clarity の管理画面上からは、30日間等で見ることができます)

GA4 MCP Serverと併用する

Clarity MCP ServerとGA4 MCP Serverを両方設定して、定量と定性の両面から分析するのが効果的です。

Google MCP Server を使って、Claudeデスクトップに効果的なGA4分析・改善案を出してもらう始め方

Google Analytics MCP Serverを使えば、Claude(AI)に「先月どうだった?」と聞くだけで、プロ級の分析レポートが手に入ります。しかも完全無料で。この記事では、技術的な知識がなくても、30分でAIによるGA4分析を始められる方法を、...  続きを読む

併用の質問例

「GA4とClarityのデータを組み合わせて分析して:

1. GA4: 過去30日のPV数トップ5のページを特定
2. Clarity: それらのページでのデッドクリックとレイジクリックを分析
3. 改善提案: 人気ページのUXをさらに改善する具体案を提示

この流れで、最も効果的な改善策を教えて」

使い分けの基本

知りたいこと 使うツール
アクセス数・PV数 GA4
コンバージョン率 GA4
ユーザーの感情・フラストレーション Clarity
特定リンクのクリック数 Clarity
デモグラフィック分析 GA4
実際のユーザー行動の観察 Clarity
トレンド分析(長期) GA4
UX問題の発見 Clarity

よくある質問(FAQ)

Q: Clarityのデータはどれくらい遡れますか?

A: Clarity MCP Serverでは、過去1〜3日間のデータのみ利用できます。長期のデータを見るにはブラウザ版Clarityから見る必要があります。

Q: 無料で使えますか?

A: Microsoft Clarity自体もMCP Serverも完全無料です。Claude無料プランでも利用できます。

Q: セッションリプレイも見られますか?

A: MCP Serverではセッション情報の取得はできますが、実際のリプレイ動画を見るには、ブラウザ版ClarityのWebダッシュボードから該当セッションのURLを確認する必要があります。

Q: GA4と比べて何が優れていますか?

A: GA4はカスタムイベントを設定しないと特定のクリックを追跡できませんが、Clarityは自動で全てのクリックを記録します。また、デッドクリックやレイジクリックなどのUX問題も自動検出することができます。


まとめ

Microsoft Clarityを使えば、

  • ✅ デッドリンクやデッドクリックの早期発見
  • ✅ ユーザーのフラストレーションを自動検出
  • ✅ UX問題の優先順位付きで改善案が手に入る

「なぜユーザーは離脱するのか?」「どこでつまずいているのか?」という疑問に応え、UX改善ができるようになります。Google MCP Server と組み合わせて、同時にUX問題の発見、改善案を出してもらうのが効果的です。

関連記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?