週に10本のUIを作る依頼が来た。Google Stitch がなければ詰んでいた

2026.04.11

「1週間で10本のUIが必要です。」

その依頼を受けたとき、正直なところ「無理かもしれない」と思った。

10本のUI。それぞれ別のページ、別の目的、別の要件。これをデザイナーなしで1週間で納品する。Google Stitch を使う前の自分なら、確実に断っていた仕事だった。

でも、Google Stitch がある今なら、「やれるかもしれない」と思った。実際にやり遂げた。この記事は、その1週間に何をしたかの記録だ。

一言で言えば、量産対応のポイントは「プロンプトの定型化」と「共通スタイルの設定」にある。この2つを最初に整えると、1本あたりの生成時間が大幅に短縮され、品質の安定も担保できる。

どんな依頼だったか

依頼内容は、あるWebサービスのUI全体を刷新するプロジェクトだった。ページ数は10本。それぞれ役割が異なる画面で、共通のブランドガイドラインに沿ったデザインが求められた。

トップ（LP）
ログイン画面
会員登録フォーム（2ステップ）
ダッシュボード（メイン管理画面）
プロフィール設定ページ
通知一覧ページ
検索結果ページ
詳細ページ（コンテンツ表示）
エラーページ（404・500）

納期は7日間。デザイナーはいない。予算はそれほど大きくない。条件だけ見ると相当に厳しい仕事だった。

最初にやったこと：量産のための「共通プロンプト設定」を作る

10本を効率よく量産するために、最初の半日を「下準備」に使った。この準備が、その後の速度を決定的に変えた。

ブランドガイドラインをプロンプトに変換する

クライアントから受け取ったブランドガイドライン（カラーコード・フォント指定・デザインの方向性）を、Google Stitch のプロンプトで使いやすい形に整理した。

具体的には「スタイル基本設定テンプレート」を作った。

「【スタイル統一設定】プライマリカラー:#2563EB（ブルー）、セカンダリカラー:#F8FAFC（ライトグレー）、テキスト:#1E293B（ダークネイビー）、フォント:Noto Sans JP、角丸:8px、シャドウ:subtle（軽め）、全体トーン:クリーン・プロフェッショナル・日本向けBtoB。」

このテンプレートを全ページのプロンプトの冒頭に毎回コピー&ペーストすることで、10本すべてのUIで一貫したデザインが出やすくなった。

ページ種別ごとのプロンプトひな形を作る

ログイン画面・フォーム・ダッシュボードなど、よく使うページタイプのプロンプトのひな形を事前に作った。

たとえば「ダッシュボード系」のひな形は「【スタイル統一設定】＋管理画面のダッシュボード。左サイドナビ（メニュー項目：〇〇）、ページタイトル、〇〇のコンポーネントを配置。」という形式。〇〇の部分を埋めるだけで各ページのプロンプトが完成する。

この準備に約3時間かかったが、その後の10本の生成速度に大きく影響した。

1〜3日目：最も複雑な画面から片付ける

量産作業では「難しいものを先にやる」のが正解だと判断した。

最も複雑だったダッシュボード画面を1日目から着手した。ダッシュボードのUIが固まると、「このサービスのデザインの骨格」が見えてくる。他のページはこれをベースに展開できる。

ダッシュボードで「スタイルの正解」を確定させる

ダッシュボードを生成するとき、複数パターンを出して比較した。3〜4パターン試したうち、「これがこのサービスの雰囲気に合う」と感じたものを選んで「スタイルの正解」として確定させた。

このデザインのスクリーンショットを「参考デザイン」として手元に置き、後続ページを生成するときの基準にした。「ダッシュボードと同じトーンで」とプロンプトに書くだけで、デザインの一貫性が保ちやすくなった。

4〜6日目：量産フェーズへ

ダッシュボードが固まったところで、残り8本を連続して生成した。このフェーズは、ひな形プロンプト＋スタイルテンプレートのおかげで、1ページあたり平均30〜40分で「クライアントに見せられるレベル」まで仕上がった。

1ページあたりの作業フロー

ひな形プロンプト＋スタイルテンプレートで初回生成（5分）
生成されたUIと要件を照合し、足りない要素・違和感のある要素を特定（5分）
修正プロンプトで再生成（1〜2回、10分）
スクリーンショットを保存し、「確認リスト」に記録（5分）
次のページへ移行（合計25〜30分）

