forestbook.me

NEWS最新のブログ記事はこちら

CodexとClaude Codeどちらがおすすめ？Web制作での選び方

公開日: 更新日:
DX#Webサイト制作#Codex#生成AI#AIコーディング#Claude Code

OpenAIのCodexとAnthropicのClaude Codeは、どちらも「プロジェクトのファイルを読み、編集し、コマンドを実行できるAIのコーディングエージェント」で、できることの大枠はよく似ています。どちらがおすすめかは性能の評判で決めるより、すでに契約しているAIサービス、作業する環境、社内のルールに合うかで選び、同じ作業を両方で試して比べるのが確実です。そしてWebサイトの作業では、どちらを選ぶかよりも、公開前に変更を確認する仕組みのほうが結果を左右します。

この記事では、中小企業のWeb制作・システム開発を担当している私（森本）の立場から、次のことを整理します。

  • CodexとClaude Codeの基本と共通点
  • どちらを選ぶかの判断基準と、自社での試し方
  • Web制作の作業で任せてよいこと・任せないほうがよいこと
  • 安全に使うための運用ルールと、公開前の確認項目

なお、AIのコーディングツールは機能や料金、利用できるプランが頻繁に変わります。この記事では変わりにくい考え方を中心に書いていますので、具体的な機能や料金は各社の公式情報で最新の内容を確認してください。

CodexとClaude Codeとは

Codex（OpenAI）

Codexは、OpenAIが提供するAIのコーディングエージェントです。ターミナル（コマンドを入力する画面）やコードエディタ、Web上などから使え、自然な文章で指示を出すと、コードを読んで修正したり、原因を調べたり、テストを実行したりします。なお「Codex」という名前は、2021年ごろにはOpenAIのコード生成用のAIモデルを指していたため、古い記事では別のものとして説明されていることがあります。

Claude Code（Anthropic）

Claude Codeは、Anthropicが提供するAIのコーディングエージェントです。ターミナルやコードエディタなどから使え、プロジェクトのファイルを読んで内容を説明したり、ファイルを編集したり、コマンドを実行したりします。

2つの共通点

項目 Codex Claude Code
提供元 OpenAI Anthropic
できることの大枠 プロジェクトのファイルを読む、編集する、コマンドを実行する、変更内容を説明する
主な使い方 ターミナルやコードエディタから使う（そのほかの使い方は各社の公式情報を参照）
プロジェクトの説明を書くファイル AGENTS.md CLAUDE.md
利用方法 各社のAIサービスの有料プラン、またはAPI（使った量に応じた課金）を通じて使う

どちらも、ファイルの変更やコマンドの実行の前に確認を求めるかどうかを設定で変えられます。この「どこまでAIに自動で任せるか」の設定が、安全に使ううえで最も大切なポイントです。

どちらがおすすめ？選ぶときの判断基準

インターネット上には「こちらが速い」「こちらが賢い」という比較がありますが、評価はモデルの更新で入れ替わることがあり、自社の作業にそのまま当てはまるとも限りません。小規模な会社やWeb担当者が選ぶときは、次の順番で考えると決めやすくなります。

  1. 社内で使ってよいサービスか：すでに会社でChatGPTやClaudeを契約している、取引先との約束で使えるサービスが決まっている、といった事情があれば、それに合わせるのが自然です。
  2. 入力した情報の扱い：業務向けのプランかどうか、入力したコードや文章がAIの学習に使われるかどうかを、利用規約と設定で確認します。
  3. 作業する環境に合うか：ターミナルでの操作に慣れているか、普段使っているコードエディタから使えるかを確認します。
  4. 費用の見通し：定額のプランで使うか、APIで使った分だけ払うかで、毎月の費用の変わり方が違います。作業量が読めないうちは、上限が分かりやすい方法から始めると安心です。
  5. 実際の作業で比べた結果：最終的には、自社のサイトで同じ作業を両方に頼んで比べます。

自社のサイトで試すときの方法

