---
title: "Google Stitchとは？使い方・料金・商用利用とMCP連携を解説【2026年10月】"
url: "https://www.issoh.co.jp/tech/details/8062/"
published: 2025-08-06
updated: 2026-10-17
categories: ["Gemini"]
publisher: "株式会社一創"
---

# Google Stitchとは？使い方・料金・商用利用とMCP連携を解説【2026年10月】

Google Stitch（グーグル スティッチ）は、文章や画像からアプリ・Webの画面デザインとフロントエンドのコードを生成する、Google LabsのAIデザインツールです。英単語の「stitch（縫い目）」やディズニーのキャラクター、データ連携サービスのQlik Stitchとは別物で、この記事が扱うのは stitch.withgoogle.com で提供されているGoogleのツールです。2026年10月17日時点の公式情報と、MCPサーバーへの実際のリクエスト結果をもとに、料金と利用上限、商用利用の規約、使い方、開発ツールとの接続までを整理します。

## まとめ：Google Stitchの要点（2026年10月時点）

- **何をするツールか**：プロンプト・スケッチ・スクリーンショットからUIを生成し、Figmaへの貼り付けやHTML/CSSの書き出し、AI Studio・Antigravity・Netlifyへの受け渡しまでつなぐ。
- **料金**：Google Labsの実験として提供されており、Googleの公開ページに有料プランの案内はない。利用量は日ごとのクレジットで管理されるが、枠の数値をGoogleは公開ページで示していない。
- **商用利用**：Stitchに適用されるのはGoogle利用規約と生成AIの使用禁止に関するポリシー。規約は生成物の所有権をGoogleが主張しないと定めるが、商用利用を明示的に許可する条文ではない。
- **2026年の変化**：3月18日に無限キャンバスとデザインエージェントへ刷新、5月19日にリアルタイム生成とStitch Agentを追加。
- **開発者向け**：MCPサーバー（https://stitch.googleapis.com/mcp）とSDK（@google/stitch-sdk）で、Claude Codeなどから画面の生成・編集を呼び出せる。10月17日時点で指定できるモデルはGemini 3.8 FlashとGemini 3.5 Flash-Lite。

## Google Stitchとは：文章と画像からUIとコードを作るGoogle Labsのツール

Stitchは2025年5月20日に[Google Developers Blogで「Google Labsの新しい実験」として公開](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/)されました。公開時の生成エンジンはGemini 2.5 Proで、自然言語や手描きのワイヤーフレームからUIを起こし、複数案を並べて比較し、Figmaへ貼り付けるか、フロントエンドのコードとして持ち出す流れが最初から用意されていました。前身にあたるGalileo AIの旧公式サイト（usegalileo.ai）は、2026年10月17日時点で stitch.withgoogle.com へ転送されます。買収の経緯と版ごとの機能追加は[Google Stitch 2.0とは？Galileo AI買収からの進化と最新アップデート・新機能を時系列で解説](/tech/details/11458/)で時系列に追っています。

### 2025年5月の公開から2026年10月までの主な変化

| 日付         | 出来事                                 |
| ---------- | ----------------------------------- |
| 2025-05-20 | Google Labsの実験として公開（Gemini 2.5 Pro） |
| 2026-03-18 | 無限キャンバス・デザインエージェント・音声操作へ刷新          |
| 2026-04-21 | DESIGN.mdの仕様をオープンソース化               |
| 2026-05-19 | リアルタイム生成・Stitch Agent・Netlify公開を追加  |
| 2026-09-24 | SDK同梱のMCP定義でモデルIDを更新（3.8 Flash等）    |

2026年3月の刷新は[Google公式ブログの「vibe design」発表](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/)で、ワイヤーフレームではなく、事業の目的やユーザーに感じてほしいことから設計を始める進め方として説明されています。日本時間では3月19日の早朝にあたるため、国内の記事では19日と書かれることもあります。

### stitch.withgoogle.com・stitch.google.com・Workspaceとの関係

公式の案内先は stitch.withgoogle.com です。2026年10月17日に確認すると stitch.google.com も同じ「Stitch – Design with AI」のアプリを返しました。どちらもGoogleアカウントでログインして使う単独のWebサービスで、GmailやドキュメントのようなGoogle Workspaceの機能ではありません。会社のGoogleアカウントで使う前に、Labsの実験サービスを業務で使ってよいかを社内ルールで確かめておくと後で揉めません。

## Google Stitchでできること：2026年10月時点の機能

### キャンバスとStitch Agentでの生成・修正

