Claude Code UXリサーチャー：AIエージェントによる競合分析とUIベンチマークの自動化

TL;DR: 毎週10時間を「競合調査 (Competitive Audit)」に費やすのはやめましょう。Claude Code（ターミナルAgent）と Playwright を組み合わせることで、競合サイトを自動スクレイピングし、AI VisionでUIを分析するリサーチ助手を構築できます。今回は Perp DEX の取引量上位を実例に解説します。

対象読者

UXリサーチャー：手動のキャプチャや表作成から解放され、戦略的な分析に集中したい方。
PM（プロダクトマネージャー）：競合機能のアップデートを迅速に把握し、PRDの意思決定に活かしたい方。
dApp競合分析アナリスト：Web3エコシステム全体のインタラクションパターンを専門に調査する方。

ユーザー・ジャーニー (User Journey)

人物像: Max、DeFiプロトコルのシニアデザイナー。

起動: 月曜日の朝に claude-watchtower スクリプトを実行。

自動化: エージェントがAPI経由で上位プロトコルを特定し、最新のスクリーンショットをキャプチャ。

AI分析: Claude Visionが自社プロダクトと競合の「取引画面」を自動比較。

成果: Maxは10分で構造化されたレポートを確認し、残りの8時間を差別化設計に充てる。

課題：終わりのない「調査疲れ」

変化の激しいDeFi界隈では、競合他社が毎週のように新機能をリリースします。プロダクトデザイナーやPMにとって、それらを追跡することは以下の作業を意味します：

10以上のdAppを手動で訪問する。
数十枚のスクリーンショットを撮る。
スプレッドシートに機能の有無を記入する。
UIコピーの変更を記録する。

作業が終わる頃には、そのレポートはすでに古くなっています。これは典型的な「繰り返しが多く、価値が高い」タスクであり、AIエージェント・ワークフロー の最適な候補です。

ステージ1：AIによる「体力作業」の代行

自分ですべてを行う代わりに、面倒な作業をClaudeに任せます。

ステップ1：自動検出 (DeFiLlama 取引量)

競合リストを手動で管理する必要はありません。DeFiLlamaのAPIを使用して、24時間取引量上位10位のPerp DEXを取得します。高取引量は、その取引インターフェースが高度に最適化されていることを示唆します。

Claude Codeへの指示例:

「DeFiLlama APIを使用して、24時間取引量上位10位のPerp DEXプロトコルを取得するスクリプトを書いて。各プロトコルのトレード画面のURLをJSONファイルに保存して。」

ステップ2：Agentの「目」(Playwright)

Claude Codeは、Playwrightスクリプトを生成して実行し、ヘッドレスモードでこれらのURLを訪問できます。

主要なアクション: 「ヒーローセクション」と「トレード用ダッシュボード」のスクリーンショットをキャプチャします。

// Claudeが生成したPlaywrightのコード例
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://hyperliquid.xyz');
  await page.screenshot({ path: 'assets/hyperliquid-trade.png' });
  await browser.close();
})();

ステージ2：AI Visionによる深度分析

スクリーンショットを撮るだけでは半分です。次に、Anthropic Vision の機能を使用してUXを「読み取り」ます。

キャプチャした画像をClaudeに渡し、構造化された指示を与えます：

「この Hyperliquid のトレード画面画像を分析して。以下の項目を抽出して：

注文パネル (Order Entry) の配置 (左側/右側)。

主要なCTAボタンの色。

表示されているすべての資産リスト。

視覚的な階層構造 (Hierarchy) を1〜5点で評価して。」

アウトプット：ベンチマーク・マトリックス

最終的な成果物は画像のフォルダではなく、PRDやNotionにそのまま貼り付けられるクリーンなMarkdown形式の表です。

プロトコル	主要資産	主要 CTA	視覚スタイル	UX 複雑度	24H 取引量
Hyperliquid	USDC	Deposit	プロ向け端末	高	$1.2B+
dYdX	USDC	Trade Now	機構投資家向け	高	$800M+
GMX	GLP/GM	Long/Short	デファイ・ネイティブ	中	$300M+

効果の定量化：AIエージェント vs. 手動調査

項目	手動分析 (10社比較)	AIエージェント (自動)
データ収集時間	~4時間	5分未満
分析の深度	個人の主観に依存しやすい	構造化されたタグ付け
メンテナンス	高 (手動での再撮影)	低 (コマンド一発で更新)
網羅性	抜け漏れが発生しやすい	定義済みルールを100％適用

FAQ

Q: AIの分析結果はどのように検証すべきですか？ A: 「サンプリング検証」を推奨します。生成されたレポートの10〜20%をランダムに抽出し、実際のスクリーンショットと照らし合わせて、Visionモデルが特定のUI（ダークモードや複雑なアニメーション）を正しく認識しているか確認してください。

Q: ウォレット接続が必要な画面も分析できますか？ A: Playwrightで秘密鍵を注入したり、セッションをシミュレートすることは可能ですが、開発の複雑さが増します。初期段階では、接続なしでアクセスできるパブリックな「トレード画面」のビジュアルベンチマークに集中することをお勧めします。

リスクと制限事項

AIエージェントは効率を劇的に向上させますが、以下の制限に注意してください：

視覚情報の依存性: この手法は静的なスクリーンショットに基づいています。スクロールでトリガーされるアニメーションや多段階のモーダルなど、複雑な「インタラクションフロー」の分析には、人間の介入が必要です。
トークンコスト: 高解像度のスクリーンショットをキャプチャし、Visionモデルで処理を繰り返すと、APIコストが発生します。
アンチロボット対策: 一部のdAppはヘッドレスブラウザをブロックする場合があります。プロキシの使用や、より「人間らしい」Playwrightの設定が必要になることがあります。

🚀 なぜ2026年にこれが重要なのか

単なる効率化だけでは不十分です。「人間 + AI」の時代を生き抜くには、リサーチャーから**アーキテクト（設計者）**へと進化する必要があります。

データの収集に8時間を費やす代わりに、AIによる自動調査レポートの確認に15分を使い、残りの7時間45分を「競合と差別化するための真の設計決定」に充てるべきです。「データを探す人」から「データの活用を設計する人」へ。

結語：独自の「監視塔」を築く

競合を追いかけるのではなく、自律的に観察しましょう。「Claudeの監視塔」を構築することで、退屈な雑用を戦略的優位性に変えることができます。

次の調査を自動化する準備はできましたか？さあ、構築しましょう。