半年前に書いていたプロンプトを見返したら、少し恥ずかしくなった。
「シンプルなログイン画面を作ってください」——これが最初の頃の自分のプロンプトだ。今の自分なら絶対こうは書かない。でも当時はこれで十分だと思っていた。
Google Stitch を使い始めて半年が経つ今、プロンプトの書き方は自分でも気づかないうちにかなり変わっていた。「どう変わったか」を整理してみると、それ自体がGoogle Stitch の使い方を覚える過程の記録になっていた。
この記事は、自分のプロンプトの変遷と、その背景にある「気づきの積み重ね」を書いたものだ。
一言で言えば、プロンプトの上達は「曖昧な言葉を具体的な指定に変えていく」プロセスだ。半年で変わった最大のことは、「なんとなく」という表現を使わなくなったことだった。
使い始めた頃のプロンプト
最初の1ヶ月のプロンプトを振り返ると、共通した特徴がある。「短い」「曖昧」「一言で終わる」の3つだ。
- 「シンプルなログイン画面」
- 「おしゃれなダッシュボード」
- 「使いやすい会員登録フォーム」
- 「モダンなランディングページ」
これらのプロンプトで生成したUIは、「悪くはないが意図と違う」ことが多かった。「おしゃれ」の解釈がAIと自分でずれていたり、「シンプル」が期待より地味だったり、「モダン」が想定と違う時代感だったり。
当時の自分はこれを「AIの精度が低い」と思っていた。でも今振り返ると、「プロンプトが不十分だった」というのが正確な原因だった。
「なんとなく」という言葉の曖昧さ
「おしゃれ」「シンプル」「モダン」「使いやすい」——これらの言葉は、人によって全く違うものをイメージする。「おしゃれなカフェ」と言われてイメージするものが、北欧風ミニマルな人もいれば、ヴィンテージ感のある空間をイメージする人もいるように。
プロンプトに書く形容詞が曖昧であるほど、AIの解釈の幅が広がる。それが「意図と違う」出力の原因だった。これに気づいたのは、使い始めて2ヶ月が経った頃だった。
2〜3ヶ月目：「具体性」を意識し始めた頃
「なんとなく」を「具体的に」変えようと意識し始めた頃のプロンプトは、こんな形に変わっていった。
変化前：「おしゃれなダッシュボード」
変化後：「管理画面のダッシュボード。背景はホワイト（#FFFFFF）、プライマリカラーはネイビー（#1E3A5F）。左サイドナビ（メニュー5項目）、右側に4つのKPIカード（ユーザー数・売上・注文数・解約率）、その下に折れ線グラフ。フォントはNoto Sans JP。余白は広め、シャドウはsubtle。」
このプロンプトで生成したUIは、「意図に近い」ものが出てくるようになった。具体的な色・構成・フォントを指定したことで、AIが解釈で迷う余地が減ったからだ。
「形容詞」より「数値・名詞」で指定する
2ヶ月目に体得した原則は「形容詞より数値・名詞で指定する」だった。
- 「シンプル」→「要素は最小限。H2見出し・テキスト・ボタン1つのみ」
- 「余白を多めに」→「セクション間のパディングは64px以上」
- 「明るい色」→「背景:#F8FAFC、アクセント:#3B82F6」
- 「読みやすいフォント」→「フォントサイズ16px、行間1.8」
形容詞は方向性を示すが、数値は正確さを担保する。この違いを意識し始めてから、生成の精度が体感できるほど変わった。
3〜4ヶ月目：「除外指定」を覚えた
具体的な指定ができるようになってから次に覚えたのは、「これは不要」という除外指定だった。
Google Stitch が生成するUIには、指定していない要素が勝手に追加されることがある。「アニメーションっぽい装飾」「過剰なグラデーション」「必要以上に複数のカラーが使われる」——こういった要素が加わると、意図したシンプルさが損なわれる。
「〜なし」「〜を使わない」の指定
除外指定を覚えてから、プロンプトに以下のような文言を追加するようになった。
- 「グラデーション背景は使わない。単色フラットデザイン。」
- 「装飾的なイラストや図形は不要。テキストとシンプルなアイコンのみ。」
- 「3色以上のカラーを使わない。プライマリ・セカンダリ・テキストカラーの3色のみ。」
- 「不要な影（box-shadow）は付けない。完全フラット。」
「何を入れるか」だけでなく「何を入れないか」を指定することで、より意図に近い出力が得られるようになった。これは料理のレシピで「塩は入れない」という指定が味を決めるのと似た感覚だ。
4〜5ヶ月目：参照デザインを「言語化」する技術
「こういうデザインに近いものが欲しい」というとき、参照したいデザインをどう言語化するかを学んだのがこの時期だ。
たとえば「Notionっぽい質感のUI」を作りたいとき、「Notionのようなデザインで」と書いても毎回似たものが出るとは限らない。そこで「Notionのデザインの特徴」を自分で言語化してプロンプトに書くという方法を試した。
「Notionのような質感：白背景・グレーのサイドナビ・セリフなしサンセリフフォント・テキスト中心・装飾最小限・黒に近いダークグレーのテキスト（#37352F）・ホバー時にのみ薄いグレーのハイライト」
参照したいデザインを「その特徴を説明する言葉のリスト」に変換することで、より意図通りの出力が得られるようになった。
「なぜそのデザインが好きか」を言語化する練習
この過程で副産物として起きたのが、「デザインの言語化能力」の向上だった。
参照デザインを言語化しようとすると、「なぜこのデザインが好きなのか」「どの要素がそのデザインらしさを作っているのか」を考えざるを得ない。この思考の繰り返しが、デザインを見る目を育てていた。
Google Stitch を使うことで、プロンプトを書く→出力を見る→「違い」を分析する→プロンプトを修正する、というサイクルが自然に起き、それがデザインリテラシーの向上につながっていた。
5〜6ヶ月目：「目的」から書くようになった
半年経った今の自分のプロンプトで最も変わったのは、「UIの要素」ではなく「UIの目的」から書き始めるようになったことだ。
変化前（要素から書く）：「ヘッダー・メインビジュアル・特徴3点・CTA・フッターのランディングページ」
変化後（目的から書く）：「副業スクールへの無料体験申し込みを増やすためのLP。ターゲットは30代会社員で「時間がない・何から始めればいいか分からない」という悩みを持つ人。ファーストビューで「3ヶ月で副業を始められる」という価値提案を伝え、スクロールするごとに不安を解消し、最後に申し込みフォームに誘導する構成。トーン：信頼感・穏やか・押しつけがましくない。」
目的・ターゲット・流れを先に書いてから構成を考えると、「なんとなくそれっぽいUI」ではなく「このユーザーのためのUI」に近いものが生成されやすくなった。
「誰のためか」を書くと変わること
実際に私がこの変化を体感したのは、「ターゲット」をプロンプトに書いた日だった。「30代会社員・時間がない・初めてのオンラインサービス」というユーザー像を書き加えると、生成されるUIのトーンが変わった。
ごちゃごちゃした要素が減り、情報の優先順位が明確になり、アクションを促すCTAが目立つ配置になった。AIが「ユーザーの視点」を考慮した上でUIを設計しているかのような変化だった。
今の自分のプロンプトの構造
半年の変化を経て、今の自分が使うプロンプトの構造は大体こうなっている。
- ①目的・ターゲット：このUIは誰のためで、何を達成させるためか
- ②構成要素：必要なセクション・コンポーネントのリスト
- ③スタイル指定：カラーコード・フォント・余白・角丸などの具体的な数値
- ④除外指定：使わない要素・避けたい表現
- ⑤追加の文脈：参照デザインの言語化・業種・トーン
この5層構造で書くと、1回目の生成から意図に近いものが出る確率が大幅に上がった。
よくある質問（FAQ）
Q1. プロンプトが長くなりすぎると問題がありますか？
長いプロンプトでも基本的に問題なく処理されます。ただし、矛盾する指定が含まれると出力が不安定になることがあります。「シンプルにしてほしい」と書きながら多数の要素を指定するなど、方向性が相反する指定は避けましょう。長さより「一貫性」の方が重要です。
Q2. プロンプトが上手になるには、何回くらい使えばいいですか？
個人差はありますが、「大きな変化を感じる」のは30〜50回程度の生成を経た後が多いと思います。1回の作業で複数回生成してプロンプトを修正するサイクルを繰り返すことが、最も効率的な上達方法です。「同じ結果を再現しようとする」試みも、プロンプトの書き方を鍛える良い練習になります。
Q3. 自分のプロンプトをテンプレートとして保存する方法はありますか？
Google Stitch の公式機能としての「プロンプト保存」は、2026年4月時点では確認できていません。現状はテキストエディタ（メモ帳・Notion・VSCodeなど）に自分の定番プロンプトテンプレートを保存しておき、使うたびにコピー&ペーストする方法が最も確実です。
Q4. 英語と日本語ではプロンプトの書き方の原則は同じですか？
基本原則は同じです。「具体的に」「数値で」「除外指定を含める」は言語に関わらず有効です。違いがあるとすれば、デザイントレンドの専門用語（”bento grid”や”glassmorphism”など）は英語で指定した方が意図が通りやすい場合があります。
Q5. 一度確定したプロンプトをどう管理していますか？
私はNotionに「プロンプト集」のページを作り、用途別（ダッシュボード用・フォーム用・LP用など）に分類して保存しています。「うまくいったプロンプト」と「失敗したプロンプト」を両方記録しておくと、次に似た案件が来たときの参考になります。
Q6. AIにプロンプトを書いてもらう（プロンプト生成の外注）は有効ですか？
はい、有効です。「こういうUIを作りたい。Google Stitch 用のプロンプトを書いて」とClaudeやChatGPTに依頼すると、詳細なプロンプトを生成してもらえます。ただし、生成されたプロンプトをそのまま使うより、自分でカスタマイズする過程で学びがあります。「AIにプロンプトを書かせる→自分で調整する→結果を見る」という流れが、上達と効率を両立させます。
Q7. プロンプトを工夫しても「思った通りにならない」場合はどうすればいいですか？
「思った通りにならない」場合は3つのアプローチがあります。①プロンプトをさらに具体化する（特に「違う」と感じた部分を言語化して追加指定する）、②より単純な要素に分割して生成する（複雑なUIは部分ごとに生成して組み合わせる）、③別のツールを試す（FigmaやAI生成に特化した他のツールとの使い分けを検討する）。
Q8. プロンプトの書き方を体系的に学べるリソースはありますか？
Google Stitch 専用のプロンプトガイドは2026年4月時点では限られていますが、一般的な「画像生成AIのプロンプト術」や「UIデザインの言語化」に関する記事・書籍が参考になります。また、他の人が公開しているGoogle Stitch の生成事例を見て「どういうプロンプトで作ったか」を推測する練習も効果的です。
「下手なプロンプト」が「うまいプロンプト」を育てた
半年前の「シンプルなログイン画面を作ってください」というプロンプトを、今の自分は恥ずかしいと思った。でも同時に「あれがあったから今がある」とも思う。
「意図と違う出力が来る」→「何が足りないか考える」→「プロンプトを修正する」→「少し近づく」——この繰り返しがプロンプトを育てた。最初から正解は分からない。失敗のプロンプトを積み重ねることが、上手なプロンプトへの道だった。
今でもまだ「あれ、こういう感じじゃなかった」という出力は来る。完璧なプロンプトというものは存在しないし、それでいいと思っている。大事なのは「なぜ違うか」を考え続けることだ。その思考が、プロンプトだけでなく、デザインを考える力そのものを育てていく。
