TL;DR
- Figma が 8 製品プラットフォームに拡大し、AI 生成（Figma Make）・Web サイト公開（Figma Sites）まで包含。市場リーダーの地位を強化
- Penpot はオープンソース唯一の本格派。Design Tokens のネイティブ統合は業界初。セルフホスト可能で無料枠も充実
- Adobe XD はメンテナンスモード（事実上の開発終了）、InVision はサービス終了
- AI ネイティブツール（v0, Subframe, Lovable, Bolt.new）が台頭。プロンプトから UI/アプリを直接生成する時代に
- 用途別の選定が重要: デザインシステム構築 → Figma / Penpot、Web サイト公開 → Framer / Webflow、AI プロトタイピング → v0 / Subframe
1. ツール全体像 — カテゴリ別マップ
2026 年現在、Web UI デザインツールは大きく 4 カテゴリ に分類できます。
| カテゴリ | ツール | 特徴 |
|---|---|---|
| デザインシステム構築 | Figma, Sketch, Penpot | コンポーネント・トークン管理、チームコラボレーション |
| デザイン → Web 公開 | Framer, Webflow, Figma Sites | デザインから直接 Web サイトをデプロイ |
| AI UI 生成 | v0, Subframe, Uizard, Lovable, Bolt.new | プロンプトから UI / アプリを自動生成 |
| コードベース統合型 | Plasmic, Subframe | 既存コードベースとの統合を前提としたビジュアルビルダー |
注: 多くのツールが複数カテゴリにまたがります。Figma は AI 機能搭載により「デザインシステム + AI 生成」に、Webflow は「デザイン → Web 公開 + AI 生成」に進化しています。
2. 主要ツール詳細比較
2.1 Figma — プラットフォーム化が加速
Figma は単一のデザインツールから 8 製品のプラットフォーム へ拡大しました。
| 製品 | 概要 |
|---|---|
| Figma Design | コア UI デザインツール |
| Figma Make (NEW) | AI でプロンプトからプロトタイプを生成。デザインシステムを参照し一貫性を維持 |
| Figma Sites (BETA) | デザインから直接 Web サイトを公開。Code Layers でインタラクション追加 |
| Figma Buzz (BETA) | ブランドテンプレート・マーケティングコンテンツ制作 |
| Figma Draw (NEW) | 描画・イラスト向け |
| Figma Slides | プレゼンテーション |
| FigJam | ホワイトボード |
| Dev Mode | 開発者向けインスペクション・ハンドオフ |
2025〜2026 年の主な AI 機能:
- Figma Make: プロンプトから高忠実度プロトタイプを AI 生成。既存のコンポーネント・変数・トークンを使用
- MCP Server（β版）: AI エージェントが Figma キャンバスに直接書き込み。VS Code, Cursor, Claude Code 等で利用可能 [^1]
- Code to Figma: コーディングツールでレンダリングした UI をキャンバスにプッシュ（双方向同期）
- 画像生成・編集: Gemini 3.0 Pro / OpenAI GPT Image 1 による生成
- Slots（オープン β）: コンポーネントインスタンスの動的カスタマイズ
- AI クレジット制度（プラン毎に月間クレジット付与）
料金プラン（USD/月）:
| プラン | Full seat | Dev seat | Collab seat | AI クレジット/月 |
|---|---|---|---|---|
| Starter | 無料 | — | — | 最大 500 |
| Professional | $16 | $12 | $3 | 3,000 |
| Organization（年額） | $55 | $25 | $5 | 3,500 |
| Enterprise（年額） | $90 | $35 | $5 | 4,250 |
※ Collab seat はデザイン編集権限のないステークホルダー向け。閲覧・コメントのみの Free seat は全プランで無料。
[^1]: Figma MCP Server — https://www.figma.com/community/plugin/figma-mcp-server
2.2 Sketch — macOS 専用を堅持しつつ MCP 対応
Sketch は macOS 専用のデザインツールとしての路線を維持しています。
- 最新版: Sketch 2025.3「Copenhagen」（2025年10月）
- macOS Tahoe 対応の完全 UI リデザイン
- Stack の Wrap 対応（CSS flex-wrap 相当）
- ワンクリック背景除去（Apple のオンデバイス ML）
- MCP Server 搭載（2025.2.4）: AI クライアントから Sketch ドキュメントに直接アクセス可能 [^2]
- AI エージェント向けスキル:
sketch-implement-designでデザインからコード実装を自動化 - Web アプリは閲覧・インスペクトに限定（デザイン作成は Mac アプリのみ）
- Viewer seat は無料
料金（EUR/月、年額）:
| プラン | 月額/Editor | 特徴 |
|---|---|---|
| Standard | €11 | リアルタイムコラボ、無制限ドキュメント |
| Business | €22 | SSO、高度な権限管理（25+ Editor） |
| Enterprise | €44 | SCIM プロビジョニング、BYOK 暗号化 |
| Private Cloud | 要問合せ | 専用 AWS 環境、ホスト地域選択 |
| Mac-only | €108（一括） | オフライン専用、コラボなし、1年間アップデート |
[^2]: Sketch MCP Server — https://www.sketch.com/blog/mcp-server/
2.3 Penpot — オープンソース唯一の本格派
Penpot は GNU AGPL v3.0 のフルオープンソースデザインツールです。セルフホストにも対応しています。
- 最新版: v2.14「Come together」（2026年1月）
- GitHub Stars: 45,073 / 60 万チームが利用
- Design Tokens（ネイティブ統合）: 業界初。Color, Opacity, Dimension, Spacing, Box Shadow 等のトークンを JSON でインポート/エクスポート
- Variants: v2.10 からコンポーネントのバリアント管理に対応
- Flex Layout / Grid Layout: CSS Flexbox / CSS Grid に完全準拠
- MCP Server 搭載（AI エージェント連携）
- Inspect タブ: CSS コード出力（mix-blend-mode, box-shadow 対応）
- 「Design as Code」— CSS, SVG, HTML でネイティブにデザインを表現
料金:
| プラン | 月額 | 特徴 |
|---|---|---|
| Professional | 無料 | 8 チームメンバーまで、10GB |
| Unlimited | $7/ユーザー（上限 $175/月） | 25GB、30日間バージョン |
| Enterprise | $950/月（定額） | チーム規模不問、無制限ストレージ |
| Private Server | $50,000/年 | 専用インフラ、SSO, SCIM, 監査ログ, IP ホワイトリスト |
| Self-hosted | 無料 | Docker ベース、制限なし |
2.4 Adobe XD — 事実上の開発終了
- メンテナンスモードに移行済み。新機能の開発は行わない [^3]
- バグ修正とセキュリティアップデートのみ継続
- 公式製品ページはサポートページにリダイレクト
- 2023 年 12 月に Figma 買収を断念（EU 欧州委員会および UK CMA の競争上の懸念により、約 $1B の解約金を支払い）
- 後継の UI/UX 専用ツールは発表されておらず、Adobe Express と Firefly（生成 AI）に注力
[^3]: Adobe XD 公式サポート — https://helpx.adobe.com/support/xd.html
2.5 InVision — サービス終了
- 2024 年にサービスを終了。ドメインは Miro にリダイレクト
- 既存ユーザーのデータ移行は終了済み
3. デザイン → Web 公開ツール
3.1 Framer — Web サイト特化のデザイン + パブリッシング
- デザインから直接公開可能な Web サイトを構築（ノーコード）
- Wireframer: AI チャットでレスポンシブページを生成
- Workshop: コーディング不要でカスタムコンポーネント作成
- CMS（Relational CMS）内蔵で動的コンテンツ管理
- 2026 年アップデート: Shaders（視覚効果）、Framer Convert（A/B テスト）
| プラン | 月額 | 特徴 |
|---|---|---|
| Free | $0 | デザインツール無料、パブリッシュはカスタムドメイン不可 |
| Basic | ~$7 | カスタムドメイン、30 ページ |
| Pro | ~$21 | ステージング、Relational CMS |
| Scale | ~$70（年額のみ） | プレミアム CDN、高トラフィック対応 |
3.2 Webflow — AI ネイティブ Web プラットフォーム
- 「AI-native website experience platform」を自称
- AI Site Builder: プロンプトからサイト全体を生成（複数ページ対応）
- Webflow MCP Server: LLM / IDE / エージェントとの接続
- Figma to Webflow（Labs）: Figma からの変換
- デザイン → CMS → ホスティング → SEO → 分析 → 最適化までワンストップ
| プラン | 月額 | 特徴 |
|---|---|---|
| Starter | 無料 | 2 ページ、webflow.io ドメイン |
| Basic | $14 | カスタムドメイン、150 ページ |
| CMS | $23 | 20 CMS コレクション |
| Business | $39 | 40 CMS コレクション、300 ページ |
4. AI ネイティブデザインツール
4.1 v0 by Vercel — フルスタック AI アプリビルダー
- 当初は UI コンポーネント生成ツールだったが、フルスタック AI アプリビルダー に進化
- 「Prompt. Build. Publish.」— プロンプトからアプリ生成 → Vercel にデプロイ
- Design Mode（ビジュアルエディタ）+ Agentic ビルド（DB 接続・API 統合を自動化）
- GitHub 連携、デザインシステム作成、独自 AI モデル（v0 Mini / Pro / Max）
| プラン | 月額 | 特徴 |
|---|---|---|
| Free | $0 | $5 分のクレジット、7 メッセージ/日 |
| Team | $30/ユーザー | $30 クレジット/月 |
| Business | $100/ユーザー | トレーニングオプトアウト |
4.2 Subframe — デザイン = コード
- 「The AI-native design tool built for code」
- デザインの各レイヤーがコードに直接マッピング。AI ではなく確定的なコード変換（「No AI slop machine」）
- React コンポーネントとして出力。
npx @subframe/cli syncで直接プル - AI でページ・テーマ・コンポーネントを生成しつつ、出力コードは確定的
- MCP + Skills で Cursor / Claude Code / Gemini と IDE 連携
| プラン | 月額 | 特徴 |
|---|---|---|
| Free | $0 | 1 プロジェクト、5 ページ |
| Pro | $29/エディター | 無制限プロジェクト・AI |
4.3 Uizard — AI プロトタイピング特化
- プロンプトから複数画面のプロトタイプを自動生成（Autodesigner 2.0）
- Screenshot Scanner（スクショ → 編集可能なモックアップ）、Wireframe Scanner（手描き → デジタル）
- CSS / React コンポーネントとしてエクスポート
| プラン | 月額 | 特徴 |
|---|---|---|
| Free | $0 | 3 AI 生成/月、2 プロジェクト |
| Pro | $12 | 500 AI 生成/月、Developer handoff |
| Business | $39 | 5,000 AI 生成/月 |
4.4 その他の AI ビルダー
| ツール | 概要 | 料金 |
|---|---|---|
| Lovable (旧 GPT Engineer) | チャットベースの AI アプリビルダー。アイデアを説明するとリアルタイムでプロトタイプ構築 | Free / Pro $25 / Business $50 |
| Bolt.new (StackBlitz) | ブラウザ内 WebContainer ベースの AI アプリビルダー。DB 統合あり | Free / Pro $25 / Teams $30 |
| Google Stitch (旧 Galileo AI) | Google に買収。プロンプトから高品質 UI デザインを生成 | 詳細未公開 |
5. 機能比較マトリクス
| Figma | Sketch | Penpot | Framer | Webflow | v0 | Subframe | |
|---|---|---|---|---|---|---|---|
| プラットフォーム | Web / Desktop | macOS 専用 | Web | Web | Web | Web | Web |
| オープンソース | ✗ | ✗ | ✓ (AGPL) | ✗ | ✗ | ✗ | ✗ |
| AI デザイン生成 | ✓ (Make) | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ |
| MCP Server | ✓ (β) | ✓ | ✓ | ✗ | ✓ | ✗ | ✓ |
| Design Tokens | Variables | ✗ | ✓ (ネイティブ) | ✗ | ✗ | ✗ | ✗ |
| コード出力 | Dev Mode | Inspector | CSS/HTML | HTML/CSS/JS | HTML/CSS/JS | React/Next.js | React |
| Web サイト公開 | ✓ (Sites β) | ✗ | ✗ | ✓ | ✓ | ✓ (Vercel) | ✗ |
| Flex / Grid | Auto Layout | Stack | CSS Flex/Grid | ✓ | ✓ | ✓ | Auto Layout |
| 無料プラン | ✓ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
| セルフホスト | ✗ | ✗ | ✓ | ✗ | ✗ | ✗ | ✗ |
6. 用途別おすすめ
デザインシステムを構築してチームで運用したい
→ Figma（デファクトスタンダード、エコシステム最大）または Penpot（オープンソース、Design Tokens ネイティブ、セルフホスト可能）
デザインから直接 Web サイトを公開したい
→ Framer（デザイン品質重視、CMS 内蔵）または Webflow（フルスタック、SEO/CMS/分析まで）
AI でプロトタイプを素早く作りたい
→ v0（フルスタックアプリまで対応）、Uizard（モックアップ/ワイヤーフレーム特化）、Lovable（チャットベースで最も手軽）
デザインとコードの完全一致を求める
→ Subframe（確定的コード変換、React 出力）、Plasmic（既存コードベース統合）
コストを抑えたい / オープンソースを使いたい
→ Penpot（Professional プラン無料、セルフホスト無料）
macOS ユーザーでオフライン作業が多い
→ Sketch（Mac-only ライセンス €108 一括、Apple ML でオンデバイス処理）
7. 市場トレンド
- MCP Server の標準化: Figma, Sketch, Penpot, Webflow, Subframe が MCP Server を搭載しています。AI エージェントがデザインツールに直接アクセスする世界が現実化しています
- デザインツールの「プラットフォーム化」: Figma が 8 製品に拡大したように、単機能ツールからプラットフォームへの進化が加速しています
- AI ネイティブツールの台頭: v0, Subframe, Lovable, Bolt.new など、AI ファーストで設計されたツールが急速に成長しています
- Design Tokens の標準化: Penpot がネイティブ統合を実現しました。W3C Design Tokens Format の普及とともに、ツール間のトークン互換が進んでいます
- 「デザイン → コード」の二極化: 確定的変換（Subframe）vs AI 推論変換（v0, Lovable）の 2 つのアプローチが共存しています
- Adobe XD / InVision の退場: 旧世代ツールの退場が完了し、市場は Figma 中心に再編されました
参考資料
- Figma 公式
- Figma Release Notes
- Sketch 公式
- Penpot 公式
- Penpot リリースノート
- Adobe XD サポート
- Framer 公式
- Webflow 公式
- v0 by Vercel
- Subframe 公式
- Uizard 公式
- Plasmic 公式
- Lovable (旧 GPT Engineer)
- Bolt.new
まとめ
Web UI デザインツールは「デザインシステム構築」「Web サイト公開」「AI プロトタイピング」「コードベース統合」の 4 軸で選ぶ時代に入りました。Figma のプラットフォーム化と AI ネイティブツールの台頭が 2026 年の二大トレンドであり、MCP Server によるエージェント連携はすべてのカテゴリで標準化が進んでいます。
まずは以下のステップで試すのがおすすめです:
- デザインシステムが必要なら → Figma（Starter 無料）を試し、オープンソースが要件なら Penpot（Professional 無料 / セルフホスト無料）も並行評価
- Web サイトを素早く公開したいなら → Framer（Free プラン）で 1 ページ作ってみる
- AI でアイデアを形にしたいなら → v0（Free）か Lovable（Free）でプロンプトを試す
- デザインとコードの一致を求めるなら → Subframe（Free）で React コンポーネントの出力品質を確認
