ditto.site

ditto：あらゆるURLをNext.js/Viteコードに変換する決定論的ウェブサイトクローナー

現代のウェブ開発において、ゼロからUIを構築する作業は非常に時間がかかります。特に、既存の優れたデザインを参考にしながら、それをReactやNext.jsのコンポーネントとして再構成する作業は骨の折れるものです。dittoは、そのような課題を解決するために開発された「オープンソースの決定論的ウェブサイトクローナー」です。

dittoを使えば、任意のウェブサイトのURLを指定するだけで、わずか5分以内に、クリーンで整理されたNext.jsまたはViteのコード一式を手に入れることができます。本記事では、この革新的なツール「ditto」の機能や特徴、具体的な使い方について詳しく解説します。

---

What's ditto (dittoとは)

dittoは、ion.designによって構築された、オープンソースかつ決定論的なウェブサイトクローニング・ツールです。一般的なAIベースのツールとは異なり、LLM（大規模言語モデル）の推測に頼ることなく、ウェブサイトのDOM、スタイル、モーションを直接解析します。

「dittoは完全な決定論的（Deterministic）なエンジンです。LLMをサイトに向けて結果を祈るようなことはしません。高速で、安定し、一貫した出力を提供します。」

このツールは、単にHTMLをコピーするだけではありません。デザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、そしてセクション単位の構造を抽出し、開発者がすぐに利用・メンテナンスできる形式でコードを生成します。AIアプリケーションのビルダーにとって、空白のキャンバスから始めるのではなく、忠実で本物のコードをベースとしたスタート地点を提供するための完璧な第一歩となります。

---

dittoの主な特徴 (Features)

dittoが他のクローニングツールやAI生成ツールと一線を画す理由は、その「決定論的（Deterministic）」なアプローチと、出力されるコードの質の高さにあります。

1. 決定論的エンジンによる高い忠実度

dittoは独自のエンジンにより、以下の高いパフォーマンス指標を達成しています：

• 決定論（Determinism）: 100%
• 忠実度（Fidelity）: 96%
• コンポーネント化（Componentized）: 92%
• カバー率（Coverage）: 88%

2. メンテナンス性に優れた出力コード

生成されるコードは、決して巨大な1つのファイルではありません。dittoは繰り返されるDOMをコンポーネントに分割し、領域をセクションとして整理します。さらに、編集可能なコンテンツモデルを抽出し、実際のプロジェクトとして出力します。

出力されるプロジェクトの主な構成要素：

• TypeScript: 型定義された安全なコード。
• Tailwind v4 / CSS: 最新のスタイリング手法を採用。
• デザイントークン & Webフォント: 色やフォント設定を分離。
• アニメーション & モーション: 宣言的なモーションレシピの抽出。
• SEO & メタデータ: JSON-LDやサイトマップの生成。

3. 高度な要素のキャプチャ

単なる静的なレイアウトだけでなく、以下のような動的な要素や状態もキャプチャします：

• ホバー状態およびフォーカス状態
• ドロップダウンメニュー
• アコーディオン
• レスポンシブレイアウトのブレークポイント

---

How to Use (利用方法)

dittoには、開発スタイルに合わせて選べる3つの利用方法が用意されています。どの方法を選んでも、内部では同じ強力な決定論的エンジンが動作します。

1. オープンソースとしてのセルフホスト

MITライセンスの下、GitHubからクローンして自身のローカル環境で実行できます。すべてのパイプラインを自分で管理し、コードを1行ずつ確認することが可能です。

gh repo clone ion-design/ditto.site
cd ditto.site && npm install
npm run clone -- https://example.com

2. REST APIの利用

インフラの管理をスキップしたい場合は、ホストされたAPIエンドポイントを利用できます。URLをPOSTし、ジョブをポーリングして完了を待つだけで、プロジェクトを取得できます。Next.jsまたはViteを選択可能です。

# ジョブの開始
curl -X POST https://api.ditto.site/v1/clones \
  -H "Authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{"url":"https://example.com/", "options":{"mode":"single","framework":"next","styling":"tailwind"}}'

# 進捗の追跡
curl https://api.ditto.site/v1/clones/$JOB/events?after=0 \
  -H "Authorization: Bearer $DITTO_API_KEY"

3. MCPサーバー (AIエージェント向け)

ClaudeやCursorなどのAIエージェントにクローニング機能を持たせることができます。エージェントのビルドループにdittoを組み込むことで、対話形式でのサイト構築が可能になります。

{
  "mcpServers": {
    "ditto": {
      "url": "https://api.ditto.site/mcp",
      "headers": {
        "Authorization": "Bearer ${DITTO_API_KEY}"
      }
    }
  }
}

---

ユースケース (Use Case)

dittoは、以下のようなシーンで圧倒的な力を発揮します。

• AIアプリビルダーの起点: 新しい顧客に対して、空白の画面ではなく、既存サイトをベースにした本物のコードから開発を開始させることができます。
• UI/UXリサーチとプロトタイピング: 既存サイトの構造を素早くReactコンポーネント化し、新しい機能のプロトタイプを高速に構築します。
• レガシーサイトのモダン化: 古い技術で作られたサイトをスキャンし、Next.jsやTailwind CSSを用いたモダンなスタックへの移行をスムーズにします。
• 開発効率の向上: 手動でのコーディング作業を大幅に削減し、5分でプロジェクトの土台を完成させます。

---

FAQ (よくある質問)

Q: dittoの利用料金はいくらですか？ A: dittoはMITライセンスのオープンソースであり、無料（$0）で利用可能です。GitHubからセルフホストすることも、ホストされたAPIを利用することもできます。

Q: 生成されるコードのフレームワークは何ですか？ A: Next.jsまたはViteを選択できます。また、スタイリングにはTailwind v4または標準のCSSが使用されます。

Q: 他のウェブサイトクローナーとの違いは何ですか？ A: 最大の違いは「決定論的（Deterministic）」であることです。LLMによる予測を行わないため、出力が安定しており、コードがスパゲッティ状態にならず、コンポーネントごとに整理されたメンテナンスしやすい形で出力されます。

Q: 複数ページのクローンは可能ですか？ A: はい、オプション設定によりシングルページ（single）だけでなく、マルチページ（multi-page）のルートにも対応しています。

Q: TypeScriptには対応していますか？ A: はい、dittoが生成するコードはTypeScriptで記述されており、型安全な開発が可能です。