필사 모드: 2026 AIデザイン&UI生成ツール徹底比較 — v0・Lovable・Bolt.new・Figma AI・Galileo・Uizard・Subframe・Magic Patterns・Tempo 深堀り分析

プロローグ — デザインがコードの第一級市民になった年

2026年春、デザインツールの風景が二度目に反転した。一度目は2010年代後半のSketchからFigmaへのクラウド移行。二度目は今 — **プロンプトからproduction-gradeのコンポーネントが落ちてくる時代**である。「ダークモード対応のカード内にボタンを入れて」という一文からshadcn/uiベースのReact JSXが返ってくる。デザイナーがFigmaを開く前にv0が答えを返す。

これがデザインを殺すのか。否。**デザインの入口が変わっただけだ。** 2026年のデザイナーはピクセルを描く人ではなく、デザインシステムをキュレーションし、トークンを定義し、AIが吐き出したドラフトを磨く人である。ピクサーが手描きを殺さなかったように、AIデザインツールもデザイン職を殺さない — 扱うツールの抽象度を一段上げるだけだ。

本稿は25以上のAIデザイン・UI生成ツールを同じ軸で比較する。**v0、Lovable、Bolt.new、Figma AI、Figma Make、Galileo、Uizard、Subframe、Magic Patterns、Tempo、Builder.io Mantis、Plasmic、Phase、Anima、Locofy、Khroma、Spline、Microsoft Designer、Adobe Firefly Design、Canva Magic Studio、Penpot AI、ChatGPT Canvas、Claude Artifacts、Polymet** — それぞれ異なるワークフローのために作られている。「最高」は存在しない。あなたがデザイナーか開発者か、ソロかチームか、デザインシステムがあるかないかで正解が変わる。

> デザインはソフトウェアになり、ソフトウェアはデザインになる。AIは二つの職種が交わる境界に存在する。

第1章 · 比較軸 — 何を見て選ぶか

AIデザインツールを「綺麗・綺麗じゃない」で選ぶと3か月で後悔する。次の8軸で分解せよ。

**軸1 · サーフェス(どこで動くか)**

ブラウザWebアプリ、Figmaプラグイン、VS Code拡張、ネイティブデスクトップ、CLI。サーフェスがワークフローの自然さを決める。v0はブラウザ、Figma AIはFigma内、Subframeはブラウザ+コードエクスポート、Bolt.newはブラウザIDE。デザイナーの一日の90%がFigmaならFigma内ツールが優先、Next.jsを書く開発者ならReact JSXを吐くブラウザツールがよい。

**軸2 · 出力フォーマット**

React JSX(Next.js互換)、Vue SFC、HTML+CSS、Tailwindクラス、vanilla CSS、Figmaフレーム、Sketch、デザイントークン。同じ「ボタン」を頼んでもv0はshadcn/uiベースのReactを吐き、UizardはFigmaフレームを吐き、Locofyは既存FigmaをReactに変換する。**出力がワークフローに合致して**初めて価値がある。

**軸3 · デザインシステム整合性**

「トークンを知っている」の意味。ツールが(a)色・余白・タイポトークンを認識し一貫して使うか、(b)既存コンポーネントライブラリ(shadcn、MUI、Mantine、Radix)と互換か、(c)社内デザインシステムを学習・注入できるか。v0はshadcn/uiを基本に使い、SubframeはTailwindトークンを一級市民として扱う。Lovable・Boltはトークン整合性が弱め — 新規プロジェクトには速いがデザインシステムがある会社では摩擦になる。

**軸4 · 自律性レベル**

スニペット生成(コンポーネント一つ)→ ページ生成(複数コンポーネント組み立て)→ フルアプリ生成(ルーティング・状態・DB・認証まで)。v0はコンポーネント〜ページ、Lovable・Boltはフルアプリ、Figma AIはフレーム/コンポーネント、Uizardは複数画面が繋がったワイヤーフレーム。自律性が高いほど速いが、**間違ったコードをデバッグする責任**も大きくなる。

**軸5 · 反復ループ(refinement)**

初出力が100点の日はない。二度目・三度目のプロンプトで磨くループが滑らかか。チャットで自然言語修正か、視覚的に直接編集か、diffで見せるか。v0の「このカードをもっとコンパクトに」というチャットループ、Subframeの視覚編集+プロンプトのハイブリッド、Magic Patternsの変形ギャラリーといったパターンがそれぞれ異なる。

**軸6 · 価格モデル**

定額サブスクリプション(個人 無料・Pro 月20ドルが標準)、使用量ベース(トークン・生成回数)、シートベース(チーム)、Figmaのような既存ツールはシート+AI追加使用量。2026年初時点でv0・Lovable・Bolt・Figma AIはすべて月20ドル前後の表面価格だが、ヘビーユーザーの実使用量請求は別の話。Lovableのようにメッセージ・クレジット単位で請求するツールは大きなアプリを作ると素早く100〜200ドルに達する。

**軸7 · 非開発者フレンドリー性**

これは決定的な軸だ。マーケター・PM・デザイナーがコードなしで最後まで行けるか、それとも「ここから開発者呼ぶ」地点があるか。Lovable・Boltは非開発者がデプロイまで持っていけるよう設計されている。v0は開発者がNext.jsプロジェクトに貼り付けるコンポーネントを吐くのに最適化 — 非開発者単独だと次のステップで詰まる。Canva Magic Studio・Microsoft Designerはデザイン使用者(非技術者)ターゲットでコードは出ない。

**軸8 · アクセシビリティ・セマンティック品質**

