Stitch by Google とは？ AI ネイティブ UI デザインツールの全体像【2026年3月最新版】

Posted at 2026 年 03 月 23 日

Stitch（スティッチ）は、Google Labs が提供する AI 搭載の UI デザインツールです。自然言語のプロンプト・画像・音声から、高忠実度の UI デザインとフロントエンドコードを生成できます。

2025 年 5 月の Google I/O で初公開され、2025 年 12 月の Gemini 3 統合を経て、2026 年 3 月 19 日には「AI ネイティブ・ソフトウェアデザインキャンバス」への大型リニューアルが発表されました。本記事では、最新アップデートの内容を含め、Stitch の機能・仕組み・使い方・制約事項を整理します。

Stitch の定義と位置づけ

Stitch は、テキストプロンプト・画像（スケッチ・ワイヤーフレーム・スクリーンショット）・音声を入力として、Web・モバイル向けの UI デザインを自動生成するツールです。ブラウザ上（stitch.withgoogle.com）で動作し、Google アカウントがあれば無料で利用を開始できます。

当初は「プロンプトから UI を生成する」シンプルなツールでしたが、2026 年 3 月のアップデートにより、アイデアの初期スケッチから動作するプロトタイプまでを一つのワークスペースで完結させるデザインプラットフォームへと進化しています。汎用チャットボットでもフル IDE でもなく、「インターフェースデザインの生成・探索・エクスポート」に特化したツールという位置づけです。

2026 年 3 月 19 日アップデートの要点

2026 年 3 月 19 日、Google Labs は Stitch の大型アップデートを発表しました。Google Labs VP の Josh Woodward 氏は「AI はクリエイティビティの増幅器であり、多くのアイデアを素早く探索する手助けをする」とコメントしています。以下が主な変更点です。

AI ネイティブ無限キャンバス

Stitch の UI が完全にリデザインされ、無限キャンバスが導入されました。テキスト・画像・コードをキャンバス上に直接配置してコンテキストとして活用でき、初期アイデアからプロトタイプまでツールを切り替えずに作業できます。従来の「プロンプト入力 → 結果確認」という直線的なフローから、自由に発散・収束を繰り返せるワークスペースに変わった点が最大の違いです。

Voice Canvas（音声キャンバス）

Gemini Live モデルを活用した音声操作機能が強化され、「Voice Canvas」として正式導入されました。AI エージェントに対して音声でデザイン変更を指示できるだけでなく、エージェント側からデザイン目標についてのインタビュー、リアルタイムでのデザイン批評、代替案の提案が行われます。タイピングと結果確認のコンテキストスイッチを排除し、音声でイテレーションを回せるのが特徴です。

Vibe Design（バイブデザイン）

ワイヤーフレームからではなく、ビジネス目標・ユーザーに感じてほしい印象・インスピレーション元などの「意図」を出発点にデザインを生成するアプローチです。例えば「信頼感がある」「ミニマルで速い印象」といった抽象的な入力から、複数のデザイン方向性を一度に提示します。

デザインエージェント

キャンバス全体のコンテキストを横断的に把握し、プロジェクトの進化を追跡する専用エージェントが搭載されました。単発のプロンプト応答ではなく、プロジェクト全体の文脈を踏まえた上で推論・提案を行います。

複数画面の同時生成

ユーザーフロー全体を説明すると、最大 5 画面を一度に生成し、画面間のスタイル一貫性を自動で維持します。従来は 1 画面ずつ生成する必要がありましたが、フロー全体を一括で生成できるようになりました。

MCP サーバー対応（開発者向けの重要な変更）

Stitch が MCP（Model Context Protocol）サーバーとして機能するようになり、AI コーディングエージェントとの連携が可能になりました。対応ツールは Claude Code、Gemini CLI、Cursor、VS Code、Codex、OpenCode などです。

これにより、コーディングエージェントがスクリーンショットではなくライブのデザインコンテキスト（レイアウト構造・カラー・タイポグラフィなど）を直接読み取れるようになります。「デザインシステムに合ったボタンを追加して」と指示したとき、エージェントが推測ではなく実際のデザイン仕様に基づいてコードを生成できる、という変化です。

MCP サーバーの設定は以下のように行います。

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Google Cloud プロジェクトで Stitch API を有効化し、gcloud で認証した上で MCP クライアントに追加するだけで利用できます。Stitch API 自体は現時点で無料です。

GitHub 上には Google Labs 公式の Agent Skills ライブラリ（google-labs-code/stitch-skills）も公開されており、React コンポーネント生成や shadcn/ui 統合などのスキルを npx skills add コマンドでインストールして、コーディングエージェントから Stitch のデザインワークフローを活用できます。

