Wonder実際のコード文脈を使って画面案を作り、キャンバスで編集する

WonderはAquila Labs, Inc.が提供するコード連携型のAIデザインキャンバスです。既存の製品文脈を踏まえてデザインを生成・修正し、ReactとTailwindのコードとして取り出せます。Freeプランには数量未公開のAIチャット枠があり、Proはユーザーあたり月16ドルの年払い表示で、毎月20ドル分のAIトークン利用枠を含みます。

公式サイトを見る無料枠・料金を見る

知能圏編集部公式情報を整理・実機未検証情報確認 2026年9月25日（料金ページまで確認）

こんな仕事に: デザインとフロントエンド実装の間を行き来するプロダクトチーム。
無料で試せる範囲: 無料プラン。無料
日本語で使う前に: 日本語UIは公式資料で確認できていません。日本語の入力対応は未確認です。日本語の出力対応は未確認です。実際の日本語品質は未検証です。調査時点の不明点: 日本語の個別条件は未確認

使える仕事と向いている人

実装中の画面や既存コンポーネントを参照しながら、UI案を短い往復で作りたいとき。

候補になるのは

デザインとフロントエンド実装の間を行き来するプロダクトチーム。

Wonderでできること

コード文脈を踏まえてデザイン: 既存の画面やコンポーネントを参照しながら、キャンバス上でデザインを生成・探索・調整します。
生成したデザインを手で修正: 生成結果は編集可能な状態で残り、手作業で細部を調整できます。
ReactとTailwindへつなぐ: デザインはコードとして扱われ、ReactとTailwindでコピーして実装へ渡せます。

料金の仕組みと日本語の確認点

提供元: Aquila Labs, Inc. d/b/a Wonder
試用・料金: 無料条件・公開料金・課金単位は、確認できた内容を以下の項目に分けて記載しています。
無料で試せる範囲: 無料プラン。無料
有料プランの目安: Proの表示額は年払いで、年額合計・税・最低席数・超過時の料金は確認できていません。
費用が増える単位: サブスクリプション形式です。契約期間・利用者単位・追加利用料を公式料金ページで確認してください。
公式サイトの日本語ページ: 未確認です。公式サイトを自動取得できなかったため、判定していません。確認日 2026-09-18／日本語の入出力の品質は別の項目です
日本語で使う前に: 日本語UIは公式資料で確認できていません。日本語の入力対応は未確認です。日本語の出力対応は未確認です。実際の日本語品質は未検証です。調査時点の不明点: 日本語の個別条件は未確認

料金の金額・税・為替・提供地域は契約時の公式表示をご確認ください。

導入前の注意点

Proの表示額は年払いで、年額合計・税・最低席数・超過時の料金は確認できていません。
FreeのAIチャット枠の数量・更新条件と、日本語対応は未確認です。

最初に試して確かめること

以下は知能圏の検証提案です。実施済みの手順や結果ではありません。

自社で使うAI機能がFree枠に含まれるか、トークン消費と超過条件を確認する。
React/Tailwindの出力形式と、実装環境への受け渡し方法を確認する。

参照リンクと確認範囲

製品名・提供状況・機能を公式資料で確認しました。料金、無料条件、日本語対応は根拠の状態に合わせて記載し、実機未検証の項目は未確認としています。

2026年9月25日時点の公式資料を確認しました。実際の性能、使い勝手、日本からの契約可否は未検証です。ページ内の選び方と検証提案は知能圏編集部の見立てです。

情報の訂正・更新を知らせる

掲載情報について

掲載内容の誤りや古い情報の指摘は、提供元からでも読者からでも無料で受け付けています。内容を確認したうえで、必要な箇所を直します。

提供元ご自身での訂正と新規の掲載申請は掲載の申請ページから受け付けています。掲載と訂正に費用はかかりません。

Get your product listed in Japanese（英語の申請ページ）