Google Stitch レビュー (2026): 無料ですか?機能、Figma エクスポート、MCP、および代替手段6 min read

Google Stitch は、Google Labs が提供する無料の AI 設計ツールで、テキスト プロンプト、画像、またはウェブサイトのリファレンスを忠実度の高い UI 画面に変換し、無限のキャンバス上でそれらを調整して、Figma、コード、Google AI Studio、または Antigravity にエクスポートできます。 これは、UI へのプロンプトの実験として 2025 年 5 月に開始され、2026 年 3 月に AI ネイティブのデザイン キャンバスになりました。このレビューは、Stitch の何が得意なのか、どこで止まるのか、Figma を置き換えることができるかどうかを知りたいデザイナー、プロダクト マネージャー、創設者を対象としています。

事実は、2026 年 11 月時点の Google 自身の発表、Google 開発者ドキュメント、および公開ユーザー レポートを反映しています。Stitch は Google Labs の製品であるため、機能と制限は頻繁に変更されます。最新の詳細はstitch.withgoogle.comでご確認ください。このレビューは、Google の公式資料と公開ユーザー レポートに基づいています。

私たちの結論は 1 行です。Stitch は UI の方向性を迅速に探索するための最良の無料方法であり、Google AI Studio や Antigravity との連携はビルダーにとって非常に便利です。 Figma の代替品ではありません。出力は汎用的に感じられる場合があり、Figma へのエクスポートはフラットな構造として到着することが多く、Google は明確な無料利用枠の制限や長期プランを公開していません。以下に、機能、制限、Figma とコードのエクスポート、MCP、プロンプト例を含む段階的なチュートリアル、ユーザーの意見、Anima Playground を含む最適な代替手段を示します。

AI の時代では、デザインはコードです。 AI を使用してコードで直接デザインするか、Figma デザインをコードに変換するには、次を使用します。 アニマ プレイグラウンド: 画面を記述するか、Figma デザインから開始して、プレビューおよび公開できる編集可能なアプリで反復を続けます。

Google Stitch レビュー: 素早い判断

無料の探索や Google スタックのビルダーに最適です。ネイティブの Figma コンポーネント、厳密なブランド管理、または長期保証された製品を必要とするチームにはあまり適していません。

Google ステッチとは何ですか?

Stitch は、自然言語、画像、その他のコンテキストからユーザー インターフェースを生成する Google Labs の実験です。 Google は 2025 年 5 月に Galileo AI を買収し、その月の Google I/O で Gemini 2.5 上に構築された Stitch を発表しました。 Galileo ユーザーには移行まで 30 日間の猶予が与えられました。 Galileo AI を検索した場合、これはそれに代わる製品です。

何が変わったかのタイムライン

2026 年の Google Stitch の機能

プロンプト、画像、URL、または UI への音声

ワイヤーフレームを描く代わりに、ビジネスの目標、望む感情、または基準を説明することから始めることができます。 Stitch は、画像、テキスト、コードをキャンバス上のコンテキストとして受け入れるため、キャンバスに話しかけて批評したり、ライブで変更したりすることもできます。プロンプト ボックスには、アプリとウェブの切り替えとモデル セレクターがあり、Google 独自のデモでは 3 Flash や 3.1 Pro などのオプションとして表示されます。

無限のキャンバス、デザインエージェント、エージェントマネージャー

キャンバスには、画面、参考資料、アイデアが 1 か所にまとめられています。設計エージェントはプロジェクト全体を検討し、エージェント マネージャーは複数の調査を並行して追跡します。 I/O 2026 では、Google がリアルタイム ストリーミングを追加したため、Stitch がページを構築する様子を見て、完了する前に操作できるようになりました。

デザインシステムとDESIGN.md

Stitch は任意の URL からデザイン システムを抽出でき、DESIGN.md を使用します。DESIGN.md は、YAML のデザイン トークンと、色、タイプ、間隔、コンポーネントの論理的根拠を記述した Markdown ファイルです。これをエクスポートしたり、別の Stitch プロジェクトにインポートしたり、コーディング エージェントと共有したりできます。 Google は 2026 年 4 月にドラフト仕様をオープンソース化し、他のツールでも使用できるようにしました。