AIが吐くコードの本当の試験。divのonClickかbutton要素か、alt属性があるか、ARIA属性が適切か、キーボード操作が動くか、色のコントラストがWCAG AAを超えるか。**2026年春時点、どのツールもアクセシビリティを自動で完璧に処理しない。** v0とSubframeはshadcn/Radixベースなので比較的良好だが、検証は人がやる。

8軸の重みは役割によって異なる。デザイナーには軸1・3・5が決定的で、開発者には軸2・3・4が、マーケター・PMには軸7が最大。同じ表でも異なるツールが1位になる。「最高のAIデザインツール」というヘッドラインが意味をなさない理由だ。

第2章 · Vercel v0 — 開発者主導AIコンポーネント生成の基準点

**サーフェス**: ブラウザWebアプリ(v0.dev)。チャット形式でプロンプト→React JSXコンポーネントが出る。Next.jsプロジェクトにコピー&ペーストするワークフローが一次ユースケース。

**何が得意か**

v0のアイデンティティは**shadcn/ui + Tailwind + Next.js**という強い意見。ツールに意見があるということは出力が一貫しているということで、開発者が受け入れやすい。バックエンドはGPT-4系+Claude系を混在させ、出力はほぼ常にコンパイルされるReact JSX。「グラデーションヘッダー付きの価格カード3つ」のようなプロンプトで5秒以内に結果が返り、次のプロンプトで「ダークモードトグル追加」と続けると滑らかに繋がる。

Block概念 — 小さな単位(Hero、PricingCard、Sidebar)をギャラリーから選んで組み合わせる — も強力。発見・再利用・変形が自然。shadcn/uiライブラリ自体がVercel・Radixラインアップなので、v0が吐くコンポーネントはそのままプロダクションに使える品質に近い。

**デザインシステム整合性**

shadcn/uiとRadixプリミティブを基本出力に使うので**既にshadcnベースのプロジェクトには摩擦がほぼない。** Tailwindトークンを認識し、ダークモードをビルトインで処理、Radixが敷かれているのでアクセシビリティのベースラインも良い。欠点: shadcn以外のデザインシステム(MUI、Mantine、Chakra)では変換作業が必要で、社内独自システムにはそのまま合わない。

**自律性**

コンポーネント〜ページレベルの自律性がスイートスポット。「フルアプリ」は弱い。ルーティング・状態管理・認証・DB接続までは自動で敷かれない。その領域はv0をNext.jsプロジェクトにインポートした後、開発者が手で行う。

**価格**

2026年初時点で無料ティアあり、Pro 月20ドルレベルで追加メッセージ・生成クレジットが増える。チームプランはシートベース。ヘビーユーザーは月50〜100ドルレベルの使用量請求が普通。

**弱点**

- **非開発者が単独で使えない。** 出力がコードでありNext.jsプロジェクトコンテキストが必要。

- **shadcn以外の環境では摩擦。** MUI・Mantineプロジェクトでは毎回変換コスト。

- **フルアプリ生成は弱い。** ページを超えると別ツールがよい。

**いつ使わないか**

- デザイナーがFigma内で作業を完結したい時 — Figma AIがよい。

- フルアプリ(ルーティング・状態・DB・認証)を一気に欲しい時 — Lovable・Boltがよい。

- 非技術者単独でマーケティングページを作りたい時 — Canva・Microsoft Designerがよい。

**一行要約**: 開発者がNext.js+shadcnプロジェクトに貼り付けるReactコンポーネントを素早く受け取るのに2026年基準点。それ以外のワークフローではオーバーキルか不適合。

第3章 · Lovable — 非開発者もフルスタックアプリまで持っていけるツール

**サーフェス**: ブラウザWebアプリ(lovable.dev)。一行プロンプトからReact+Supabaseベースのフルスタックアプリが出る。旧名はGPT Engineer。

**何が得意か**

Lovableのアイデンティティは**end-to-end**。「ブッククラブメンバー管理アプリ作って」と書くとルーティング、UI、Supabaseスキーマ、認証、デプロイオプションまで一度に受け取る。非開発者が最初に触る時点から動作するアプリを見る経験が滑らか。v0が「一片」を吐くツールならLovableは「システム全体」を吐くツール。

Supabase統合が一級市民でDB・認証・ストレージが追加セットアップなしに入る。デプロイはLovable自体のホスティング+カスタムドメインを対応、GitHubエクスポートで自前ホスティングも可能。コード自体はReact+Tailwindベースなので慣れた開発者ならそのまま手を入れられる。

**デザインシステム整合性**

**弱め。** Lovableのデザイン出力は「デフォルトとしては清潔だが一貫したデザインシステムから出てきたようには見えない」印象が多い。トークンを明示的に扱わず、shadcn/uiのような強力なベースラインもない。新規プロジェクトには速いが「会社のデザインシステムに合わせて」が滑らかにいかない。

**自律性**

最も高い。フルスタックアプリ — UI+バックエンドスキーマ+認証+デプロイ — まで自律処理。代償は**間違ったコードのデバッグ負担**。自律性が高いほどAIが間違った仮定をした時に人が追跡しにくい。

**価格**

2026年初時点で無料ティア(制限付きメッセージ)+Starter 月20ドル+Pro 月50ドルレベルの段階構造。メッセージ・クレジットベース請求なので大きなアプリを作ると素早く100〜200ドルに達する。ライトユーザーには魅力的、ヘビーユーザーは費用管理が必要。

**弱点**

- **デザインシステム整合性が弱い。** 会社のデザインシステムがあると変換コスト。

- **ヘビーユーザー費用が素早く上がる。** 使用量請求モデル注意。