DESIGN.md によるデザインシステム管理

任意の URL からデザインシステムを抽出する機能に加え、DESIGN.md 形式でのエクスポート/インポートが導入されました。DESIGN.md は「エージェントフレンドリーなマークダウンファイル」で、カラー・タイポグラフィ・スペーシングなどのデザインルールを自然言語で記述します。他の Stitch プロジェクトや AI コーディングツールとルールを共有でき、プロジェクト間の一貫性維持に活用できます。

基本機能の一覧

上記のアップデートを含め、現時点での Stitch の主要機能は以下のとおりです。

  • テキスト → UI 生成： アプリの説明やカラーパレットの要望を自然言語で入力し、UI を生成する
  • 画像 → UI 生成： 手描きスケッチやスクリーンショットを機能的な UI に変換する（Experimental Mode）
  • Voice Canvas： 音声でレイアウト・配色・テキストをリアルタイムに調整し、AI からの批評も受けられる
  • Vibe Design： ビジネス目標やユーザー体験の意図から複数のデザイン方向性を一括生成する
  • 複数画面同時生成： ユーザーフロー全体を一度に最大 5 画面生成する
  • インタラクティブプロトタイプ： 画面を接続してフローを定義し、Play ボタンで画面遷移を確認できる
  • コード書き出し： HTML + Tailwind CSS のフロントエンドコードをエクスポートする
  • Figma 連携： Auto Layout・レイヤー構造を保持したまま Figma へペースト可能。公式プラグインも提供
  • MCP サーバー： Claude Code・Cursor・Gemini CLI などのコーディングエージェントにデザインコンテキストを提供
  • DESIGN.md： デザインルールをエクスポート/インポートし、プロジェクト間やツール間で一貫性を保つ

仕組みとアーキテクチャ

2026 年 3 月のアップデートで、Stitch は従来の 2 モード（Standard / Experimental）から 4 モード体制 に移行しました。それぞれ異なる Gemini モデルを使用し、用途に応じて使い分けます。

モード

使用モデル

用途・特徴

3 Flash（デフォルト）

Gemini 3.0 Flash

高速生成（60〜90 秒）。初稿・高速イテレーション向け。日常的な作業の中心

Thinking

Gemini 3.1 Pro

高品質出力。スペーシング・タイポグラフィ・コンポーネント階層がより洗練される。最終仕上げ向け

Redesign

Nano Banana Pro

画像入力（スクリーンショット・ホワイトボード写真・既存 UI）から UI を再構築する。既存デザインのリデザインに最適

Ideate（新規）

—

プロジェクト初期の探索・ブレスト向け。Web からコンテキストを取得し、既存サイトのスタイルを学習し、複数の解決策を並列で探索する「ディープデザイン」エージェント

Ideate モードは Google の PM が「Deep Design」と呼ぶ新しいアプローチで、デザインを生成する前にリサーチと共創を行うエージェントです。例えば「EC サイトのチェックアウトフローのベストプラクティスを分析して、スニーカーショップ向けにデザインして」のような、調査込みの指示に対応します。

クレジットシステム

課金体系も大きく変更されました。従来の月間生成回数上限（Standard 350 回 / Experimental 50 回）は廃止され、日次クレジット制（毎日 UTC 0 時にリセット）に移行しています。3 Flash が最も低コスト、Thinking が最も高コストで、Redesign は入力の複雑さにより変動します。具体的なクレジット数はアカウントのティアに依存します。

効率的な使い方としては、Ideate と 3 Flash で方向性を安価に探索し、最終的な 2〜3 画面のみ Thinking モードで仕上げるのが推奨されています。

モデルの進化

Stitch の基盤モデルは、2025 年 5 月のローンチ時は Gemini 2.5 Pro / 2.5 Flash でしたが、2025 年 12 月に Gemini 3 が統合され、2026 年 3 月には Gemini 3.0 Flash と 3.1 Pro に更新されています。Gemini 3.1 Pro は ARC-AGI-2 で 77.1% を達成した推論特化モデルであり、Stitch の Thinking モードではこの推論能力がレイアウト構成やコンポーネント階層の最適化に活用されています。

内部的にはエージェントシステムを採用しており、タイポグラフィ最適化・配色調整・プレースホルダ画像生成などの複数タスクを並列処理します。

使い方の流れ

基本的な利用手順

1.サインインとホーム画面の確認

