Codexは「何となく良くして」が苦手

Codexは、Next.jsのページ作成、文章の差し替え、コンポーネント追加、CSS調整などを手伝ってくれる心強い道具です。40代・50代からAIを使って副業サイトを作りたい人にとって、プログラミングの細かい作業を一緒に進められるのは大きな助けになります。

ただし、Codexは「何となく良くして」「いい感じにして」のような曖昧な依頼が苦手です。人間同士なら雰囲気で伝わることもありますが、Codexには目的、直したい場所、変更内容、守ってほしい条件を具体的に伝える必要があります。

Codexが期待通りに動かないときは、能力が足りないというより、依頼文に必要な情報が足りていないことが多いです。まずは依頼の出し方を整えるだけで、作業の成功率はかなり変わります。

原因1：目的があいまい

最初によくある失敗は、目的を書かずに作業だけを頼んでしまうことです。たとえば「記事ページを修正してください」だけでは、何のための修正なのかが分かりません。読みやすくしたいのか、SEOを強くしたいのか、問い合わせにつなげたいのかで、必要な修正は変わります。

良い依頼では、最初に目的を書きます。たとえば「検索から来た初心者が、ChatGPT副業の始め方を理解し、最後にプロンプト集を見たくなる記事にしたい」のように書くと、Codexは文章量、見出し、内部リンク、CTAを考えやすくなります。

副業サイトを作る前提や考え方がまだ整理できていない場合は、先にChatGPTで副業を始める前に知っておくべき5つのことを読んでおくと、Codexに何を頼むべきかも見えやすくなります。

原因2：変更範囲が広すぎる

次に多いのが、一度に広い範囲を直そうとすることです。「サイト全体を改善してください」「SEOもデザインも記事も全部直してください」と頼むと、Codexは多くのファイルを触る可能性があります。すると、思っていない部分まで変わったり、確認が大変になったりします。

初心者ほど、1回1タスクで依頼するのがおすすめです。たとえば「/articlesの記事一覧にカテゴリー絞り込みを追加してください」「この記事だけ本文を完成版にしてください」「ヘッダーのリンクを確認してください」のように、作業を小さく分けます。

変更してほしいファイルが分かる場合は、対象ファイルも書きましょう。たとえば「対象ファイルは app/articles/page.tsx と app/globals.css です」と伝えるだけでも、作業範囲がかなり絞られます。

原因3：完了条件がない

Codexへの依頼には、完了条件も必要です。完了条件とは「何ができたら作業完了と判断するか」です。これがないと、見た目は変わったけれど本当に目的を満たしているのか分かりません。

たとえばカテゴリー絞り込みなら、「すべてを押すと全記事が表示される」「ChatGPTを押すとChatGPTの記事だけ表示される」「表示件数が出る」「スマホで横スクロールが出ない」といった条件を書きます。記事改善なら、「2,500〜4,000文字程度」「内部リンクを4つ入れる」「誇大表現を避ける」のように書けます。

完了条件を書くと、Codexも最後に何を確認すればよいか分かります。依頼する側も、作業後にチェックしやすくなります。

原因4：確認方法を伝えていない

Codexに修正を依頼した後は、必ず確認が必要です。初心者でも、確認の流れを決めておくと安心です。まず開発画面を開くために `npm run dev` を使います。これは、手元のパソコンでサイトを確認するための起動コマンドです。

次に、TypeScriptのエラーがないかを見るために `tsc --noEmit` を実行します。難しく聞こえますが、ざっくり言えば「コードの書き方に大きな間違いがないか確認する作業」です。最後に本番へ反映するときは、環境によって `vercel --prod` のようなコマンドで公開します。Vercelの管理画面からデプロイする場合もあります。

重要なのは、変更後にブラウザで実際のページを見ることです。リンクが動くか、スマホで崩れないか、文章が読みにくくないかは、画面で見ないと分かりません。Codexには「作業後に確認すべきURLと確認ポイントも説明してください」と頼むと、チェックしやすくなります。

原因5：一度に全部やらせようとしている

Codexは優秀ですが、一度に全部を任せるより、小さく進める方が安定します。たとえば「記事一覧、詳細ページ、プロンプト集、ツールページ、SEO設定を全部作ってください」と頼むと、途中で意図がずれたときに修正が大変です。

おすすめは、1つ作る、確認する、次を頼む、という流れです。記事一覧を作ったらブラウザで確認する。次に記事詳細を作る。次に関連記事を追加する。このように小さく積み上げると、失敗しても戻りやすくなります。

副業サイト全体の進め方を分けて考えたい場合は、ChatGPTとCodexで小さなサイトを作る3か月計画も参考になります。3か月単位で見ると、何を先に作るべきか判断しやすくなります。

良い指示と悪い指示の違い

悪い指示の例は、「お問い合わせページをいい感じに作ってください」です。これだと、誰向けなのか、何を表示するのか、フォームが必要なのか、どのファイルを触るのかが分かりません。

改善例はこうです。「40代・50代の初心者向けサイトに、お問い合わせページを作成してください。目的は、質問・感想・サイト改善相談の窓口を用意することです。フォーム送信機能はまだ作らず、仮メールアドレスを表示してください。対象ファイルは app/contact/page.tsx と app/globals.css です。スマホで1列表示になり、横スクロールが出ないようにしてください。作業後に確認URLと確認ポイントを説明してください。」

このように、目的、対象ページ、変更内容、制約、完了条件、確認方法を入れると、Codexはかなり動きやすくなります。最初は長く感じるかもしれませんが、毎回この型で頼むと失敗が減ります。

Codexに渡す基本テンプレート

以下の型を使うと、初心者でも依頼しやすくなります。「目的：何のために作るか。対象読者：誰に向けたページか。対象ファイル：編集してほしいファイル。変更内容：追加・修正したい内容。制約：やらないこと、壊したくないこと。完了条件：何ができればOKか。確認方法：どのURLで何を見るか。」

たとえば記事を改善したいなら、「目的：検索から来た初心者が内容を理解し、次にプロンプト集を見たくなる記事にする。対象ファイル：lib/articles.ts。変更内容：本文を2,500〜4,000文字にする。制約：誇大表現を避ける。内部リンク：/prompts と /tools を入れる。確認方法：対象記事URLで本文、リンク、関連記事、CTAを見る。」のように書けます。

プロンプトの例文をもっと見たい場合は、プロンプト集にCodex指示用のテンプレートも用意しています。必要な道具や確認に使うサービスを知りたい場合は、おすすめツールもあわせて確認してください。

まとめ：Codexには小さく具体的に頼む

Codexへの指示がうまくいかない原因の多くは、依頼が曖昧なこと、範囲が広すぎること、完了条件や確認方法がないことです。Codexは優秀ですが、何を目指しているのかが分からなければ、期待通りに動くのは難しくなります。

依頼するときは、目的、対象ページ、変更内容、制約、完了条件、確認方法をセットで伝えましょう。そして、1回1タスクで小さく頼み、変更後は必ずブラウザで確認します。`npm run dev` で表示を見て、`tsc --noEmit` で型の問題を確認し、本番反映時はVercelのデプロイや `vercel --prod` の流れを使います。

次の行動として、まずは小さな1タスクをCodexに依頼し、ブラウザで確認する練習から始めましょう。たとえば「記事詳細ページに戻るリンクを1つ追加する」「記事一覧に説明文を1行足す」くらいの小さな依頼で十分です。