本番のサイトとは別に、サイトのコピー（テスト環境）を用意し、次の3種類の作業を同じ文章で両方に頼みます。

  • 小さな修正：「スマートフォンで見出しの文字が折り返して読みにくいので直したい」
  • 原因の調査：「お問い合わせフォームの送信後に、完了画面が表示されないことがある。原因の候補を挙げてほしい」
  • 既存コードの説明：「このテーマのヘッダー部分のファイル構成を説明してほしい」

比べるときは、次の観点で評価すると差が分かりやすくなります。

観点 確認すること
指示の理解 頼んだことだけをしているか。頼んでいないファイルまで変えていないか
変更の範囲 必要最小限の変更で済ませているか
説明の分かりやすさ 何を、なぜ変えたかを、担当者が理解できる言葉で説明しているか
確認の求め方 判断が必要な場面で、勝手に進めずに質問してくるか
手直しの量 結果を使える状態にするまで、人がどれだけ直す必要があったか

片方が明らかに合うならそちらを、差がなければ、契約や社内ルールの面で扱いやすいほうを選べば十分です。

Web制作の作業で任せてよいこと・任せないほうがよいこと

任せやすい作業 任せないほうがよい作業
既存のコードの構成や処理の説明 本番サーバー上のファイルを直接編集すること
CSSの調整や、決まった形のHTMLの作成 決済や個人情報を扱うフォームの処理を、確認なしで変えること
エラーや不具合の原因の候補を挙げること パスワードやAPIキーなどの秘密情報を扱う作業
リダイレクト設定や構造化データの下書き サイト全体に関わる一括置換を、差分を見ずに反映すること
変更内容の説明文や手順書の下書き サーバーの設定変更を、内容を理解しないまま実行すること

AIが書いたコードを確認するには、HTMLやCSSの基本が読める程度の知識があると安心です。基本の書き方は初心者でも知っておきたいHTML書き方で紹介しています。

安全に使うための運用ルール

本番環境で直接作業させない

作業は必ず手元のパソコンやテスト環境で行い、確認が済んだものだけを本番に反映します。Gitなどで変更の履歴を残しておけば、問題が起きても元に戻せます。履歴を残す仕組みがないサイトでは、作業前にファイルとデータベースのバックアップを取ってください。

最初は「毎回確認する」設定で使う

ファイルの変更やコマンドの実行のたびに確認を求める設定から始め、AIが何をしようとしているかを一つずつ見ます。慣れてきても、削除やサーバーへの反映など、元に戻しにくい操作は自動にしないことをおすすめします。

秘密情報を渡さない

データベースのパスワードやAPIキーが書かれた設定ファイル、お客様の情報を含むデータは、AIが読める場所に置かないか、読まないように指示ファイルで明記します。WordPressの場合は、設定ファイルにデータベースの接続情報が含まれる点に注意してください。WordPressのセキュリティ全般はWordPress脆弱性対策で最優先すべき3つの行動にまとめています。

変更は差分で確認する

AIの説明だけで判断せず、どのファイルのどの行が変わったかを差分で確認します。頼んだ範囲以外の変更があれば、理由を聞いてから採用するか決めます。

1
過信は禁物
AI生成コードは完璧ではない。潜在的なバグや非効率な記述が含まれる可能性を認識する。
2
人間によるレビュー
経験豊富な開発者によるコードレビューを必須とし、品質とセキュリティを担保する。
3
徹底したテスト
単体テスト、結合テスト、システムテストを通じて、コードの動作と安定性を検証する。
4
継続的な改善
デプロイ後も監視を続け、問題発生時には迅速に修正・改善を行う。

画面では気づけない不具合に注意する：自社サイトでの実例

Webサイトの改修で怖いのは、見た目は正常なのに、検索エンジンや計測の面で壊れている不具合です。2026年11月に私が自社サイト（forestbook.me）を点検したところ、次のような問題が見つかりました。

  • ブログの全記事が「正規のURLはトップページ」と宣言する設定（canonical）になっていた
  • サイトの /sitemap.xml が、.htaccess の設定漏れで2月から404（ページが見つからない）になっていた
  • FAQの構造化データが「[object Object]」と出力され、Googleが読めない記事が15本あった
  • ブログにGA4の計測タグが入っておらず、アクセスが計測されていなかった
  • 本番サーバーでPHPのエラー表示がオンになっており、開発用のバックアップファイルも残っていた

