「サイトやアプリをAIで作りたいが、結局どれを使えばいい？」——2026年は用途ごとに強いツールが分かれています。Web制作・デザイン→コードの代表的なAIツールを、用途・強み・料金感で比較します。
結論：用途で選ぶ
- デザイン重視のLP・マーケサイト → Framer
- CMS重視の複雑なサイト → Webflow
- コード資産として持つ（React/Tailwind） → v0 by Vercel
- プロンプトからフルスタックのアプリ → Lovable
- 既存コードベースを理解させて開発 → Cursor / Claude Code
- デザインチームでの制作・バリアント生成 → Figma（AI / Make）
比較表
| ツール | 得意領域 | 強み | 料金感（目安） |
|---|---|---|---|
| Framer | デザイン重視のサイト制作 | 美しいレスポンシブサイトとアニメーションを生成・公開まで | 約 $5/月〜（サイト単位） |
| Webflow | CMS・複雑なマーケサイト | 技術的な精度とCMSの作り込み | 有料プランあり |
| v0 by Vercel | デザイン→コード | デプロイ可能なReact/Tailwindコードを生成 | 約 $20/月（Pro） |
| Lovable | プロンプト→アプリ | テキストからフルスタックアプリを生成（バックエンドはSupabase中心） | プランにより変動 |
| Cursor | フルスタック開発 | コードベースを理解したAIコーディング・リファクタ | 約 $20/月（Pro） |
| Claude Code | エージェント開発 | 調査〜実装〜検証までを一貫して任せられる | プランにより変動 |
| Figma（AI / Make） | デザインチームの制作 | 業界標準ツール内でAI支援・多画面/バリアント生成 | Starter無料〜 |
料金は各社の公開情報に基づく目安です。プランや時期で変わるため、導入前に公式の最新料金をご確認ください。
使い分けの考え方
「デザイン」か「コード」か
Framer・Figma・Webflow はビジュアルエディタで人が主導しAIが補助する設計。v0・Cursor・Lovable はコード/アプリ生成に寄っています。デザイン→コードの境界は年々曖昧になっており、「デザインすること」と「作ること」が同じ工程になりつつあります。
1つに絞らず組み合わせる
万能な1ツールはありません。色はカラー特化ツール、素材は画像生成、サイト公開はFramer、開発はCursor/Claude Code——のように得意を組み合わせるのが実務的です。
本番公開には人のレビューを
どのツールでも、本番リリース前にはデザイン・実装の専門的なレビューを挟むのが安全です。AIは「遅く退屈な工程を速くする」もので、判断が要る工程の品質はやはり人が担保します。
主な情報源
- Guideflow: 15 best AI design tools 2026
- Flowstep: Best AI Tools for Web Design
- Till Freitag: Lovable vs Webflow vs Framer
- Aubergine: Top AI Coding Tools in 2026
各ツールは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。