「アプリのUIをデザインしたいけど、Figmaの操作が難しくて挫折した」「デザイナーに頼むほどではないが、プロトタイプだけ作りたい」——そう感じている人はかなり多い。スタートアップの創業者、個人開発者、新規事業を担当するビジネスパーソン。デザインのスキルがなくても、頭の中にあるアプリの画面イメージを素早く形にしたい場面は、日常的に生まれている。
Google Stitchは、そうした課題への答えになり得るツールだ。日本語のプロンプトを打ち込むだけで、スマートフォン向けのUI画面が数秒で生成される。2026年3月には新機能「Voice Canvas」も追加され、話しかけるだけでAIがリアルタイムにUIを調整してくれるようになった。
本記事では、Google Stitchを使ってモバイルアプリのUI画面を実際に作る方法を、ステップバイステップで解説する。プロンプトの書き方、生成結果の改善方法、FigmaやHTMLへのエクスポートまで、実践的な内容を網羅した。
結論から言うと、Google StitchでモバイルアプリのUIを作るには、①対象画面と必要なUI要素を日本語プロンプトで指定して生成→②反復改善で精度を上げる→③FigmaまたはHTMLに書き出す、という3ステップで完結する。無料で使えるため、まず試して感覚をつかむことが最速の学習法だ。
Google Stitch とは——AIでUIを自動生成するGoogleのデザインツール
Google Stitch（グーグルスティッチ）とは、テキストプロンプトや手書きスケッチから、モバイル・Web双方のUI画面を自動生成するGoogleのAIデザインツールです。Google Labs（グーグルラボ）が提供する実験的なサービスで、Googleアカウントがあれば無料で利用できます（2026年4月時点）。
Google Stitchの大きな特徴は、「デザインの知識がなくても、日本語でアイデアを伝えるだけでUIが生成できる」点にある。従来のデザインツール（Figma・Adobe XDなど）では、コンポーネントを配置したり、フォントを選んだりという操作スキルが必要だった。Stitchはその作業をAIが担い、ユーザーは「どんな画面が欲しいか」を言葉で伝えるだけで済む。
実際に使ってみると、最初の驚きは「生成の速さ」にある。プロンプトを入力してから5〜10秒で、実用に近いレベルのUIが画面に表示される。細部は粗いが、レイアウトや配色の方向性を掴むプロトタイプとしては十分な完成度だ。
Google Stitch の基本スペック（2026年4月時点）
Google Stitch の基本仕様を整理する。
- 提供元：Google Labs
- 提供形態：無料（Google Labsの実験的プロジェクト）
- アクセスURL：stitch.withgoogle.com
- 使用AIモデル：Gemini 2.5 Flash（標準モード）/ Gemini 2.5 Pro（実験モード）
- 対応デバイス：モバイル・デスクトップ双方に対応
- エクスポート形式：Figmaへのペースト / HTML・CSS書き出し
- 無料使用制限：標準モード月350回 / 実験モード月50回
- 日本語対応：プロンプト入力・UI生成ともに日本語対応
モバイルUIに特化して使う理由
Stitchはモバイルとデスクトップの両方に対応しているが、モバイルUIの生成において特に威力を発揮する。スマートフォン向けデザインはスペースが限られており、情報の優先順位とレイアウトの設計が重要になる。Stitchは生成時にモバイルレイアウトを選択するオプションがあり、縦スクロール・下部ナビゲーション・タップ操作に最適化された画面を生成してくれる。
デザイナーに発注せずに「とにかくスマホの画面イメージを見たい」という段階では、Stitchが最も手軽な選択肢になる。
Google Stitch の2つの生成モード——どちらを使う？
Google Stitch には、目的に応じて使い分けられる2つの生成モードがある。
標準モード：テキストから高速でUIを生成
標準モードは、テキストプロンプトのみを入力してUIを生成する方式だ。使用するAIモデルはGemini 2.5 Flash（ジェミニ2.5フラッシュ）。高速処理が特長で、アイデアを素早く形にしたい初期フェーズや、反復改善を何度も行いたい場面に最適だ。
月350回まで無料で使えるため、日常的な作業に使っても枠が尽きることはほとんどない。Figmaへの「Copy to Figma」機能も標準モードでのみ利用可能なため、Figmaとの連携を想定している場合は標準モードを選ぶのが基本となる。
実際に使ってみて分かったのは、標準モードでも十分な精度のモバイルUIが出力される点だ。デザイン方向の確認・チームへの共有用プロトタイプ・顧客へのデモ資料、これらの用途には標準モードで事足りることがほとんどだった。
実験モード：スケッチ・ワイヤーフレームから高品質UIを生成
実験モードは、手書きのワイヤーフレームやスクリーンショットをアップロードし、それを元にUIを生成する方式だ。使用モデルはGemini 2.5 Pro（ジェミニ2.5プロ）。処理精度が高い反面、月50回という使用制限があるため、重要な場面に絞って使うことが推奨される。
「アナログで描いたラフをそのままAIに読み込ませてUI化する」という流れは、デザイン会議でのホワイトボードスケッチをすぐにプロトタイプ化したいときに非常に便利だ。テキストで細かく指定するよりも、視覚的に示した方が意図が伝わりやすい場面もある。
2つのモードの違いを整理する。
- 標準モード：テキストのみ / Gemini 2.5 Flash / 月350回 / Figmaエクスポート対応
- 実験モード：画像+テキスト / Gemini 2.5 Pro / 月50回 / Figmaエクスポート非対応
事前準備——アカウント設定とキャンバスの確認
実際にモバイルUIを作る前に、いくつかの準備が必要だ。
Google アカウントでのログインとキャンバス設定
Google Stitch は stitch.withgoogle.com からアクセスし、Googleアカウントでログインする。初めてアクセスすると、シンプルなキャンバス画面が表示される。
画面左側にはモード切り替え（標準/実験）と生成設定、中央にはキャンバス（生成結果の表示エリア）、下部にはプロンプト入力欄が配置されている。2026年3月のアップデートでキャンバスが「インフィニットキャンバス（無限キャンバス）」形式になり、複数の生成結果を横に並べて比較しながら作業できるようになった。
モバイルUIを作成する場合は、生成設定からデバイスタイプとして「モバイル」を選択する。この設定をすることで、Stitchはスマートフォンの画面比率（縦長）・タップ操作に適したUI要素・下部ナビゲーションバーなどを優先して生成してくれる。
作りたいアプリの画面を事前に整理する
Stitchで良質なUIを生成するためには、プロンプトを投げる前に「何の画面を作るか」を整理しておくことが重要だ。整理すべき項目は以下のとおり。
- アプリのジャンル（フィットネス、家計管理、ECなど）
- 対象の画面名（ダッシュボード、ログイン画面、商品一覧など）
- 画面に必要なUI要素（ヘッダー、カード、ボタン、グラフなど）
- デザインのトーン（シンプル/カラフル/ダークモード/ミニマルなど）
- 参考にしたいアプリや雰囲気（「Instagramのように」「Notionっぽく」など）
この整理を5分でも行うだけで、生成されるUIの精度が大幅に上がる。プロンプトの曖昧さがそのままUIの曖昧さになるからだ。
実践！ステップバイステップでモバイルUIを作る
準備が整ったら、実際に生成を始める。ここでは「フィットネスアプリのダッシュボード画面」を例に、ステップバイステップで進める。
ステップ1：最初のプロンプトで大まかな画面を生成する
最初のプロンプトは「完璧を目指さない」のが鉄則だ。細かい指定は後から加えていける。まず大枠を生成して、方向性を確認することを優先する。
以下は初回プロンプトの例だ。
「フィットネスアプリのモバイルダッシュボード画面を作ってください。上部にユーザーのアバターと今日の日付、真ん中に歩数・消費カロリー・水分補給量の3つのカード、下部に今週の運動記録グラフ、一番下に下部ナビゲーションバー。ダークモードでモダンなデザイン」
このプロンプトで生成された画面は、指定したレイアウト・要素の大部分が反映されたUIになる。ただし、細部のデザイン（フォントサイズ・カラーの微調整など）は次のステップで改善していく。
ステップ2：反復改善でプロンプトの精度を上げる
初回生成の結果を確認したら、気になる部分を具体的に指定して再生成する。ポイントは「1回のプロンプトで変更する箇所を1〜2箇所に絞る」ことだ。複数の変更を一度に指定すると、他の良い部分が崩れることがある。
改善プロンプトの例を3つ示す。
- 「上部のアバターを円形にして、名前と挨拶文（「おはようございます、田中さん」）を追加してください」
- 「3つのカードのアクセントカラーを #00C2D6 のターコイズに統一してください」
- 「下部ナビゲーションバーに4つのタブ（ホーム・運動・栄養・設定）をアイコン付きで配置してください」
このように1点ずつ積み上げていくと、最終的に完成度の高いUIが出来上がる。実際に使ってみた経験から言えば、3〜5回の反復で、社内共有・顧客デモに使える水準のUIが生成できた。
ステップ3：複数画面をつないでアプリ全体を設計する
2026年3月のアップデートで追加された「5画面同時生成」機能を使えば、アプリの全体的な画面遷移も一度に作成できる。
例えば「フィットネスアプリの5画面を作ってください。①スプラッシュ画面②ログイン画面③ダッシュボード④運動記録入力⑤プロフィール設定。共通のデザインシステム（ダークモード、ターコイズアクセント）で統一」というプロンプトで、コンセプトが一致した5画面が一括生成される。
各画面間のナビゲーション構造も考慮されており、個別に作るよりも全体の一貫性が高い仕上がりになる。また、生成後に「再生ボタン」をクリックすると、各画面がインタラクティブなプロトタイプとして繋がり、画面上のタップ箇所をクリックすると次の画面が自動生成される「インスタントプロトタイプ」機能も使える。
実例で見るモバイルUIプロンプトの書き方
モバイルUIの種類別に、実際に効果的なプロンプト例を紹介する。
ダッシュボード画面のプロンプト例
ダッシュボードは情報量が多く、整理されたレイアウトが求められる。以下のプロンプトが有効だ。
「暗号資産追跡アプリ（CryptoTrack）のモバイルダッシュボード。上部に「アプリ名と通知ベル」、ポートフォリオサマリーカード（総資産額・前日比）、Bitcoinを中心とした円グラフ、横スクロールのトレンドコインリスト（BTC/ETH/SOL）、値上がり・値下がりのグリッドビュー、価格チャート（折れ線グラフ）、ニュースフィード、下部ナビゲーション。ダークモード、丸みを帯びたカード、アクセントカラーは #F7931A のオレンジ」
このプロンプトのポイントは、アプリ名の明示・各UI要素の列挙・スタイル詳細の指定、という3点を盛り込んでいる点だ。具体性が高いほど、生成されるUIの精度が上がる。
ログイン・オンボーディング画面のプロンプト例
シンプルに見えて難しいのがログイン画面だ。情報量は少ないが、ブランドの第一印象を決める重要な画面でもある。
「ヘルスケアアプリのログイン画面。上部3分の1にグラデーション背景（深緑→明るい緑）、中央にロゴマーク（葉っぱのアイコン+「HealthSync」のテキスト）、メールアドレス入力フォーム、パスワード入力フォーム（目のアイコン付き）、「ログイン」ボタン（角丸・緑色）、「パスワードを忘れた方はこちら」のテキストリンク、「または」のセパレーター、Googleログインボタン、「新規登録はこちら」のフッターリンク。全体的にクリーン・ミニマルなデザイン」
「Instagramのような」「Notionっぽい」といった参照アプリを加えると、デザインのトーンをAIが理解しやすくなる。ただし特定アプリの著作権に引っかかるデザインを出力させないよう、「〜のような雰囲気」という表現にとどめるのが安全だ。
商品一覧・ECサイトのモバイル画面
ECサイトの商品一覧は、カード型レイアウトとフィルタリング機能が重要になる。
「アパレルECアプリの商品一覧画面。上部に検索バー、カテゴリフィルター（すべて・トップス・ボトムス・アウター）のタグリスト、2カラムのグリッドで商品カード（画像・商品名・価格・お気に入りハートアイコン）、カード下部に「カートに追加」ボタン。全体的にホワイト基調・ピンクアクセント・女性向けのやわらかいデザイン。下部ナビゲーション（ホーム・検索・カート・プロフィール）」
このプロンプトでは、ターゲットユーザー（女性向け）を明示することで、フォントの丸みやカラーの温かみがAIに伝わりやすくなる。
Figmaへのエクスポートとコード変換——生成後の活用方法
Stitchで生成したUIは、FigmaへのエクスポートまたはHTMLコードとして書き出せる。さらに2026年3月のアップデートから、Claude CodeやCursorなどのAI開発ツールとMCP（Model Context Protocol）サーバー経由で連携できるようになり、デザインから実装までのワークフローが大幅に効率化された。
Copy to Figma の手順
「Copy to Figma」は標準モードのみ対応している機能だ。手順は以下のとおり。
- StitchでUIを生成し、画面右上の「Copy to Figma」ボタンをクリックする
- Figmaを開き（デスクトップアプリ・ブラウザ版どちらでも可）、貼り付けたいページで Ctrl+V（MacはCmd+V）を実行する
- 貼り付けたデータはFigmaのフレームとして配置され、そのまま編集できる状態になる
実際に試してみると、Figmaに貼り付けた後のデータ構造が比較的きれいに整理されており、レイヤー名も分かりやすい命名になっていた。そのままデザイナーに引き渡してブラッシュアップしてもらう、という流れで使う場合に非常に効果的だ。
HTMLコードの書き出しとClaude Code・Cursor連携
生成されたUIをWebサービスやアプリのフロントエンド開発に直接活用したい場合は、HTML・CSSとしての書き出しが使える。こちらは標準モード・実験モード双方で対応している。
操作手順は、生成されたUI画面を選択した状態で、右側パネルの「Code」タブをクリックする。HTML・CSSのコードが表示されるので、コピーボタンでクリップボードに取得し、VS CodeなどのIDEに貼り付けて開発の出発点として使う。
さらに2026年3月のアップデートで、Stitch はMCPサーバーとSDKを通じて Claude Code・Gemini CLI・CursorといったAIコーディングアシスタントと直接連携できるようになった。Stitchでデザインした画面を、そのままClaude CodeやCursorに渡して実装コードに変換する、という「デザインから実装まで一気通貫のワークフロー」が現実のものになっている。ゆけブログの読者でClaude Codeを使っている方は、ぜひこのMCP連携も試してほしい。
2026年3月の新機能：Voice Canvasで話しかけてUIを作る
2026年3月のアップデートで、Google Stitch に「Voice Canvas（ボイスキャンバス）」機能が追加された。
Voice Canvas とは
Voice Canvas（ボイスキャンバス）とは、マイクを使って音声でAIに指示を出し、リアルタイムでUIを更新・調整できる機能です。テキストを打ち込む代わりに、画面に向かって話しかけるだけでAIがリアルタイムに応答する。
単に「命令を受ける」だけでなく、AIがデザインの意図を確認したり、代替案を提示したり、批評を加えたりと、対話的なやり取りができるのが特徴だ。Google Labsが2026年3月に発表した情報によれば、Voice Canvasの「AIエージェント」は、ユーザーに対してデザインの目標についてインタビューし、キャンバス上のコンテンツにコメントし、会話しながらリアルタイムで更新を行うことができる。
実際に使ってみると、「このボタンをもう少し目立つようにして」「背景色が暗すぎる気がする、調整してみて」という感覚的な指示でも、AIが文脈を理解して適切な変更を加えてくれた。テキストで細かく説明するより、声で感覚を伝える方が、意図がうまく伝わるケースもある。
Voice Canvasの効果的な使い方
Voice Canvasで効果的に作業するためのポイントをまとめる。
- 全体的なトーンの調整：「全体的にもう少しやわらかい雰囲気にして」「もっとモダンな感じに変えてほしい」という感覚的な調整は、テキストより声の方がニュアンスが伝わりやすい
- 対話的なデザイン相談：「このレイアウト、どう思う？改善できる点はある？」と聞くと、AIがデザインの問題点を指摘してくれる
- テキストとのMix使い：細かい変更（「ボタンのテキストを変えて」など）はテキストプロンプトの方が確実。Voice CanvasとテキストのMixが最も効率的なワークフロー
モバイルUI生成の注意点・失敗しやすいポイント
Stitchを使ったモバイルUI生成で、よくある失敗パターンを整理する。
- 曖昧なプロンプトで生成する：「おしゃれなアプリのUIを作って」という指示では、生成される結果は毎回バラバラになる。アプリのジャンル・画面の種類・含めたいUI要素を明確に指定することが基本だ
- 1回のプロンプトで全てを変えようとする：変更箇所が多すぎるとAIが処理しきれないことがある。1回に1〜2箇所の変更に絞ることで、思い通りの方向に収束しやすくなる
- モバイルレイアウトの設定を忘れる：キャンバスのデバイスタイプを「モバイル」に設定しないと、デスクトップ向けのUIが生成されることがある。作業前に必ず確認する
- 実験モードを使いすぎる：実験モードは月50回の制限がある。軽い作業や最初の方向確認には標準モードを使い、精度が求められる最終段階で実験モードを使うのが節約になる
- 生成結果をそのまま最終版にしようとする：Stitchの生成物はあくまで「出発点」。Figmaに持ち込んでデザイナーが磨く、HTMLコードを開発者が整える、というステップを前提にしたツールだと理解することで、期待値がずれなくなる
よくある質問（FAQ）
Q：Google Stitch は完全無料で使えますか？
A：2026年4月時点では、Google Labsの実験的プロジェクトとして無料提供されています。標準モードで月350回、実験モードで月50回のUI生成が無料で利用できます。将来的に有料プランが追加される可能性はありますが、現時点では料金は発生しません。Googleアカウントがあればすぐに始められます。
Q：日本語のプロンプトで使えますか？
A：はい、日本語のプロンプト入力に対応しています。「ヘルスケアアプリのダッシュボードを作って」のような日本語指示で、問題なくUIが生成されます。ただし、生成されるUIのテキスト（ボタン名・ラベル）は英語になることが多いため、テキストの日本語化は別途指定するか、Figmaで編集するのが現実的です。
Q：Figmaのアカウントがなくても使えますか？
A：Figmaなしでも、Google Stitchは完全に機能します。生成したUIはFigmaへのエクスポートだけでなく、HTML・CSSコードとして書き出せるため、Figmaを使わない開発ワークフローでも活用できます。Figmaは「さらに編集したい場合の選択肢のひとつ」として捉えておくと良いでしょう。
Q：生成されたUIをそのまま本番アプリに使えますか？
A：生成されたHTMLコードは「開発の出発点」として活用できますが、そのまま本番環境に使うことは推奨しません。Stitchが生成するコードはReactやVueなどのフレームワークに対応しておらず、スタティックなHTMLです。実際の開発では、コンポーネント化・APIとの接続・レスポンシブ対応の細かい調整が必要になります。デザインの方向性を確認するプロトタイプとして活用し、本番実装は開発者が行う前提で使うのがベストです。
Q：アプリのUIだけでなく、LPやWebサイトのデザインにも使えますか？
A：はい、デスクトップ向けのWebサイトやLPのデザインにも対応しています。プロンプトでデバイスタイプを明示（「PCのWebサイト向けに」）することで、横幅広めのレイアウトが生成されます。Web向けの詳細はゆけブログのGoogle Stitch関連記事も合わせてご参照ください。
Q：手書きスケッチからUIを作る場合、どの程度のクオリティのスケッチが必要ですか？
A：実験モードのスケッチ認識は、かなりラフな手書きでも対応できます。ポイントは「箱と線で要素のレイアウトを示す」こと。文字の美しさよりも、配置の意図が分かることが大切です。スマートフォンでメモアプリに描いたスケッチをスクリーンショットでアップロードする使い方も有効です。
Q：Claude CodeやCursorとの連携はどうやって設定するの？
A：2026年3月のアップデートで追加されたMCPサーバーを通じて連携できます。Stitch側でMCP連携の設定を行うと、Claude CodeやCursor上でStitchのデザインデータを参照しながらコード生成ができるようになります。具体的な設定手順はGoogleの公式ドキュメントを参照してください。Claude Codeとの連携については、ゆけブログのClaude Code MCP記事も参考になります。
まとめ——Google Stitch でモバイルUI設計をゼロから始める
Google Stitch は、「デザインツールを覚える時間がない」「プロトタイプを今すぐ作りたい」という人にとって、現時点で最も手軽に使えるモバイルUIデザインツールのひとつだ。
本記事で解説した内容を振り返ると、以下のポイントが実践の核になる。
- プロンプトの精度が出力の精度を決める：アプリ名・画面の種類・UI要素の列挙・デザインのトーンを盛り込むことで、生成精度が大幅に上がる
- 反復改善が効率的：最初から完璧を目指さず、大まかな生成→1点ずつ改善のサイクルを回すことが結果への最短ルート
- 生成後の活用方法を決めておく：Figmaで磨く場合は標準モード・Figmaへのエクスポートを使い、Claude CodeやCursorで実装に繋げる場合はMCP連携を活用する
- Voice Canvasで感覚的な指示を：2026年3月追加のVoice Canvasは、感覚的なトーン調整や対話的なデザイン相談に向いている。テキストとVoiceを組み合わせた使い方が最も効率的だ
Google Stitch はまだGoogle Labsの実験段階のプロジェクトであり、機能のアップデートが頻繁に行われている。2026年3月だけでも、Voice Canvas・インフィニットキャンバス・インスタントプロトタイプ・MCP連携と、立て続けに大型機能が追加された。
「使い始めてから学ぶ」ことが最も早い習得方法だ。まずは stitch.withgoogle.com にアクセスして、Googleアカウントでログインするところから始めてほしい。今日中に最初のモバイルUIが形になるはずだ。
