前回の記事でお伝えした通り、「AIでプロトタイプを作り、プロに本番化を依頼する」ハイブリッドワークフローは、2026年のWeb制作の最適解です。しかし、このモデルで最初に詰まるのが「AIに何を作らせればいいかわからない」「制作会社に何を伝えればいいかわからない」という二重の壁です。
本記事では、v0・Lovableなどを使った「AIへの発注プロンプト術」と、その成果物をもとに制作会社と対話するための「構造化された依頼フレーム」を具体的に解説します。要件定義書を書いたことがない方でも、このフレームに沿えば動き出せます。
1. なぜ「プロンプト力＝発注力」なのか
AIへの指示（プロンプト）と、制作会社への依頼書は、実は同じ思考回路から生まれます。どちらも「誰に・何のために・何を・どのように作るか」を言語化するプロセスです。AIに伝えられない要件は、人間にも伝えられません。逆に、AIと対話しながら要件を整理することで、制作会社へのブリーフィングが劇的に明確になります。
ある不動産会社の担当者は「v0に指示を書いている途中で、自分が何を作りたかったのか初めてわかった」と話していました。AIへのプロンプト作成は、単なる制作行為ではなく「自社のニーズを掘り起こす内省プロセス」でもあるのです。
2. AIプロトタイピングを成功させる「4層プロンプト構造」
v0やLovableに「かっこいいサイト作って」と投げても、期待通りの結果は出ません。効果的なプロンプトには、4つの層が必要です。以下の構造を意識するだけで、生成物の質が大きく変わります。
| 層 | 問いかけ | 記述例 |
|---|---|---|
| ① 目的層 | 何のために作るか | 「新規顧客の問い合わせ獲得を目的とした、30代経営者向けの士業事務所LP」 |
| ② 構成層 | 何を含めるか | 「ファーストビュー・サービス紹介3項目・実績数字・代表挨拶・FAQ・CTA（電話＋フォーム）」 |
| ③ トーン層 | どんな印象を与えるか | 「信頼感・専門性・温かみ。カラーは紺×ゴールド。フォントはセリフ体。参考：弁護士ドットコム」 |
| ④ 制約層 | 何を避けるか | 「スライダー不要。アニメーションは最小限。モバイルファースト。お問い合わせフォームは必須」 |
この4層を組み合わせると、プロンプトは自然と「小さな要件定義書」になります。これをそのまま制作会社に見せることもでき、「AIへの指示＝制作会社への説明」が同時に成立します。
2.1 プロンプト実例：LP制作の場合
▼ v0へのプロンプト例（コピペで使える）
以下の条件でランディングページのUIを作成してください。
【目的】中小企業の経営者（40〜55歳男性）に、税理士事務所への初回無料相談を申し込んでもらう
【構成】①キャッチコピー+CTAボタン ②選ばれる3つの理由 ③数字で見る実績 ④よくある質問（5項目） ⑤フォームへのCTA
【デザイン】誠実・プロフェッショナル・親しみやすさのバランス。メインカラー：#1a3a5c（ネイビー）、アクセント：#c9a84c（ゴールド）
【制約】アニメーション控えめ。モバイルファースト。フォームはデザインのみ（機能実装不要）。画像はプレースホルダーで可
「機能実装不要」「プレースホルダーで可」といった「今は要らないもの」を明示する制約層が、AIの暴走を防ぎます。AIは指示がなければ「できることを全部やろうとする」傾向があるため、不要な実装を省くことで、後の本番化工数が減ります。
3. プロトタイプ完成後：制作会社への「構造化依頼フレーム」
AIで原型を作った後、どう制作会社に渡すか。「できました、あとはよろしく」では伝わりません。次の5項目フレームを使うことで、初回打ち合わせの解像度が格段に上がります。
| 項目 | 記述内容・目的 |
|---|---|
| ① 生成ツールとプロンプト | 「v0.devで下記プロンプトを使って生成しました」——制作会社がコードの背景を理解するため |
| ② 気に入っている部分 | 「このファーストビューのレイアウトは残したい」——意図しない改変を防ぐ |
| ③ 動いていない・不満な部分 | 「フォームが機能しない」「スマホでメニューが崩れる」——スコープを明確化 |
| ④ 公開後の運用計画 | 「自分でブログを更新したい」「全部任せたい」——CMS選定や保守設計に直結 |
| ⑤ 予算・納期の目安 | 「監査・本番化に〇〇万円・〇週間を想定」——見積もりのすり合わせを早める |
このフレームを事前にドキュメントにまとめておくと、初回打ち合わせが「ゼロからのヒアリング」ではなく「確認と合意のセッション」に変わります。制作会社側からも「こういう依頼が一番スムーズに進む」という声を多く聞きます。
4. 業種別プロンプト設計のポイント
業種によって「何を重視すべきか」は異なります。次の3ケースは、業種ごとのプロンプト設計で特に差が出やすいポイントです。
4.1 飲食・小売（EC含む）
写真・価格・在庫表示が中心になるため、「コンテンツの密度とモバイル操作性」をプロンプトで強調します。「商品画像を大きく見せる」「カートボタンは親指が届く位置に」という表現が有効です。ただし、実際の在庫連携やカート機能はAIでは実装せず、制作会社への依頼スコープとして明記しましょう。
4.2 BtoBサービス・士業
意思決定者（経営者・部長層）への訴求が必要なため、「権威性と信頼の可視化」が鍵です。「導入実績・受賞歴・メディア掲載を目立つ位置に」「CTAは電話番号を最上位に」といった指示が効果的です。過度な装飾はむしろ逆効果になるため、制約層で「シンプルかつ重厚に」を明記します。
4.3 クリエイター・スタジオ系
ここはAIの「均質化」リスクが最も高い業種です。競合と似たデザインになりやすいため、目的層でブランドの独自性（使用カラー・世界観・避けたいイメージ）を詳細に記述することが必須です。「競合〇〇とは明確に違うスタイルにしてほしい」と明示するアプローチも有効です。この業種は特に、デザイン工程のみプロに依頼するパターンB（前回記事）との組み合わせが推奨されます。
生成
5. 「プロンプトの失敗」から学ぶ：よくある5つのミス
実際の相談事例を通じて見えてきた、AIプロトタイピングで繰り返されるミスをまとめます。これらを知っておくだけで、試行錯誤のコストが大きく減ります。
| ミス | 改善策 |
|---|---|
| 「かっこよく」だけ | 美的判断はAIに委ねず、参考URLや具体的な形容詞（重厚感・透明感・温かみ）を添える |
| 一発完成を目指す | 最初のプロンプトは「骨格だけ」。セクションごとに分けて対話的に育てる |
| 機能実装まで依頼する | 「UIデザインのみ。ロジック実装は不要」と明記し、プロトタイプと本番の境界を守る |
| 修正を重ねすぎる | 10回以上のやり取りはコードが複雑化する合図。その段階でプロへのバトンタッチを検討 |
| プロンプトを記録しない | 使ったプロンプトはすべてメモ。制作会社に渡す際の「生成ログ」として活用できる |
6. 制作会社との「継続的な対話」がプロンプト力を育てる
AI活用が上手い依頼者に共通するのは、制作会社との対話を通じてプロンプト力を磨いている点です。「このコードのどこが問題でしたか？」「次に自分で直せる部分はどこですか？」——こうした質問を制作会社にすることで、次回のAI活用が確実に精度を増します。
ハイブリッドモデルは「一度依頼したら終わり」ではなく、非エンジニアとプロが互いの知識を交換しながら進化するサイクルです。制作会社を「外注先」ではなく「学習パートナー」として捉えることで、AIへの指示精度も、制作依頼の質も、時間とともに高まっていきます。
「伝える力」がAI時代の最強スキルになる
AIを使いこなす非エンジニアに必要なのは、プログラミングの知識ではなく「自分の意図を構造化して言語化する力」です。4層プロンプト構造と5項目依頼フレームは、その最初の一歩です。「AIに何を作らせるか」が明確になるとき、「制作会社に何を頼むか」も同時に明確になる——この連動こそが、ハイブリッドワークフローを機能させる鍵です。