- **出力のコード品質がv0より印象的でない。** 動作はするが「プロダクションにそのまま入れていい」の信頼度はv0よりやや低い。

- **バックエンドロックイン。** Supabase統合が強いが、他のバックエンド(Firebase・独自API)を使うと摩擦。

**いつ使わないか**

- 既存Next.js・Viteプロジェクトに部分コンポーネントだけ追加したい時 — v0がよい。

- 会社のデザインシステムに厳密に合わせる必要がある時 — Subframe・v0がよい。

- デザイナーがピクセル精密制御を望む時 — Figma系がよい。

**一行要約**: 非開発者もフルスタックアプリまで持っていける最も滑らかな経験。デザインシステム・費用制御は弱点。

第4章 · Bolt.new — WebContainerベースのフルスタックIDE

**サーフェス**: ブラウザIDE(bolt.new)。StackBlitzのWebContainer技術の上にLLMエージェントを載せたツール。ブラウザ内でNode.js・npm・dev serverが動くのが特徴。

**何が得意か**

Boltの差別化点は**実際に動作する環境がブラウザ内にある**こと。WebContainerでnpm install、dev server、ログをすべてブラウザで見る。他ツールのように「コードを吐くが動作はユーザー環境で確認」ではなく、その場で回る。

Lovableのようにフルスタックアプリ生成が可能で、出力は通常のVite/Next.js/AstroプロジェクトなのでGitHubにエクスポートしてどこでもホスティングできる。Anthropic Claudeをデフォルトバックエンドに使い(2026年初時点)、大きな変更を自律的に処理 — 「このコンポーネントをモーダルに変えて」一行で複数ファイルが同時に修正される。

**デザインシステム整合性**

**中間。** Lovableよりやや良くv0より弱い。shadcn/uiやMantineをデフォルトオプションに選べるが、トークン一貫性はv0ほど厳密でない。

**自律性**

高い。フルアプリ生成+自前実行環境。ただし自律性が高い分「なぜこう書いた?」の追跡が難しく、失敗すると最初からプロンプトし直すケースが多い。

**価格**

2026年初時点で無料ティア+Pro 月20ドルレベル開始。トークン使用量ベース請求なので大きなアプリは費用が素早く上がる。Lovableに似た請求パターン。

**弱点**

- **WebContainer制約。** ブラウザ内で動く分、重いライブラリ・ネイティブモジュールに制約がある。

- **トークン費用。** ヘビーユーザーは月100ドル以上が普通。

- **デザイン精度がv0より弱い。** 動作は速いがピクセル単位の一貫性は劣る。

**いつ使わないか**

- デザイナーがFigma内で作業したい時。

- 会社の厳密なデザインシステムに合わせる必要がある時。

- 「既に存在するNext.jsプロジェクトにコンポーネントだけ追加」が目標の時。

**一行要約**: フルスタックアプリをブラウザ内で即座に動かしながら作るのに最も滑らか。Lovableと直接競合。

第5章 · Figma AI · Figma Make — Figma内で完結するワークフロー

**サーフェス**: Figmaデスクトップ・WebアプリにあるFirst Draft、Make機能。別ツールではなくFigma自体のAIレイヤー。

**何が得意か**

Figma AIの最大の価値は**デザイナーが普段使うツール内から離れない**こと。First Draftはテキストプロンプトからからのフレーム(コンポーネント・ページ)を返し、既存コンポーネントライブラリ・variables(デザイントークン)・variantsを認識する。社内デザインシステムがFigmaに定義されていればそれをそのまま活用して生成する。

Figma Makeは一歩進む — Figmaデザインから**フルスタックコード**(React+バックエンド)を作る。デザイン-コード間隔を最も狭めようとする試みで、2026年に入って急速に発展中。テキスト→デザイン、デザイン→コード、リデザイン(既存デザイン改善)というワークフローを一つのキャンバスで処理する。

Prompt assist、自動レイアウト推奨、自動整列、変形生成といった補助機能も毎日使う摩擦を減らす。

**デザインシステム整合性**

**最も強い。** 社内Figmaライブラリを認識し活用するのが一級市民。variables(デザイントークン)も直接扱う。社内デザインシステムがFigmaに定義されていれば他のどのツールよりも整合性が高い。

**自律性**

フレーム・コンポーネント単位。フルアプリ生成はFigma Make領域で、v0/Lovable/Boltほど自律的ではない。

**価格**

Figmaのシートベース価格+AI使用量。2026年初時点でProfessional 月15ドル/シート+AI機能使用量。AI使用量請求が別構造なので大きなチームが重く使うと追加費用が発生。

**弱点**

- **Figma内でしか生きない。** Figmaを使わないと入口自体が塞がる。

- **出力コードの直接使用可能性はv0・Lovableより低い。** Figma Makeで受け取ったコードも手を入れる部分がある。

- **使用量請求構造注意。** シート価格だけ見て入ったらAI使用量請求が追加される可能性。

**いつ使わないか**

- デザイナーでない、またはチームがFigmaを使わない時。

- フルスタックアプリを最後まで作りたい時 — Lovable・Boltがよい。

- 会社のデザインシステムがFigma外(例: Storybook+独自トークン)にある時。

**一行要約**: デザイナーワークフローで最も自然。社内Figmaデザインシステムが強いほど価値が大きくなる。

第6章 · Galileo AI — テキストからFigmaへ

**サーフェス**: ブラウザWebアプリ。テキストプロンプト→Figmaフレーム出力がコア機能。2024年にGoogleが買収し、その後Googleデザインツールラインに統合中。

**何が得意か**

