Figmaのサブスクリプション料を払いながら初稿スケッチをしていましたか？もうその必要はありません。GoogleがGeminiベースのAIデザインツールを完全無料でリリースしました — 発表当日、Figmaの株価は8.8%下落しました。 その名はStitch。テキスト1行でUIが生成され、リアルタイムのマルチプレイヤー編集もReactコードのエクスポートも、すべて無料です。
これは何なんですか？
Google StitchはGoogle Labsが開発したAIベースのUIデザインプラットフォームです。 Gemini 2.5 Flash/Proを基盤に、テキスト、画像、音声コマンドからUIを生成します。2025年のGoogle I/Oで初公開され、2026年3月の大型アップデートで「AIネイティブの無限キャンバス」として完全に再構築されました。
最大の変化は「リアルタイムストリーミングエージェント」です。 入力中にUIコンポーネントがリアルタイムでレンダリングされ、Agent Managerがプロジェクト全体の履歴を記憶して一貫した結果を生成します。Figmaのように複数人が同時編集できるマルチプレイヤー機能も追加されました — すべて無料で。
もう一つ注目したいのは、DESIGN.mdというオープンソースフォーマットです。Apache 2.0で公開されたMarkdownベースのデザインシステムフォーマットで、色、タイポグラフィ、余白、コンポーネントパターンをテキストで定義すると、AIがそれを読み込んですべての画面に一貫して適用してくれます。 Gitでバージョン管理でき、Claude CodeやCursorなどのAIコーディングツールとも連携できます。
Stitchの4つのAIモードも知っておくと便利です:
- Flashモード (Gemini 2.5 Flash)
60〜90秒以内に素早い初稿を生成します。アイデアを素早く確認したり、複数の方向性を探索するときに使います。 - Thinkingモード
複雑なUIフローとマルチスクリーン設計に最適化されています。少し遅いですが、複雑なサービス構造を一度に設計する際に効果的です。 - Redesignモード
既存のスクリーンショットをアップロードすると、高解像度のリデザイン版を作成します。レガシー画面のリニューアルに有用です。 - Ideateモード
一つの説明から複数のクリエイティブなコンセプトを同時に提案します。クライアントへの初期方向性提示にぴったりです。
何が変わるんですか？
正直、「AIデザインツール」はすでにたくさんありますよね。Figma Make、v0、MagicPath、Framer AI... でも Stitch が違うのは、Googleが作ったということだけでなく、探索段階全体を無料で開放してしまったことです。 これまでのワークフローはFigmaを開いて何もないキャンバスから始めていましたが、今はStitchで2分間に数十の方向性を出してみて、気に入ったものをFigmaに持ち込んで磨くことができるようになりました。
| 従来のワークフロー (Figma単独) | Stitch → Figma の組み合わせ | |
|---|---|---|
| 初稿生成 | デザイナーが一つひとつ手動配置 (数時間) | テキスト入力 → 2分以内に複数方向を生成 |
| アイデア探索 | 1〜2方向しか現実的に実現できない | Ideateモードで複数コンセプトを同時比較 |
| 非デザイナーの参加 | Figmaは学習コストが高い | PMや企画者も音声でプロトタイプを即生成 |
| ブランド適用 | デザインシステムコンポーネントを手動適用 | DESIGN.mdを一度設定 → 全体自動適用 |
| コード連携 | 開発者へのハンドオフ + 手動実装 | MCPサーバーでClaude Code、Cursorに直接接続 |
| 費用 | Figma Pro: $15/エディター/月 | Stitch探索フェーズ: 無料 |
ただし、まだFigmaを完全に置き換えることはできません。実際に使った人たちが共通して指摘する限界があります。
Stitchの現在の限界
マイクロインタラクション実装不可、レスポンシブの一貫性不足、複雑なコンポーネントシステム管理が難しい。コラボレーション機能もFigmaレベルにはまだ達していません。プロダクション最終完成品というよりは、アイデア検証と初稿検証フェーズで真価を発揮するツールです。
| ツール | 核心的な強み | 最適な使用フェーズ | 価格 |
|---|---|---|---|
| Google Stitch | AIエージェント探索、無料、DESIGN.md | アイデア出し → 初稿 | 無料 (350回/月) |
| Figma | チームコラボ、デザインシステム、2,000+プラグイン | 精製 → プロダクション | $15/エディター/月〜 |
| MagicPath | 無限キャンバス、Figmaインポート | デザイン → コード | 無料 / $20/月 Pro |
| v0 (Vercel) | shadcn/uiコンポーネント、開発者向け | コンポーネント開発 | 無料 / 有料 |
始め方: 要点だけ
- Stitchにアクセスしてサインアップ
stitch.withgoogle.comでGoogleアカウントでログイン。クレジットカード不要で即スタート。月350回無料生成です。 - 最初のプロンプトを入力
欲しいUIを説明します。「SaaSダッシュボードメイン画面、ダークモード、左サイドバー」のように具体的なほど良いです。Flashモードで複数方向を素早く探索してみましょう。 - DESIGN.mdを設定 (オプション、強くおすすめ)
既存ブランドのURLを貼り付けると、Stitchが自動でデザインシステムを抽出します。色やフォントを直接定義すれば、以降の全生成物に自動適用されます。 - Agent Managerで反復探索
Voice Canvasや直接編集で修正します。Ideateモードで複数方向を探索し、気に入った方向を選んで続けましょう。 - エクスポート
Figmaレイヤーとしてエクスポート (公式コミュニティプラグイン使用)、またはHTML/Tailwind CSSコードを直接エクスポートできます。MCPサーバー接続でClaude Code、Cursorからすぐに開発を続けることも可能です。
最初に使うときはこれだけ覚えてください
曖昧な一文プロンプトはジェネリックな結果を生みます。「4ステップフレーム」を試してみてください: 基本画面説明 → 美的雰囲気の説明 → 画面ごとの細部修正 → DESIGN.mdでテーマ統一。この順序で進めると、最初からずっと一貫した結果が得られますよ。
もっと深く知りたい方へ
Google Stitch公式サイト 無料でいますぐ始められます。サンプルプロジェクトとチュートリアル付き。 stitch.withgoogle.com
DESIGN.md GitHubリポジトリ Apache 2.0オープンソース。リンティング、Tailwind変換、WCAGアクセシビリティチェックツール付き。 github.com
Google Stitch vs Figma 詳細比較 機能別の詳細比較とどのチームに何が合うかの整理。 mindstudio.ai
Google Stitch + DESIGN.md 実践ガイド DESIGN.mdの構造と活用法を詳しく解説したガイド。 brunch.co.kr
Google Stitchとは？ (AgentDock) ユースケース別の強みと限界の分析。 agentdock.ai
Google Stitch完全ガイド (The AI Corner) 4ステッププロンプティングフレームワークと実際の使用体験。 the-ai-corner.com