stitch.withgoogle.com にアクセスし、Google アカウントでサインインすると、「Stitch へようこそ...」と表示されるホーム画面が開きます。

画面は大きく 2 つのエリアに分かれています。左側のサイドバーには「マイ プロジェクト」と「共有アイテム」のタブがあり、過去に作成したプロジェクトやサンプルが一覧表示されます。右側のメインエリアにはプロンプト入力欄があり、ここからデザイン生成を開始します。

サイドバーの「例」セクションには、Google が用意したサンプルプロジェクト（Indoor Plant Care Dashboard、Alps skiing guide、Board game club planner など）が並んでいます。まずはこれらを開いて、Stitch で生成された UI の完成度や操作感を確認しておくと、自分のプロジェクトを始めるときのイメージがつかみやすくなります。

2.プラットフォームの選択

プロンプト入力欄の左下に「アプリ」「ウェブ」の切り替えタブがあります。モバイルアプリの UI を作りたい場合は「アプリ」、Web ページのレイアウトを作りたい場合は「ウェブ」を選択します。

デフォルトは「アプリ」が選択された状態です。Stitch はモバイル UI の生成品質が特に高い傾向があるため、Web レイアウトを作る場合はコンポーネントの配置やセクション構成をやや詳しくプロンプトに書く方が良い結果が出ます。

3.AI モードの選択

プロンプト入力欄の右下にモデル選択ボタンがあり、デフォルトでは「3.0 Flash ●」と表示されています。クリックすると 4 つの AI モードを切り替えられます。2026 年 3 月のアップデートで、従来の 2 モード（Standard / Experimental）から 4 モード体制に刷新されました。

3.0 Flash（デフォルト）

Gemini 3.0 Flash を使用するモードで、60〜90 秒で UI を生成します。日常的な作業の中心となるモードで、日次クレジットの消費も最も少ないため、初稿の生成やイテレーションはこのモードで行うのが基本です。

Thinking（Gemini 3.1 Pro）

Gemini 3.1 Pro の推論能力を活用し、より洗練されたレイアウト・タイポグラフィ・コンポーネント階層を出力するモードです。生成に時間がかかり、クレジット消費も大きいため、コンセプトが固まった後の最終仕上げに使うのが推奨されます。

Redesign（Nano Banana Pro）

既存のビジュアル素材から UI を再構築するモードです。スクリーンショット、ホワイトボードに描いたスケッチ、既存アプリの画面写真などをアップロードし、テキストで変更指示を加えると、新しい UI に変換してくれます。

Ideate（新規追加）

2026 年 3 月のアップデートで新たに追加されたモードです。UI の形が決まっていない段階で使います。作りたい UI ではなく「解決したい問題」を入力すると、複数のコンセプト方向を提示してくれます。例えば「フリーランスが未払い請求書を管理するアプリが必要」と入力すると、レイアウトやインタラクションの異なる複数の方向性が提案され、そこから選んで詳細化していくことができます。

4.プロンプトの入力と送信

プロンプト入力欄に作りたい UI の説明を自然言語で入力し、右下の送信ボタン（↑）をクリックするか Enter キーで送信します。

今回はタスク管理ツールのデザインを作成してもらいます。

プロンプト:

シンプルなタスク管理ツールを作成してください

出力:

更に追加した生成したデザインに新しいデザインや機能を追加できます。

プロンプト:

タスクを優先度別に色分けしてください

出力:

3.エクスポート画面の開き方

画面を選択すると上部にツールバーが表示され、「▷（Play）」「エクスポート」「共有」の 3 つのボタンが並びます。「エクスポート」をクリックするとパネルが開き、Format の選択肢として以下の 8 形式が表示されます。

AI Studio

Googleの開発環境へデザインを渡し、そのままGemini API連携のアプリ試作へつなげたい場合に向いている形式です。Stitchで作ったUIを起点に、AI Studio上でバックエンドロジックやデータ接続を追加し、「動くアプリ」に発展させやすいのが特徴です。

現時点ではプレビュー段階の機能ですが、Googleのエコシステム内でそのままプロトタイプ開発を進めたい人には相性の良い選択肢です。

Figma

生成したUIをFigmaへ持ち込み、デザインチームが細部を仕上げていきたい場合に適した形式です。Auto Layoutやレイヤー構造を保ったまま取り込めるため、Stitchでたたき台を作り、Figmaで最終調整するという流れに向いています。

実務では「Stitchで80％まで形にして、残り20％をFigmaで詰める」という使い方が現実的です。ただし、画像入力ベースのRedesignモードで生成したデザインは、Figmaエクスポートに対応していない点には注意が必要です。