Galileoのアイデンティティは**テキストから即座にFigmaへ**。デザイナーが空のキャンバスから始める摩擦を減らす。「カレンダーウィジェット付きダッシュボード」のようなプロンプトでFigmaに持っていけるデザインが落ちる。

Google買収以降はMaterial Designシステムとの統合が強まり、モバイル(Android・iOS)モックに特化した方向に向かっている。Stitchという後継ツールが登場 — Galileoの後継としてMaterial 3ベースのUI生成に集中する。

**デザインシステム整合性**

Material Designを基本に扱うのでMaterialベースプロジェクトには整合性が高い。それ以外のデザインシステムには摩擦がある。

**価格**

2026年初時点で無料ベータ+有料プランの段階。Google統合以降に価格構造が頻繁に変わったので直接確認。

**弱点**

- **Googleラインアップに吸収され独立ツールの性格が弱まった。** Stitchへの移行を推奨。

- **Material Design偏向。** それ以外のデザインシステムには強みが少ない。

**一行要約**: テキスト→Figmaの先駆者で、2026年にはGoogleのStitchに続く。Materialベースモバイルデザインに強い。

第7章 · Uizard — ワイヤーフレームからUIまで

**サーフェス**: ブラウザWebアプリ。テキスト、スクリーンショット、手描きワイヤーフレームからデジタルUIデザインを生成。2024年にMiroが買収。

**何が得意か**

Uizardの差別化点は**インプットの多様性**。テキスト以外に紙に描いたワイヤーフレーム写真、競合アプリスクリーンショット、手描きスケッチを入力として受け、UIを生成する。PMやUXリサーチャーがミーティングのホワイトボードに描いたワイヤーフレームを即座にUIにするワークフローが滑らか。

複数画面が繋がった流れ(アプリnavigation flow)を一度に生成し、ワイヤーフレームからprototypeまで素早く行くのが強み。

**デザインシステム整合性**

弱め。Uizard自体のデザインシステム内では一貫しているが、社内デザインシステムを学習・注入するオプションは限定的。

**価格**

2026年初時点で無料+Pro 月19ドル+Business 月39ドルレベルの段階。合理的な表面価格だがヘビー使用には上位プランが必要。

**弱点**

- **出力コードのプロダクション使用可能性が低い。** Uizardはデザイン段階ツールでありコード生成ツールではない。

- **社内デザインシステム整合性が弱い。**

**一行要約**: ワイヤーフレーム・スクリーンショット・スケッチからデザインドラフトを素早く受け取るのに強い。コード出力よりデザイン段階ツール。

第8章 · Subframe — Tailwindファーストのデザイン+コードハイブリッド

**サーフェス**: ブラウザWebアプリ。視覚編集+プロンプト+コードエクスポートを一つのツールに束ねる。

**何が得意か**

Subframeのアイデンティティは**Tailwindを一級市民として扱うデザインツール**。視覚エディタ内でコンポーネントを作り、即座にクリーンなTailwindクラス付きReact/Vue/HTMLコードを受け取る。デザインシステムトークンを認識し、社内トークンをインポートできる。

v0より視覚編集が強くFigmaよりコード出力がクリーンというのが市場ポジショニング。デザイナーと開発者が同じキャンバスで作業するワークフローを狙う。

**デザインシステム整合性**

強い。Tailwindトークン・shadcn/ui・Radixプリミティブを一級でサポートし、社内デザインシステムをインポートするオプションがある。

**価格**

2026年初時点で無料+Pro 月20ドルレベル。Figma・v0と似た表面価格。

**弱点**

- **Tailwindを使わないプロジェクトには価値が大きく減る。**

- **フルアプリ生成は弱い。** コンポーネント〜ページ領域に留まる。

**一行要約**: Tailwind+shadcn環境でデザイナー-開発者協業に最適。v0と直接競合するが視覚編集がより強い。

第9章 · Magic Patterns — 変形ギャラリー中心のUI生成器

**サーフェス**: ブラウザWebアプリ(magicpatterns.com)。プロンプトから複数変形を一度に受け取るギャラリー式UXが特徴。

**何が得意か**

Magic Patternsの差別化点は**変形(variations)を一度に**。一つのプロンプトから4〜8の異なる変形を同時に受け取り、気に入ったものを選んで次のラウンドで詳細調整。デザイナーが普段やる「10個描いて1個選ぶ」ワークフローをAIで加速する。

React出力がクリーンでTailwindデフォルトなのでv0と類似領域。変形比較UXがv0より滑らかなのが強み。

**デザインシステム整合性**

shadcn/ui・Tailwindベースなのでv0と似たレベルの整合性。

**価格**

2026年初時点で無料+Pro 月20ドルレベル。

**弱点**

- **フルアプリ領域には弱い。**

- **エコシステム規模がv0より小さい。**

**一行要約**: v0と類似領域で変形ギャラリーUXで差別化。デザイナーフレンドリーな比較を望む時に強み。

第10章 · Tempo — デザインシステムAI生成ツール

**サーフェス**: ブラウザWebアプリ。Reactコンポーネント+Storybook領域に特化したAIデザインツール。

**何が得意か**

Tempoのアイデンティティは**デザインシステム自体をAIが組む**こと。コンポーネントライブラリ、variants、Storybookストーリー、トークンを一度に生成。単一コンポーネントではなく「全デザインシステムの基本」を作るのに焦点。

スタートアップ・新生チームがデザインシステム0から始める時に有用。既存デザインシステムがあるチームには価値が小さくなる。

**デザインシステム整合性**

デザインシステムを生成するツールなので整合性を「定義する」立場。既存システムに合わせるより新規作成に強い。

**価格**