インスタントプロトタイプ

画面をリンクし、[再生] をクリックしてフローをクリックすることができます。 Stitch は、クリックから論理的な次の画面を生成することもでき、これにより、ジャーニーを迅速にマッピングできます。フローとプロトタイプがさまざまな段階で重要となる理由については、次を参照してください。 ワイヤーフレームとプロトタイプ。

共有、公開、エクスポート

キャンバスから、Google AI Studio を介して共有可能なリンクを作成したり、Google Antigravity にエクスポートしてバックエンド ロジックを追加したり、Netlify を使用して Web に公開したりできます。 I/O デモの Google 独自のエクスポート パネルには、Google AI Studio、MCP 経由の Google Antigravity、および Figma がリストされています。

Google Stitchは無料ですか?価格と制限

はい。 Stitch は、stitch.withgoogle.com で Google アカウントを使用すれば無料で、有料プランはありません。これは Google Labs の製品であり、多くの国で 18 歳以上のユーザーが利用できるため、どこでも提供されているわけではありません。

実際的なアドバイスは、高速モードで探索し、出荷する予定の画面用に Pro モデルを保存し、完成した作業をその日のうちにエクスポートすることです。

Google Stitch to Figma: エクスポートの仕組み

Stitch は Figma へのコピーと貼り付けをサポートしており、Google はエクスポート パネルに Figma を表示します。実際には、詳細が重要です。

• Google の開発者フォーラムと Reddit のレポートによると、「Figma へのコピー」は Thinking モードまたは Pro モードで作成されたデザインには提供されていないため、品質と Figma のエクスポートが逆の方向に進む可能性があるとのことです。
• Reddit ユーザーは、テキストがベクトルとして到着し、フレームが自動レイアウト内のスペースとして使用されるインポートについて説明しているため、結果の多くは再構築する必要があります。
• 一般的な回避策は、Stitch コードをダウンロードし、html.to.design などのプラグインを使用して Figma に取り込むことです。これにより、より忠実なインポートが行われる傾向があります。

賢明なワークフローは、Stitch での反復を終了し、一度エクスポートしてから、Figma で適切なコンポーネントとトークンを再構築することです。再生成するたびに、以前のエクスポートで行った手動クリーンアップが無効になります。コンポーネントをすでに尊重する Figma 内のエージェントが必要な場合は、Anima’s Buddy または UXパイロットのNodey。

Google Stitch コードのエクスポートと MCP

Stitch は発売以来フロントエンド コードを作成しており、レビューでは開発者が出発点として使用できる Tailwind クラスを使用した HTML について説明しています。これを足場として扱います。静的データを含む 1 つの大きなコンポーネントが結果として一般的になるため、コンポーネントを分割して状態を接続することを計画します。

Stitch MCP サーバーと SDK は、より興味深い開発者の話です。 Google Antigravity などのコーディング エージェントは、プロジェクトを取得し、デザイン トークンと画面を読み取り、それらから構築できます。 Google 独自のコードラボでは、Stitch 設定での API キーの作成、Antigravity での Stitch MCP の追加、DESIGN.md の生成、React および Tailwind サイトの構築について説明します。 MCP リファレンスには、プロジェクトの作成、テキストからの画面の生成、画面の編集、バリアントの生成、および DESIGN.md のアップロードを含むデザイン システムの管理のためのツールがリストされています。

最終目標がデザイン ファイルではなく、動作する React または HTML アプリである場合は、このルートを次と比較してください。 アニマ プレイグラウンド、編集可能なアプリを直接ビルドします。

Google Stitch の使用方法: ステップバイステップのチュートリアル

