「Figmaはもう要らないのか？」
2026年3月に大型アップデートが当たったGoogle Stitch AIを試した多くの開発者・デザイナーから、この問いが出ている。テキストで説明するだけでUIが生成され、MCP経由でClaude CodeやCursorに直接渡せる。実際に触ってみると、「Figmaが死ぬ」というより「設計プロセスの最初の30%が根本的に変わる」という感覚だった。
この記事では、Google Stitch AIの2026年3月時点の機能を開発者とデザイナーの両視点で検証する。Figmaとの住み分けと、実際のワークフローへの組み込み方まで具体的に解説する。
AIエージェントを開発フローに組み込む全体像は、AIエージェント構築完全ガイドで解説している。
スペック比較：Stitch vs Figma
| 項目 | Google Stitch | Figma |
|---|---|---|
| 主な用途 | ゼロからのUIアイデア探索・プロトタイプ | 本番品質のUI設計・チーム協業 |
| 入力方式 | 自然言語・音声（Voice Canvas） | 手動でコンポーネント配置 |
| 学習コスト | 低（テキストで指示するだけ） | 高（コンポーネント・制約・バリアント等） |
| デザインシステム連携 | DESIGN.md形式 | 変数・スタイル・コンポーネントライブラリ |
| コード出力 | SDK + MCP → Claude Code等に自動渡し | Dev Modeで手動確認、プラグイン必要 |
| プロトタイプ | 即時自動生成、Click to Play | 手動でフロー接続が必要 |
| 料金 | 無料 | $12〜$45/月（有料プランが主流） |
| アクセシビリティ対応 | 基本的な対応（改善中） | 充実（AAコンプライアンス確認ツールあり） |
Stitchが勝つ観点で比較する
「0から1」の速度
新機能のUIをゼロから考えるフェーズでStitchは圧倒的に速い。テキストで「モバイルアプリのダッシュボード、ユーザーの週次アクティビティグラフと3つのクイックアクション付き」と打ち込むと、数秒で複数のレイアウト候補が生成される。
従来なら「まずワイヤーフレームを紙に書く」「Figmaでざっくり配置する」という手順が必要だった。Stitchはこのフェーズをほぼスキップできる。
実際の設計現場でよく使われるようになっているフローは以下だ：
# Stitch でのUI生成フロー（ブラウザで実行）
# 1. stitch.withgoogle.com にアクセス
# 2. テキストボックスに自然言語で説明
# 例:
"SaaS管理画面のサイドナビゲーション。
アイコン付きメニュー6項目、折りたたみ可能、
ダークモード対応。Material Design 3準拠。"
# 3. 生成されたUI候補から選択 → インタラクティブプロトタイプが即自動生成
# 4. "Play"ボタンで実際のクリック遷移を即確認
Voice Canvas：音声で設計指示
2026年3月の大型アップデートで追加されたVoice Canvasは、マイクに向かって話すとAIがリアルタイムでデザインを更新する機能だ。
# Voice Canvasの使い方（実際の指示例）
「右上のボタンの色をブランドカラーのティールに変更して」
→ AIが即座に変更 + 「コントラスト比が3.2:1です。AA基準には達していません」と警告
「このカードコンポーネントのパディングをもう少し広くして、
モバイルでの見やすさを改善したい」
→ 複数の候補を提示し、ユーザーが選択する
デザインレビュー会議中に声で修正を加えながら進行できる。モックアップを別ウィンドウで見せながら、その場でフィードバックを反映する使い方が現実的だ。
MCP連携：Claude CodeやCursorに直接渡す
2026年3月アップデートの目玉のひとつが、SDK + MCPサーバーによる開発ツール連携だ。
# Stitch MCP サーバーのセットアップ
# Claude Code の .mcp.json に追加
{
"mcpServers": {
"google-stitch": {
"command": "npx",
"args": ["@google/stitch-mcp-server"],
"env": {
"STITCH_API_KEY": "your_stitch_api_key"
}
}
}
}
# 注意: 本番環境で使用する前に、必ずテスト環境で動作確認してください。
設定後、Claude Codeに「Stitchのダッシュボードデザインを元にReactコンポーネントを生成して」と指示するだけで、StitchのUIデータが自動的に読み込まれてコード生成が始まる。デザインとコードの乖離が起きやすかった「デザインデータをエンジニアに共有 → エンジニアが解釈してコーディング」というギャップが大幅に縮まった。
Figmaが勝つ観点で比較する
「1から100」の精度と制御
Stitchが生成したUIは「方向性の確認」には十分だが、本番品質に持っていくには限界がある。ピクセル単位のマージン調整、アニメーションの詳細な制御、アクセシビリティのAAA基準対応 — これらはFigmaの方が格段に制御しやすい。
デザインシステムの運用も同様だ。Figmaのコンポーネントライブラリ・変数・スタイルの管理機能は、数十〜数百のコンポーネントを長期間メンテナンスする場合にStitchより優れている。DESIGN.mdによるStitchのデザインシステム管理はまだ発展途上だ。
チーム協業とバージョン管理
Figmaのリアルタイム協業、コメント機能、バージョン履歴はデザインチームが複数人いる場合に必須だ。Stitchは現時点でこの領域には力を入れていない。
2026年の推奨ワークフロー
結局のところ、StitchとFigmaは置き換えではなく補完関係だ。実際に採用されているハイブリッドフローを紹介する。
| フェーズ | ツール | 所要時間（目安） |
|---|---|---|
| アイデア出し・方向性確認 | Stitch（テキスト/音声） | 10〜20分 |
| プロトタイプ確認・ステークホルダー合意 | Stitch（自動生成プロト） | 30分〜1時間 |
| 本番UIの詳細設計 | Figma（Stitch-to-Figmaプラグインで引き継ぎ） | 2〜5日 |
| コード実装 | Claude Code / Cursor（MCP経由でStitchデータ活用） | 実装量に依存 |
特に効果的なのが3番目の引き継ぎだ。Stitch-to-Figmaプラグインを使うと、Stitchで作ったレイアウトがFigmaにレイヤー・コンポーネント保持の状態でインポートされる。ゼロからFigmaで作るよりも大幅に時間が短縮される。
エンタープライズデザインワークフローへの影響
大企業のデザイン組織では、Stitchが「デザイン工程の入口」として定着しつつある。具体的に変わっているのは以下の2点だ。
デザイナーでない人が最初のモックを作れるようになった: PMやエンジニアがStitchで叩き台を作り、デザイナーが本番品質に仕上げるという分業が成立するようになった。デザイナーの時間が探索フェーズではなく本番精度向上に集中できる。
デザイン→コードのギャップが縮まった: MCP連携によって「Figmaのデザインとコードが違う」という摩擦が起きにくくなっている。Stitch → MCP → Claude Codeのラインが機能すれば、デザイン仕様書なしでコード生成が始められる。
【要注意】よくある誤解と失敗パターン
誤解1：Stitchは本番UIを作るツール
❌ Stitchで生成したコードをそのままproductionにデプロイする
⭕ Stitchはあくまで「方向性の確認」と「叩き台生成」に使い、本番はエンジニアがレビューしてから使う
なぜ重要か: 生成されたコードはアクセシビリティ・セキュリティ面で確認が必要なケースがある。自動生成コードをそのままリリースすることは推奨されない。
誤解2：VoiceCanvasは常時聴きっぱなしで危険
❌ Voice Canvasが常時リスニングしていてプライバシーリスクがある
⭕ Push-to-talkベースで、起動中のみ音声を処理する
誤解3：Figmaは完全に不要になった
❌ 「Stitch無料だからFigma解約しよう」と即断する
⭕ チームのデザインシステム規模・プロジェクトのフェーズによって使い分ける
正直に言うと、デザインシステムが確立した大きなプロダクトチームにとってFigmaはまだ不可欠だ。Stitchで完結するのは「探索フェーズが多い」「デザイン専任がいない小規模チーム」のケースが現実的だ。
筆者の評価
Google Stitch AIはデザインプロセスの「0→1フェーズ」を根本的に変える可能性を持っている。特にMCP連携でClaude Codeと繋いだときの設計→実装の連続性は本物だ。一方で、「Figmaの代替」という文脈で語られることが多いが、それは正確ではない。
「Stitch + Figmaのハイブリッドで、設計の入口の生産性を2〜3倍にする」という使い方が、現時点での最も現実的な評価だと考えている。
参考・出典
- Design UI using AI with Stitch from Google Labs — Google Blog（参照日: 2026-03-21）
- From idea to app: Introducing Stitch — Google Developers Blog（参照日: 2026-03-21）
- Google Revamps Stitch AI with Voice, Canvas, Dev Tools — Winbuzzer（参照日: 2026-03-21）
- Google upgrades its Stitch AI interface development tool — SiliconANGLE（参照日: 2026-03-21）
- Google Stitch vs Figma 2026 — NxCode（参照日: 2026-03-21）
まとめ：今日から始める3つのアクション
- 今日: stitch.withgoogle.com にアクセスし、今のプロジェクトのUIを自然言語で説明してみる（無料・登録不要）
- 今週中: 生成したUIをFigmaにインポートし、本番設計との接続フローを確認する
- 今月中: Claude Code + Stitch MCPを連携し、デザイン→コード生成までのパイプラインをチームで試作する
あわせて読みたい:
- Dify × Claude Code 連携ガイド — AIツールを繋ぐ実践的な連携設計
- AIエージェントツール比較ガイド — 開発ツールの全体像を把握する
この記事はAIgent Lab編集部がお届けしました。
Google StitchやClaude Codeを業務フローに組み込む支援は、Uravation（株式会社Uravation）のお問い合わせフォームからご相談ください。