2026年初時点でPro 月30ドルレベル。

**弱点**

- **既存デザインシステムに合わせるユースケースには弱い。**

- **フルアプリ領域ではv0・Lovableがよい。**

**一行要約**: 新デザインシステムを素早くブートストラップしたい時に強い。既存システムに合わせるワークフローには不適合。

第11章 · Builder.io · Plasmic · Anima · Locofy — Figma-to-Codeラインアップ

**Builder.io**(Mantisラインアップ): ビジュアルビルダー+Figma to code。FigmaデザインをReact/Vue/Angular/Qwikに変換し、マーケティングページのようなコンテンツ領域のビジュアルCMSユースケースに強い。

**Plasmic**: ビジュアルページ/コンポーネントビルダー+AI。デザイナーがビジュアルで作り、開発者がコード環境にインポートする。ヘッドレスCMSのような流れが自然。

**Anima**: Figma→React/Vue/HTML変換のオリジナル。ピクセル精度を優先し、デザイン-開発ハンドオフ自動化が核心。

**Locofy**: Figma→React/React Native/HTML変換。AIで「これがボタン、これがカード」のようなセマンティック検出をしてからコードを吐く。

**共通の強み**: Figmaが真実の源(source of truth)であるチームでデザイン-コード間隔を狭めるのに強い。

**共通の弱み**: 自動変換の品質が「そのままプロダクション」にはまだ不足。セマンティック(div vs button)・レスポンシブ・状態管理は人の補完が必要。「Figmaで描いた通りのReact」が良いReactかは別問題 — デザインは自由、コードはパターンがある。

**一行要約**: デザイン-開発ハンドオフ自動化に強い。Figmaデザインの90%を変換し10%を人が埋めるワークフローに合う。

第12章 · Phase · Khroma · Spline — 特化ツール群

**Phase**: 韓国発のデザインツール。モーション・インタラクションデザインに特化したビジュアルツールで、コードを書かずに滑らかなアニメーションを作る。2026年時点でAIモーション生成機能を順次追加中。

**Khroma**: AIカラーパレット生成器。「あなたが好きな色」を学習して無限にパレットを推薦。デザインシステムトークン定義段階でインスピレーションを得るツール。

**Spline**: 3Dデザイン+AI。Webで動く3DシーンをビジュアルでにつくりAI補助でテキスト→3Dオブジェクト生成。マーケティングページの3Dヒーロー・インタラクティブプロダクトビューアーのような用途。

**一行要約**: 一般UI生成ツールが扱えない特化領域(モーション・カラー・3D)を埋める補助ツール群。メインデザインツールを代替せず補完する。

第13章 · Diagram AI(Figma買収)· Microsoft Designer · Adobe Firefly · Canva Magic Studio

**Diagram(Figma買収)**: MagicianのようなFigmaプラグインを作っていた会社でFigmaに買収され、その技術がFigma AIの一部に。

**Microsoft Designer + Copilot Design**: Microsoft 365統合。マーケティング用グラフィック、ソーシャル投稿、発表スライドをテキストで作る。コードは出ず非技術者ターゲット。

**Adobe Firefly Design + Express AI**: Adobeエコシステム統合。Photoshop・Illustrator・InDesign内でAI補助でデザイン。Expressは非技術者用の簡単デザイン。コード出力なし。

**Canva Magic Studio + Magic Design**: 非技術者フレンドリーデザインツールの絶対強者。テキストからソーシャル・プレゼンテーション・印刷デザイン。コード出力なし、デザイン資産出力。

**一行要約**: コードを吐かないデザインツール群。マーケティング・非技術者ワークフローに合い、開発者ユースケースには不適合。

第14章 · Penpot AI · ChatGPT Canvas · Claude Artifacts · Polymet

**Penpot AI**: オープンソースのFigma代替。Penpot自体がSVGベースでセルフホスティング可能。AI機能を順次追加中。オープンソース・オンプレが必要なチーム(セキュリティ規制・政府)ユースケース。

**ChatGPT Canvas + Claude Artifacts**: 正式なデザインツールではないが、LLMチャット内で即座にHTML/CSS/JS・Reactアーティファクトを生成・プレビューする機能。素早いプロトタイプ・使い捨てUIに適する。「正式ツールにする前の探索」段階。

**Polymet**: 比較的新しいAIデザインツール。v0系と似た領域でデザイナーフレンドリーUXを強調。2026年春時点で急速に発展中。

**一行要約**: オープンソース(Penpot)、LLM内蔵(ChatGPT/Claude)、新生競合(Polymet)のような変種。メインフローにない要件を埋める。

第15章 · 大比較表

8軸でコア ツールを一覧する。(Score: A=強い、B=中、C=弱い; 価格は2026年初時点表面)

| ツール | サーフェス | 出力 | デザインシステム | 自律性 | 非開発者 | 価格(個人) |

| --- | --- | --- | --- | --- | --- | --- |

| Vercel v0 | ブラウザ | React + shadcn | A (shadcn) | コンポーネント〜ページ | C | 無料 / Pro 20/月 |

| Lovable | ブラウザ | React + Supabase | C | フルアプリ | A | 無料 / 20〜50/月 |

| Bolt.new | ブラウザIDE | 多様 | B | フルアプリ | A | 無料 / 20/月〜 |

| Figma AI | Figma | Figmaフレーム | A (社内ライブ) | フレーム | B | Figmaシート + AI |

| Figma Make | Figma | Figma + コード | A | フレーム〜アプリ | B | Figma + AI |

| Galileo / Stitch | ブラウザ | Figma + Material | B | フレーム | B | 無料 + 有料 |