生成した画面は無限キャンバスに並びます。3月の刷新で、プロジェクト全体を踏まえて提案するデザインエージェントと、複数案を並行して進めるAgent managerが加わり、音声で指示や講評の依頼もできるようになりました。[5月19日のI/O 2026での更新](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-updates/)では、生成の途中経過がキャンバスにそのまま流れるようになり、Stitch Agentで仕上がる前に方向を修正できるようになりました。テキストや音声に加えて、既存のコードベースやデザインファイルを起点にできる点も、この発表で明記されています。

### プロトタイプとDESIGN.mdによるデザインシステム

画面同士をつないで「Play」を押すと、クリックで遷移するプロトタイプとして動作を確認できます。クリック先の画面をStitchが推定して自動で作る機能もあります。配色・文字・余白などのルールは、URLから既存サイトのデザインシステムを抽出するか、DESIGN.mdというMarkdownファイルで読み書きします。DESIGN.mdは[2026年4月21日に仕様がオープンソース化](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-design-md/)され、[GitHubのgoogle-labs-code/design.md](https://github.com/google-labs-code/design.md)（Apache-2.0）で公開されています。仕様のバージョンは10月17日時点でまだ alpha です。`npx -p @google/design.md designmd lint DESIGN.md` で書式を検査できますが、仕様が固まる前なので、社内のデザインシステムの正本はFigmaなど既存の管理場所に残し、DESIGN.mdは書き出し用の写しとして扱う方が安全です。

### 書き出し先：Figma・コード・AI Studio・Antigravity・Netlify

Stitchで作った画面は、次の行き先へ持ち出せます。公式に案内されているものだけを載せています。

| 書き出し先            | 用途                 | 公式の案内時期    |
| ---------------- | ------------------ | ---------- |
| Figma（貼り付け）      | 既存のデザイン資産と統合       | 2025年5月    |
| HTML/CSS         | 実装のたたき台            | 2025年5月    |
| Google AI Studio | 共有リンク・Geminiでのアプリ化 | 2026年3月・5月 |
| Antigravity      | バックエンド処理をつなぐ       | 2026年3月・5月 |
| Netlify          | Webへ直接公開           | 2026年5月    |
| MCP・SDK          | コーディングエージェントから操作   | 2026年3月    |

Reactについては、Stitch本体のボタンではなく、Googleが公開しているエージェント用スキル集[stitch-skills](https://github.com/google-labs-code/stitch-skills)に、StitchのデザインをViteとReactのコンポーネントへ変換するスキルがあります。Reactのコードが欲しい場合は、Claude CodeやCursorにこのスキルを読み込ませて変換できます。変換後は既存コンポーネントとの整合性や動作を確認してください。

## Google Stitchの料金と利用上限

2026年10月17日時点で、Google公式ブログ・Google Developers Blog・Googleの規約ページのいずれにも、Stitchの有料プランや価格表はありません。Stitchは公開以来「Google Labsの実験」という位置づけで、Googleアカウントがあれば料金を払わずに使い始められます。

利用量は日ごとのクレジットで管理されています。Googleの開発者フォーラムには、2026年7月22日と9月1日に「日次クレジットが2日以上リセットされない」という利用者の報告が投稿されており、日単位で枠が戻る仕組みで運用されていることが分かります。一方で、1日に何クレジット使えるか、1回の生成で何クレジット減るかを、Googleは公開ページで示していません。同じフォーラムの利用者の投稿には残量が「0/400」と表示されたという記述があり、2026年秋の時点では画面上の上限が400と表示されているとみられます。ただしこれは利用者が見た画面の値で、Googleが公開ページで約束した数値ではないため、業務の計画に組み込む前提にはできません。

- **残量は画面で確認する**：枠は予告なく変わりうるので、記事の数字ではなく、ログイン後の設定画面に出る残量を見て作業量を決める。
- **締め切りのある作業を枠に頼らない**：9月1日の「枠が戻らない」という投稿には、10月12日に利用者から修正されたとの返信が付いている。障害は直っても、Labsの実験には稼働の保証が示されていない。納期のある案件では、Stitchが使えない日でも進められる段取りにしておく。

## Google Stitchの商用利用と生成物の扱い

Googleの[サービス別の規約一覧](https://policies.google.com/terms/service-specific?hl=ja)では、Stitchに適用される文書は「利用規約」と「生成 AI の使用禁止に関するポリシー」の2つです。Stitch専用の追加規約はありません。

生成物の権利について、[Google利用規約（2026年7月30日発効）](https://policies.google.com/terms?hl=ja)は「Google の一部の サービス は、ユーザーによるオリジナル コンテンツの生成を許可しています。Google がそのコンテンツに対する所有権を主張することはありません。」と定めています。Googleが権利を主張しないという書き方で、「生成物の著作権はユーザーに帰属する」「商用利用してよい」と明示した条文ではありません。AIが生成したUIに著作権そのものが生じるかは、各国の著作権法の問題として別に残ります。

そのうえで、商用案件に使う前に確かめることを挙げます。

- **入力素材の権利**：参考にした他社アプリのスクリーンショットやロゴ・写真の権利は、生成後もそのまま残る。他社のUIをそのまま写した画面を自社製品に使わない。
- **禁止事項**：生成AIの使用禁止に関するポリシーに反する用途（なりすまし・誤解を招く表示など）には使えない。
- **入力する情報**：未発表の製品画面や顧客データをプロンプトや画像に入れる前に、Labsの実験サービスへ社外秘を出してよいかを社内で決めておく。

なお、Googleの「生成AI追加利用規約」は2024年5月22日以降、署名済み契約で参照している事業者を除き適用されません。これを根拠にした古い解説は、現行の利用規約で読み直してください。

## Google Stitchの使い方：ログインから書き出しまで

### プロジェクト作成とプロンプトによる画面生成

stitch.withgoogle.com にGoogleアカウントでログインし、新しいプロジェクトを作ってプロンプトを入力します。最初の1文に利用者・目的・端末・主要な要素を入れると外れにくくなります（例：「会社員が毎月のサブスク料金を確認するスマホアプリのホーム画面。支出合計を上に大きく、契約中のサービスを一覧で」）。配色が未定なら、生成後に「別の配色で3案」と頼んで比較できます。ブランドカラーなどの制約が決まっている場合は、最初のプロンプトで指定します。

### スケッチ・スクリーンショット・URLを使ったUI生成

言葉で説明しにくいレイアウトは、手描きのラフや参考画面のスクリーンショットを渡すとUIに起こされます。Googleの2026年3月18日の発表では、URLからのデザインシステム抽出と、DESIGN.mdによるデザインルールの読み書きが案内されています。既存サイトに見た目をそろえるときは、そのURLを渡して色や文字のルールを引き継ぎます。生成後は要素を選んで部分的に直すか、範囲を指定してまとめて直します。

### Figmaへの貼り付けとHTML/CSSの書き出し

仕上がった画面は、Figmaへ貼り付けて詰めるか、HTML/CSSを実装のたたき台にします。Geminiでアプリにするなら AI Studio、バックエンドまでつなぐなら Antigravity、試作をすぐ見せるなら Netlify への公開が近道です。Figmaの中で生成から試作まで完結させたい場合の選択肢は[Figma Makeの料金・AIクレジットとは？プラン別の上限と消費量・使い方・エクスポートまで解説](/tech/details/9048/)で比較できます。

## MCPサーバー・SDKの接続方法とツール定義の実測（2026年10月17日）

StitchはMCPサーバーとTypeScriptのSDKを公開しており、Claude CodeやCursorなどのコーディングエージェントから、画面の生成・編集・デザインシステムの適用を呼び出せます。接続先は `https://stitch.googleapis.com/mcp` で、[SDKのREADME](https://github.com/google-labs-code/stitch-sdk)によれば認証はAPIキー（`X-Goog-Api-Key` ヘッダー、SDKでは環境変数 `STITCH_API_KEY`）か、OAuthのアクセストークンとGoogle CloudのプロジェクトIDの組み合わせです。APIキーはStitchにログインした状態で発行します。発行画面の場所は改修で変わることがあるため、[公式ドキュメントのMCPの項](https://stitch.withgoogle.com/docs/mcp/setup)で確認してください。

### Claude CodeへのMCPサーバー登録

Claude CodeではHTTP方式のMCPサーバーとして登録します。

```
# APIキーは環境変数に入れておく
export STITCH_API_KEY="発行したキー"

# ユーザー単位でStitchのMCPサーバーを登録する
claude mcp add --transport http stitch https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: ${STITCH_API_KEY}" --scope user

# 登録できたかを確認する
claude mcp list
```

この登録方法では、ヘッダーに入れたキーが展開された状態で `~/.claude.json` に保存されます。Googleが公開しているstitch-skillsのアップロード用スキルも、Claude Codeの場合はこのファイルの `X-Goog-Api-Key` からキーを読み取る作りです。チームで共有する `.mcp.json`（`--scope project`）には同じ書き方で登録せず、キーを各自の端末に閉じ込めます。キーをClaude Codeの設定ファイルや環境変数に直接保存したくない場合は、SDKリポジトリの例にある、コンテナのシークレットからキーを読むMCPプロキシ（container-proxy）を使う方法があります。

### SDKによる画面生成とHTMLダウンロードURLの取得

npmの配布タグは10月17日時点で latest が0.3.5（2026年5月12日公開）、next が0.4.0（10月1日公開）です。以下は0.3.5を対象に、READMEのクイックスタートを2つのスクリプトに分けて書き直した例です。プロジェクトの作成は1回だけ行い、表示されたプロジェクトIDを2本目に引数で渡します。トップレベルの `await` を使うので、拡張子は .mjs にします（package.json に `"type": "module"` を書いても同じです）。

```
// 準備: npm install @google/stitch-sdk@0.3.5
// 実行前に環境変数 STITCH_API_KEY を設定しておく

// create-project.mjs（最初に1回だけ実行する）
import { stitch } from "@google/stitch-sdk";

const created = await stitch.callTool("create_project", { title: "サブスク管理" });
console.log(created); // 表示されたプロジェクトIDを控える
```

```
// generate.mjs（node generate.mjs プロジェクトID で実行する）
import { stitch } from "@google/stitch-sdk";

const projectId = process.argv[2];
if (!projectId) throw new Error("プロジェクトIDを引数で渡してください");

const project = stitch.project(projectId);
const screen = await project.generate(
  "毎月のサブスク料金を確認するスマホアプリのホーム画面",
  "MOBILE",
);
console.log(await screen.getHtml());  // 生成したHTMLのダウンロードURL
console.log(await screen.getImage()); // スクリーンショットのダウンロードURL
```

`getHtml()` が返すのはHTMLの本文ではなくダウンロード用のURLです。CIなどで続けて処理する場合は、このURLを取得してからファイルに保存します。0.3.5を入れて実行すると、引数なしでは自前のエラー、APIキー未設定ではSDKの設定検証（ZodError）で止まることまでは確認しています。APIキーを使った生成の結果は確認していません。

### 実測で分かったツール数・モデル・認証の挙動

2026年10月17日に、APIキーを付けずにMCPのツール一覧（tools/list）を要求すると、HTTP 200で15個のツール定義が返りました。一方、プロジェクト一覧（list\_projects）を実行しようとすると「Request is missing required authentication credential」というエラーが返ります。ツールの定義は誰でも読めて、実行には認証が必要という作りです。返ってきた定義から読み取れた内容は次のとおりです。

| 項目        | 2026年10月17日の値                                                 |
| --------- | ------------------------------------------------------------- |
| ツール数      | 15                                                            |
| 生成・編集系    | generate\_screen\_from\_text／edit\_screens／generate\_variants |
| デザインシステム系 | create／update／apply\_design\_system、upload\_design\_md など     |
| 指定できるモデル  | GEMINI\_3\_8\_FLASH／GEMINI\_3\_5\_FLASH\_LITE                 |
| 端末の指定     | MOBILE／DESKTOP／TABLET／AGNOSTIC                                |

指定できるモデルは更新されています。SDKリポジトリに保存されたツール定義の履歴を見ると、2026年6月1日の版では GEMINI\_3\_FLASH・GEMINI\_3\_PRO・GEMINI\_3\_1\_PRO だったものが、9月24日の版で Gemini 3.8 Flash と Gemini 3.5 Flash-Lite の2つに置き換わりました。npmのlatest（0.3.5）に同梱されたREADMEは古い名前のままなので、SDKの説明文よりサーバーが返す定義を信じてください。Gemini 3.8 Flash自体の性能と料金は[Gemini 3.8 Flashとは？3.7からの差分・料金・移行コードを実装目線で解説【2026年9月】](/tech/details/17704/)で確認できます。なお、ここで分かるのはMCPとSDKから指定できるモデルで、Webの画面で選べるモデルと同じだとは限りません。

実装で詰まりやすいのは待ち時間です。generate\_screen\_from\_text の定義には「数分かかることがある。再試行しない」「タイムアウトしたら get\_screen を30秒ごとに最大10回呼んで結果を取りに行く」と書かれています。タイムアウト後も生成処理が続いている可能性があるため、生成を投げ直さず、まず既存リクエストの結果を取得します。エージェントに使わせる場合も、この取得手順をプロンプトか設定で指示しておきます。

## 他のAI UI生成ツールとの比較

料金は各社とも頻繁に変わるため、向いている使い方の違いだけを並べます。

| ツール           | 提供元         | 強み                  |
| ------------- | ----------- | ------------------- |
| Google Stitch | Google Labs | 無料で試せる・MCPでエージェント連携 |
| Figma Make    | Figma       | Figmaのファイル・資産の中で完結  |
| Claude Design | Anthropic   | Claude Codeへの受け渡し   |
| v0            | Vercel      | ReactとNext.jsのコード生成 |
| Kombai        | Kombai      | Figmaデザインからのコード変換   |

Figmaで管理している案件ならFigma Make、Claudeを契約済みのチームなら[Claude Design（Anthropic）とは？使い方・料金・できることと2026年9月の変更点](/tech/details/11838/)、Reactのコードを最初から欲しいなら[v0（Vercel）とは？料金・使い方・APIを2026年最新解説](/tech/details/3416/)、Figmaの完成デザインを実装コードへ移す工程なら[Kombaiとは？Figma連携とクレジット料金・Claude Code併用を実装目線で解説【2026年9月時点】](/tech/details/8061/)が候補になります。Stitchを選ぶ理由は、費用をかけずに複数案を出せることと、MCPで自社のエージェントやCIから呼び出せることです。

## Google Stitchを使わない方がよい場面

Stitchは試作と方向性の検討には強い一方で、次の条件では選ばない方が安全です。

- **本番の画面をそのまま作らせたい**：書き出せるのはHTML/CSSやFigmaのレイヤーで、状態管理・アクセシビリティ・実データとの結合は人が作り直す。
- **デザインシステムが成熟している**：Figmaのコンポーネントとトークンが整った組織では、生成物を合わせ直す作業が増える。
- **利用上限と提供継続に業務を依存させる**：Labsの実験で、利用枠の固定値や提供継続の保証は確認できない。業務の手順書にStitchを必須の工程として書き込まない。
- **社外秘の画面や個人情報を扱う**：入力してよい情報の線引きを決めるまでは、ダミーデータで使う。

Stitchの試作を業務アプリの画面設計に落とし込むには、要件整理と情報設計から入るUI設計が別に要ります。社内に担い手がいなければ、[UI/UXデザインの支援](/service/web/ui-ux/)のように試作を本番の設計へ引き継げる体制を先に用意しておくと、試作止まりで終わりません。

## よくある質問

### Google Stitchとは何ですか？

Google Labsが2025年5月に公開したAIデザインツールです。文章・スケッチ・スクリーンショットからアプリやWebの画面を生成し、Figmaへの貼り付けやHTML/CSSの書き出し、AI Studio・Antigravity・Netlifyへの受け渡しができます。

### Google Stitchの料金はいくらですか？

2026年10月17日時点で、Googleの公開ページに有料プランや価格表はなく、Googleアカウントがあれば料金を払わずに使えます。利用量は日ごとのクレジットで制限されますが、枠の数値をGoogleは公開ページで示していないため、残量はログイン後の画面で確認してください。

### Google Stitchは商用利用できますか？

Stitchに適用されるGoogle利用規約は、生成したコンテンツの所有権をGoogleが主張しないと定めていますが、商用利用を明示的に許可する条文ではありません。入力した画像やロゴの権利、生成AIの使用禁止に関するポリシーを確認したうえで、重要な案件では利用時点の規約を読み直してください。

### Stitchの読み方は？

「スティッチ」と読みます。英語で「縫い目・ひと針」を意味する単語で、Google Stitchでは画面同士を縫い合わせてプロトタイプにする操作にも「Stitch」という言葉が使われています。

### Google StitchはFigmaに書き出せますか？

書き出せます。公開時から「Paste to Figma」の機能があり、生成した画面をFigmaに貼り付けて、既存のデザインファイルの中で編集を続けられます。

## 関連記事

- [Google Stitch 2.0とは？Galileo AI買収からの進化と最新アップデート・新機能を時系列で解説](/tech/details/11458/)
- [Figma Makeの料金・AIクレジットとは？プラン別の上限と消費量・使い方・エクスポートまで解説](/tech/details/9048/)
- [Claude Design（Anthropic）とは？使い方・料金・できることと2026年9月の変更点](/tech/details/11838/)
- [Gemini 3.8 Flashとは？3.7からの差分・料金・移行コードを実装目線で解説【2026年9月】](/tech/details/17704/)
- [Kombaiとは？Figma連携とクレジット料金・Claude Code併用を実装目線で解説【2026年9月時点】](/tech/details/8061/)

---

出典: [Google Stitchとは？使い方・料金・商用利用とMCP連携を解説【2026年10月】](<https://www.issoh.co.jp/tech/details/8062/>)（株式会社一創）