Google Stitch を使い始めたとき、最初のハードルは「どんな指示を書けばいいか」という点です。同じ目的で使っていても、プロンプトの書き方次第で生成されるUIの質が大きく変わります。「なんか思ったのと違う」という結果が続くとき、原因のほとんどはプロンプトの情報量か、情報の伝え方にあります。
この記事では、Google Stitch で意図したUIを生成するためのプロンプトの書き方を、具体例を交えて解説します。「なんとなくやってみたけどうまくいかない」という人が、プロンプトを少し変えるだけで生成結果が改善される体験ができるよう、実践的な内容にまとめました。プロンプトは「技術」ではなく「慣れ」です。使うほどに上手くなっていきます。
プロンプトが重要な理由
Google Stitch に限らず、AIを使ったコンテンツ生成は「入力の質が出力の質を決める」という原則があります。Stitch の場合、同じ「ログイン画面を作って」という指示でも、背景情報や要件の詳細さによって、まったく異なるUIが生成されます。
良いプロンプトは、AIが「意図を読み違えにくい」指示です。AIは入力された文章から文脈を推測して生成します。曖昧な部分は「よくあるデザイン」で補完されるため、こだわりや特定の要件がある場合はそれを明示的に書く必要があります。「なんとなく書いた」プロンプトには「なんとなく生成された」UIが返ってきます。これはStitchの限界ではなく、プロンプトの問題です。
また、最初の生成で完璧なものを求めようとするより「生成→修正→生成→修正」という反復プロセスで近づけていく方が、現実的で効果的です。最初のプロンプトは「方向性を定める」ためのもので、細部は修正指示で整える——という使い方が Stitch に向いています。Stitch の生成は数秒で完了するため、試行錯誤のコストが低く、繰り返すことへの心理的ハードルが下がるのも良い点です。
基本の書き方：4つの要素を含める
Google Stitch のプロンプトで結果が安定しやすいのは、次の4つの要素を含めて書く方法です。
①アプリ・サービスの目的
「何のためのアプリか」を最初に書きます。「フィットネストラッカーアプリ」「ECサイトの商品一覧ページ」「社内の勤怠管理ツール」のように、用途を明示することで、AIが適切なデザインコンテキストを選択します。
目的を書くと、デザインのトーンや含めるべき要素の推定がより正確になります。「医療系アプリ」と書けば清潔感のある落ち着いたデザインが生成されやすく、「子ども向けゲームアプリ」と書けばカラフルでポップなデザインが生成されやすくなります。
②表示する画面の種類
「ホーム画面」「ログイン画面」「プロフィール設定画面」「商品詳細ページ」のように、生成したい画面の種類を指定します。同じアプリでも画面によってレイアウトの最適解が異なるため、この指定は重要です。
画面の種類が不明瞭だと、AIが「汎用的な画面」を生成しがちです。「ダッシュボード」「リスト画面」「詳細表示画面」「入力フォーム」のような画面タイプの語彙を持っておくと、プロンプトが書きやすくなります。
③含めたい要素・機能
「ユーザーのプロフィール画像と名前」「今日の歩数のカウンター」「検索バー」「フィルタリングボタン」のように、画面に含める具体的な要素を列挙します。この部分が詳細なほど、意図に近いUIが生成されます。
要素を書く際は「なぜその要素が必要か」も添えると、AIがレイアウト上の優先度を判断しやすくなります。「メインCTAとして大きく配置したい購入ボタン」のように、要素と意図を一緒に書くのが効果的です。
④デザインのトーン・スタイル
「ミニマルでシンプルなデザイン」「カラフルで親しみやすい見た目」「ダークモードのプロフェッショナルな印象」「白を基調とした清潔感のある画面」のように、視覚的な方向性を指定します。
色を指定する場合は「ブランドカラーの深緑（#1B5E20）をアクセントに」のように、具体的な色を書くとより意図に近いデザインが得られます。フォントのスタイルやアイコンの印象についても書けると、デザインの統一感が出やすくなります。
実際のプロンプト例
良いプロンプトと改善前のプロンプトを比較します。
改善前：「タスク管理アプリのホーム画面」
この指示でも何かが生成されますが、AIはタスク管理アプリのよくある見た目を推測して作るため、汎用的なデザインになりがちです。「自分がイメージしていたものと違う」と感じる可能性が高いです。
改善後：具体的に書いた例
「フリーランス向けのプロジェクト管理アプリのホーム画面。上部に今日の期限タスクを3件まで表示するカード、中央に進行中プロジェクトのリスト（各プロジェクトの進捗バー付き）、下部に固定ナビゲーションバー（ホーム・タスク・プロジェクト・設定の4項目）。白を基調としたクリーンなデザインで、強調色はインディゴブルー」
この書き方だと、画面構造・含める要素・ビジュアルの方向性がすべて伝わります。生成結果がより具体的になり、修正が必要な範囲も狭くなります。
修正プロンプトの書き方
最初の生成後に修正を重ねるときのプロンプトの書き方にもコツがあります。
一度に一つの変更を指示する
「ヘッダーの色を変えて、ボタンを大きくして、フォントも変えて」のように複数の変更を一度に指示すると、想定外の変更が加わることがあります。「ヘッダーの背景色をダークブルーに変えて」のように、一つの変更に絞って指示する方がコントロールしやすいです。
修正を積み重ねていく中で、変更が意図通りに反映されているか確認しながら進めることが重要です。「前の状態に戻して」という修正もできるため、試しながら進めやすい設計になっています。
「残す部分」も明示する
「ヘッダーの色だけ変えて、それ以外はそのままにして」のように、変えたくない部分を明示することで、意図しない変更を防げます。AIは指示された変更に合わせて全体を最適化しようとする傾向があるため、「この部分は変えないで」という制約を伝えることが有効です。
比較・選択の形式で指示する
「現在のレイアウトと、2カラムにしたバージョンを両方作って比較したい」のように、複数のバリエーションを生成させる指示も有効です。どちらの方向性が良いかを視覚的に判断してから、細部の修正に進む方が効率的な場合があります。
ケース別のプロンプトパターン
よく使うシーン別に、プロンプトのパターンをまとめます。
モバイルアプリのUIを作る場合
「[アプリ名/目的]のiOSアプリの[画面名]。[含める要素リスト]。[デザインスタイル]。モバイル画面サイズ（375×812px想定）」のように、モバイル向けであることと画面サイズを明示します。ナビゲーションバーの有無やスワイプ操作の想定なども書くと、モバイルらしいUIが生成されやすくなります。
管理画面・ダッシュボードを作る場合
「[サービス名]の管理者ダッシュボード。左サイドバーにナビゲーション、右上に通知・ユーザーアイコン、メインエリアに[表示したいデータや機能]。プロフェッショナルなトーンで、ダークサイドバーと白いメインコンテンツエリアの構成」のように、管理画面の典型的なレイアウトパターンを言葉で指定すると、それに近いデザインが生成されます。
ランディングページのセクションを作る場合
ランディングページ全体より、セクション単位で生成する方が精度が上がります。「ヒーローセクション：[サービス名]のファーストビュー。キャッチコピー、サブテキスト、CTAボタン（’今すぐ始める’）、右側にプロダクトのモックアップ画像エリア。白背景、アクセントカラーはオレンジ」のように、セクションの役割と構成要素を明示します。
うまくいかないときのチェックリスト
「思ったものが生成されない」と感じるときに確認したいポイントです。
- アプリの目的・用途を書いているか
- 画面の種類（ホーム・詳細・フォームなど）を指定しているか
- 含めたい具体的な要素を列挙しているか
- デザインのトーンや色の方向性を書いているか
- 一度に複数の変更を指示していないか
- 「残す部分」を明示しているか
これらを確認して足りない情報を補完すると、多くの場合で生成精度が改善されます。完璧なプロンプトを一発で書こうとするより、「少ない情報から始めて、修正を重ねながら詳細化する」という反復アプローチの方が、現実的には効率が良いです。
「プロンプトテンプレート」を作っておく
頻繁に使うUIタイプに対して、プロンプトのテンプレートを用意しておくと作業が速くなります。テンプレートは変えない部分（スタイルの基本設定）と変える部分（画面固有の要素）を分けておく構成にすると使いやすいです。
たとえば「モバイルアプリ全般向けのテンプレート」として「[アプリ名]のモバイルアプリ、[画面名]。[含める要素のリスト]。白背景、[ブランドカラー]をアクセントカラーに使用、マテリアルデザインベース、下部固定ナビゲーション（ホーム・[タブ2]・[タブ3]・設定）」というひな形を用意します。この「[ ]」の部分を都度埋める形で使えば、毎回ゼロからプロンプトを書く手間が省けます。
テンプレートはメモアプリに保存しておくと、Stitch を開くたびに参照できます。よく作るUI（管理画面、設定ページ、一覧画面）それぞれのテンプレートを持っておくと、作業効率が上がります。チームで使う場合は共有ドキュメントにテンプレートを置いて、誰でも参照できるようにしておくと、チーム全体のStitch活用の質が底上げされます。
プロンプトを磨くための練習方法
プロンプトの書き方は、実際に試しながら改善していくのが最も効果的です。「良いプロンプト」の感覚は、使うほどに身についていきます。
「同じ目的で違う書き方」を試す
同じUIを生成するために、プロンプトの書き方を変えて複数回試してみます。「シンプルなログイン画面」「メールとパスワードの入力フォーム、ソーシャルログインボタン（Google・Apple）付き、ミニマルなデザイン」「ユーザー認証のためのログイン画面。入力フィールド2つ、プライマリCTAとしてのログインボタン、パスワード忘れリンク、新規登録への誘導リンク、白背景にブルーのアクセント」——この3つのプロンプトで生成される結果を比べると、情報量と生成精度の関係が体感できます。比較することで「どの情報が効いているか」が見えてきます。
気に入ったデザインを「逆分析」する
既存のアプリやWebサイトで気に入ったUIデザインがあった場合、「このデザインをStitchで再現するには何と書けばいいか」を考えてプロンプトを書いてみます。完璧に再現できなくても良くて、「このスタイルを伝えるにはどういう言葉が必要か」を考えることが、プロンプトの語彙を増やす練習になります。気に入ったUIを言語化するプロセスが、デザインの観察力とプロンプトの表現力を同時に鍛えます。
「改善前・改善後」を記録しておく
うまくいったプロンプトとうまくいかなかったプロンプトを記録しておくことで、「自分にとって有効な書き方のパターン」が蓄積されます。メモアプリやスプレッドシートに「プロンプト・生成結果のスクリーンショット・評価」を簡単に記録するだけで、使うほどに引き出しが増えます。この記録が「次回の生成精度を上げるための財産」になります。
シチュエーション別のプロンプト応用例
具体的なシチュエーションに合わせたプロンプトの書き方を追加で紹介します。
ECサイトの商品ページを作る場合
「ファッションECサイトの商品詳細ページ。上部に商品画像を大きく（複数枚スライド形式）、その下に商品名・価格・カラーバリエーション選択・サイズ選択、メインCTAとして「カートに追加」ボタン（オレンジ）、下部にレビューセクション（星評価付き）。白を基調としたクリーンなデザインで、フォントはサンセリフ系」のような書き方が参考になります。ECの商品ページは要素が多いため、含めるべき要素を漏れなくリストアップすることが重要です。
SaaSの料金プランページを作る場合
「クラウドストレージサービスの料金プランページ。フリー・スタンダード・プロの3プランを横に並べたカード形式。各カードに価格・主な機能リスト（5項目）・CTAボタン。スタンダードプランを「おすすめ」として強調表示。ダークブルーをアクセントカラーに使ったプロフェッショナルなデザイン」のように、ページの構造と視覚的な差別化ポイントを明示すると、料金プランページらしいデザインが生成されます。
オンボーディング画面を作る場合
「アプリのオンボーディング1枚目（全3枚の1枚目）。中央に大きなイラストエリア、下部にタイトルと説明文（2〜3行）、画面最下部に「次へ」ボタンと現在の進捗を示すドット（●○○）。明るくポジティブなカラー、グラデーション背景（ライトブルーからパープル）」のように、オンボーディング特有の要素（ページ数表示、進捗ドットなど）を明示します。スライド形式のオンボーディングでは「全何枚の何枚目か」を書くと、それに合ったレイアウトが生成されやすくなります。
プロンプトに使える便利なデザイン用語集
Stitch のプロンプトで使うと意図が伝わりやすいデザイン用語をまとめます。語彙を持っておくと、プロンプトが書きやすくなります。
レイアウト関連
「カード型レイアウト」はコンテンツを四角いカードの中に入れる形式で、リスト表示のモダンな代替として広く使われます。「グリッドレイアウト」は要素を格子状に並べる形式で、画像ギャラリーや商品一覧によく使います。「マスタリー/詳細ビュー」は左にリスト、右に詳細が表示される2カラム形式で、メールアプリや設定画面によく見られます。「スティッキーヘッダー」はスクロールしても画面上部に固定されるヘッダーで、ナビゲーションをいつでも使えるようにするパターンです。
UI要素の名前
「ファブ（FAB: Floating Action Button）」は画面右下に浮かんでいる円形のボタンで、Androidアプリでよく見られます。「スニャックバー」は画面下部に一時的に表示される通知バーです。「ボトムシート」は画面下からスライドアップして表示されるモーダル的なUIで、追加操作を提供するときに使われます。「スケルトンスクリーン」はコンテンツ読み込み中に表示される、コンテンツの形をした灰色のプレースホルダーです。これらの名前を使うと、Stitchが認識してそれに近いUIを生成してくれます。
デザインスタイル
「ニューモーフィズム」は背景に溶け込むような浮き出た立体感のあるデザインスタイルです。「グラスモーフィズム」は背景が透けて見えるすりガラスのようなデザインスタイルで、ぼかし効果が特徴です。「フラットデザイン」は影や立体感を排除したシンプルなデザインで、Googleのマテリアルデザインに近い方向性です。「スキューモーフィズム」は現実の物体の質感を再現するデザインスタイルで、初期のiOSアプリに多く見られました。これらのスタイル名をプロンプトに入れると、そのスタイルに近いデザインが生成されます。スタイル名を知らなくても「質感のある立体的なボタン」「すりガラスのカード」といった説明的な書き方でも意図を伝えられます。デザイン用語を知っていれば手短に伝えられ、知らなくても言葉で説明できる——どちらの書き方でもStitchは対応します。
よくある質問
Q. プロンプトを書くのが苦手な人はどうすればいいですか？
まず「作りたいアプリの目的と画面名だけ」から始めて、それで生成してみることをおすすめします。「家計管理アプリのホーム画面」というシンプルなプロンプトでも何かが生成されます。生成結果を見て「ここが違う」「これは良い」という感想を持ち、その感想をそのまま修正指示として入力します。「もう少し余白を多くして」「ボタンの色をもっと目立たせて」といった日常的な言葉で修正できます。プロンプトを「正確に書かなければ」と思いすぎず、「会話するように指示を出す」感覚で始めると入りやすいです。
Q. プロンプトを英語で書くと何が変わりますか？
英語で書くと、生成精度が上がるケースがあります。Stitch が学習したデータの多くは英語のものが多いため、英語のデザイン用語や説明の方がAIが意図を解釈しやすい場合があります。特に「スタイル名」や「UI要素の名前」は英語で書いた方が認識されやすい傾向があります。「card layout」「sticky header」「floating action button」のような英語の用語を日本語のプロンプトに混ぜて使うだけでも、生成精度が上がることがあります。完全に英語で書く必要はなく、専門用語だけ英語にするという中間的な方法も有効です。
Q. 同じプロンプトで毎回同じ結果が出ますか？
AIの生成には一定のランダム性があるため、同じプロンプトでも毎回まったく同じ結果が出るわけではありません。大きな方向性は同じでも、細部のレイアウトや配色が微妙に変わることがあります。この性質を活かして「同じプロンプトで複数回生成して、気に入ったものを選ぶ」という使い方も有効です。「この生成結果が気に入らない」場合でも、同じプロンプトでもう一度生成してみると違う結果が出て、こちらの方が良いということがあります。
Q. 日本語でプロンプトを書いても大丈夫ですか？
日本語でも使えます。ただし英語の方が生成精度が高い場合があります。まず日本語で試してみて、思ったものが出なければ英語で書き直してみることをおすすめします。デザイン系の語彙（「ヒーローセクション」「カード型レイアウト」「ナビゲーションバー」など）はカタカナのまま使えることが多いです。
Q. プロンプトはどのくらいの長さが適切ですか？
「長すぎる」ことはほとんど問題になりません。情報が多い方が意図が伝わりやすいため、書けることは書いた方が良いです。ただし指示が矛盾していると（「シンプルで、かつ情報量を最大限に詰めたい」など）、AIが判断しきれない場合があります。具体的で一貫した情報を含めることを意識してください。
Q. 参考にしたいデザインがある場合、どう伝えればいいですか？
画像入力機能を使って参考デザインをアップロードするのが最も直接的です。「この画像のスタイルに近い形で、[新しいアプリの目的]の[画面名]を作って」という指示が効果的です。テキストだけで伝える場合は、参考にしているサービス名を書く（「Apple Music のようなダークテーマの音楽アプリ」など）と、AIが既知のデザインパターンを参考にすることがあります。また「〜のような（like〜）」という比喩表現も有効で、「Notionのようなミニマルな設定画面」「Spotifyのような音楽プレイヤー画面」のような書き方でデザインの参考先を伝えることができます。ただし既存サービスのデザインをそのまま模倣することは避け、あくまでスタイルの方向性として参照するにとどめることが重要です。
Q. プロンプトを改善しても結果が変わらない場合はどうすればいいですか？
まず、アプローチを大きく変えてみることをおすすめします。細かい言葉を変えても変化がない場合は、プロンプト全体を書き直して異なる角度から指示してみます。それでも改善しない場合は、画像入力を試してみることも有効です。言葉で伝えにくいイメージは、簡単なスケッチを描いて写真で撮り、それを入力する方が意図が伝わることがあります。また、あまりに独特や複雑なUIを求めている場合、AIが生成できる範囲を超えている可能性もあります。その場合は要件をシンプルにして生成し、後で手動で要素を追加するという分割的なアプローチが現実的です。