| Uizard | ブラウザ | UIデザイン | C | ワイヤー〜フロー | A | 無料 / 19〜39/月 |

| Subframe | ブラウザ | React+Tailwind | A (Tailwind) | コンポーネント | B | 無料 / 20/月 |

| Magic Patterns | ブラウザ | React + Tailwind | A | コンポーネント〜ページ | B | 無料 / 20/月 |

| Tempo | ブラウザ | Reactシステム | A | システムブート | C | 30/月レベル |

| Builder.io | ビジュアル | React/Vue/Angular | B | ページ | B | 無料 + シート |

| Plasmic | ビジュアル | React | B | ページ | B | 無料 + シート |

| Anima | Figmaプラグイン | React/Vue/HTML | B | 変換 | C | 無料 + 有料 |

| Locofy | Figmaプラグイン | React/React Native | B | 変換 | C | 無料 + 有料 |

| Spline | ブラウザ | 3D + コード | n/a | 3Dシーン | B | 無料 + 有料 |

| Canva Magic Studio | ブラウザ | デザイン資産 | n/a | デザイン | A | 無料 + Pro |

| ChatGPT Canvas | ChatGPT | HTML/React | C | 使い捨て | A | ChatGPT登録 |

| Claude Artifacts | Claude | HTML/React | C | 使い捨て | A | Claude登録 |

表をカタログとして見ず「自分のワークフローの軸の重み」を決めて読め。デザイナーには軸1・3・5が、開発者には軸2・3・4が、非技術者には軸7が決定的。

第16章 · 決定マトリックス — どの状況にどのツール

状況を5つに分けて推奨をマッピングする。

**状況A · ソロ開発者がNext.jsプロジェクトに素早いコンポーネントが必要な時**

→ **v0** 第一候補。shadcnベースで出力がそのまま合う。変形比較が必要なら**Magic Patterns**追加。デザインシステムがTailwindなら**Subframe**もよい。

**状況B · 非技術者がフルアプリを最後まで作りたい時**

→ **Lovable** 第一候補。Supabase統合が滑らか。WebContainerで即プレビューを望むなら**Bolt.new**。マーケティングページレベルならコードなしで**Canva Magic Studio**・**Microsoft Designer**。

**状況C · デザイナーがFigma内で作業を完結したい時**

→ **Figma AI + Figma Make** 第一候補。社内デザインシステムとの整合性が最も高い。Materialベースモバイルなら**Galileo/Stitch**もオプション。

**状況D · デザイン-コードハンドオフ自動化が必要な時**

→ **Locofy + Anima + Builder.io**の中からワークフローに合うものを。マーケティングページが多ければBuilder.ioのビジュアルCMSが魅力、ピクセル精度優先ならAnima。

**状況E · 新生チームがデザインシステムをブートストラップする時**

→ **Tempo** + **Khroma**(カラー)+ **shadcn/ui**(ベースライン)。素早くトークン・コンポーネント・variantsを敷く。

**組み合わせアンチパターン**

- v0 + Lovable両方をヘビーに — 領域が重複し費用が二倍。

- Figma AI + Locofy — 同じ流れの自動化が重複。

- すべての新生AIツール同時体験 — 表面摩擦が累積。2〜3に絞り四半期ごとに再評価。

第17章 · Toss · Naver · メルカリ · CyberAgent 事例

**Toss(トス)**: デザインシステムTDS(Toss Design System)を自社運営する韓国のフィンテック。2026年に入りv0のようなツールでプロトタイプを素早く作りTDSへ移行するワークフローが報告される。デザインシステムが強い会社ほどAI出力を自社システムへ再マッピングする「変換コスト」がかかるというのが核心の学び。

**Naver(ネイバー)**: Naverのデザイン組織は自社デザインシステム(NUI)を運営。マーケティングページ・実験的プロトタイプにはv0・Figma AIを素早く活用するがプロダクション本体は自社システム。

**メルカリ(Mercari)**: 日本のフリマアプリ。デザインシステムをStorybook+Figmaに同期して運営。Figma AIとFigma Makeをデザイナーワークフローに段階的に導入中。

**CyberAgent**: 日本の広告・メディア大手。子会社が多くデザインシステムも多様。Lovable・Bolt類で新規サービスのプロトタイプを素早く作り、本体合流段階で自社システムへ移行するパターンが報告される。

**共通パターン**

1. AIデザインツールでプロトタイプを素早く作る。

2. 社内デザインシステムへ移行する。

3. AI出力の「感触」は検証されたシステムへ吸収。

AIデザインツールが会社のデザインシステムを代替するのではなく**その中へ入る入口が速くなる**というのが2026年実務風景。

第18章 · デザイナー主導 vs 開発者主導ワークフロー

ツールの陣営は明確に二つに分かれる。

**デザイナー主導陣営**: Figma AI/Make、Galileo、Uizard、Anima、Locofy、Penpot AI、Builder.io

- デザインが真実の源

- コードは自動変換またはハンドオフ

- 社内デザインシステム整合性優先

- デザイナーがピクセル単位の制御を維持

**開発者主導陣営**: v0、Subframe、Magic Patterns、Tempo、Lovable、Bolt.new

- コードが真実の源

- デザインはコードの結果

- shadcn・Tailwindのようなコードベースライン優先

- 開発者がコンポーネント単位の制御を維持

両陣営は同じ問題(プロンプト→UI)を解くが出発点と真実の源が異なる。会社がどちらの陣営を選ぶかがツール選択をほぼ決める。答えを単純化すれば — **デザインシステムがFigmaに住むならデザイナー主導、コードに住むなら開発者主導**。