このフローを繰り返すことで、6日目の夜には10本すべてのUIが完成した。

品質のばらつきを防ぐ工夫

量産での最大の敵は「ページごとにデザインがバラバラになること」だ。これを防ぐために、毎回プロンプトのスタイルテンプレートを確認し、前のページのスクリーンショットを見ながら「統一感が出ているか」をチェックした。

迷ったときは「ダッシュボードのデザインに合わせる」という基準に立ち返った。この基準点が一つあるだけで、判断が速くなった。

7日目：クライアントへの提案と修正

6日間で10本が揃ったため、最終日はクライアントへの提案準備に使えた。

スクリーンショットをまとめた「UIデッキ」を作成

10本のUIスクリーンショットをGoogleスライドにまとめた「UIデッキ」を作成した。各ページのスクリーンショットと、簡単な説明（ページの目的・主要な要素の説明）を添えた。

クライアントへの提案はこのデッキを使って行い、「修正したい箇所」をその場でフィードバックしてもらった。

修正依頼への対応

クライアントからのフィードバックは「ダッシュボードのKPIカードを4つから3つに変えてほしい」「検索ページのフィルタUIをサイドバーではなく上部に移動してほしい」というものだった。

プロンプトを修正して再生成するだけだったため、その場で「変更後のイメージ」を見せられた。「修正後のデザインを次回の打ち合わせまでに送ります」という待ち時間がなくなった。

よくある質問（FAQ）

Q1. 量産で一番時間がかかったのはどの作業ですか？

意外かもしれませんが、「プロンプトの下準備」と「最初のダッシュボード制作」が最も時間を使いました。逆に言えば、その2つをしっかりやったことで、後の8本が速く進みました。量産作業は「最初の準備への投資」が全体の速度を決めます。

Q2. クライアントへのUIの見せ方で工夫したことはありますか？

「これはAIが生成したラフ案です」という前置きをしてから見せました。完成品ではなくたたき台として提示することで、「細かい部分はこれから詰める」という共通認識を作れました。最終的なHTML実装は別途費用・工数が必要であることも最初から明示しました。

Q3. 10本の中でGoogle Stitch が特に苦手だった画面はありますか？

ダッシュボードの「グラフ・チャートを含むセクション」が一番難しかったです。グラフの種類（棒グラフ・折れ線・円グラフ）は生成できましたが、データのラベルや軸の表示が意図通りにならないことがありました。グラフ部分はモック画像を別途用意して組み合わせる方法を最終的に採用しました。

Q4. 同じスタイル設定を使い続けると、全部同じようなデザインになりませんか？

スタイルテンプレートは「色・フォント・基本トーン」を揃えるものなので、ページの構造・レイアウトはそれぞれ異なります。同じカラースキームを使っていてもLP・ログイン・ダッシュボードは全く異なるUIになります。ブランドの統一感はむしろ「全部同じに見える」ではなく「同じブランドのように見える」ことが目標です。

Q5. 量産した10本を管理するのに使ったツールはありますか？

Notionにシンプルなテーブルを作り、「ページ名・スラッグ・状態（生成済み/修正済み/確認済み）・スクリーンショットへのリンク」を記録しました。複雑な管理ツールは不要で、チェックボックス付きの表で十分でした。

Q6. この規模の仕事をまた受けたいと思いますか？

はい、ただし「Google Stitch を使う前提で受ける」という条件付きです。ツールなしで同じ仕事を受けることは今でもないと思います。Google Stitch があることで、受けられる仕事の幅が広がったことは間違いありません。

Q7. Google Stitch 以外のツールも組み合わせて使いましたか？

Figmaを最終的なスクリーンショットの整形とプレゼン資料作成に使いました。Google Stitch で生成したUIをFigmaにインポートして、細部を整えてから提案資料にまとめました。量産フェーズはGoogle Stitch が主役でしたが、提案フェーズではFigmaが活躍しました。

Q8. Google Stitch での量産に向いているプロジェクトの条件は何ですか？

共通のデザインガイドラインがある、複数ページを作る必要がある、プロトタイプやラフ案として活用できる（最終品質は後工程で高める）、という条件が揃っているプロジェクトが向いています。逆に、ブランドガイドラインがなく毎回ゼロから方向性を決める必要があるケースは、量産には不向きです。