AIでWebサイトのUI/UX分析を再現可能にする — GitHubスター40万超のREA × Codex / Claude Codeで考える分析基盤

はじめに

他社WebサイトのUI/UXを調査するとき、ページを操作し、スクリーンショットを保存し、画面構成やユーザー導線を整理する。

こうした作業は、今でも人間が手動で行うことが少なくありません。

では、他社WebサイトのUI/UX分析そのものを、AIエージェントに任せられないだろうか。

単にWebサイトをAIに評価させるのではありません。

ユーザー操作を再現し、DOMやアクセシビリティ情報を収集し、ページ更新前後の違いを根拠付きで比較する仕組みです。

そこで注目したのが、GitHubスター40万超（2026年10月28日時点）のREA（あらゆるものをリバースエンジニアリング）です。

今回は、REAとCodex / Claude Codeを組み合わせ、他社Webサイトの調査にも応用できる、継続的かつ再現可能なUI/UX分析基盤のアーキテクチャを考えてみます。

本記事について

公式ドキュメントに基づく技術調査・設計記事です。実際の環境構築や動作検証は行っていません。

Webサイトへのアクセスや自動操作は、利用規約・許可された範囲に従うことを前提とします。

1. REAによるWebサイト分析

REAは、AIエージェントとソフトウェア解析ツールをMCPで接続するプロジェクトです。

Webサイト分析では、Chrome DevTools Protocol（CDP）やPlaywrightを利用した機能が提供されています。

機能	できること
inspect_web_page	DOM、アクセシビリティ、スクリプトなどの観測
capture_web_screenshot	スクリーンショットの取得
observe_web_session	画面遷移やナビゲーションイベントの観測
capture_browser_scenario	定義したブラウザー操作の実行と記録
compare_web_captures	過去の観測結果との比較

ここで重要なのは、REAがWebサイトの観測と操作を異なる機能として扱っていることです。

CDPによるページ観測は基本的に受動的な情報取得です。一方、Playwrightによるシナリオ実行では、定義されたクリックや待機などの操作を実行できます。

そして、それぞれの結果をEvidenceとして扱える設計になっています。

参考：REA — Website Observation

2. REA × AIエージェントによる分析アーキテクチャ

今回考えた構成は次のとおりです。

設計イメージであり、実装済みのシステムではありません。

各コンポーネントの役割は次のとおりです。

ツール	役割
Codex / Claude Code	調査計画・分析・レポート作成
REA	Web観測・ブラウザー操作シナリオ・差分比較
CDP	DOM・アクセシビリティ・通信などの観測
Playwright	クリック・待機などの操作
Evidence Store	観測結果と実行条件の保存

既存のPlaywrightだけでもブラウザー操作の自動化は可能です。

今回REAを組み合わせる理由は、観測結果や差分をEvidenceとして扱い、AIエージェントによる分析と結び付けることにあります。

AIエージェント部分は、MCPクライアントであれば置き換えられます。REAのセットアップは、Claude Code、Codex、Cursor、Gemini CLIなどに対応しています。

3. Claude Code / CodexにREAを導入する

REAの導入には、公式のセットアップウィザードを使います。

npx --yes rea-agents@latest setup

検出されたエージェントからClaude CodeやCodexを選び、変更内容を確認して承認すると、MCPサーバーの登録とワークフロー用のSkillのインストールが行われます。既存の設定はバックアップされます。完了後はエージェントを再起動します。

Claude Codeに手動で登録する場合は、次のコマンドでも構成できます。

claude mcp add rea --scope user -- npx -y rea-agents@latest mcp

登録後、Claude Codeで/mcpを実行すると接続状態を確認できます。

手動登録ではSkillはインストールされません。REAのワークフロー手順も使う場合は、セットアップウィザードを利用するのが確実です。

再現性を重視する場合は、@latestではなくrea-agents@VERSIONの形でバージョンを固定します。

前提条件は次のとおりです。

項目	要件
Node.js	22.19以上、または24.11以上
ブラウザー	Chrome系ブラウザー（Webサイト分析時）

参考：REA — Installation and Setup

4. 操作シナリオを再現可能にする

WebサイトのUI/UX分析で重要なのは、トップページのスクリーンショットを取得することだけではありません。

例えば、次のような一連の操作です。

トップページ
    ↓
目的の項目を選択
    ↓
詳細ページ
    ↓
操作を実行
    ↓
結果を確認
    ↓
前のページへ戻る

この操作をシナリオとして定義しておけば、同じ条件で再実行する仕組みを考えられます。