両陣営が出会う未来の流れもある。Figma Makeはデザイナー陣営から開発者陣営へ橋を架け、Subframe・Tempoは開発者陣営からデザイナーフレンドリーに近づく。2027〜2028年頃にはこの境界がさらに曖昧になる可能性が高い。

第19章 · AIデザインの本当の落とし穴

これらのツールは魔法ではない。落とし穴を知らずに使うと6か月後に後悔する。

**落とし穴1 · 仕様漂流(spec drift)**

AIが吐く出力は毎回少しずつ異なる。同じプロンプトでも色・余白・テキストトーンが少しずつ変わる。デザインシステムなしに複数コンポーネントを一度に作ると仕様が漂流する。**システムを先に、コンポーネントを後に**作れ。

**落とし穴2 · 不一致なコンポーネント**

一つはButton、別のはCTA、また別のはActionButton。AIが毎回新しい名前を作る。人が統合・正規化しないとコードベースがコンポーネントの庭園になる。

**落とし穴3 · アクセシビリティ盲点**

divのonClickがbutton要素を代替するコード、alt無しの画像、キーボードで届かないトグル。AIはアクセシビリティを自動検証しない。**WCAG検証は人の仕事**、axe/Pa11yのような自動ツールで補助。

**落とし穴4 · セマンティックでないマークアップ**

divのclassName text-2xl font-boldでヘディングを描く。視覚的には同じだがスクリーンリーダーにはヘディングではない。セマンティックタグ(h1、nav、main)を人が点検せよ。

**落とし穴5 · 偽データの罠**

AIが吐くコンポーネントは偽データで輝く。実データ(空状態、長文、エラー状態、ロード状態)では壊れる。**空状態・エラー状態・長データ**を意図的にテストせよ。

**落とし穴6 · レスポンシブの嘘**

デスクトップビューだけ見るとうまく動くようだが、モバイル・タブレットでは壊れる。AI出力はレスポンシブが弱い — すべてのサイズで検証。

**落とし穴7 · デザインシステム vs AIシステムの衝突**

会社のデザインシステムとAIが吐く出力が衝突。毎回変換コストがかかる。解決: AIツールにデザインシステムを学習させるか、出力を最初から社内システムに合わせて受け取る。

**落とし穴8 · 費用の累積**

表面価格は20ドルのように見えるが使用量請求が累積する。ヘビーユーザーは100〜200ドルが普通。四半期ごとに費用を実測。

**落とし穴9 · ライセンス・所有権**

AIが吐いたコードの著作権は誰のものか。ツールごとに約款が異なる。社内コードへ合流させる時にライセンスポリシーを事前確認。

**落とし穴10 · デザイン思考の萎縮**

AIが速く最初の答えを与えるので人が最初の答えに満足する。**2〜3回さらに別の方向を探索する習慣**を強制的に維持しないとデザインの多様性が減る。

第20章 · 統合ワークフロー — ツールをどう束ねるか

2026年実務で検証された統合パターン3つ。

**パターン1 · デザイナー中心**

1. Figma AIでFirst Draft → デザイナーが磨く

2. 社内デザインシステムコンポーネントへ移行

3. Figma MakeまたはLocofyでReactコード変換

4. 開発者が状態・ルーティング・データを埋めてプロダクション合流

**パターン2 · 開発者中心**

1. v0またはSubframeでコンポーネントドラフト生成

2. shadcn/uiまたは社内ライブラリで正規化

3. 開発者がNext.jsプロジェクトに合流

4. デザイナーが視覚的に検収・微調整

**パターン3 · 非技術者ファストトラック**

1. LovableまたはBolt.newでフルアプリプロトタイプ

2. Supabaseなどバックエンドセットアップ自動処理

3. 直接デプロイまたはGitHubエクスポート

4. 必要なら開発者が合流してプロダクション化

**組み合わせの原則**

- ツールを一つに絞るな — 段階別に異なるツールがよい。

- 社内デザインシステムを真実の源として維持 — AIは入口、システムは本体。

- 検証段階を空けるな — セマンティック・アクセシビリティ・レスポンシブ点検。

第21章 · Cursor + shadcn vs AIデザインツール

開発者がよく聞く比較: 「v0のようなツール vs Cursor + shadcn 直接」だ。違いを分解すれば:

**v0のようなツールの強み**

- デザイン発見 — ギャラリーからインスピレーション

- 変形比較 — 複数案を一度に見て選ぶ

- 素早いプロトタイプ — チャットで即座に結果

- デザイナーフレンドリー — 非技術者コラボ可能

**Cursor + shadcn 直接の強み**

- コンテキスト — 既存プロジェクト全体を見る

- 一貫性 — 社内コンベンションに従う

- 統合 — 一つのツール内でデザインからデプロイまで

- 費用制御 — 定額サブスクリプション内に収まる

**結論**: 二つは競合ではなく補完。**新コンポーネントの初稿はv0/Subframe**、**既存コード内での合流・調整はCursor**。2026年のヘビーユーザーは両方を使う。

第22章 · 2026〜2027年トレンド — どこへ向かうか

**トレンド1 · デザイン+コードが一つの流れへ**

Figma Makeのようにデザイン-コード境界が曖昧になるツールが増える。デザイナーがコードを見ずにコードを作り、開発者がデザインを描かずにデザインを作る。

**トレンド2 · デザイントークンをAIが一級に**

2025〜2026年の変化の中で最も重要なもの — AIがトークンを認識し使用する。CSS変数、Figma variables、デザイントークン標準(W3C draft)がAI出力に自動反映される。

**トレンド3 · アクセシビリティ優先AI**