Jules

GoogleのAIコーディングアシスタント「Jules」にデザインを渡し、実装を自動化したい場合に向いています。AI Studioが開発環境にデザインを取り込むための入口だとすれば、Julesはデザインをもとにコード化を進めるための経路です。

特に、デザインからフロントエンド実装までをAI主導で進めたい場合には有力な選択肢です。

.zip

HTML、CSS、画像などのアセット一式をZIP形式でダウンロードする方法です。Googleの環境に依存せず、自分のPCや既存の開発環境で編集を続けたい場合に使いやすい形式です。

生成コードは出発点としては便利ですが、そのまま本番に投入するというより、開発者が構造や命名、アクセシビリティなどを見直したうえで使うのが前提になります。

コードをクリップボードにコピー

生成されたHTML + Tailwind CSSのコードを、その場でクリップボードへコピーする形式です。.zipのようにダウンロードする手間がなく、エディタへすぐ貼り付けて作業を始められます。

単画面のUIを素早く取り出したいときや、AIコーディングエージェントにそのまま貼り付けて「このコードを整理して」と指示したい場面に便利です。

MCP

MCP（Model Context Protocol）経由で、Claude Code、Cursor、VS Code、Gemini CLIなどのAIコーディングエージェントに、Stitchのデザイン情報をライブで渡す形式です。静的なファイルを書き出すのではなく、レイアウト構造や配色、タイポグラフィ、コンポーネント階層といったデザインコンテキストを動的に参照させられるのが大きな特徴です。

デザインと実装のズレを減らしたい場合には非常に有力ですが、Google Cloudプロジェクトの準備や認証設定が必要になるため、導入のハードルはやや高めです。

プロジェクト概要

画面構成、デザインルール、ユーザーフローなどをドキュメントとして出力する形式です。単なるデザインの保存ではなく、「このプロジェクトが何を意図しているか」を整理した資料として使えます。

クライアントへの説明、チーム内共有、引き継ぎ、PRDに近いたたき台の作成などに向いています。

Instant Prototype

静的なデザイン画面を、クリックやタップで操作できる簡易プロトタイプへ変換する新機能です。ボタンやリンク、ナビゲーション要素などをStitchが自動で検出し、文脈に応じた次画面を生成してつないでくれます。

コードを書かずに「動く見本」を見せられるため、クライアント向けデモ、ユーザーテスト、提案資料、投資家向けプレゼンなどで特に効果を発揮します。

開発者ワークフローとの連携

MCP サーバーを設定すれば、Claude Code や Cursor から generate_screen_from_text（テキストから画面生成）、extract_design_context（デザインコンテキスト抽出）、fetch_screen_code（コード取得）などのツールを呼び出せます。「Stitch でデザインを作成 → DESIGN.md をエクスポート → コーディングエージェントがその仕様に基づいてコンポーネントを実装」という流れが可能です。

Figma 連携とコード書き出しの詳細

Figma 連携

Standard Mode で生成した UI は、Auto Layout とレイヤー構造を保持したまま Figma にペーストできます。Figma コミュニティには公式プラグイン「Stitch to Figma」も公開されています。

重要な制限： Experimental Mode（画像入力）で生成したデザインは Figma エクスポートに対応していません。画像から生成した UI を Figma で編集したい場合は、Standard Mode で再生成するなどの回避策が必要です。

コード書き出し

生成される UI のフロントエンドコードは HTML + Tailwind CSS が基本です。レイアウトの構造的な出発点としては有用ですが、コンポーネントの命名・セマンティック構造・アクセシビリティ対応・CSS の整理など、プロダクション利用前に開発者による調整が必要になるケースが一般的です。

MCP サーバー経由で fetch_screen_code を使えば、生成された HTML/CSS をコーディングエージェントに直接渡してリファクタリングを依頼する、という運用も可能です。