これらはAIを使ったかどうかに関係なく、サイトの改修で起きやすい不具合です。どれも画面を見ただけでは気づけません。AIは頼まれた作業を進めるのは得意ですが、頼まれていない場所への影響まで確かめてくれるとは限らないため、公開前に人が次の項目を確認します。

  • パソコンとスマートフォンでの表示、フォームの送信と完了画面
  • ページのタイトル、説明文、canonicalが各ページで正しいか
  • 構造化データがGoogleのリッチリザルトテストでエラーにならないか
  • サイトマップやリダイレクトが正しく動き、意図しない404が出ていないか
  • エラー表示がオフになっているか、不要なファイルが公開場所に残っていないか
  • 計測タグが入っていて、アクセスが記録されているか

成果につながる指示の出し方

AIのコーディングエージェントへの指示は、「目的」「範囲」「守ること」「完了の条件」をそろえると、余計な変更が減ります。

  • 目的：お問い合わせページのフォームの下にある注意書きが、スマートフォンで小さすぎて読めない
  • 範囲：お問い合わせページの注意書きの文字サイズだけを変える
  • 守ること：ほかのページのCSSには影響させない。既存のクラス名は変えない
  • 完了の条件：変更したファイルと行、変更した理由を説明する

毎回同じことを書かなくて済むように、プロジェクトの説明ファイル（CodexならAGENTS.md、Claude CodeならCLAUDE.md）に、サイトの構成、触ってはいけないファイル、確認の方法、コードの書き方の決まりをまとめておくと便利です。担当者が替わっても同じルールで作業できるので、社内の引き継ぎ資料としても役立ちます。AIを業務全体でどう使うかの考え方はAI×DXの進め方で書いています。

よくある質問

CodexとClaude Codeはどちらがおすすめですか？

どちらもファイルを読んで編集し、コマンドを実行できるAIのコーディングエージェントで、大枠でできることは似ています。すでに契約しているAIサービスや社内ルール、作業環境に合うほうを候補にし、自社のサイトのコピーで同じ作業を両方に頼んで比べるのが確実です。差がなければ、契約や管理の面で扱いやすいほうを選べば十分です。

プログラミングの経験が少なくても使えますか？

使えますが、AIが行った変更が正しいかを判断できる程度の知識は必要です。HTMLやCSSの基本が読めること、変更前に戻す方法を知っていることを前提に、最初は既存コードの説明や小さな修正から始めることをおすすめします。サーバーの設定変更など、内容が理解できない作業は任せないでください。

AIが書いたコードはそのまま公開してよいですか？

そのまま公開するのは避けてください。テスト環境で動作を確認し、どのファイルが変わったかを差分で確かめてから本番に反映します。表示だけでなく、タイトルやcanonical、構造化データ、計測タグなど、画面では気づけない部分も公開前に確認します。

社内のコードや情報をAIに読ませても大丈夫ですか？

利用するプランの規約と設定で、入力した内容の扱いを確認してから使ってください。パスワードやAPIキーを含む設定ファイル、お客様の情報を含むデータは、AIが読める場所に置かないか、読まないよう指示ファイルに明記します。取引先から預かったコードの場合は、AIツールで扱ってよいかを事前に確認します。

まとめ

  • CodexとClaude Codeは、どちらもファイルを読み、編集し、コマンドを実行できるAIのコーディングエージェント
  • 選ぶときは評判より、社内で使えるサービスか、情報の扱い、作業環境、費用の見通しを確認する
  • 最終的には自社サイトのコピーで同じ作業を頼み、変更の範囲や説明の分かりやすさで比べる
  • 本番で直接作業させない、最初は毎回確認する、秘密情報を渡さない、差分で確認する
  • canonicalや構造化データなど、画面で気づけない不具合を公開前に確認する

「AIのコーディングツールを使ってサイトを直したいが、安全に進められるか不安」「AIで作った変更を確認してほしい」といったご相談にも対応しています。サイトや業務システムの改修を、確認の手順も含めて進めたい場合は、システム開発・改修のページをご覧ください。