Codexはコード作業を手伝うAI

Codexは、Webサイトやアプリのコード作業を手伝うAIです。ページを追加したり、文章を差し替えたり、デザインを調整したり、エラーの原因を探したりする作業を一緒に進められます。

プログラミング初心者にとって、コードを見るだけで難しく感じる場面は多いはずです。Codexを使うと、どのファイルを直すのか、どんな変更をするのかを相談しながら進められるので、小さなサイト改善に取り組みやすくなります。

ただし、Codexに全部任せればサイトが育つわけではありません。何を作りたいのか、誰に向けたページなのか、変更後に何を確認するのかは、人間が決める必要があります。まずははじめにページでサイト全体の流れを確認しておくと、Codexに頼む内容も整理しやすくなります。

ChatGPTとCodexの違い

ChatGPTとCodexはどちらもAIですが、得意な作業が少し違います。ChatGPTは、企画、文章、記事構成、相談、アイデア出しに向いています。たとえば、記事テーマを考える、YouTube台本を作る、説明文をやさしく言い換える、といった作業です。

一方でCodexは、ファイル修正、ページ追加、デザイン調整、リンク修正、エラー修正のようなコード作業に向いています。Webサイトの中身を実際に変える作業を頼みたいときに力を発揮します。

使い分けるなら、ChatGPTで「何を作るか」「どんな文章にするか」を考え、Codexで「サイトへどう反映するか」を進めるのがおすすめです。副業サイト全体の考え方を整理したい場合は、ChatGPTで副業を始める前に知っておくべき5つのことも参考になります。

Codexでできること

Codexでできることはたくさんあります。たとえば、トップページの文言を直す、ヘッダーのリンクを追加する、記事一覧ページを作る、記事詳細ページに関連記事を表示する、CTAの文章を改善する、といった作業です。

また、SEO設定、sitemap.xml、robots.txt、OGP画像の設定、スマホ表示の調整、TypeScriptエラーの確認なども頼めます。初心者が自分だけで調べると時間がかかる作業も、Codexに具体的に依頼すれば進めやすくなります。

ただし、できることが多いからといって、一度に全部頼むのはおすすめしません。「サイト全体を改善して」ではなく、「/articlesの記事一覧にカテゴリー絞り込みを追加して」「記事末尾CTAの文言を変更して」のように、小さな作業に分ける方が安全です。

Codexで苦手なこと・任せすぎない方がいいこと

Codexにも苦手なことがあります。まず、目的が曖昧な依頼は苦手です。「いい感じにして」「全部直して」のような依頼では、どこをどう変えればよいか判断しにくくなります。

また、法律、税金、医療、投資のように専門的な判断が必要な内容は、Codexに任せきりにしない方が安心です。文章やページは作れても、内容が正しいか、読者に誤解を与えないかは人間が確認する必要があります。

デザインも同じです。Codexは調整できますが、最終的に読みやすいか、スマホで見やすいか、読者に安心感があるかはブラウザで確認します。AIは作業を助ける道具であり、最後の判断をすべて代わりにしてくれるものではありません。

初心者が最初に頼むべき作業

初心者が最初にCodexへ頼むなら、小さくて確認しやすい作業がおすすめです。たとえば、ヘッダーのリンク修正、記事ページの追加、CTA文言の改善、記事カードの表示調整、内部リンクの追加などです。

作業が小さいほど、何が変わったのか確認しやすくなります。たとえば「/articlesに記事一覧ページを作る」「/promptsへのCTAを記事末尾に追加する」「スマホでボタンが押しやすいように余白を調整する」といった依頼です。

すぐ使える依頼文を作りたい場合は、プロンプト集を見ながら、目的や対象ファイルを書き足してみてください。必要な道具を整理したい場合は、おすすめツールページも役立ちます。

Codexへの指示で大事なこと

Codexへの指示では、目的、対象ページ、対象ファイル、変更内容、制約、完了条件、確認方法を書くことが大切です。これらがあると、Codexは何をどこまで作ればよいか判断しやすくなります。

悪い例は「サイトを全部良くしてください」です。良い例は「/articlesの記事一覧ページにカテゴリー絞り込みを追加してください。対象ファイルは app/articles/page.tsx と app/globals.css です。選択中カテゴリーが分かるデザインにし、スマホで横スクロールが出ないようにしてください。作業後に tsc --noEmit を実行し、確認URLを説明してください。」です。

指示文の作り方を詳しく知りたい場合は、Codexへの指示がうまくいかない原因と改善例を読むと、失敗しやすい依頼と改善例が分かります。

変更後に必ず確認すること

Codexで変更したあとは、必ず確認します。まず `npm run dev` で手元の開発画面を開きます。これは、公開前に自分のパソコンでサイトを確認するための起動コマンドです。

次に `tsc --noEmit` でTypeScriptのエラーがないかを確認します。難しく聞こえますが、ざっくり言えば「コードの書き方に大きな問題がないかを見る作業」です。本番に反映するときは、環境によって `vercel --prod` を使う場合や、Vercelの画面から公開する場合があります。

そして一番大切なのは、ブラウザで実際のページを見ることです。リンクが動くか、文章が読めるか、スマホで崩れていないか、ボタンが押しやすいかを確認します。サイト作りの流れを3か月で整理したい場合は、ChatGPTとCodexで小さなサイトを作る3か月計画も参考になります。

まとめ：Codexは小さな改善から使い始める

Codexは、Webサイトやアプリのコード作業を手伝うAIです。ChatGPTが企画や文章、相談に向いているのに対して、Codexはページ追加、ファイル修正、デザイン調整、エラー修正に向いています。

ただし、Codexにすべてを任せるのではなく、小さな作業に分けて依頼し、変更後は必ずブラウザで確認しましょう。最初はヘッダー修正、リンク修正、CTA改善、記事ページ追加のような、確認しやすい作業から始めるのが安心です。

まずはCodexへの指示がうまくいかない原因と改善例を読み、Codexに小さな1タスクを依頼する練習から始めましょう。小さく頼んで、画面で確認して、少しずつ改善する流れを作ることが大切です。