Codex入門: はじめての依頼で失敗しにくい頼み方
AI初心者向けに、Codexへサイト修正やコード変更を依頼するときの考え方、プロンプト例、確認の流れをまとめます。
Codexは、コードを書くだけのAIではありません。既存のファイルを読み、変更し、ビルドやテストで確認し、差分を見ながら一緒に進められる「開発作業の相棒」です。
ただし、最初から大きなお願いをすると迷子になりやすいです。初心者が使い始めるなら、「小さく頼む」「完了条件を決める」「差分を見る」の3つだけ覚えれば十分です。
この記事では、Webサイトを少し改善する想定で、Codexへの依頼の流れを整理します。
この図の流れを先に覚えておくと、長い説明を読まなくても「今どの段階の話か」が分かります。
この記事で分かること
- 頼み方の型目的、背景、制約、完了条件の書き方が分かります。
- 任せる範囲初心者が最初に頼みやすい作業と避けたい作業を判断できます。
- 確認の流れ実装後に差分とビルド結果を見る習慣が身につきます。
Codexに向いている作業
最初に頼みやすいのは、次のような作業です。
- 文言を直す
- ページを追加する
- CSSの崩れを直す
- SEO用のmetaタグを整える
- ビルドエラーを読んで修正する
- 同じ形の記事ページや一覧ページを増やす
逆に、初心者が最初から頼むには大きすぎる作業もあります。
- サービス全体の作り直し
- 決済や認証の本番導入
- 仕様が決まっていない大規模機能
- 個人情報や秘密情報を含む外部サービス連携
Codexは強力ですが、魔法の箱ではありません。よい依頼は「作業範囲が見える依頼」です。
最初の依頼テンプレート
迷ったら、次の形で頼みます。
目的:
このサイトに初心者向けの記事一覧ページを追加したいです。
背景:
今はニュース記事が中心です。検索流入を増やすため、長く読まれるガイド記事も置きたいです。
変更してほしいこと:
- /guides/ の一覧ページを作る
- /guides/[id]/ の詳細ページを作る
- トップページから最新ガイドへリンクする
制約:
- 既存のデザインに合わせる
- ニュース記事とは別のコレクションにする
- ビルドが通るところまで確認する
完了条件:
npm run build が成功し、トップ・一覧・詳細ページが表示できること。この形にすると、Codexは「何を作るか」「どこまでやれば完了か」を判断しやすくなります。
依頼に入れるとよい4点
Codexへ依頼するときは、次の4点を入れると失敗が減ります。
| 項目 | 書くこと |
|---|---|
| 目的 | 何を実現したいか |
| 背景 | なぜそれが必要か |
| 制約 | 守ってほしい条件 |
| 完了条件 | 何を確認したら終わりか |
特に大事なのは完了条件です。初心者ほど「いい感じにして」と言いたくなりますが、Codexには「ビルドが通る」「スマホで崩れない」「既存ページと同じカードデザインにする」のような確認可能な条件を渡すほうがうまくいきます。
Plan modeを使う場面
依頼が複雑なときは、いきなり実装せずにPlan modeを使います。
たとえば、次のような依頼です。
まず計画だけ立ててください。
このサイトに初心者向けコンテンツを追加したいです。
SEO、サイト構成、記事テンプレート、トップページ導線まで含めて、実装前に方針を整理してください。計画を見て、「記事はニュースと別にしたい」「トップには2本だけ出したい」「記事の文体はやさしくしたい」といった修正を入れてから実装に進めると、手戻りが減ります。
差分を見る習慣
Codexが作業したあと、必ず差分を見ます。
見るポイントは細かいコードの正しさだけではありません。
- 変更ファイルが多すぎないか
- 関係ないファイルを触っていないか
- 文言がサイトの雰囲気に合っているか
- SEO目的で不自然にキーワードを詰め込んでいないか
- ビルドやテストの確認結果があるか
Codex appでは差分パネルを使って確認できます。気になる箇所があれば、そのまま「この表現をもっと初心者向けに」「この余白を狭く」など追加で頼めます。
初心者におすすめの依頼例
最初の1週間は、次のような小さな依頼で慣れるのがおすすめです。
トップページの見出し文を、初めて来た人にも分かる表現に直してください。
変更後に npm run build を実行してください。記事ページに「この記事で分かること」という短い箇条書きセクションを追加する案を出してください。
まず実装せず、どのファイルを触るか説明してください。スマホ表示でカードの余白が広すぎるので調整してください。
デスクトップ表示は大きく変えないでください。このエラーの原因を説明して、最小の修正で直してください。
修正後に同じコマンドを再実行してください。「小さく頼む」「確認まで頼む」を繰り返すと、Codexの得意不得意が見えてきます。
やってはいけない頼み方
次のような依頼は、初心者ほど避けたほうが安全です。
このサイトを全部いい感じにしてください。売上が伸びるように全部修正してください。エラーがあるので適当に直してください。どれも目的が広すぎて、完了条件がありません。Codexは何かしら進められますが、あなたが確認しづらくなります。
Codexを使うときの安全ルール
初心者のうちは、次のルールを守るだけでも安心です。
- 秘密情報やAPIキーをチャットに貼らない
- 削除やリセットを伴う操作は理由を確認する
- 外部サービスへ送信する処理は一度止めて確認する
- 本番反映前にビルドや表示確認をする
- 分からない差分は「この変更の意図を説明して」と聞く
Codexは作業を速くしてくれますが、最終判断は人間が持つほうがよいです。これは怖がるためではなく、自分のサイトを自分の手元に置くための習慣です。
まとめ
Codexを使い始めるコツは、すごいプロンプトを覚えることではありません。
まずは、次の流れを型にしてください。
- 小さな目的を書く
- 背景と制約を書く
- 完了条件を書く
- Codexに実装と確認を頼む
- 差分を見る
- 気になる点を追加で直す
この型だけで、文言修正、CSS調整、ページ追加、SEO改善の多くは進められます。
完了チェック
- 依頼に目的と背景を書いた
- 守ってほしい制約を書いた
- 完了条件を確認できる言葉にした
- 作業後に差分と確認結果を見た