このウォークスルーは、Google 自身の発表、開発者ドキュメント、および I/O デモ ビデオに従っています。以下のプロンプトは自分で試すための出発点であり、結果は実行ごとに異なります。画像は Google の公式ビジュアルであり、そのようにクレジットされており、公開ランディング ページの 1 つのビューが加えられています。ステッチは頻繁に変更されるため、開いたときにボタン名やモデル名が異なる場合があります。

ツールも比較したい場合は、以下の同じプラント交換プロンプトを Stitch と UX Pilot で試してください。私たちの UX パイロットのレビュー では、そのプロンプトがどうなったかを示しているので、最後のチェックリストを使用して 2 つを比較できます。

ステップ 1: Stitch を開いてサインインする

stack.withgoogle.com にアクセスし、Google アカウントでサインインします。 Stitch は、サポートされている国の 18 歳以上のユーザーを対象とした Google Labs の製品です。公開ランディング ページは、アプリと Web の切り替え、モデル チップ、およびいくつかのスターター提案を備えた 1 つのプロンプト ボックスです。

執筆時点では、公開ページのモデルチップは次のようになります。 バランスの取れた、GoogleのI/Oデモフレームには3 Flashや3.1 Proなどのモデル名が表示されます。名前とオプションはリリースごとに変わるため、その日にアプリが提供する高速で高品質なオプションを選択してください。

ステップ 2: アプリまたはウェブとモデルを選択します

トグルは、ネイティブ モバイル アプリをデザインしているのか、それとも Web ページをデザインしているのかを Stitch に伝えます。 Google 独自のデモでは Web を使用します。以下のプラント交換プロンプトでは、[アプリ] を選択します。無料の世代を保護するには、より高速なモデルを検討し、出荷する予定の画面には高品質のモデルを保持してください。制限については、上記の価格セクションで説明しています。

ステップ 3: コンテキストを含むプロンプトを作成する

Google のガイダンスでは、ワイヤーフレームではなく、ビジネス目標、ユーザーに抱いてほしい感情、またはインスピレーションを与えるものの例から始めることです。 Stitch は、画像、テキスト、コードをキャンバス上のコンテキストとして受け入れ、URL からデザイン システムを抽出することもできます。これは、このレビューの前半でプロンプト ボックスの画像の画面に表示されている、I/O ビデオからの Google 独自のデモ プロンプトです。

Willamette Pizza Co のレスポンシブなランディング ページを作成します。カラー パレットでは、プライマリの背景を温かみのあるオフホワイトにし、セカンダリの背景を明るく柔らかい空色にして、鮮やかな空色のアクセント カラーを付けます。

ここでは、Stitch と UX Pilot の両方を試すことができる概要を示します。アプリを選択し、貼り付けて送信します。

近所の植物交換コミュニティ用のモバイル アプリ: ホーム フィード、植物の詳細ページ、チャット画面。クリーンでフレンドリー、グリーンのアクセント。

Google のガイダンスに従うヒント: 希望する画面に名前を付け、その雰囲気 (清潔、フレンドリー) を述べ、アクセント カラーを 1 つ付け、参照画像がある場合は添付します。

ステップ 4: 生成と操作を観察する

I/O 2026 で Google は、Stitch が作業内容をキャンバスに直接ストリーミングするようになったので、ページが形になっていく様子を観察できると述べました。 Stitch Agent を使用すると、最終的な結果が得られる前に反復を制御でき、エージェント マネージャーは複数の探索を並行して追跡します。 Google のデモでは、キャンバスに話しかけて批評や変更を求めることもできます。

ステップ 5: フォローアップ プロンプトを使用して編集する

画面が存在したら、チャットで短いフォローアップを行って画面を調整するか、画面を選択して変更を依頼します。 Stitch の MCP リファレンスには、画面を編集し、バリアントを生成するためのツールもリストされています。これは、1 つの画面で複数の方向が必要な場合に役立ちます。植物交換の結果について試してみることができるフォローアップ:

ホームフィードを2列グリッドにして検索バーを追加する

