Google Stitchとは？何ができるUI設計AIか
Google Stitchとは、テキストや画像を入力するとアプリやWebサイトの画面デザインを生成し、フロントエンドのコードまで書き出してくれるGoogle製のAIツールです。Google Labs（Googleの試験的なプロダクトを公開する場）から提供されています。
もとは「Galileo AI」という有料のUI生成サービスでした。これがGoogleのもとでStitchとして生まれ変わり、無料で使えるようになった経緯があります。検索で「stich」と綴りを間違えて探す人も多いのですが、正しくは「Stitch（縫い合わせる）」。アイデアと画面、デザインとコードを縫い合わせる、という意味合いの名前です。
できることを整理すると、次の4つに集約されます。
- 文章から画面を作る: 「家計簿アプリのホーム画面」と書けば、それらしい画面が出る
- 画像から画面を作る: 手書きのラフや既存サイトのスクショを渡すと、整ったUIに起こす
- 複数画面をまとめて作る: ログイン、一覧、詳細など、つながった画面群を一度に生成
- 書き出す: Figmaへの持ち出しと、HTML/CSSなどのフロントエンドコードの出力
つまり「頭の中のイメージを、人に見せられる画面にするまでの時間」を一気に縮める道具です。完成品を作るツールと思うと期待外れになります。たたき台を作るツールと割り切ると重宝します。
UI設計の周辺ツールをまとめて眺めたいなら、AIデザインのカテゴリに主要ツールが並んでいます。
編集部のおすすめ
ChatGPT・Claude・Geminiを
複数のAIに同じ質問をして答えを比べたり、講座で使い方を体系立てて学んだりできます。
Google Stitchは無料で使える？料金と生成回数の上限
Google Stitchは、Googleアカウントがあれば無料で使えます。ただし月ごとの生成回数に上限があり、モードによって回数が大きく違います。
有料プランは、この記事の確認時点では用意されていません。前身のGalileo AIは月額課金のサービスでした。Stitchになってからは無料で、機能も増えています。複数画面の生成、音声での指示、デザインシステム（色や文字サイズのルール集）の読み込み、Reactコードの書き出しまで含めて無料。他社なら月額課金が当たり前の機能群なので、正直かなり破格です。
一方で、上限の数字そのものは試験提供ゆえにたびたび変わります。回数を気にするなら、ログイン後の画面に出る残り回数を見るのが一番確実です。
| 項目 | Standardモード | Experimentalモード |
|---|---|---|
| 料金 | 無料 | 無料 |
| 月間の生成回数 | 多い（数百回規模） | 少ない（Standardの数分の一） |
| 速さ | 速い | やや時間がかかる |
| 得意なこと | 文章からの素早い画面生成 | 画像入力を含む精度重視の生成 |
| 向いている段階 | アイデア出し・大量の案出し | 方向性が決まった後の作り込み |
つまり、回数を気にせず試せるのはStandard、1回の質を取りにいくのがExperimentalという分担です。
上限に達すると、その月は生成が止まります。課金して回数を増やす仕組みは今のところありません。月末に締め切りがある人は、前半で回数を使い切らないよう注意したいところ。
将来の有料化はありえるのか。Google Labsの試験提供は、正式版になるときに料金体系が変わるのがよくある流れです。無料のうちに操作に慣れておく価値は十分あります。
StandardとExperimental、2つのモードはどう選ぶ？
迷ったらStandardから始めるのが一択です。回数に余裕があり、指示文の書き方を練習するのに向いています。
Standardは処理の軽いGemini Flash系のモデルで動いていて、返ってくるのが速いのが強み。「とりあえず5案見たい」「配色だけ変えた版が欲しい」といった、数で勝負する場面に合います。
Experimentalは上位のモデルを使い、画像入力への対応や仕上がりの細かさで勝ります。そのぶん回数が少ない。手書きラフを清書したいときや、クライアントに見せる直前の1枚に使うのが賢い配分です。
| やりたい | 選ぶモード | 理由 |
|---|---|---|
| アイデアを大量に出したい | Standard | 回数が多く、速い |
| 手書きスケッチを清書したい | Experimental | 画像の読み取り精度が高い |
| 配色や文言を少しずつ変えたい | Standard | 小さな修正は回数を食うため |
| 人に見せる最終案を作りたい | Experimental | 細部の作り込みで差が出る |
| Figmaに持ち出して手直ししたい | Standard | 書き出し前提なら軽いモードで十分 |
つまり「量のStandard、質のExperimental」で使い分ければ、月の上限に振り回されません。
モードは生成前に画面上部の切り替えで選べます。ここからは、実際の5ステップを順番に追っていきます。
ステップ1：ログインしてプロジェクトを作るには？
最初の一手は、ブラウザで Google Stitch公式サイト を開き、Googleアカウントでログインすることです。インストールは不要で、パソコンのブラウザがあれば始められます。
ログインすると、中央に大きな入力欄がある画面が出ます。ここが作業の起点。やることは3つだけです。
- 作る対象を選ぶ: 「Mobile（スマホアプリ）」か「Web（パソコン向けサイト）」を選ぶ
- モードを選ぶ: 最初はStandardのままでOK
- 入力欄に指示を書く: 次のステップで詳しく説明します
スマホかWebかの選択は、あとから変えにくい部分です。画面の縦横比やメニューの配置が根本から変わるため。迷ったら、実際にユーザーが一番よく使う端末に合わせましょう。
作ったものはプロジェクトとして保存され、あとから開き直せます。案件ごとにプロジェクトを分けておくと、生成した画面が混ざらずに済みます。地味に効くひと手間です。
ステップ2：指示文を書いて最初の画面を生成する
Stitchの出来は、最初の指示文でほぼ決まります。プロンプト（AIへの指示文）は短すぎても長すぎても失敗します。
最初の1回は、次の4点を3〜5文で書けば十分です。
- 誰が使うか: 「20代の一人暮らしの会社員」
- 何をする画面か: 「毎日の支出を記録する家計簿アプリのホーム画面」
- 雰囲気: 「明るく、やわらかい印象。メインカラーは緑」
- 必要な部品: 「今月の残り予算、カテゴリ別の円グラフ、支出を追加するボタン」
入力して送信すると、数十秒で画面が1枚から数枚出てきます。キャンバス（作業スペース）上に並ぶので、ズームしたり並べて見比べたりできます。
ここで大事なのは、1回目で完成を狙わないこと。1回目の役目は「方向性が合っているか」の確認です。レイアウトの大枠が合っていれば合格。文言や色のズレは、ステップ4のチャットで直すほうが回数の節約になります。
日本語で指示しても画面は作られます。ただ、ボタンの文言などが英語で出てくることは珍しくありません。日本語表示にしたいなら「画面内のテキストはすべて日本語で」と一文足しておくと安定します。英語で書いた指示文を日本語の説明に直したいときは、Translated AI vs Papago比較で紹介している翻訳ツールを横に置いておくと、英語が苦手でも詰まりません。
ステップ3：画像やスケッチから画面を起こす
文章だけで伝えにくいときは、画像を渡すのが近道です。手書きのラフ、既存アプリのスクリーンショット、ホワイトボードの写真など、画面の構造がわかるものなら何でも材料になります。
入力欄の画像アイコンからファイルを添付し、あわせて短い指示文を書きます。画像だけ渡すより、「この配置のまま、配色をモダンにして」のように目的を一言添えるほうが、意図どおりに仕上がります。
画像入力がうまくいくコツは3つあります。
- 線ははっきり描く: 薄い鉛筆書きより、太いペンで枠を描いたほうが読み取られやすい
- 文字は大きめに: 「ボタン」「検索」などのラベルは、判読できるサイズで書く
- 1枚に1画面: 複数の画面を1枚に描くと、混ざって読まれやすい
他社サイトのスクリーンショットを渡す場合は注意が必要です。構成を参考にするのは問題になりにくい一方、ロゴや固有のデザインをそのまま使うのは避けるべき。「レイアウトだけ参考に、色と文言は変えて」と指示に入れておくのが安全策です。
画像入力はExperimentalモードのほうが精度が出やすい領域です。ラフの清書はExperimentalの少ない回数を使う価値がある場面、と覚えておきましょう。
ステップ4：チャットで修正し、複数画面をつなぐ
生成された画面は、チャット形式で何度でも修正できます。「このボタンをもっと大きく」「見出しを太字に」と話しかけるように直していけます。
修正のコツは、1回の指示で1〜2か所だけ直すこと。「色を変えて、ボタンを増やして、グラフを棒グラフにして、フッターも消して」とまとめて頼むと、一部が反映されなかったり、直してほしくない部分まで変わったりします。回数を節約したい気持ちはわかりますが、結果的にやり直しが増えがち。
| 修正したい | 指示の |
|---|---|
| 色味 | 「メインカラーを濃い緑に、背景は白に近いベージュに」 |
| 文字 | 「見出しを1段大きく、本文は読みやすいサイズに」 |
| 部品の追加 | 「画面下部に、ホーム・記録・設定の3つのタブを追加」 |
| 部品の削除 | 「右上の通知アイコンを削除」 |
| 画面の追加 | 「このホーム画面から遷移する、支出の入力画面を作って」 |
つまり、何をどう変えるかを具体的な単語で書けば、1回で狙いどおりに直ります。
複数画面をつなぐ機能も便利です。ホーム画面を起点に「入力画面」「履歴画面」を追加していくと、デザインのトーンがそろった画面群ができます。さらにプロトタイプ機能を使えば、ボタンを押すと次の画面に移る、動きのある試作品として確認できます。クライアントや上司に見せるとき、静止画を並べるより伝わり方が段違いです。
ステップ5：Figmaやコードに書き出して仕上げる
できあがった画面は、Figmaに持ち出すか、コードとして書き出すかのどちらかで次の工程に渡します。この書き出し機能こそ、Stitchを使う最大の理由です。
Figmaに書き出す場合は、画面を選んで書き出しボタンからFigmaへコピーします。Figmaのファイルに貼り付けると、ボタンや文字などの要素ごとに編集できる状態で入ります。細かい余白の調整や、実際のブランドカラーへの置き換えはFigma側で行うのが効率的です。
コードで書き出す場合は、HTML/CSSなどのフロントエンドコードを取り出せます。React（Webアプリでよく使われる部品の作り方）形式での書き出しにも対応しています。エンジニアに渡す見本として、あるいは簡単なランディングページの土台として使えます。
| 書き出し先 | 向いている | その後の |
|---|---|---|
| Figma | デザイナー・ディレクター | 余白・色・文言の手直し、デザインシステムへの統合 |
| フロントエンドコード | エンジニア・個人開発者 | データとのつなぎ込み、動作の実装 |
| 画像として保存 | 企画担当・非デザイナー | 企画書や提案資料への貼り込み |
つまり、自分の次の作業がどこで行われるかで書き出し先を決めれば迷いません。
注意したいのは、書き出したコードはあくまで見た目の再現だという点。ボタンを押したらデータが保存される、といった中身の動きは入っていません。本番のアプリにするには、コーディング作業が別途必要です。この工程を任せられるツールは、AIコーディングのカテゴリにまとまっています。
伝わるプロンプトの書き方｜7つのコツと例文
Stitchで思いどおりの画面を出す一番の近道は、指示文の型を覚えることです。7つのコツを、悪い例と良い例で並べます。
| コツ | 悪い | 良い |
|---|---|---|
| 1. 利用者を書く | 「予約アプリ」 | 「美容室を予約する30代女性向けのアプリ」 |
| 2. 画面の役割を書く | 「トップページ」 | 「空き時間を探して予約するための一覧画面」 |
| 3. 雰囲気を形容詞で | 「おしゃれに」 | 「落ち着いた、上品で余白の多い印象」 |
| 4. 色を指定する | 「いい感じの色」 | 「メインはくすんだピンク、アクセントに金色」 |
| 5. 部品を列挙する | 「必要なものを入れて」 | 「日付選択、スタッフ写真、料金、予約ボタン」 |
| 6. 言語を指定する | 指定なし | 「画面内の文言はすべて日本語で」 |
| 7. 参考を名指しする | 「どこかで見たデザイン」 | 「カード型の一覧。写真を大きく見せる構成」 |
つまり、あいまいな形容詞を具体的な言葉に置き換えるほど、1回で当たる確率が上がります。
実際にそのまま使える例文を1つ置いておきます。
美容室を予約する30代女性向けのスマホアプリで、空き時間を探して予約する画面を作ってください。落ち着いた上品な雰囲気で、余白を多めに。メインカラーはくすんだピンク、アクセントに金色を使ってください。日付の選択、担当スタッフの写真と名前、メニューと料金、予約ボタンを入れてください。画面内の文言はすべて日本語でお願いします。
もう一つのコツは、最初から長文にしないことです。上の例文くらいの分量で1回出し、ズレた部分だけ追加で指示する。これが回数を節約しながら精度を上げる進め方です。
プロンプトの書き方はChatGPTでも共通する部分が多くあります。同じ指示文を両方に投げたときの違いは、Stitch ChatGPT比較で見るUI生成の性能とコスト差5点で詳しく並べています。
ここまでの整理: Stitchは無料のUI生成AIで、回数上限はモードごと。ログイン後に「利用者・役割・雰囲気・部品」の4点を書いた指示文で1枚出し、チャットで1〜2か所ずつ直して、Figmaかコードに書き出すのが基本の流れです。
失敗しやすいポイントと対処法は？
Stitchでつまずく原因は、ほとんどが「期待値のズレ」と「指示のあいまいさ」です。よくある失敗と対処を表にまとめます。
| よく | 原因 | 対処法 |
|---|---|---|
| 文言が英語で出てくる | 言語を指定していない | 「画面内の文言はすべて日本語で」と明記 |
| 修正したら別の場所まで変わった | 1回に複数の修正を頼んだ | 1回の指示で直すのは1〜2か所まで |
| 月の途中で生成が止まった | Experimentalで回数を使い切った | 試行錯誤はStandardで行う |
| 画面ごとにデザインがバラバラ | 別々に新規生成した | 既存画面から「遷移する画面を作って」と追加する |
| コードをそのまま使えない | 見た目だけのコードだと知らなかった | データ処理は別途実装する前提で使う |
つまり、失敗の多くは使い方の順番を守るだけで防げます。
もう一つ見落としやすいのが、試験提供であること自体のリスク。Google Labsのプロダクトは、機能や仕様が予告なく変わることがあります。仕事で使うなら、生成したデザインはFigmaやコードとして手元に残しておくのが安心です。Stitchの中だけにデータを置きっぱなしにしない。これが最低限の備えです。
機密性の高い新規事業の画面など、社外に出せない情報を入力するかどうかも、社内のルールと照らしておきましょう。Googleの利用規約とプライバシーの扱いは、使い始める前に一度目を通す価値があります。
ChatGPTやほかのツールとどう使い分ける？
UI設計の最初のたたき台を作るならStitch、文章やアイデアを練るならChatGPT、という分担がいちばん無駄がありません。
ChatGPTも画面の案を言葉で出したり、HTMLを書いたりはできます。ただ、キャンバス上で画面を並べて見比べ、Figmaに持ち出すところまで一続きでできるのはStitchの強み。一方、「そもそもどんな画面が必要か」を整理する段階は、会話の往復が得意なChatGPTのほうが向いています。
具体的な流れにすると、次のようになります。
- ChatGPTで、アプリの目的と必要な画面の一覧を整理する
- その一覧をもとに、Stitchで各画面を生成する
- Figmaで細部を整え、チームで共有する
- コーディング系のAIで、見た目を動くアプリにする
Stitch以外のUI生成ツールも増えています。日本語対応やオープンソースを重視するなら、Stitchの代替11選｜無料・日本語・オープンソースで比較が選択肢を一覧で見られて便利です。
バナーやSNS画像など、UI以外のデザインが中心ならCanvaのほうが話が早い場面もあります。Googleのサブスクとの組み合わせまで含めた比較は、Google AI PlusとCanva AIどっち？で整理しています。
どんな人・どんな場面で重宝するのか？
Stitchがいちばん力を発揮するのは、「デザイナーがいないけれど、画面のイメージを人に見せる必要がある」場面です。
たとえば、次のような人には強くおすすめできます。
- 個人開発者: デザインが苦手でも、それらしい見た目のアプリを最短で作れる
- 企画・ディレクター: 言葉で説明していた画面イメージを、会議の前に形にできる
- スタートアップの創業者: 投資家や顧客に見せる試作品を、外注せずに用意できる
- デザイナー: ゼロから描く前の案出しを任せ、作り込みに時間を回せる
非営利団体や小さなチームにも相性がいいツールです。予算が限られる組織ほど、無料で試作品まで作れる価値は大きい。Googleが非営利団体向けに用意している支援と組み合わせる考え方は、NPO向けAIツール7選で紹介しています。
逆に、ブランドのガイドラインが細かく決まった大企業のサービスでは、Stitchの出力をそのまま使う場面は少ないはず。デザインシステムを読み込ませる機能はあるものの、最終的な仕上げは人の手が必要です。案出しと社内合意のための試作、と役割を絞ると効果が出ます。
AI PICKS編集部の判定
Google Stitchは、UIのたたき台づくりに関しては現時点で一択に近い存在です。文章や手書きラフから数十秒で画面が出て、Figmaとコードの両方に持ち出せる。前身のGalileo AIが有料だったことを考えると、これが無料で使える状況は破格としか言いようがありません。
公開情報を突き合わせた見立てとして、評価が分かれるのは仕上がりの細部です。余白や文字サイズの整い方は「それっぽい」止まりで、そのまま本番に出せる品質とは言いがたい。書き出したコードも見た目の再現にとどまり、動く仕組みは自分で足す必要があります。ここを完成品ツールと誤解すると、正直イマイチに感じるはずです。
もう一つの懸念は、試験提供ゆえの不安定さ。回数上限や機能は変わりうるので、成果物は必ずFigmaかコードで手元に残してください。
おすすめの使い方ははっきりしています。Standardモードで案を大量に出し、方向性が決まったらExperimentalで作り込み、Figmaで仕上げる。この3段構えなら、デザイン経験がなくても人に見せられる画面が1日で揃います。
よくある質問（FAQ）
Q. Google Stitchは完全無料ですか？
この記事の確認時点では無料で使えます。ただし月ごとの生成回数に上限があり、使い切るとその月は生成できません。有料で回数を増やす仕組みは現在ありません。
Q. 「stich」で検索しても同じツールですか？
「stich」は綴りの間違いで、正しくは「Stitch」です。Googleが提供するAIのUI設計ツールを探しているなら、stitch.withgoogle.comが公式の入り口になります。
Q. 日本語で指示しても使えますか？
日本語の指示文でも画面は生成されます。ただ、画面内の文言が英語で出ることがあるため、「画面内の文言はすべて日本語で」と一文添えると安定します。
Q. デザインの知識がなくても使えますか？
使えます。指示文に「誰が使うか・何をする画面か・雰囲気・必要な部品」の4点を書けば、デザインの専門用語を知らなくても形になります。
Q. 生成したデザインを仕事で使っても大丈夫ですか？
Googleの利用規約に従う形になります。試験提供のため条件が変わる可能性があるので、商用で使う前に最新の規約を公式で確認してください。他社サイトの画像を入力した場合は、ロゴや固有デザインを流用しないよう注意が必要です。
Q. 書き出したコードでそのままアプリが動きますか？
動きません。書き出せるのは見た目を再現するフロントエンドコードで、データの保存やログインなどの仕組みは含まれていません。本番化にはコーディング作業が別途必要です。
Q. スマホアプリとWebサイト、どちらも作れますか？
どちらも作れます。プロジェクト作成時に「Mobile」か「Web」を選びます。あとからの切り替えは画面構成が大きく変わるため、最初に想定する端末を決めておくのがおすすめです。
次に読むならこれ。Stitchに慣れてきて「ChatGPTで同じことをしたらどうなるのか」が気になったら、Stitch ChatGPT比較で見るUI生成の性能とコスト差5点が役立ちます。同じ指示でどこに差が出るかがわかるので、ツールの使い分けが一段はっきりします。
あわせて見たいツール・カテゴリ
- AIデザインのツール一覧：Stitch以外のUI・グラフィック系AIをまとめて比較できます
- AIデザインのおすすめ：用途別に選ぶときの目安になります
- AIコーディングのツール一覧：書き出したコードを動くアプリにする工程で使えます
- AIコーディングのおすすめ：個人開発で使いやすいツールを探すならこちら
- AIノーコードのツール一覧：コードを書かずにアプリまで仕上げたい人向けです
- AI画像生成のツール一覧：画面に載せるイラストや写真素材づくりに使えます
- ChatGPT：必要な画面の洗い出しや、画面内の文言づくりの相棒になります
