Google Stitch は、2025年にGoogleが公開したAI搭載のUIデザインツールです。テキストで「こんな画面を作りたい」と入力するだけで、アプリのUIを自動生成してくれます。
デザインの知識がなくても使える、エンジニアがプロトタイプを素早く作れる、そしてコードとして書き出せる——この3点が注目を集めています。この記事では、Google Stitch とは何か、どんな機能があるのか、実際にどう使うのかを詳しく解説します。
Google Stitch とは？
Google Stitch は、Google Labs が公開したAI駆動のUIデザイン生成ツールです。「Stitch（縫い合わせる）」という名前が示す通り、AIがさまざまなUI要素をつなぎ合わせて、アプリ画面のデザインを作り出します。2025年のGoogle I/Oで注目を集め、デザイナーとエンジニアの両方から関心を集めています。
特徴は「テキストプロンプト」と「画像スケッチ」の2つの入力方式を持っている点です。「ログイン画面を作って」「ダッシュボード画面、青系のカラーで」といった自然な日本語や英語の指示に応じてUIを生成します。また、紙に描いたスケッチを写真で撮って入力すると、そのスケッチをベースにUIを生成することもできます。
生成されたデザインは見た目のイメージとして確認できるだけでなく、HTMLとCSSのコードとして出力することも可能です。デザインツールとコーディングツールの中間的な存在として、特にプロトタイプの初期段階やアイデア検討の場面で大きな力を発揮します。
2025年のGoogle I/Oで発表されたこのツールは、Google が推進する「AI First」の設計思想を体現しています。Figmaのような専門的なデザインツールへの習熟を必要とせず、アイデアを素早く形にするための入り口として位置づけられています。
Google Labs のツールとは
Google Stitch は「Google Labs」の一部として提供されています。Google Labs は、Googleが正式リリース前の実験的なプロダクトや機能を公開する場所です。
Google Labs のツールは、一般公開されているものの「まだ開発途上」という位置づけです。NotebookLM も当初は Google Labs 経由で公開されたツールの一つです。Labs のツールは予告なく仕様が変わることもありますが、最先端のAI機能をいち早く試せる場として、多くのエンジニアやデザイナーが注目しています。
Google Stitch もこの流れの中にある実験的ツールです。現在は招待制または順次開放という形で提供されており、アクセス方法については「使い方・始め方」のセクションで後述します。
Google Stitch でできること
Google Stitch ができることを、大きく4つに分けて説明します。それぞれが独立した機能でもあり、組み合わせて使うことでより大きな力を発揮します。
①テキストからUIを生成する
最も基本的な使い方が、テキストプロンプトによるUI生成です。「フィットネスアプリのトップ画面、カロリー表示と今日のトレーニング履歴を含めて」のように説明を書くと、その内容に沿ったUIデザインが出力されます。
入力できるのは画面全体の説明だけでなく、「ボタンを右下に配置して」「ヘッダーに検索バーを追加して」という部分的な指示にも対応しています。生成後に追加の指示を重ねることができるので、対話形式で少しずつデザインを調整していけます。
Google のマテリアルデザインのガイドラインに基づいたUI部品が使われるため、Android アプリらしい自然な見た目のデザインが生成されやすいという特徴があります。Webアプリ向けのデザインにも対応しています。
②スケッチ・画像からUIを生成する
紙に描いたラフスケッチや、既存のUI画面のスクリーンショットを画像として入力し、それをもとにUIを生成する機能です。「こんな配置にしたい」というイメージが頭の中にある場合、言葉にするより描いた方が伝わることがあります。そういうケースで特に役立ちます。
スケッチはスマートフォンで撮影したものでも認識します。「ここにリスト、ここにボタン、ここに画像」という大まかな配置さえ描いてあれば、AIが意図を解釈してデザインに落とし込んでくれます。
既存アプリの参考画面を入れて「このスタイルに近い形で新しい画面を作って」という使い方もできます。デザインのリファレンスをAIに渡す感覚に近い操作感です。
③コードとして書き出す
生成したデザインはHTML・CSSのコードとして出力できます。これにより「デザインを見るだけ」ではなく、実際の開発に使えるコードとして利用できます。
出力されたコードは完成品ではなく、出発点として扱うのが現実的です。そのままコピー&ペーストして使えることもありますが、細かい調整は手動で行う必要があるケースが多いです。それでも「白紙からコードを書く」より「ベースのコードを調整する」方が圧倒的に早く、プロトタイプ作成のスピードが上がります。
将来的にはReactやFlutterなど他のフレームワーク向けのコード出力も拡充されることが期待されています。
④複数バリエーションの比較
同じ条件でも複数のデザインバリエーションを生成して比較することができます。「2カラムのレイアウト」「1カラムのリスト形式」のように、複数の案を並べて検討できます。
デザインの初期段階で「どの方向性が良いか」を素早く確認したいとき、手作業で複数案を作る手間が省けます。ステークホルダーへの提案や、社内での方向性議論のたたき台として使いやすい機能です。
Google Stitch の使い方・始め方
Google Stitch へのアクセスと基本的な使い方の流れを解説します。
アクセス方法
Google Stitch は Google Labs（labs.google）からアクセスします。Google アカウントでログインした状態で、Google Labs のページから「Stitch」を探します。現在は段階的な公開が行われており、ウェイトリストへの登録が必要な場合があります。
ウェイトリストに登録すると、アクセスが開放された際にメールで通知が届きます。Google Workspace アカウントよりも個人の Google アカウントの方がアクセスしやすい傾向があります。日本からのアクセスも可能ですが、日本語UIの提供状況はGoogle Labs ツール全般と同様に変動します。
アクセス可能になったら、専用のインターフェースが表示されます。初回は短いオンボーディングがあり、ツールの基本的な使い方を把握できます。
最初のUI生成——基本的な流れ
Stitch のインターフェースを開くと、中央にテキスト入力欄があります。シンプルな構成で、初めてのユーザーでも迷わずに操作を始められる設計になっています。ここにUIの説明を入力して送信するだけで、最初のデザインが生成されます。
最初の入力では、作りたいアプリの目的と含めたい要素を簡潔に説明します。「ユーザーの読書記録を管理するアプリのホーム画面。読んだ本のリストと、現在読んでいる本の進捗を表示する」のように書くと、具体的なUIが生成されます。
生成されたUIを見て修正したい点があれば、続けてテキストで指示を追加します。「本のカバー画像を大きく表示したい」「下にナビゲーションバーを追加して」のように、会話するように修正を重ねていきます。気に入ったデザインができたら、コードとして書き出すか、スクリーンショットとして保存します。
スケッチを使った入力
画像入力を使う場合は、入力欄の画像アップロードアイコンから画像ファイルを選択します。スマートフォンで撮影したスケッチの写真、スクリーンショット、既存のUI画像など、さまざまなフォーマットに対応しています。
画像を入力した後、テキストで追加の指示を書くことで精度が上がります。「この画像のレイアウトをベースに、フードデリバリーアプリ向けのデザインに変えて」のように、画像とテキストを組み合わせた指示が効果的です。
スケッチはきれいに描く必要はありません。ボックスと矢印と文字が読めれば、AIはおおよそ意図を解釈します。「上部に検索バー、中央にカードリスト」という配置が伝わる程度の粗さで問題なく使えます。
Google Stitch が向いているケース
Google Stitch をどんな場面で使うと効果的か、具体的なシチュエーションを挙げます。
プロトタイプを素早く作りたいとき
「まずビジュアルを見せたい」という初期段階のプロトタイプ作成に最も向いています。アイデアを言葉にしてすぐにデザインとして確認できるので、思考の速度に近い形で試行錯誤ができます。
特に、デザイナーに依頼する前の「アイデアの具体化」フェーズで役立ちます。「こういうイメージで作りたい」という素材を作るための道具として使い、それをベースにデザイナーや開発者と話すと、認識のズレが減ります。
デザイナー不在のチームで動くとき
スタートアップや小規模チームでは、専任デザイナーがいない状態で開発を進めることがあります。エンジニアやプロダクトマネージャーが画面のたたき台を作る必要があるとき、Stitch はデザインの知識を補ってくれます。
完成品にはなりませんが、「動くものを見せながら議論を進める」という開発スタイルでは、デザインのクオリティより速度が優先されます。そのような場面でStitchの出力は実用的な価値を持ちます。
クライアントへの提案資料を作るとき
Web制作やアプリ開発の提案フェーズで、複数の方向性を視覚的に示したい場合があります。Stitch で複数のデザイン案を素早く生成し、スクリーンショットを提案資料に組み込むという使い方です。
手作業でモックアップを作る時間を大幅に削減できます。完成度よりも「どういう方向性か」を伝えることが目的の場面では、Stitch の出力で十分機能します。
非エンジニア・非デザイナーが社内ツールを作るとき
社内向けの簡単なツールやフォームを作りたいが、デザインのスキルがない——という場面でも活用できます。Stitch でUIを生成し、コードを出力して、そのまままたは最小限の修正で使うという流れです。
Googleスプレッドシートや他のツールと連携させる前提で、まず「見た目」を固めるための道具として機能します。「こんな画面で入力できたら便利だな」というアイデアを、素早く形にする足がかりになります。
Google Stitch の注意点・現時点での限界
Google Stitch は便利なツールですが、現時点では限界もあります。使う前に把握しておきたいポイントをまとめます。
出力されたコードはそのまま使えないことが多い
Stitch が出力するHTML・CSSは、プロトタイプとしては機能しますが、本番環境で使えるコードとしては不完全なことがほとんどです。コンポーネントの再利用性、レスポンシブ対応の細かな調整、アクセシビリティへの対応などは、手動での修正が必要です。
「Stitch で生成したコードをそのまま本番に使う」ではなく、「Stitch で土台を作り、それを元に整えていく」という使い方が現実的です。コードを書ける人が使う場合は生産性の向上ツールとして機能しますが、コードを書けない人が「完成したコードをもらう」ことを期待すると期待外れになります。
複雑なインタラクションには対応していない
現時点のStitchが生成できるのは、あくまでUIの「見た目」です。ボタンを押したら何が起きるか、フォームを送信したらどう処理するか、という動的な振る舞いのコードは生成されません。
アニメーション、状態管理、APIとの連携——これらはStitchの範囲外です。UIのビジュアルデザインを素早く作る道具であり、アプリ全体を作る道具ではないと理解して使うことが重要です。
Google Labs ツールならではの不安定さ
Google Labs のツールは実験段階のため、機能や仕様が予告なく変わることがあります。また、Google の過去の例を見ると、Labs のツールが正式サービスに昇格せず終了することもあります。重要なプロジェクトのコアツールとして依存するのは、現時点では慎重に検討した方が良いです。
生成したデザインやコードは、手元に保存しておくことが重要です。クラウド上に保存されているとしても、サービスの終了や仕様変更によってアクセスできなくなるリスクを考慮してください。
日本語対応の状況
インターフェースの日本語対応については、公開時点では英語が主体です。ただし、プロンプトに日本語を使って指示を出すことは可能で、日本語のテキストを含んだUIを生成することも基本的にはできます。
完全な日本語UIや、日本語フォントの最適化については、まだ発展途上です。日本語の文字が生成されたUI上でうまく表示されない場合は、英語で確認してから日本語に調整するという手順が安定しています。
Google Stitch と他のAIデザインツールの比較
Google Stitch と同じカテゴリに位置するツールがいくつかあります。それぞれの特徴と、Stitch との違いを整理します。
Figma AI との比較
Figmaは世界標準のUIデザインツールで、AIを使った機能（Figma AI）も追加されています。Figmaは「デザインファイルの中でAIを使う」という位置づけで、ベースとなるデザインシステムやコンポーネントライブラリをすでに持っているチームで特に力を発揮します。
Stitch はFigmaのような本格的なデザインツールの前段階、あるいは代替として使える軽量なツールです。Figmaへの習熟が必要なく、AIとの会話だけでデザインを作れる分、入り口のハードルが低いです。一方でFigmaが持つような精密な編集機能、チームでのコラボレーション機能、豊富なプラグインエコシステムはStitchには現時点ではありません。
v0（Vercel）との比較
v0は Vercel が提供するAI駆動のUIコンポーネント生成ツールで、テキスト指示からReactコンポーネントを生成します。エンジニア向けの色合いが強く、生成されるコードはTailwind CSS + shadcn/ui のスタックが基本です。
Stitch と v0 の大きな違いは「出力先」です。v0はReactコンポーネントとして使えるコードを出力することが目的で、エンジニアが実際の開発で使うことを前提にしています。Stitch はデザインのビジュアル確認が目的の色合いが強く、コード出力はその後の追加機能です。デザインを重視する人は Stitch、コードを重視する人は v0 という選択になりやすいです。
Claude / ChatGPT によるUI生成との比較
Claude や ChatGPT にHTMLとCSSのコードを書かせる、という方法もUIプロトタイプ作成に使われます。会話でUIを生成するという意味ではStitchと似ていますが、大きな違いはプレビューの扱いです。
Stitch はデザインを即座にビジュアルとして表示できるため、「見た目を確認しながら調整する」という体験がスムーズです。ChatGPTやClaudeのコード出力は、別途ブラウザなどで確認する手順が必要です。UIの見た目を対話的に確認・修正したい場合はStitchが有利で、コードの細かい制御や複雑なロジックを含めたい場合はChatGPTやClaudeが有利です。
Google Stitch の活用シーン——実例
より具体的なイメージを持てるよう、Google Stitch を実際に活用できるシーンをいくつか紹介します。
社内の業務改善ツールのモックアップ作成
「在庫管理の画面をもっと使いやすくしたい」という改善提案を上司に通すとき、口頭や文書だけよりも画面イメージがあると説得力が上がります。Stitch に「在庫一覧、検索フィルター、ステータス更新ボタンのある管理画面」と入力してモックアップを生成し、提案資料に添付する——こうした使い方が現実的です。
専門のデザイナーに依頼するほどではないが、視覚的な提案が欲しい、という場面は職場に意外と多くあります。Stitch はこの「提案の初期段階」で活躍できます。
スタートアップのMVP初期フェーズ
アイデアを投資家や潜在的なユーザーに見せるためのデモ画面を作るとき、Stitch は時間を大幅に節約してくれます。「プロフィール設定画面」「タスク管理のホーム」「通知一覧画面」のように、主要な画面をStitchで次々と生成してデモ用のスライドにまとめられます。
開発の優先順位を決める前に「見た目を固める」ことで、チーム内の認識合わせが早くなります。エンジニアがコードを書く前の段階で、何を作るかの合意形成ツールとして機能します。
デザインの方向性を複数案で比較検討する
「ミニマルなデザイン」「カラフルなデザイン」「情報量を増やしたデザイン」のように、複数の方向性を素早く比較したい場合にも活用できます。同じ目的の画面を異なる指示で生成して並べると、方向性の検討が視覚的にできます。
会議でチームに「どの方向が良いか」を聞くとき、言葉の説明より画面を見せた方が意見が集まりやすいです。Stitch でたたき台を複数作り、その場で見せながら議論する使い方は、会議の質を上げます。
よくある質問：Google Stitch について
Q. Google Stitch は無料で使えますか？
Google Labs のツールとして提供されており、現時点では無料でアクセスできます。ただし利用には Google アカウントが必要で、ウェイトリストへの登録が必要な場合があります。Google Labs ツールは将来的に有料化される可能性がありますが、公開時点での利用は無料です。生成回数の制限がある場合もあるため、実際にアクセスしてから確認することをおすすめします。
Q. スマートフォンからも使えますか？
ブラウザベースのツールのため、スマートフォンのブラウザからアクセスすることは技術的には可能です。ただし、UIの性質上パソコンでの利用が想定されており、スマートフォンの画面では操作しにくい部分があります。スケッチを写真で撮ってアップロードする用途ではスマートフォンが便利ですが、デザインの確認や修正はパソコンで行うのが実用的です。
Q. 生成されたデザインの著作権はどうなりますか？
Google Labs のツールについては、利用規約に著作権の扱いが規定されています。一般的にAI生成コンテンツの著作権は複雑な状況にあり、商用利用の際は最新の利用規約を確認することが重要です。現時点では、生成物の著作権については法的な整理が進んでいる段階です。商業プロジェクトでの本格的な利用を検討する場合、利用規約を精読してから判断することをおすすめします。
Q. Figmaの代わりとして使えますか？
現時点では、Figmaの完全な代替にはなりません。Figmaが持つ精密な編集機能、コンポーネントシステム、チームコラボレーション、豊富なプラグインなどは Stitch にはありません。Figmaの「前段階のプロトタイプ作成ツール」として位置づけるのが適切です。「Figmaでデザインする前の、アイデアを視覚化する段階」での活用は非常に有効です。Figmaを使いこなしているチームにとっては補完的なツールとなります。
Q. 日本語のUIは生成できますか？
日本語テキストを含むUIを生成することは可能です。プロンプトに「日本語のテキストで」と明記すると日本語ラベルのUIが生成されます。ただし、日本語フォントの最適化や、日本語の読みやすさに特化した調整は現時点では限定的です。まず英語で生成・調整してからテキストを日本語に置き換えるという方法が、安定した結果を得やすいです。
Q. Gemini との関係はありますか？
Google Stitch のUI生成のバックエンドには Google の AI 技術が使われており、Gemini モデルの技術が活用されています。ただし Stitch は Gemini アプリとは別のツールで、UIデザイン生成に特化したものです。Google の AI エコシステムの一部として、Geminiの能力をUIデザインという具体的な用途に特化させたツールと考えると理解しやすいです。
Google Stitch を試すための準備
Google Stitch を使い始めるためのステップをまとめます。
- Google アカウントを用意する（個人アカウント推奨）
- Google Labs（labs.google）にアクセスする
- Stitch のウェイトリストに登録する（必要な場合）
- アクセスが開放されたらログインしてオンボーディングを完了させる
- まずシンプルなプロンプトで試してみる（例：「シンプルなログイン画面」）
- 気に入ったデザインが出たらコードを書き出して保存する
最初から複雑な指示を試すより、シンプルなプロンプトから始めてツールの感覚を掴む方が、早くコツを掴めます。「どんな指示をすると、どんな結果が返ってくるか」の感覚は、いくつか試してみることで身につきます。
アクセスできない場合でも、Google Labs のニュースレターやTwitter（現X）での公式発表をフォローしておくと、公開の拡大状況をいち早く知ることができます。
Google Stitch を使いこなすためのコツ
実際に使い始めると、プロンプトの書き方次第で出力の質が大きく変わることに気づきます。いくつかのポイントを押さえると、より意図に近いデザインを得やすくなります。
画面の「目的」と「含める要素」を明確に書く
「アプリのホーム画面」という漠然とした指示より、「フィットネストラッカーアプリのホーム画面。今日の歩数、消費カロリー、運動時間の3つのメトリクスを大きく表示し、下部にナビゲーションバー（ホーム・履歴・設定）を配置」のように書く方が、意図に近い結果が得られます。「何のためのアプリか」「どんな情報を表示するか」「何ができる画面か」の3点をプロンプトに含めると精度が上がります。
また、デザインの方向性（ミニマル・カラフル・モダン・フラットなど）を添えると、見た目の雰囲気を制御しやすくなります。「白を基調としたクリーンなデザインで」「アクセントカラーに深緑を使って」などの指定が、スタイルの方向づけに効果的です。
修正は細かく積み重ねる
生成されたデザインへの修正指示は、一度に多くの変更を求めるより、一つずつ積み重ねる方がコントロールしやすいです。「ヘッダーの色を変えて」→確認→「ボタンを大きくして」→確認、という形で、変更点を一つずつ確認しながら進めます。複数の変更を一度に指示すると、意図しない変更が混じることがあります。細かく積み重ねていくことで、理想のデザインに近づけられます。
まとめ：Google Stitch はこんな人に向いている
Google Stitch は、テキストとスケッチからUIデザインを生成し、コードとして書き出せる、Google Labs 発のAIデザインツールです。デザインの専門知識がなくても使えること、プロトタイプを素早く作れること、Googleのマテリアルデザインに沿ったUIが生成されることが特徴です。
現時点では出力されたコードをそのまま本番利用するのは難しく、複雑なインタラクションには対応していないという限界もあります。それでも、「アイデアを視覚化する最初のステップ」として、多くの場面で実用的な価値を持ちます。
次のような人にとって、Google Stitch は試してみる価値があるツールです。デザイナー不在のチームでUIプロトタイプが必要な人、クライアントへの提案に画面イメージを添えたい人、アプリのアイデアを素早く形にしてフィードバックを得たい人、コーディングの前にデザインの方向性を固めたいエンジニア——こうした場面で、Stitch はアイデアと完成品の間にある距離を縮めてくれます。Google Labs にアクセスして、まずシンプルな一画面を生成してみることをおすすめします。「まず試してみる」が、このツールと付き合う上での最初のステップです。最初から完璧な使い方を目指さなくていい。実際にいくつかのプロンプトを入力してみることで、自分の仕事のどの部分でStitchが役立つかが自然と見えてきます。
