.webp)
Codexとは？ChatGPTとの違いとホームページ作成に向く理由を初心者向けに解説
ねぇねぇ、佐藤さん！ChatGPTに「ホームページを作って」と聞けばコードは出してくれますよね。だったら、なぜ別にCodexが必要なんですか？
そこが最初は一番分かりにくいよね。ChatGPTは相談や説明が得意で、Codexは許可された作業場所を見て、ファイルを直し、確認まで進める作業相手なんだ。
ChatGPTにもファイルを添付できますよね。それと、Codexがフォルダを読むのは何が違うんですか？
添付した一つの資料について相談するのと、サイト一式の中から関係ファイルを探して直接更新する違いだよ。今日は実際のサイト制作を例に、どちらを使う場面か分けよう。
Codexは、コードを答えるだけのチャットではなく、許可されたプロジェクトのファイルを読み、編集し、コマンドやブラウザなどの道具を使って、結果を確認できるAIエージェントです。
ChatGPTでもHTMLや文章の案を作り、添付ファイルを読んでもらえます。したがって、1ページ分の相談にCodexが絶対必要という意味ではありません。ただし、WordPressサイトのように複数ファイル、複数ページ、共通デザイン、リンク、公開確認を一緒に扱う作業では、完成物がある場所で継続して作業できるCodexが向いています。
この記事では「どちらが高性能か」ではなく、 会話で答えを受け取る作業 と 実際のファイルへ反映して確かめる作業 の違いを整理します。読み終えると、自分のホームページ作成をChatGPTへ相談する段階と、Codexへ任せる段階を判断できます。
結論：ChatGPTは相談窓口、Codexは作業場所に入る制作担当
| やりたいこと | 向く入口 | 受け取るもの |
|---|---|---|
| サイト名や文章を相談する | ChatGPT | 会話内の案、説明、文章 |
| HTMLやCSSの書き方を知る | どちらでも可 | コード例または実ファイルの変更 |
| 既存サイトから関係ファイルを探す | Codex | 調査結果と対象ファイル |
| 複数ページへ共通デザインを反映する | Codex | 更新されたファイル一式と差分 |
| ブラウザでPC・スマホ表示を確認する | Codex | 実画面の検査結果と修正 |
短く言えば、ChatGPTは「どうすればよい？」へ答え、Codexは「この作業場所で、ここまで進めて確認して」へ対応します。相談して終わるならChatGPT、サイトの中身を継続して変更するならCodex、という分け方が最初の目安です。
ChatGPTでもできることを先に正しく知る
ChatGPTを「文章しか書けないAI」と考えるのは正確ではありません。チャットへファイルを追加し、PDFや表を読ませたり、HTML・CSS・PHPのコード例を作らせたり、画像やページ構成を相談したりできます。
- ホームページの目的や対象読者を整理する。
- キャッチコピー、サービス説明、FAQの案を作る。
- 1つのエラー文や短いコードについて質問する。
- 添付した原稿や画像への改善案をもらう。
- 配色、必要ページ、公開までの順番を相談する。
ここまでで完了するならChatGPTで十分です。問題は、回答として受け取ったコードを「どのファイルの、どこへ入れるか」、既存部分を壊していないか、スマホでも表示できるかを確認する段階です。ここからCodexの役割が大きくなります。
Codexは回答ではなくプロジェクトの成果物を更新する
ホームページは一枚の文章ではなく、ページ、画像、CSS、JavaScript、WordPressテーマ、設定、記事データなどが関係し合う成果物です。Codexは許可されたフォルダやリポジトリを作業場所として、その中を調べられます。
my-wordpress-site/
├─ theme/
│ ├─ front-page.php
│ ├─ functions.php
│ └─ style.css
├─ content/
│ ├─ about.md
│ └─ service.md
├─ images/
└─ PROJECT_RULE.md
たとえば「トップページの申込ボタンをスマホで押しやすくして」と頼んだ場合、Codexは関係するテンプレートとCSSを探し、既存ルールを読み、必要な場所だけを編集し、表示を確認する流れを作れます。コードをコピーして貼る人間側の作業を減らせるのが大きな違いです。
トップページだけ直すつもりでも、CSSや共通ヘッダーなど別のファイルが関係するんですね。私はどれを渡せばよいか分からなそうです。
だから最初はサイト用フォルダを開き、「変更せず、関係するファイルを調べて」と頼めるよ。対象を特定してから編集へ進めばいいんだ。
フォルダ全部が見えると、関係ないページまで変わってしまいませんか？
見えることと、全部変えることは別だよ。対象ページ、変更禁止範囲、公開前の確認を依頼文に書き、必要な権限だけで進めよう。
ファイルを読めるとホームページ作成はどう変わるか
| ファイルを読まない相談 | プロジェクトを読んだ作業 |
|---|---|
| 一般的なHTML例を返す | 現在のテンプレート構造に合わせて変更場所を選ぶ |
| 使っている色や余白を毎回説明する | 既存CSSから共通ルールを確認する |
| ページごとに同じ説明を繰り返す | 共通ヘッダーや部品を一度直して各ページへ反映する |
| 前のコードを人が探して貼り直す | 同じプロジェクト内の実ファイルを更新する |
| 完成したかは人が別途確認する | テストやブラウザ確認を作業の続きとして行う |
特にWordPressは、投稿本文だけでなくテーマ、プラグイン、メニュー、画像、カテゴリー、SEO出力がつながります。ページ数が増えるほど、「コードを一つ生成する能力」より「全体の関係を読み、同じルールで変更する能力」が重要になります。
Markdownファイルを使うと判断を次の作業へ残せる
会話の記憶だけに頼ると、新しい作業で「誰向けのサイトか」「どの表現を避けるか」「公開前に何を確認するか」を説明し直すことがあります。そこで、長く使う判断をプロジェクト内のMarkdownファイルへ書きます。
# SITE_RULE.md
対象読者：初めて店を探す地域の保護者
雰囲気：安心感を優先し、派手な点滅は使わない
共通CTA：体験レッスンの空き状況を見る
変更禁止：料金と営業時間は本人確認なしで変えない
公開確認：PC、390px、フォーム、電話リンク
これはAIが勝手に覚える魔法ではありません。人が確認できる普通のファイルへ方針を残し、Codexに毎回読ませる方法です。サイト固有の言葉、デザイン規則、完了条件、前回までの状態を文字として管理できるため、途中で担当やチャットが変わっても確認し直せます。
ブラウザやコマンドなどのツールが「作ったつもり」を減らす
コードが正しく見えても、公開画面ではメニューが重なる、画像が切れる、リンク先が404になることがあります。Codexは利用できる権限とツールの範囲で、ファイル編集の後に検査を続けられます。
- ファイル検索： 同じボタンやURLが使われる場所を探す。
- コマンド： 構文検査、テスト、ビルドなどを実行する。
- ブラウザ： 実際のページを開き、PCとスマホの表示や操作を確認する。
- 画像確認： スクリーンショットや素材を見て、目的と表示の差を判断する。
- 差分確認： 何を変え、何を変えていないかを示す。
ただし、ツールは常に自動で使えるわけではありません。作業環境、接続、権限、承認によって利用範囲が変わります。「ブラウザで確認したか」「公開URLを最後まで見たか」は、依頼時と完了時に確かめてください。
複数ページを直接生成・更新できることがサイト制作で効く
5ページの店舗サイトを例にすると、トップ、サービス、料金、よくある質問、問い合わせで、ヘッダー、色、ボタン、店舗情報を共通にする必要があります。ChatGPTからページごとのコードを別々に受け取ると、表記や部品が少しずつずれることがあります。
Codexなら、先に共通部品とデータの持ち方を決め、同じプロジェクト内で各ページを生成できます。店舗名を一か所のデータから出す、CTAを共通部品にする、全ページのリンクを検査するといった設計が可能です。
| 制作段階 | Codexへ頼む内容 | 人が確認すること |
|---|---|---|
| 設計 | 必要ページと共通部品を一覧化 | 読者と目的に過不足がないか |
| 生成 | 共通ルールから各ページのファイルを作る | 文章、写真、料金、連絡先 |
| 接続 | メニュー、ボタン、関連記事をつなぐ | 読者が迷わず目的へ進めるか |
| 検査 | 構文、リンク、PC・スマホ表示を確認 | 実際の公開画面と事業判断 |
ChatGPTに一ページずつコードを聞くより、Codexにサイト用フォルダ全体のルールを読んでもらう方が、ページ同士をそろえやすいんですね。
その通り。しかも、作って終わりではなく、リンクやスマホ表示を同じ作業の中で確認できる。
でも、最初にフォルダやMarkdownを自分で完璧に用意しないと使えませんか？
完璧でなくて大丈夫。空の作業フォルダを一つ作り、目的を伝えて、必要な構成案を出してもらうところから始められるよ。
ホームページ作成でCodexが不要な場合・向く場合
| 状況 | 判断 | 理由 |
|---|---|---|
| 文章やサイト名を相談したいだけ | ChatGPTで十分 | 実ファイルの変更がない |
| 完成済みHTMLを一度だけ作りたい | どちらでも可 | 受け取った後の設置・確認方法で選ぶ |
| WordPressテーマを既存サイトへ合わせたい | Codex向き | 複数ファイルと現在の構造を読む必要がある |
| 複数ページを同じデザインで増やしたい | Codex向き | 共通部品とページ間リンクを一括管理できる |
| 公開後も修正を繰り返したい | Codex向き | 実ファイル、履歴、検査結果を継続して扱える |
Codexはホームページ作成の入場券ではなく、制作と確認を同じ場所で続けるための道具です。 一枚の相談ならChatGPT、サイトという複数の成果物を育てるならCodex、と考えると選びやすくなります。
初心者が最初にCodexへ渡すものと依頼文
- 新しいサイト専用の作業フォルダ。既存サイトなら、先にバックアップを作る。
- サイトの目的、読んでほしい人、完成させたい最初の1ページ。
- 参考にしたいページと、避けたい雰囲気。
- 料金、個人情報、公開など本人確認が必要な範囲。
- PCとスマホで何を確認すれば合格か。
このフォルダで地域のピアノ教室サイトを作りたいです。
対象読者は小学生の保護者です。
今日はまだファイルを変更せず、必要なページと共通部品を調べてください。
不足している情報は質問してください。
料金、個人情報、外部公開は私の確認なしに決めないでください。
最後に、最初に作る1ページと確認方法を提案してください。
最初から「全部作って公開して」と頼まず、調査と設計を一度確認します。その後、トップページだけを作り、PCとスマホで見て、問題がなければ他ページへ広げます。詳しい制作の順番は CodexでWordPressサイトを作る完全ガイド 、役割分担は Codexへ任せられる作業と本人が決めること で確認できます。
次に進む人は、 第2回：CodexでWordPressを始める前の準備 で、必要なアカウント、作業フォルダ、サーバー、管理画面、権限を「今すぐ必要・後で必要・会話へ渡さない」に分けてください。
サイトを公開する場所はCodexとは別に必要
Codexがパソコン上でサイトのファイルを作っても、それだけでは一般の人がインターネットから見られる状態になりません。WordPressを公開する場合は、通常、レンタルサーバーと独自ドメインを別に用意します。
エックスサーバー
Codexで作ったWordPressサイトをインターネットへ公開する段階で、サーバー未契約の人が確認できる候補です。
向いている人： WordPressの設置先をこれから用意し、公式手順を見ながら公開環境を整えたい人。
利点： WordPressクイックスタート、独自ドメイン、バックアップなど、制作後に必要になる項目を公式情報で順に確認できます。
不要な人： すでにWordPressが安定稼働するサーバーを契約済みの人や、パソコン上だけで練習する人は新規契約不要です。
注意点： Codexの利用契約とは別です。プラン、契約期間、初回総額、更新額、無料ドメインの条件を申込画面で確認してください。
料金： 期間・プラン・キャンペーンで変わるため、申込当日の税込総額を確認してください。
WordPressを公開するサーバー条件を確認する広告・PRを含みます。すでに利用中のサーバーでWordPressが問題なく動いている人や、パソコン上で練習するだけの人は契約不要です。料金・特典・仕様は必ず公式申込画面で確認してください。
契約前は WordPress用レンタルサーバーの選び方 で、初年度総額、更新額、バックアップ、独自ドメイン、申込画面を比較してください。契約や支払いはCodexへ丸投げせず、本人が最終確認します。
公式情報で確認できるCodexの位置づけ
OpenAIの公式資料では、Codexはソフトウェアを構築・公開するためのコーディングエージェントとして案内され、ユースケースにはWebサイトの構築・更新・公開やブラウザを使った確認も示されています。機能や利用可能なツールは更新されるため、次の公式ページを優先してください。
まず専用フォルダを作って、サイトの目的と対象読者を書き、「変更せず構成を調べて」と頼みます。ChatGPTで相談するだけの段階との違いが分かりました。
それなら安全に始められるね。調査結果を見てから、最初の一ページだけ作ろう。
ページができても、サーバー契約や公開確認は別なんですね。いきなり全世界へ出るわけではないと分かって安心しました。
そう。作る、確認する、公開するを分ければ戻れるよ。Codexはその作業をつなぐ相手だけれど、目的と最終判断はサイトの持ち主が持とう。
よくある質問
ChatGPTではホームページを作れないのですか？
作れないわけではありません。構成、文章、HTMLやCSSの例、添付ファイルの分析を依頼できます。既存プロジェクトの複数ファイルを調べ、直接変更し、テストやブラウザ確認まで続けたい場合にCodexが向きます。
Codexを使えばプログラミング知識は不要ですか？
すべてを暗記する必要はありませんが、目的、変更してよい範囲、完成状態を確認する役割は残ります。費用、個人情報、削除、公開は説明を読んで本人が判断してください。
Codexはパソコン内の全ファイルを勝手に読めますか？
作業できる範囲は、開いたプロジェクト、環境の権限、接続したツールなどで決まります。必要なサイト用フォルダだけを作業場所にし、秘密情報や無関係なフォルダを含めない方法が安全です。
ChatGPTへアップロードするファイルと何が違いますか？
ChatGPTでは会話へ追加したファイルについて質問できます。Codexでは許可されたプロジェクト内の実ファイルを探し、関係を読み、編集して同じ場所へ成果物を残す流れを作れます。
Markdownの記憶ファイルは必須ですか？
必須ではありません。作業が一度で終わるなら依頼文だけでも進められます。複数ページや長期運用では、読者、デザイン、禁止事項、公開確認をMarkdownへ残すと説明の抜けを減らせます。
WordPress管理画面も操作できますか？
利用できるブラウザ、ログイン状態、権限、サイト側の構造によります。操作できる場合でも、契約、削除、本番公開など影響が大きい作業は実行前に対象と結果を確認してください。
Codexだけでサイトをインターネット公開できますか？
ファイル作成と公開場所は別です。WordPressなら通常はレンタルサーバーとドメインが必要です。公開方法、権限、DNS、SSL、バックアップを確認してから反映します。
最初に何を頼むのが安全ですか？
「このフォルダを変更せず調査し、必要なページ、関係ファイル、不足情報、最初の一ページ、確認方法を示してください」と依頼します。調査結果が合ってから小さな編集へ進みます。
まとめ：答えが欲しい時はChatGPT、サイトを育てる時はCodex
ChatGPTは相談、説明、文章、コード例、添付資料の分析に使えます。Codexは、許可されたプロジェクトでファイルを読み書きし、複数ページを同じ規則で生成・更新し、コマンドやブラウザなどのツールで結果を確かめる作業に向きます。
ホームページ作成にCodexが必ず必要なのではありません。 相談の回答を受け取るだけでなく、実際のサイト一式へ反映し、確認と修正を繰り返したい時に必要性が高くなります。 まず専用フォルダを用意し、変更なしの調査から始めてください。