概要と第一印象
Replay（replay.build）にアクセスしたところ、その大胆な主張にすぐに衝撃を受けました。それは「画面録画をピクセルパーフェクトなReactコードに変換する」というものです。このサイトは、COBOL、Oracle Forms、PowerBuilderなど、数多くの死にかけのフレームワークに悩まされているレガシーシステムのチームをターゲットにしています。「書き換えずにモダナイズ」という見出しは、古いUIの動画からビジネスロジックを抽出し、最新のコンポーネント化されたReactアーキテクチャを出力することを約束しています。ホームページには、サンプルプロジェクトビューア、デモ動画、そして移行した画面数に基づいて節約できる時間を推定する節約計算機があります。デザインは洗練されており、エンタープライズ向けで、業種（金融、ヘルスケアなど）や詳細な機能内訳のセクションがあります。
無料プラン（クレジットカード不要、2回の再構築を含む）が目立つように提供されていますが、有料プランは記載されていません。おそらくエンタープライズ価格のため連絡が必要なのでしょう。これは、Replayが大規模なモダナイゼーションプロジェクトを対象とした初期段階またはクローズドベータ段階にあることを示唆しています。
機能とワークフロー
Replayのワークフローは、Record（記録）、Extract（抽出）、Deploy（デプロイ）という明確な流れで提示されています。抽出段階では、エンジンが動画からレイアウト、タイポグラフィ、時間的な状態変化を分析し、UI画面を再現します。このサイトでは、いくつかの主要なモジュールが紹介されています。
- Reconstruction & Reimagine — 動画を1対1のReactインターフェースに変換し、オプションで19ステップの「Reimagine」パイプラインによりモダンな美観を提供します。
- Library — ボタン、入力フィールド、状態を自動的に抽出し、再利用可能なコンポーネントライブラリとデザイントークンを作成します。
- Flow Map — 動画の時間的なコンテキストを分析することで、複数ページにわたるナビゲーションとユーザージャーニー全体のロジックギャップを理解します。
- Agentic Editor — 検索/置換エージェントを備えたインタラクティブエディターで、周囲のロジックを壊さずにグローバルな変更を行います。
- Multiplayer — カーソル、コメント、同期によるリアルタイムコラボレーションを実現し、チームが同時に抽出とコンポーネント化に取り組めるようにします。
- Design System Sync — FigmaやStorybookに接続し、生成されたコードにブランドカラー、タイポグラフィ、スペーシングトークンを適用します。
- Headless API — REST/Webhookエンドポイントにより、Devinなどの外部AIエージェントが動画を送信し、ReactコードやPlaywrightテストスクリプトを受け取ることができます。
無料プランの「サンプルプロジェクトを表示」を試したところ、レガシーなメインフレーム画面と生成されたReactアプリの横並び比較が表示されました。出力は構造的に正確に見えましたが、実際の録画がないため、本番環境での完全な準備状態を確認することはできませんでした。「無料で始める」フローでは、ユーザーに画面を録画するか、ファイルをアップロードするよう促すものと思われます。
価格と市場での位置付け
価格は、2回の無料再構築から始まるスタータープランと「お問い合わせ」CTA以外は公開されていません。この透明性の欠如は、リスク回避的なレガシー移行を対象としたツールに典型的な、カスタムエンタープライズ価格を示唆しています。代替手段としては、従来の手動書き換え（Replayは70%の失敗確率と主張）や、GitHub Copilotやv0 by Vercelなどのコード生成ツールがあります。しかし、これらのツールはテキストプロンプトや静的デザインから動作するものであり、動作中のアプリケーションの動画からではありません。Replayの差別化要因は、実際の使用状況からビジネスロジックの流れをキャプチャできる点であり、これにより文書化されていないシステムの調査時間を大幅に短縮できる可能性があります。
このツールは、明らかに大規模なレガシーポートフォリオを持つエンタープライズ向けに位置付けられています。リストされている業種（金融サービス、ヘルスケア、テレコム、GovTech）は、COBOL、メインフレーム、Oracle Formsが多くを占めています。また、SOC2準拠とオンプレミスデプロイも提供しており、これは規制対象セクターにとって重要です。スタートアップや製品チームも言及されていますが、おそらく二次的なターゲットでしょう。
最終評価
強み： Replayは、動画を真実の情報源として使用することで、モダナイゼーションに真に斬新なアプローチを導入しています。UIだけでなく、状態変化やナビゲーションフローも抽出できる点は強力です。ヘッドレスAPIとエージェンティックインフラストラクチャにより、高度なワークフローに拡張可能です。デザインシステム同期により、生成されたコードがブランドガイドラインに一致することが保証されます。
制限事項： このツールは現在React出力のみに限定されており、Vue、Angular、その他のフレームワークを使用しているチームには適さない可能性があります。再構築の品質は、録画された動画の明瞭さと完全性に大きく依存しており、隠れた副作用を伴う複雑なロジックは見逃される可能性があります。不透明な価格設定と高額なコストにより、資金力のあるチームにしかアクセスできません。さらに、無料プラン（2回のみの再構築）は、概念実証以上の意味のある評価には制限が強すぎます。
試すべき人： 10年以上前のレガシーシステム（特にメインフレーム、Oracle Forms、Visual Basicを使用しているシステム）を持つエンタープライズチームで、モダナイゼーションのリスクと期間を短縮したい方。動画を入力とした迅速なプロトタイピングを模索している創業者やプロダクトチームも、Reactに慣れており、最終的なライセンス費用を負担できるのであれば価値を見いだせるでしょう。
他の選択肢を検討すべき人： 軽量で低コストのコード生成ツールを必要とする小規模チームや個人開発者。React以外のフロントエンドスタックを使用しているチーム。または、予算に優しいすぐに使えるソリューションを期待している方。
全体として、Replayは困難でハイステークスな問題に取り組む、大胆で革新的なツールです。何年もの間、未分化なレガシースパゲッティコードに悩まされているなら、デモを試す価値があります。ぜひ Replay（https://replay.build/）にアクセスして、ご自身でお確かめください。
コメント