生成AIに「おしゃれなホームページを作って」と頼んでも、事業で使えるWebサイトはなかなか完成しません。原因はAIの性能よりも、目的、読者、掲載情報、完成条件が指示に入っていないことです。
この記事では、プログラミングを知らない人でも使えるWeb制作プロンプトを、要件整理、構成、文章、デザイン、実装、検査の順に紹介します。テンプレートをコピーして角括弧の中を書き換えれば、AIへ一度に丸投げせず、確認しながらサイトを作れます。
目次
結論：長い万能プロンプトより工程を6つに分ける
Web制作では、次の6工程を別々にAIへ依頼した方が失敗を見つけやすくなります。
- 目的と対象読者を整理する
- 必要なページと導線を決める
- 各ページの原稿を作る
- デザイン方針を言語化する
- コードまたは制作ツールへ実装する
- 公開前に内容と動作を検査する
最初から完成コードを求めると、見栄えは整っていても、問い合わせ先がない、スマートフォンで崩れる、根拠のない実績が入る、といった問題を見落としがちです。工程ごとに出力を確認し、合格した内容だけを次へ渡してください。
プロンプトを書く前に準備する事実
AIへ渡す前に、次の項目を人が決めます。不明な項目は「未定」と書き、AIに推測させないことが重要です。
- サイトの目的：問い合わせ、予約、資料請求、来店など
- 主な読者：業種、悩み、知識レベル、地域
- 提供内容：商品・サービス名、価格、対応範囲
- 信頼材料：運営者情報、資格、実績、事例
- 行動ボタン：何を、どのページで押してほしいか
- 必要ページ：トップ、サービス、料金、よくある質問、会社概要、問い合わせ等
- 禁止事項：書いてはいけない表現、未確認情報、競合名
- 公開条件：納期、予算、更新担当、利用するドメイン
実績、口コミ、資格、価格、所在地は、AIが補完してはいけない情報です。事実を確認できない場合は仮の文章を作らず、「要確認」と表示させます。
1. 要件整理プロンプト
まずAIを制作担当ではなく、要件を整理する聞き手として使います。
あなたは小規模事業者向けWebディレクターです。以下の情報を整理し、Webサイト制作に不足している情報を質問してください。
事業名：[事業名]
事業内容：[提供サービス]
対象読者：[誰の、どんな悩みを解決するか]
サイトの目的：[問い合わせ／予約／購入／資料請求など]
対応地域：[地域またはオンライン]
強み：[確認済みの事実だけ]
公開希望日：[日付]
更新担当：[担当者]
ルール：
- 情報を推測しない
- 架空の実績、口コミ、資格を作らない
- 不明点は「要確認」とする
- 質問は重要度順に最大10個
- 最後に、決定済み／未決定／公開前に確認する項目の3表に整理する回答を受けたら、未決定項目を埋めて同じプロンプトを再実行します。質問に答えられないまま次へ進むと、後工程で文章とデザインを何度も作り直すことになります。
2. サイト構成と導線を作るプロンプト
次の要件をもとに、5ページ以内の小規模事業者向けサイト構成を作ってください。
[確定した要件を貼る]
出力形式：
1. ページ名
2. そのページで解決する読者の疑問
3. 必要なセクションと掲載情報
4. 主な行動ボタン
5. 次に移動させるページ
条件：
- 同じ説明を複数ページに重複させない
- 全ページから問い合わせ方法が分かる
- トップページは「誰向け・何ができる・次の行動」を最初の画面で伝える
- 実績や価格は入力された事実だけを使う
- 不要なページは追加しない初心者はページ数を増やしすぎないでください。公開時点では、読者の疑問に答え、問い合わせや予約へ進める最小構成で十分です。ブログ、採用、会員機能は運用担当と更新頻度が決まってから追加します。
3. ページ原稿を作るプロンプト
以下のページについて、Web掲載用の原稿を作ってください。
ページ名：[ページ名]
対象読者：[対象読者]
読者の疑問：[疑問]
伝える事実：[箇条書き]
読後の行動：[問い合わせ等]
条件：
- 結論を先に書く
- 見出しごとに1つの疑問へ答える
- 抽象的な「高品質」「安心」「最適」は、根拠がなければ使わない
- 架空の数字、実績、口コミ、資格を追加しない
- 専門用語には初心者向けの説明を付ける
- 重要な注意点や適用条件を省略しない
- H1案、H2案、本文、行動ボタン文言、メタディスクリプション案を分けて出す生成結果はそのまま公開せず、事実、読みやすさ、法令・業界ルール、他社表現との類似を人が確認します。「地域最安」「必ず成果が出る」などの断定は、裏付けがなければ削除してください。
4. デザイン指示を作るプロンプト
「かっこよく」「今風に」だけでは人によって解釈が変わります。雰囲気ではなく、優先順位と制約を伝えます。
次の内容から、Webデザイン仕様書を作ってください。
業種：[業種]
対象読者：[対象読者]
最優先の行動：[問い合わせ等]
ブランドカラー：[色。未定なら未定]
使用できる素材：[ロゴ、写真、イラスト]
避けたい印象：[例：派手、堅すぎる]
出力：
- 色の役割（背景、本文、強調、ボタン）
- 見出し、本文、注記の文字サイズ方針
- 余白とカードのルール
- PC・タブレット・スマートフォンの配置方針
- ボタンの通常時、ホバー時、フォーカス時
- 画像がない場合の扱い
- アクセシビリティ上の注意
条件：装飾より読みやすさと行動の分かりやすさを優先する。色だけで状態を伝えない、文字と背景の差を確保する、キーボード操作時のフォーカスを消さない、といった条件も入れます。
5. 実装プロンプト
コード生成AIを使う場合は、技術名だけでなく完成条件を渡します。
以下の仕様を満たすWebページを実装してください。
[承認した構成・原稿・デザイン仕様を貼る]
要件：
- スマートフォン、タブレット、PCで横スクロールを発生させない
- 見出し順をH1→H2→H3にする
- 画像に内容を説明するaltを付ける。装飾画像は空のaltにする
- リンクとボタンをキーボードで操作できるようにする
- フォームは必須項目、入力例、エラー内容を表示する
- APIキー、パスワード、個人情報をコードへ埋め込まない
- 外部ライブラリを使う場合は目的と削除時の影響を説明する
- 変更したファイルと確認手順を最後に一覧化する
最初に実装計画を示し、私の承認前に機能を増やさないでください。WordPressやノーコードツールを使う場合も、同じ完成条件を使えます。AIが提案したプラグインや外部サービスは、料金、商用利用、データ送信先、更新状況を公式情報で確認してから導入します。
6. 公開前検査プロンプト
次のWebページを公開前レビューしてください。
[ページ内容または確認結果を貼る]
「問題／影響／修正方法／確認手順」の4列で、重要度の高い順に整理してください。
確認対象：
- 目的と対象読者が最初の画面で分かるか
- 会社名、価格、連絡先、営業時間などの事実
- 問い合わせ導線とフォーム送信後の案内
- スマートフォン表示と横スクロール
- リンク切れ、誤字、見出し順、alt
- title、meta description、canonical、index設定
- 個人情報の取得目的、プライバシーポリシー、同意
- APIキーやテストデータの残存
- バックアップ、更新担当、障害時の連絡先
未確認の項目は合格にせず「人による確認が必要」としてください。AIのレビューは検査の補助です。フォームを実際に送る、別の端末で開く、電話番号を押す、プライバシー表示を確認する作業は人が行います。
失敗しやすいプロンプトと直し方
「おしゃれなサイトを作って」
目的と合格条件がないため、装飾だけが増えます。対象読者、行動ボタン、必要ページ、避けたい表現を追加します。
「SEOに強くして」
キーワードの詰め込みや不自然な見出しになりがちです。検索者の疑問、ページの役割、内部リンク先、titleと説明文の文字数を個別に指定します。
「全部完成させて」
事実確認と動作確認が省略されます。構成、原稿、実装、検査に分け、各工程で承認条件を設定します。
エラー全文を確認せず「直して」
AIが原因を推測して別の場所を変更します。発生手順、期待結果、実際の結果、エラー文、変更直前の操作を渡し、最小変更を依頼します。パスワード、APIキー、個人情報は必ず伏せてください。
公開前チェックリスト
- [ ] 架空の実績・口コミ・資格・価格がない
- [ ] 誰向けの何のサイトか最初の画面で分かる
- [ ] 問い合わせ、予約、購入への導線が動く
- [ ] スマートフォンで文字切れと横スクロールがない
- [ ] 画像の権利とaltを確認した
- [ ] title、H1、meta descriptionがページ内容と一致する
- [ ] index、canonical、OGP画像を確認した
- [ ] APIキーや個人情報がコードや画面に残っていない
- [ ] フォームの取得目的とプライバシーポリシーを表示した
- [ ] 更新担当、バックアップ、障害時の対応を決めた
まとめ
良いWeb制作プロンプトは、長い魔法の文章ではありません。目的、事実、制約、出力形式、合格条件を工程ごとに渡す設計図です。要件整理から公開前検査まで分割し、人が事実と動作を確認すれば、プログラミング初心者でもAIの出力を制御しやすくなります。
初めてサイトを作る場合はAIでホームページを作る方法、予算を決める段階ではAIホームページ作成にかかる費用、サイトではなく入力・計算機能を作りたい場合はAIでWebアプリを作る方法も合わせて確認してください。
関連記事