REAでは、capture_browser_scenarioにJSON形式のシナリオを渡せます。

以下は、ローカルの検証用ページを想定した例です。

browser-scenario.json

{
  "browser": {
    "mode": "launch",
    "executable_path": "/absolute/path/to/chromium"
  },
  "start_url": {
    "url": "http://127.0.0.1:3000"
  },
  "actions": [
    {
      "step_id": "open-detail",
      "action": "click",
      "locator": {
        "kind": "css",
        "selector": "#detail-link"
      },
      "timeout_ms": 10000
    }
  ],
  "capture": {
    "at_end": [
      "dom",
      "accessibility",
      "screenshot",
      "url"
    ]
  }
}

REA公式のシナリオ仕様に基づく設計例です。対象ページやブラウザーのパスは仮の値で、実行検証はしていません。

このJSONをbrowser-scenario.jsonとして保存した場合、次のCLIで実行する構成になります。

rea capture-browser-scenario ./browser-scenario.json \
  --json > browser-capture.json

実際には、クリック後の非同期処理が完了したことを確認するための待機条件も必要になります。

参考：REA — Browser Scenario Contract

5. EvidenceによるUI/UX差分分析

継続的なUI/UX分析で重要なのは、前回の調査結果と比較できることです。

例えば、Webサイトの更新前後で次のような変化を確認します。

比較対象	分析内容
DOM	要素の追加・削除
アクセシビリティ	ラベルや要素構造の変更
スクリーンショット	レイアウト・見た目の変更
ナビゲーション	遷移先やURLの変更
操作シナリオ	操作成功・失敗や到達状態の変化

REAには、compare_web_capturesやcompare_web_screenshotsなどの比較機能が用意されています。

ただし、検出された差分が必ずしもUI/UX上の改善や問題を意味するとは限りません。

広告、時刻、動的なコンテンツ、A/Bテストなどによっても結果は変わります。

そこで、AIの判断を次の3種類に分けます。

• Observed：実際に観測された変更
• Inferred：観測結果から推測した内容
• Unknown：根拠が不足している事項

AIが変更候補とEvidenceを提示し、人間が最終判断する。

この構成なら、分析結果の根拠を確認しながら、継続的なUI/UX調査へ発展させられる可能性があります。

6. AIエージェントに分析を任せる

今回の分析基盤を設計するためのプロンプト例です。Codex、Claude Codeのどちらでも使えます。

WebサイトのUI/UX分析を、
再現可能なワークフローとして設計してください。

技術構成：
- Codex または Claude Code
- REA / MCP
- CDP
- Playwright

要件：
1. 操作シナリオを定義する
2. DOMとアクセシビリティ情報を取得する
3. スクリーンショットと操作結果を保存する
4. 各分析結果にEvidenceを紐付ける
5. 前回の分析結果との差分を整理する
6. Markdown形式のレポートを生成する

制約：
- 許可されたWebサイトと操作だけを対象にする
- 観測事実と推測を区別する
- 未実行の処理を成功として扱わない
- 取得できなかった情報を推測で補完しない

重要なのは、AIへ自由に分析させるのではなく、何を観測し、何を根拠として判断するのかを先に定義することです。

他社Webサイトを対象とする場合は、利用規約、アクセス頻度、認証情報、個人情報などの取り扱いに注意する必要があります。

公開されているWebサイトでも、すべての自動操作や内部解析が許可されるわけではありません。

参考：REA — Disclaimer

まとめ

今回は、REAとCodex / Claude Codeを組み合わせ、WebサイトのUI/UX分析を再現可能なプロセスにするためのアーキテクチャを考えてみました。

特に重要なのは、次の4点です。

1. 操作をシナリオとして定義する
2. DOM・アクセシビリティ・画面情報をEvidenceとして保存する
3. 過去の観測結果と継続的に比較する
4. AIによる推測と観測事実を区別する

今回の構成はまだ設計段階であり、実際の再現性や分析精度については検証が必要です。

それでも、REAが提供するブラウザー観測とシナリオ実行の仕組みは、従来のWebサイト調査を見直すうえで興味深い選択肢だと考えています。

AIエージェントの価値は、Webサイトを分析できることだけではない。

その分析プロセス自体を、再現・比較・検証できる仕組みに変えられる可能性にある。

WebサイトのUI/UX調査も、その対象のひとつになるのではないでしょうか。

参考資料

• REA — GitHub
• REA — 日本語README
• REA — Website Observation
• REA — Browser Scenario Contract
• REA — Installation and Setup
• REA — Disclaimer