# Wonder Wonderは、デザインの作成・編集とコード連携に対応するAIネイティブなデザインツールです。 - Findings24: - ウェブサイト: - 料金: Freemium - カテゴリー: AIグラフィックデザイン, AIデザインアシスタント ## Wonderとは？ Wonderは、レイアウトの生成、編集、コードコンテキストとの同時作業を1つのキャンバスを中心に行えるAIネイティブなデザインツールです。サイトでは、AIと対話しながらデザインし、結果を実際のコードと整合させる方法として位置づけられています。 この製品は、デザインから本番環境までを直接つなぐ流れを重視しています。Wonderによると、デザインはコードによって裏付けられており、React + Tailwindとしてコピーでき、MCPサーバー経由でコーディングエージェントに接続できるため、従来の引き継ぎなしにキャンバスと開発ツールの間で作業を移せます。 Wonderは反復的な探索もサポートしています。新しいデザインプロジェクトを開始し、バリエーションを作成し、レイアウトや余白を調整し、コピーを編集し、画像を差し替え、キャンバス上でアセットを生成できます。MCPのドキュメントでは、そのワークフローを Cursor や Claude Code などの対応エージェントへ拡張しています。 会社の利用規約では、Wonderは実際のHTMLとCSSに基づいてデザインを作成、編集、共同作業するためのツールであり、本番対応のコードエクスポートを備えていると説明されています。製品は wonder.design で提供されており、Free ティアと、より多く使う方向けの有料プランがあります。 ## Wonderでできること ### AI支援のキャンバスデザイン ビジュアルキャンバス上でデザインを生成し、同じワークスペースを離れずに細かな変更を加えられます。 ### チャット主導の反復 チャットを通じてデザインを編集でき、1つのキャンバス上でデザインとAIとのやり取りをまとめて行えるように設計されています。 ### コードに整合した出力 Wonderのデザイン形式をコードに1:1で対応付け、別の引き継ぎ工程なしでデザインを本番へ移行できるようにします。 ### 本番ワークフローへのエクスポート デザインから React + Tailwind をコピーするか、結果をコーディングエージェントに送ってさらに開発できます。 ### MCPベースのエージェント接続 WonderのMCPサーバーを使って、対応するコーディングエージェントがキャンバス内容を双方向に読み書きできるようにします。 ### ビジュアルアセット生成 画像を生成し、シェーダーを使って、デザインフロー内でより豊かなビジュアル要素を直接作成できます。 ## 利用シーン ### 製品UIをゼロから設計する 新しいレイアウトを生成し、キャンバス上で編集しながら、最終的に公開されるコードと整合した状態を保てます。 ### 既存画面を反復改善する 余白、スタイル、文言、画像の選択、バリエーションを調整しながら、同じ作業コンテキスト内でデザインを進められます。 ### デザインからコードへの共同作業 Wonderをコーディングエージェントに接続し、設計と実装の間を移動しながら、エージェントにキャンバスの読み書きを行わせられます。 ### ビジュアルアセットを作成する プロジェクトでプレースホルダー以上の豊かなアセットが必要な場合に、画像やシェーダーベースのビジュアルをデザインフロー内で直接作成できます。 ### 導入前にツールを評価する Freeプランでワークフローを試し、チームにさらに多くのクレジットや追加のMCPツール呼び出しが必要なら有料ティアへ移行できます。 ## よくある質問 ### Wonderは何に使うものですか？ Wonderでは、ビジュアルキャンバス上でデザインを生成し、細かな編集を行い、同じ画面でコードのコンテキストと並行して作業できます。また、MCPサーバーにより、対応しているコーディングエージェントがWonderのキャンバス内容を読み書きできます。 ### Wonderにはどのコーディングエージェントが接続できますか？ ドキュメントによると、Wonderは現在 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable、およびカスタムMCPクライアントをサポートしており、公式プラグインを使う場合は Cursor、Claude Code、Codex が最も早く接続できます。 ### Wonderではどのような出力ができますか？ Wonderは本番対応のコードをエクスポートでき、ホームページではデザインから React + Tailwind をコピーできると案内されています。利用規約でも、ユーザーは本番対応のコードをエクスポートできると記載されています。 ### Wonderには無料プランがありますか？ 料金ページには Free プランと、有料の Pro、Pro+、Max プランが表示されています。Free は月額 $0、Pro は月額 $20、Pro+ は月額 $60、Max は月額 $200 です。 ### WonderのMCP認証はどのように機能しますか？ MCPのドキュメントでは、APIキーの管理は不要で、OAuthベースのサインインを使用し、認可後はトークンが自動的に更新されると説明されています。 ## クイック情報 - **カテゴリ**: デザインツール / 開発者向けツール - **プラットフォーム**: wonder.design のWebアプリ - **ワークフロー**: キャンバス上でデザインし、その後コードへエクスポートまたは同期 - **連携**: Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable、およびカスタムクライアント向けのMCPサーバー - **料金**: Freeプランに加え、Pro、Pro+、Maxの有料プラン - **会社**: Aquila Labs, Inc. d/b/a Wonder