メリットと制約・注意点

  • Google Labs の実験的プロダクトであること： Stitch は Google Labs の実験段階にあり、機能や利用条件が予告なく変更される可能性がある。Google には Labs 製品を終了した実績もあるが、検索ボリュームが 1 年で 140 → 40,500/月に急成長しており、Google のAI エコシステムとの統合も深いため、単独プロダクトへの昇格や Google Workspace への統合が予想されている。ただし、本番ワークフローに全面的に依存するのは時期尚早と考えるべき。
  • 生成回数の制約： 課金体系は日次クレジット制（毎日 UTC 0 時 = 日本時間 9 時にリセット）に移行している。3.0 Flash が最も低コスト、Thinking が最も高コストで、Redesign は入力の複雑さにより変動する。一部の情報源では月間上限（Standard 350 回 / Pro 200 回）も併記されており、具体的なクレジット数はアカウントのティアや時期によって変動する可能性がある。残量が少なくなっても警告が表示されないため、セッション途中でクレジット切れになるリスクがある点に注意が必要。
  • コード出力が HTML/CSS 中心： 生成されるフロントエンドコードは HTML + Tailwind CSS が基本。React コンポーネントとしてのエクスポートにも一部対応しているが、Vue、SwiftUI、Flutter などのフレームワーク向け出力はロードマップ上にあるものの未実装。コンポーネント命名・セマンティック構造・アクセシビリティ対応は開発者によるリファクタリングが前提。
  • 共同編集の制約： Agent Manager により複数メンバーが並列でデザイン方向を探索できるようになったが、Figma のようなリアルタイム共同編集・コメント・権限管理・バージョン履歴は限定的。チーム機能は初期段階であり、Figma の成熟したワークスペースやプラグインエコシステムとは大きな差がある。
  • デザインシステム管理が発展途上： DESIGN.md によるルール管理は導入されたが、プロジェクト横断でコンポーネントライブラリやデザイントークンを定義・強制する仕組みは未実装。生成のたびにスタイルが微妙にブレる可能性があり、大規模プロジェクトでの一貫性維持には工夫が必要。また、DESIGN.md は現時点で Stitch エコシステムに強く結びついており、公式スキーマやガバナンスが整備されたオープン標準ではない点も指摘されている。
  • アニメーション・マイクロインタラクション非対応： 画面遷移のプロトタイプや Instant Prototype は可能だが、ホバーエフェクト、スクロール挙動、ローディングアニメーション、条件分岐ロジックなどのマイクロインタラクションは設計できない。ロードマップ上ではアニメーション・マイクロインタラクション・条件分岐ロジックの追加が計画されている。
  • バックエンドロジックは生成できない： Stitch が生成するのはフロントエンドの UI のみ。API 呼び出し、状態管理、認証、データベース接続などのバックエンドロジックは範囲外であり、AI Studio や Jules、MCP 経由のコーディングエージェントで別途実装する必要がある。
  • プロンプトへの依存度が高い： 生成品質はプロンプトの書き方に大きく左右される。短すぎるプロンプトでは AI が大量の仮定を置くため期待と異なる結果になりやすく、同じプロンプトでも生成のたびに品質にばらつきが出ることがある。複雑なマルチコンポーネントのレイアウトでは複数回のイテレーションが必要になるのが一般的。
  • Redesign モードの Figma エクスポート制限： 画像入力ベースの Redesign モード（Nano Banana Pro）で生成したデザインは Figma エクスポートに対応していない。画像から生成した UI を Figma に持ち込みたい場合は、3.0 Flash や Thinking モードで再生成する回避策が必要。
  • Web レイアウトの品質がモバイルに劣る傾向： Stitch はモバイル UI の生成品質が特に高い一方、複雑な Web レイアウトではプロンプトをより詳細に書く必要があり、Direct Edits での追加調整が求められるケースが多い。
  • 将来の課金の可能性： 現時点では Google が普及を優先しており無料だが、Labs 卒業時にプレミアム機能やエンタープライズプランが導入される可能性が高い。競合製品の価格帯（月額 25〜30 ドル程度）が参考になる。

今後のロードマップ

Stitchは、実際に触ってみると「とりあえず形にするまでの速さ」が一番の強みだと感じました。頭の中でぼんやりしていたアイデアが、短時間でUIとして見える形になるので、考えるだけで止まっていたものを前に進めやすいです。

一方で、細かい仕上げや本番レベルの実装まで全部を任せるツール、というよりは、最初の80％を一気に作るための加速装置として使うのが現実的だと思います。そこから先はFigmaやコーディング環境で詰めていく前提ですが、それでも最初の一歩がここまで軽くなるのはかなり便利です。

デザインのたたき台づくり、方向性の整理、プロトタイプの共有といった初期工程では、かなり頼れる存在だと感じました。今のうちに触っておく価値は十分あるツールだと思います。

Google I/O 2026 で有料化や Labs 卒業の話が出てくる可能性もあるので、気になっている方は今のうちに試しておいて損はないはずです。

参考リンク

DevpediaCode編集部

DevpediaCodeはWeb、AIなどプログラムに関する最新ITテーマの情報を発信するメディアです。

お問合せ下記のURLからお願いします。

https://devpediacode.com/contact
記事一覧へ戻る
Share: