🧠 概要
最近話題のノーコードAIツール「Stitch」を使って、打合わせ資料用のWebサイトを自動生成しようとしたら――まさかの大苦戦！
この記事では、AIが理解しやすく・高品質なWebサイトを生成できるように「プロンプトを構造化する方法」を紹介します。
😢 やってみたら、夢が破れた話
Stitchがなかなかに使えるようだということで「本番は無理でもモック制作とか提案とかなら使えるんじゃないの？」はと夢見がちにトライしてみました。
「モダンな企業サイト、よろしく！」と、ここまでではないにしても、かなりおっざぱにStitchに投げたら...
- ヘッダーもフッターもバラバラ
- ページごとにデザインがちぐはぐ
- サイトタイトルすら統一されていない
複数ページを作れる機能はもっているのに何でこんなことに？？
自分で見てもこれはないな～と思うものしか出てこないので、これを提案したところで「なんか、ちぐはぐだね？」ってお客さんに言われる未来が見えた…。
🔍 課題：AIは空気を読んでくれない
AIは賢い。でも「言わずもがな」は伝わらない！
- 各ページのUIがバラバラ
- サイトタイトルが統一されない
- 共通パーツが無視される
上記は普通のウェブ制作者なら「常識」として指示しなくてもまとめるところだけど、Stitchはそんなお作法というものを理解してくれていない。
そのうち学習してくれるのかもしれないけど、今現在は暗黙の了解とか、お作法とか、空気とかはガン無視されている様子です。
🛠 解決策：「Stitch用プロンプトメーカー」を自作
「AIのことはAIにお任せしてみよう」ということで、読んでくれない空気をまとめて理解してもらうため、GeminiとCanvasで簡易的なプロンプト自動生成ツールを自作することにしました。
GPTでもよかったんだけど、Geminiを選んだのは、同じGoogleの仲間たちなら生成したプロンプトとの疎通がとりやすいかなと考えたためです。
目的：
- サイト全体とページごとの指示を構造化して伝える
- 共通パーツを一貫して保持させる
⚙ 機能1：サイト全体の「設定」をプロンプトで定義
1. サイトの目的とターゲットを明確に
サイトタイトル: [サイト名]
サイトの目的: [例：事業紹介と問合せ獲得]
ターゲット層: [例：中小企業のWeb担当者]
2. デザインルールの指定
印象トーン: [例：プロフェッショナル・信頼性・モダン]
カラー: [例：プライマリ #3B82F6、セカンダリ #60A5FA]
3. フォントと共通パーツの定義
Google Fonts: [Noto Sans JPなどのURL]
共通パーツ:
- ヘッダー構成（ロゴ左、ナビ中央、問合せ右）
- フッター構成（企業情報、ポリシー、著作権等）
ここまでやってサイト制作の際の顧客へのヒアリングシート記入同じようなことをしていると気づきました。デザイナーコーダーに資料を渡すとき同様、いえ、空気を読んでくれない以上、それよりも詳細な指示が必要です。
ともあれ、ヘッダとフッタが統一されるだけでもウェブサイトとしての統一感が出てくるはずです。
✅ まとめ
Stitchで高品質なWebサイトを作るには、AIに詳細なルールを伝えるプロンプトが鍵。
読んでくれない空気を読ませる形にする！
今回は基礎工事編まで。
次回は、「ページごとの効率的な生成方法」について書いていきます。