Wonder

Wonder: デザインとコードを融合させるAI駆動型デザインツールの新基準

現代のプロダクト開発において、デザインとエンジニアリングの間の溝は常に大きな課題でした。Wonderは、この境界線を完全に取り払うために生まれた、革新的な次世代デザインツールです。Wonderのコンセプトは「What you see is what you ship（見たままをそのままプロダクションへ）」。キャンバス上でAIと共にデザインを生成し、精密な編集を行い、最終的にそのまま「動くコード」として出力することが可能です。

現在、WonderはPublic Alphaとして公開されており、デザイナーや開発者がアイデアを0から1へと最速で形にするための強力な環境を提供しています。

---

Wonderとは？（What's Wonder）

Wonderは、AIによるデザイン生成、精密なビジュアル編集、そして実際のコードコンテキストでの作業を同一のキャンバス上で行えるデザインツールです。従来のツールのように「見た目だけの図面」を作るのではなく、ReactやTailwind CSSといった実際のコードに基づいたデザインを構築します。

Wonderを使えば、AIエージェントとチャットしながら新しいフローを開始したり、既存のデザインをベースに反復試行（イテレーション）を繰り返したりすることが容易になります。デザインデータとコードが1:1でマッピングされているため、エンジニアへの面倒なハンドオフ（受け渡し）作業はもう必要ありません。

---

Wonderの主な特徴（Features）

1. AIエージェントによるデザイン生成

Wonderでは、Claude Opus 4.6などの高度なAIモデルを活用して、キャンバス上で直接デザインを生成できます。新しいユーザーフローの作成やプロジェクトの立ち上げをAIがサポートし、アイデアからキャンバスへの具体化までにかかる時間を劇的に短縮します。

2. コードベースのプロダクション品質

すべてのデザインは、そのまま「本物のコード」として構築されます。生成されたデザインからReact + Tailwindのコードをコピーし、そのままプロジェクトに反映させることが可能です。ハンドオフによる情報の損失や、デザインの再現性に悩まされることはありません。

3. コードエージェントとの連携（Wonder MCP）

WonderはClaude Code、Cursor、Codexといった主要なコーディングエージェントと接続できます。**Wonder MCP（Model Context Protocol）**を通じて、デザイン形式とコードを1:1で同期させ、デザイナー自身が開発ループ全体をコントロールできるようになります。

4. 強力な編集ツールキット（Wonder Toolkit）

キャンバス上には、馴染み深くも強力なツールが揃っています。

• レイアウト生成とスタイル変更: AIを用いてバリアントを作成し、テーマや間隔（spacing）を瞬時に調整可能。
• 画像生成機能: プレースホルダーは不要です。必要な画像を説明するだけで、キャンバス上に直接アセットを生成します。
• シェーダーによる視覚効果: シェーダーを活用することで、デザインの品質を10倍に高め、インタラクティブで美しいビジュアルを作成できます。

---

Wonderの使い方（How to Use）

Wonderを活用して、効率的にプロダクトを開発する手順は以下の通りです。

1. 新しいプロジェクトの開始: Wonderのキャンバス上でAIエージェントに指示を出し、新しいデザインフローやコンポーネントのプロトタイプを生成します。
2. キャンバスでの編集とブラッシュアップ: 生成されたレイアウトに対し、スタイルの変更、コピー（テキスト）の編集、テーマの切り替えを直感的に行います。バリアントを作成して、複数のパターンを比較検討することも可能です。
3. アセットの統合: 「Generate Images」機能を使用して、デザインに最適な画像をその場で生成し配置します。
4. コードへの変換とエクスポート: デザインが完成したら、ReactとTailwind CSSのコードとしてエクスポートするか、連携しているコーディングエージェント（Cursor等）へ直接送信します。
5. プロダクションへのデプロイ: 取得したコードを実際のプロジェクトに貼り付けるだけで、実装が完了します。

---

主な活用シーン（Use Case）

• 0から1への高速プロトタイピング: アイデアを即座に視覚化し、動作するコードへと変換したいスタートアップや新規事業開発。
• デザインの反復試行（イテレーション）: 以前のデザインを文脈（コンテキスト）として保持しながら、新しいオプションを次々と探索するフロー状態の維持。
• エンジニアとのシームレスな連携: デザインと実装の乖離をなくし、デザイナー自身が最終的な成果物のコードを管理したい場合。
• 高品質なランディングページの作成: シェーダーやAI生成画像を用いた、視覚的にインパクトのあるWebサイトの構築。

---

料金プラン（Pricing）

Wonderは無料で使い始めることができ、ニーズに合わせてアップグレードが可能です。

• Free ($0/month):
  • 実験や探索に最適。
  • 月間300クレジット、コードエクスポート、画像生成、Discordによるコミュニティサポート。
• Pro ($20/month):
  • チームでの開発に最適。
  • 月間3,000クレジット、無制限のMCPツール呼び出し、プロジェクト数無制限、優先生成キュー。
• Pro+ ($60/month):
  • 迅速なデプロイを行うデザイナー向け。
  • 月間12,000クレジット、新機能への早期アクセス、プライベートサポートチャンネル。
• Max ($200/month):
  • パワーユーザーおよび毎日開発を行うデザイナー向け。
  • 月間60,000クレジット、優先的な機能リクエスト受付、製品開発サポート。

---

よくある質問（FAQ）

Q: Wonderは誰が運営していますか？ A: Wonderは**Aquila Labs, Inc.**によって提供されています。

Q: どのようなコードが出力されますか？ A: 主にReactとTailwind CSSに基づいた、そのままプロダクションで使用できる形式のコードが出力されます。

Q: 「MCP」とは何ですか？ A: Model Context Protocolの略で、WonderをCursorやClaude Codeなどの外部コーディングエージェントと接続し、デザインとコードの文脈を共有するための仕組みです。

Q: デザイン経験がなくても使えますか？ A: はい、AIエージェントと対話しながらデザインを生成できるため、ビジョンを形にしたいすべての人にご利用いただけます。

"Our mission is to make design intuitive. We do this with Wonder, a design tool where you generate designs with AI and work with your real components on the same canvas."

Wonderを使って、あなたのビジョンを今すぐ形にしましょう。 Start for free