AIエージェントでWebサイトを作る。最初に渡すプロンプトと設計の型

AIに「Webサイトを作って」と頼んでも、思った通りにならないことがあります。

原因は、AIの性能だけではありません。頼み方が「大工さんに、いい感じの店を作ってください」と言っている状態になっていることがあります。

大工さんは腕が良くても、何の店なのか、誰が来るのか、レジはどこに置くのか、スタッフは何人なのかが分からないと、使いやすい店は作れません。

AIエージェントも同じです。CodexやClaude CodeにWebサイトを作ってもらう時は、ページの見た目より先に、目的、読者、導線、参考にしたいサイト、守るルールを渡す必要があります。

この記事では、AI副業準備室のような情報サイトを作る時に、最初に渡す情報とコピペ用プロンプトを整理します。

最初に作るのはページではなく設計図

AIエージェントでサイトを作る時、いきなり「トップページを作って」と頼むと、表面だけ整ったページになりやすいです。

本当に先に決めたいのは、次の6つです。

• このサイトは何のためにあるのか
• 誰に読んでほしいのか
• 読んだ人に、次に何をしてほしいのか
• どのサイトの構成や空気感を参考にしたいのか
• どこまでAIに任せて、どこから人が確認するのか
• 秘密情報や個人情報をどう守るのか

AI副業準備室であれば、目的は「AIで怪しい案件に飛びつく人を増やすこと」ではありません。

これからAIを仕事に使いたい人が、自分の仕事の中で小さな成果物を作れるようにすることです。

たとえば、いきなり弁当屋を開くのではなく、まず家の冷蔵庫を見て「何なら作れそうか」を確認するようなものです。

自分ができること、AIに手伝わせられること、人に見せられる形にできること。この3つを分けるだけで、サイトの作り方も記事の内容も変わります。

AIエージェントに渡す情報をそろえる

CodexやClaude Codeは、ファイルを読み、修正し、検証まで進められるAIエージェントです。

ただし、AIはあなたの頭の中を勝手には読めません。目的、文体、禁止事項、使ってよい素材、確認方法を渡すことで、作業の精度が上がります。

特に用意したいのは、次の情報です。

• サイト名と目的
• 想定読者
• 必要なページ
• 収益や登録につながる導線
• 文体のルール
• 使ってはいけない表現
• 本番公開前に確認する項目

このあたりは、あとでAIへの指示のコツを使って整理しておくと、毎回同じ説明をしなくて済みます。

店舗でたとえるなら、新人スタッフに接客ルールを渡しておくイメージです。AIにも「何を大事にする現場なのか」を覚えさせるほど、手戻りが減ります。

もうひとつ大事なのが、参考になるWebサイトのURLを渡すことです。

「おしゃれにして」では解釈が分かれます。でも「このサイトのように、余白が広く、見出しが読みやすく、最初に目的が分かる構成にしたい」と伝えると、AIも判断しやすくなります。

見るべきなのは、色や文章をそのまま真似ることではなく、情報の並び方、読者を迷わせない導線、ボタンの置き方、スマホでの読みやすさです。

料理人にたとえるなら、同じ料理を作らせるのではなく、「最初の一皿で安心感が出る流れを参考にしたい」と伝えるイメージです。

「このURLを参考にして、こちらの目的に合う構成を提案してください」「どこを参考にして、どこを変えるべきかも説明してください」と頼むと、AIを作業員ではなく設計者として動かしやすくなります。

最初のプロンプト例

次のプロンプトは、Webサイト全体の設計から相談したい時の型です。自分のサイト名、読者、目的に合わせて書き換えてください。

AI副業準備室のようなWebサイトを作りたいです。

目的は、これからAI副業やAI活用を始めたい人が、怪しい案件に寄らず、まず小さな成果物を作れるようになることです。

ターゲットは、AIに詳しい人ではなく、会社員、小規模事業者、美容師など、日常業務にAIを使いたい人です。

参考にしたいWebサイトは以下です。

- 参考URL: https://example.com
- 参考にしたい点: トップページで目的がすぐ分かること、スマホで読みやすいこと、記事とコミュニティへの導線が自然なこと
- そのまま真似したくない点: 色、文章、固有のブランド表現、画像

最初に作りたいものは以下です。

1. トップページ
2. 記事一覧
3. 記事詳細ページ
4. Googleログイン
5. コメント欄
6. メール登録
7. Discordコミュニティへの導線

いきなり実装せず、まず全体設計を提案してください。

参考URLのどこを参考にするか、AI副業準備室の目的に合わせてどこを変えるべきかも説明してください。

目的、ユーザー導線、必要なページ、必要なファイル、確認すべきリスク、本番公開前のチェック項目に分けて整理してください。

あなたがAIエージェントとして、より良い構成があると判断した場合は、こちらの案に遠慮せず代案を出してください。

この頼み方のポイントは、「作って」ではなく「先に設計して」と言っていることです。

さらに、参考URLと目的を同時に渡していることも重要です。参考URLだけでは見た目の模倣に寄りやすく、目的だけでは画面のイメージがぼやけます。

参考URL、目的、得たい結果をセットで渡すと、AIは「何を参考にし、何を変えるべきか」を考えやすくなります。ここで違和感があれば、まだコードを書かせる前に直せます。

プロンプトという言葉に慣れていない人は、プロンプトってなに？から読むと、この型の意味がつかみやすくなります。

一発で完成させず、画面を見て直す

AIエージェントで作ると、最初の完成物が出てきます。

でも、そこが完成ではありません。

スマホで見るとヘッダーが詰まっている。メール登録フォームを押しても反応がない。Discordのボタンが分かりにくい。Xでシェアした時に画像が出ない。こういう違和感は、実際の画面を見ないと分かりません。

AIに任せる時ほど、人間が見る場所を決めておく必要があります。

• スマホで上部メニューが読みやすいか
• ボタンを押した時に反応があるか
• 登録後に何が起きたか分かるか
• OGP画像が表示されるか
• Googleログインやコメントが動くか
• 本番公開前に秘密情報が混ざっていないか

特に、.env、APIキー、トークン、顧客名、メールアドレス、生の問い合わせ内容は、AIに見せる画面や記事内に出してはいけません。

見せるべきなのは、秘密情報ではなく、考え方、プロンプト、手順、失敗した時の直し方です。

次にやること

まずは、上のプロンプトを自分の作りたいサイトに合わせて書き換えてください。副業用のポートフォリオでも、店舗の情報サイトでも、社内マニュアルでも構いません。

大事なのは、AIにいきなりページを作らせることではなく、「誰のために、何を得たいのか」を先に整理することです。

毎回ゼロから頼み文を考えるのが面倒なときは、仕事で使えるAIへの依頼文テンプレ集も使えます。貼って書き換えるだけの型を持っておくと、最初の一歩が軽くなります。

このプロンプトを自分の仕事に合わせて直したい人は、AI副業準備室のDiscordで質問してください。

うまくいった例だけでなく、途中で止まった例も役に立ちます。質問のチャットでは、作りたいもの、使っているツール、どこで止まったかを書いてもらえれば、次に何をAIへ頼めばいいかを一緒に整理できます。