ツールを比較するときは、編集後に画面の残りの部分が同じままであるかどうかに注意してください。再生成スタイルの編集では、確認していない領域が変更される可能性があるためです。

ステップ 6: DESIGN.md を使用してデザイン システムを適用する

Stitch は URL からデザイン システムを取得でき、デザイン ルールを DESIGN.md (トークンと論理的根拠が記述された Markdown ファイル) に保存します。これをエクスポートしたり、別の Stitch プロジェクトにインポートしたり、コーディング エージェントに渡したりすることができます。 Google のデモでは、わかりやすい言語のプロンプトを使用してデザイン システムをサイト全体に適用します。

このデザインシステムをサイト全体に適用します。

ステップ 7: 画面をリンクし、「再生」を押します。

Google によれば、数秒で画面をつなぎ合わせ、「再生」をクリックしてフローをプレビューできるという。 Stitch では、クリックから論理的な次の画面を生成することもできるため、迅速に計画を立てることができます。 Plant-swap アプリの場合は、フィードを詳細ページにリンクし、詳細ページをチャットにリンクして、クリックスルーします。

ステップ 8: 共有とエクスポート

完了したら、「エクスポート」を開きます。 Google の I/O デモでは、Google AI Studio、MCP および Figma を介した Google Antigravity が示されています。 AI Studio を使用して共有可能なリンクを作成したり、Netlify を使用して Web に公開したりすることもできます。 Google のコードラボで説明されているように、開発者にとって Stitch MCP と SDK には Stitch 設定からの API キーが必要です。 Figma にコピーする前に、上記の Figma エクスポートに関する注意事項をお読みください。

自分自身の結果を判断するためのチェックリスト

• プレースホルダー テキストではなく現実的なコンテンツを含む、名前を付けたすべての画面が存在しますか?
• アクセントの色と種類は画面間で一貫していますか?
• 編集プロンプトの後、要求された領域のみが変更されましたか?
• 探索には何世代が使用されましたか?また、Figma でのクリーンアップにはどのくらいの時間がかかりましたか?

出典: Google バイブデザインの発表、 I/O リアルタイム設計更新 そして DESIGN.mdのお知らせ。

Google Stitch についてのユーザーの意見

• 褒められた： スピード、豊富な無料枠、マルチスクリーン生成、キャンバス、デザイン システム抽出、AI Studio、Antigravity、MCP への開発者リンク。
• 批判された: 参照を含むプレーンまたは汎用の出力、複雑な SaaS およびエンタープライズ設計に対する制御が弱い、再構築が必要な Figma エクスポート、月間生成上限に達する、Google のフォーラムで時折報告される生成エラー。

r/UX_Design のあるデザイナーは、Stitch は「素晴らしいアイデア発想と迅速な反復ツール」であるが、その結果は参照を追加した後でも「非常に単純で一般的な」ままだったと述べています。 r/StitchAI のユーザーは、返されるものの多くは、Figma にインポートした後に最初から再作成する必要があると述べています。どちらも個別のレポートであり、測定されたレートではありません。

Google Stitchの長所と短所

Google Stitch vs Figma: Stitch は Figma に取って代わることができますか?

いいえ、Google はそのようには位置づけていません。 Stitch は、方向性を検討し、最初のデザインを取得してコードに渡すという、ゼロから 1 のフェーズを担当します。 Figma は、大規模なチーム向けの改良、コンポーネント、変数、コラボレーション、ハンドオフを所有しています。この 2 つはエクスポートの段階で出会いますが、ここで最も摩擦が生じます。

Figma 独自の AI プロトタイプ ツールについて知りたい場合は、次のガイドをお読みください。 figmaメイク。

Google Stitch のベストな代替品

1. アニマ プレイグラウンド

コードで直接デザインしたい場合は、Anima Playground を選択してください。画面を説明するか、Figma デザイン、画像、Web サイトの URL から開始して、プレビュー、共有、公開できる編集可能な HTML または React アプリで反復を続けます。 Stitch は、コードをエクスポートするデザイン探索ツールです。 Playground は動作中のアプリをデザインとして扱うため、反復中に間隔、状態、応答動作が表示されます。これはネイティブ Figma レイヤーのソースではないため、必要に応じて Anima Figma プラグインまたは Buddy と組み合わせてください。

