CodexでWebサイトを作る前にそろえる企画書

何を案内するサイトかを企画書に書く

OpenAIは、Codexでアイデアやデザイン資料からWebの試作を作り、対象を絞った変更と確認を進める使い方を紹介しています。利用できる制作・ブラウザ・公開の手段は環境によって異なるため、最初に何を使えるかも確かめます。

写真教室なら、「初めての人が講座の内容と条件を把握し、質問先を開ける」という用途が一例です。その説明が企画書にあれば、制作途中の案も、完成した画面も、同じ目的に沿って話し合えます。

先にそろえたい八つの材料

確定した掲載内容、提案してほしい部分、まだ不明な情報には違いがあります。八つの材料をこの区別と一緒に書くと、どこまで事実として載せてよいかが伝わります。

表は横にスクロールできます。

説明を理解し、窓口へ進むまでを一続きで考える

何の教室で、自分に合うか、どう参加するか、どんな条件があるか。初めての人が知りたい内容には順序があります。各疑問への答えをどこへ置くかが分かれば、一つのページで足りるか、詳しい説明を別にするかも相談できます。

相談ボタンが大きくても、何を相談できるか分からなければ押す理由がありません。文言、開く窓口、そこで求められる入力も一緒に考えられます。窓口が不明な場合は確認事項のまま残し、制作側で連絡先を補わないことも依頼に含められます。

参考サイトは、真似したい役割まで説明する

参考URLと「写真の大きさ」「文字の密度」「説明の順序」のどこが参考になるかという理由があれば、見た目を共有できます。「全部この通り」という依頼では、事業に合わない条件まで混ざる恐れがあります。

参考先の人物、実績、サービス条件は、教室の情報にはなりません。文章や画像の利用権も別に必要です。好みの雰囲気を伝えたことだけでは、他社の事実や素材をそのまま使えることにはなりません。

最初の試作に入れる範囲を選ぶ

最初はトップ、教室内容、利用の流れ、相談先までがあれば、説明から連絡へ進む使い方を確かめられます。記事検索や会員登録がその段階でも要るかは、別に検討できます。

足りない画像を仮素材で補う場合も、仮であることが分かる表示が要ります。存在しない受講生の声や売上実績を完成品のように置く方法ではありません。差し替える箇所が一覧になっていれば、公開前に残る作業も分かります。

• 今回の試作で答えを知りたい問いを一つに絞る。
• その問いに必要な画面・情報・動作を入れる。
• 本番のデータや外部連携が必要な部分を分ける。
• 後から相談する内容と、実装済みの内容を区別する。

Codexへ渡す企画書の依頼例

以下は写真教室の架空の依頼例です。原稿や素材の欄は、使用できる資料へ置き換わります。試作までの依頼か、本番公開も含むかで作業の範囲が異なります。

個人の写真教室のWebサイトを試作したいです。
目的：初めての方が内容・対象・流れを理解し、質問先へ進めること。
使ってよい原稿と素材：［承認済みの内容・画像・相談先を記入］
必要な画面：トップ、教室の内容、参加までの流れ、FAQ、相談への案内。
見た目：［色・参考URL・参考にしたい点を記入］
今回確かめたいこと：スマートフォンで説明を読み、相談先を迷わず開けるか。
資料にない実績や人物、料金、連絡先を作らないでください。未確認は一覧にしてください。
まず不足情報と今回作る範囲を挙げ、その範囲のサイトを作ってください。利用できる環境で表示と主要リンクを確かめ、実施できた確認と未確認を報告してください。本番公開は今回の範囲に含めません。

作り始める前に、作業場所と成果物を確かめる

既存サイトでは、対象のプロジェクトと現在公開している内容が、別の場所にある場合もあります。新規制作でも、画像の保管先、確認用URL、編集するファイルの範囲が分かれば、後の担当者が続きを扱えます。

途中で接続やログインが要ると言われた際は、何の機能のためか説明を求められます。試作の表示と、実際の問い合わせや保存の運用は別です。完成報告でも、どこまで動作したかが分かれていれば取り違えずに済みます。

企画書を使って最初のレビューをする

最初の画面から対象者が分かるか、説明に不足はないか、相談先は正しいかといった問いは、企画書の八つの材料へ戻って検討できます。好みの印象だけでは気づかない違いもあります。

事実の誤り、目的に関わる不足、見た目の好みが一つの修正一覧に混ざると、優先順位が伝わりにくくなります。目的そのものが変わった場合は企画書も改訂し、古い条件と新しい要望が両方残る状態を避けられます。

よくある疑問

プログラミングの知識がないと依頼できませんか

目的、対象者、掲載内容、確かめたい行動は普段の言葉で説明できます。技術を選択する場面では、運用や更新方法も含む説明を受ければ、自分が管理できるかを検討できます。

企画が途中でも作り始めてよいですか

仮案と不明点を区別した試作なら、小さな画面で方向を話し合えます。何を確かめるための試作かが共有され、未確認情報を事実として公開しない条件は残ります。