規制圧力(EUのEuropean Accessibility Act 2025年施行など)と市場要求でAIデザインツールのアクセシビリティ自動検証が一級市民になる。axe・Pa11yのようなツールが出力パイプラインにビルトインされる。

**トレンド4 · マルチモーダル入力拡大**

テキスト以外にスクリーンショット、手描き、音声、ビデオからデザインを作る流れ。Uizardが先駆者だったが2026年にはv0・Lovableも追いつく。

**トレンド5 · 社内デザインシステム統合**

「会社のデザインシステムを学習」が標準機能になる。ツールが社内Storybook・Figmaライブラリ・トークンをインポートし、その中だけで生成するよう制約するオプションが増える。

**トレンド6 · デザイン-開発ハンドオフの終焉?**

「デザイナー→開発者ハンドオフ」という言葉が消える可能性。同一キャンバスで二つの職種が一緒に作業する。ハンドオフ自動化ツール(Anima・Locofy)は統合ツール(Figma Make・Subframe)に吸収される。

**トレンド7 · オープンソースの登場**

v0の出力(shadcnベース)が事実上オープンソース、Penpot AIはツール自体がオープンソース。「AIデザインツール=SaaSのみ」の命題が崩れる。

エピローグ — チェックリスト · アンチパターン · 次回予告

2026年春、AIデザインツールフィールドはデザイナー主導と開発者主導に分かれ、両方が急速に発展中。「最高」は存在しない。あなたの役割・デザインシステム・チーム規模に合うツールの組み合わせがあるだけ。

**ツール選択チェックリスト(番号順)**

1. 役割をまず確定 — デザイナー / 開発者 / マーケター・PM / 非技術者。

2. デザインシステムの真実の源を確認 — Figma内 / コード内 / なし。

3. ツールのサーフェスを決定 — ブラウザ / Figma内 / IDE / CLI。

4. 出力フォーマットをワークフローに合わせる — React / Vue / Figma / ビジュアル資産。

5. 自律性レベルを決める — コンポーネント / ページ / フルアプリ。

6. 価格モデルとヘビーユーザー実費用を推定。

7. デザインシステム整合性を検証 — shadcn / Tailwind / Material / 社内。

8. 候補を2〜3に絞る — 表は絞るツール。

9. 一週間実作業で検証 — 定量+定性。

10. 四半期ごとに半日再評価 — このフィールドは速い。

**アンチパターン(やるな)**

- **初出力をそのままプロダクションに入れる** — セマンティック・アクセシビリティ・レスポンシブを検証せよ。

- **AI出力のコンポーネント名をそのまま残す** — 毎回新しい名前ができる。正規化せよ。

- **社内デザインシステムを無視** — AIは入口、システムは本体。

- **表面価格だけ見て安心** — 使用量請求を実測せよ。

- **一つのツールに信仰を持つ** — 段階別に異なるツールがよい。

- **変形探索を省略** — 最初の答えに満足するとデザインが狭くなる。

- **アクセシビリティを後回し** — 最初から検証。

- **四半期再評価をスキップ** — 6か月後に時代遅れのツールを使っている。

**次回予告**

同シリーズで扱うテーマ: (1)shadcn/ui深堀り — なぜ標準になったか、(2)デザイントークンの本当の標準 — W3C・CSS変数・Figma variables、(3)アクセシビリティ・ファーストコンポーネントライブラリ比較、(4)Figma代替の風景 — Penpot・Sketch・Phase・国内ツール。

> ツールは入口でありデザインシステムは本体だ。AIが入口を速く作るほど、本体の一貫性が価値を決める。

参考資料(References)

1. [Vercel v0](https://v0.dev) — 公式

2. [shadcn/ui](https://ui.shadcn.com) — v0の出力基盤ライブラリ

3. [Lovable](https://lovable.dev) — 公式(旧GPT Engineer)

4. [Bolt.new](https://bolt.new) — StackBlitz

5. [Figma AI](https://www.figma.com/ai/) — Figma公式AIページ

6. [Figma Make](https://www.figma.com/make/) — Figmaデザイン-コード統合

7. [Galileo AI / Stitch](https://stitch.withgoogle.com) — Google買収以降の後継ツール

8. [Uizard](https://uizard.io) — Miro買収

9. [Subframe](https://www.subframe.com) — Tailwindファースト

10. [Magic Patterns](https://www.magicpatterns.com) — 変形ギャラリー

11. [Tempo](https://www.tempo.new) — デザインシステムブートストラップ

12. [Builder.io](https://www.builder.io) — Mantis · Figma to code

13. [Plasmic](https://www.plasmic.app) — ビジュアルビルダー

14. [Anima](https://www.animaapp.com) — Figma to code

15. [Locofy](https://www.locofy.ai) — Figma to React

16. [Khroma](https://www.khroma.co) — AIカラーパレット

17. [Spline](https://spline.design) — 3DデザインAI

18. [Microsoft Designer](https://designer.microsoft.com) — Microsoft 365統合

19. [Adobe Firefly](https://www.adobe.com/products/firefly.html) — Adobe AI

20. [Canva Magic Studio](https://www.canva.com/magic-studio/) — 非技術者デザイン

21. [Penpot](https://penpot.app) — オープンソースFigma代替

22. [Phase](https://phase.com) — モーション・インタラクション(韓国発)

23. [W3C Design Tokens Community Group](https://www.w3.org/community/design-tokens/) — トークン標準

24. [European Accessibility Act 2025](https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en) — EU規制

25. [shadcn/ui · Radix](https://www.radix-ui.com) — アクセシビリティベースライン