Menu

Microsoft Clarity

Microsoft Clarity は、Microsoft が提供する無料のユーザー行動分析ツールです。主に以下を使用します：

  • Session Recording（セッション録画）：ユーザーがページ上で実際に操作した過程を表示（スクロール、クリック、滞在等）
  • Heatmaps（ヒートマップ）：ユーザーのクリック/スクロールの集中領域を分析
  • UX 問題の特定：「ユーザーが詰まった/入口が見つからない/フォームが放棄された」などの体験問題を見つけるのに役立ちます

注目すべき点

  • NEXTY.DEV は開発環境では統計スクリプトを無効化しており、データ汚染を防ぎます
  • ローカルで検証したい場合は app/[locale]/layout.tsx を開き、process.env.NODE_ENV === "development" の判定を削除してください
  • ローカル検証が不要なら、本番環境の環境変数を設定するだけで該当スクリプトが自動的に有効になります

ステップ

  1. Microsoft Clarity ダッシュボードにログインします
  2. プロジェクトを作成します
  3. プロジェクト ID をコピーします
  4. プロジェクト ID を環境変数 NEXT_PUBLIC_CLARITY_PROJECT_ID に貼り付けます
.env
NEXT_PUBLIC_CLARITY_PROJECT_ID=example.com
Microsoft Clarity Project ID