2. UXパイロット

Figma 中心のチームに最適: Nodey は Figma 内で実行され、コンポーネントをインポートしてネイティブ レイヤーを生成します。無料の 1 日あたりの許容量を超えるクレジットがかかります。私たちのを参照してください UX パイロットのレビュー。

3.フィグマメイク

Figma 内のインタラクティブなプロトタイプ。読む Figma Makeとは または Figma Make と Anima Playground の比較。

4. クロードデザイン

クロード コードの引き継ぎによるチャット主導のコンセプト、スライド、プロトタイプ。私たちのを参照してください クロードデザインレビュー。

5. バディ by アニマ

デザイン システム コンテキストを使用する、Figma 内の AI デザイン エージェント。 Figma キャンバスに留まりたい場合は、これを選択してください。

Google Stitch を使用すべきなのは誰ですか?

• 創設者とPM ツールにお金をかけずに信頼できる最初のデザインを必要としている人。
• デザイナー Figma を開く前に、さまざまな方向を探索します。
• 開発者 Antigravity または別の MCP 対応エージェントのデザイン コンテキストが必要な方。

他の場所を探してください 厳格なブランド管理、ネイティブ Figma コンポーネント、保証された容量、または安定した長期製品が必要です。

最終的な判断: Google Stitch には価値があるか?

はい、無料の探索ツールとして使用できます。これを使用して複数の指示をすばやく取得し、勝者を Figma またはコーディング エージェントに移動し、その日のうちにエクスポートします。 Google が制限とロードマップを公開するまでは、それに関する政府機関のワークフローを計画しないでください。デザインと動作するアプリを一緒に保ちたい場合は、次に Anima Playground を試してください。

AI を使用してコードで直接設計する

AI を使用したデザイン: 画面を記述するか、Figma のデザインをコードに変換します。

Google ステッチに関するよくある質問

Google ステッチとは何ですか?

Google Stitch は、無限のキャンバス上のテキスト プロンプト、画像、その他のコンテキストから高忠実度の UI デザインとフロントエンド コードを生成する Google Labs AI ツールです。これは 2025 年 5 月に開始され、Google が買収した Galileo AI に取って代わりました。

Google Stitchは無料ですか?

はい。 Stitch は Google アカウントがあれば無料で、有料プランはありません。毎月の世代制限が適用され、Google サポートは、2025 年 8 月時点で月あたり 350 の標準世代と 50 の実験版世代を挙げています。その後のレポートでは異なるため、アプリで現在の制限を確認してください。

Google Stitch にログインするにはどうすればよいですか?

stack.withgoogle.com にアクセスし、Google アカウントでサインインします。 Stitch は 18 歳以上のユーザーを対象とした Google Labs の製品であり、国によっては利用できない場合があります。

Google Stitch を Figma にエクスポートできますか?

はい、Figma にコピーして貼り付けることはできますが、一部のモードでは使用できないと報告され、フラット レイヤーとして届くことがよくあります。多くのユーザーはコードをダウンロードし、代わりに html.to.design などのプラグインを使用してインポートします。

Google Stitch には MCP サーバーがありますか?

はい。 Stitch MCP サーバーと SDK を使用すると、Google Antigravity などのコーディング エージェントがプロジェクトを読み取り、画面を生成し、デザイン システムを使用できるようになります。接続するには、Stitch 設定で API キーを作成します。

Google Stitch の最良の代替品は何ですか?

プロンプトまたは Figma デザインから編集可能な HTML または React アプリが必要な場合は、Anima Playground が強力な選択肢です。 UX Pilot は Figma チームに適しており、Figma Make は Figma のインタラクティブなプロトタイプに適しており、Claude Design はチャット主導のコンセプトに適しています。