【図解たっぷり】Codex（コーデックス）入門！〜 何ができる？ 無料でできる導入と基本操作も解説〜

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、6月28日まで）

» 「司令塔」側に回る14日間プランを見る

ChatGPT を作っている OpenAI が出している AIコーディングツールの「Codex」 は、Claude Code や AI搭載型コードエディタ Cursor と並んで注目されています。名前だけ見ると難しそうですが、やっていることはとてもシンプルです。

この記事では、以下の内容を図解・スクリーンショットたっぷりで順番に説明します。

• Codex って結局なに？
• なにがそんなにすごいの？
• 自分のパソコンでCodexを試す方法

無料で試せる範囲で、以下のようなミニWebアプリを作る方法も紹介します。
気になっているという方は一緒に試してみてください。

• Codexについて知ろう
• Codexをはじめる前に
• Codex を VSCodeで使ってみよう
• Codexを使ってWeb ページを作る
• まとめ

Codexについて知ろう

最近よく聞くけれど「Codex（コーデックス）って、結局なにができるの？」と思っている方もいらっしゃると思います。まずはCodexの概要と機能の要点を把握しましょう。

Codex って結局なに？

画像元：https://openai.com/ja-JP/codex/

ひとことで言うと、Codexはチャットで指示を出すと、自分でファイルを作ったり直したりしてくれる AI のアシスタント です。実は数年前に同じ「Codex」という名前の別のサービスがあったのですが、そちらはすでに終了しています。
いま私たちが使う Codex は、まったくの別物でChatGPTのアカウントで使える新しい AI ツールです。

「ChatGPTのアカウントを使うなら、シンプルにChatGPTを使えば良いんじゃない？」と思うかもしれませんが、Codex は ChatGPT のようなチャット型AIとはタイプが違います。Codex は 「AIエージェント」 と呼ばれるタイプのAIです。
ここで大事なのが、ふつうのチャット AI との違いです。

• ふつうのチャットAI＝やり方を教えてくれる人。
  「こう作るといいですよ」と手順は教えてくれますが、実際に作るのはあなたです。そのコードを使うには、自分でコピーして、ファイルに貼り付けて、保存して…という続きの作業は全部あなたの仕事だったわけです。
• Codex（エージェント）＝代わりに作業をしてくれる人。
  「これ作って」とお願いすれば、必要なファイルを自分で用意し、中身を書き込み、保存するところまで一気に進めてくれる。あなたがコードをコピーして、それを貼り付ける場所を考えて、と作業する必要はありません。

表にすると、違いはこんな感じです。

このように、Codex は答えを教えてくれるだけでなく 代わりに作業してくれるAIです。これが、最初にお伝えした AIエージェント の正体です。「チャットAI＝相談相手、エージェント＝実際に動いてくれる担当者」とイメージしておくと、この先の話がぐっと分かりやすくなります。

Codexって何がすごいの？ ３つの「できること」

Codex のすごさは、大きく３つに分けられます。

① ゼロから「作れる」

極端な話、あなたが「Web ページを作って」や「○○が出来るアプリを作って」とお願いする。
それだけで、Codexは必要なファイルを自分で作ってくれます。あなたは1行もコードを書いていないのに、動くものが出来上がります。

② 話しかけるだけで「修正できる」

作ったあとも、「ボタンの色をピンクにして」「結果に絵文字をつけて」とふつうの言葉で頼むだけで直してくれます。現行のコードをChatGPTに渡して、出力された修正をコピペして、という作業は必要はありません。
ファイルを読んで、直して、保存するところまで Codex がやる ── これが決定的な違いです。

③ 壊れているコードを「理解して直せる」

すでにあるコード（エラーで動かないものなど）を見せて「直して」と頼むと、どこが悪いのかを分析し、理解したうえで 直してくれます。
作れるだけでなく読んで直せるのが、実務でも頼りになるポイントです。

Cursor や Claude Code と何が違う？

「Cursor も Claude Code も似たようなものでは？」と思いますよね。
ざっくりとした違いはこんなイメージです（細かい性能は日々変わるので目安として捉えてください）。

どれを選ぶのが正解である、ということはありません。
最初は自分がもう持っているアカウントのサービスからはじめて、合う・合わないを判断していけば良いでしょう。
ChatGPT を使っているなら Codex から入るのが自然、というわけですね。

Codexをはじめる前に

無料で試すための準備

Codex は ChatGPT の無料アカウントでも試せます。
今回のデモに必要なものは次の3つだけです。

1. ChatGPTのアカウント（無料でOK）… まだの方はChatGPTからサインアップしておきましょう
2. VS Code（無料のエディタ）…ブログ記事 VSCodeの使い方入門！～ 基本からWeb制作までで解説しています

Live Serverもあると便利
作ったWebページをプレビューするのに、Live Server（VS Code の拡張機能）も導入しておくと便利です。

Live ServerはVSCodeの拡張機能パネルからインストールできます。
「Live Server」と検索し、Ritwick Deyさんが作ったものをインストールしてください。

Codexの利用料金と注意点

Codexは無料で試せますが、あくまでもおためし枠です。

• 無料で使える：ChatGPT の無料アカウントでも、今回のようなローカルの作業は試せます。この記事のデモはすべて無料枠の範囲内です。
• 使える量に上限がある：無料枠は利用量がいちばん小さく、5時間ごと＋週ごとの上限があります。たくさん使うと一時的に止まるので、デモは小さく区切って試すのがコツです。
• 本格的に使うなら有料：もっと使いたくなったら、ChatGPT Plus（$20/月）以上にすると枠が大きく広がります。GitHub 連携などのクラウド機能は有料プランからです。
• Windows でも使えます：以前は不安定でしたが、いまは Windows でもそのまま動くケースが多いです（必要に応じて WSL2 という仕組みを使う方法もあります）。

まとめると、「まず無料で雰囲気をつかむ → 気に入ったら Plus」 が王道です。最初から課金は不要です。

Codex を VSCodeで使ってみよう

ここから実際の導入です。むずかしくありません。

ステップ1：拡張機能から「Codex」を入れる

VS Code の左側にある拡張機能（四角が4つ並んだアイコン）を開きます。
検索ボックスに 「Codex」 と入力します。
発行元が OpenAI のもの（一番上に出てくるはずです）を選んで「インストール」を押します。

ステップ2：ChatGPT でサインインする

インストールすると、VSCodeの右上あたりにに Codex（ChatGPT）のアイコンが表示されます。
こちらをクリックすると、Codexのチャットパネルが開きます。

💡 右側にアイコンが見当たらないときは、VS Code を再起動し、上図のようにプラグインの詳細説明などを開いてください。何も開いていないとアイコンが表示されません。

初回は下図のように、ChatGPTアカウントとの紐づけをするボタンが表示されます。
「ChatGPTを使用してサインイン」を選択してください。

ブラウザで、ChatGPT（OpenAI）のサインイン画面が出ます。
ChatGPTを使用しているアカウントでサインインしてください。

💡 メールアドレスやスマホアプリのChatGPT等での認証が必要な場合があります。画面に表示される指示に従って、認証を行ってください。

完了すると以下のような画面が表示されます。

VSCodeに戻ると、Codex にメッセージを送るチャットボックスが表示されているはずです。

これで VSCode で Codex を使用する準備は完了です。

ステップ3：入力欄まわりのボタンを知っておく

Codex のチャットパネルの入力部分には、いくつかのボタンが並んでいます。
最初にそれぞれの意味を知っておくと安心です。

Codexを使ってWeb ページを作る

いよいよCodexを動かします。
JavaScriptの入門教材としてよく使われる、おみくじWebアプリをCodexで作ってみましょう。

準備：作業用のフォルダを開く

Codex がVSCodeで作業するには、プロジェクトを開いておく必要があります。

お試し用のフォルダ（例：codex-omikuji）を作って、VS Codeで開きます。
フォルダの中に、index.htmlを作成してください。中身は空のままで良いです。

① ゼロからコードを書いてもらう

空のindex.htmlを開いた状態で、Codex のパネルを開きます。

おみくじが引けるWebページを、HTML・CSS・JavaScript で作ってください。
ボタンを押すと「大吉」「中吉」「小吉」「凶」のどれかがランダムで画面上に表示されるようにして欲しいです。

送信すると、Codexが考え始めます。
以下のような確認が出たら、はい（Approve）を押してください。

少し待つと完了報告が表示されます。

以下のように編集したファイル等が表示され、「変更を確認」もしくは「レビューする」ボタンを押すとDiff（差分表示）が確認できます。今回は空ファイルに作成してもらったので全て緑ですが、削除箇所は赤色で表示されます。次以降の操作で見ていきましょう。

• 🟩 緑の行　新しく追加された部分
• 🟥 赤い行　削除された部分

では、生成されたWebページを見てみましょう。
ページの開き方は、上アニメーションのように右クリック → Open with Live Server でも、ファイルをそのままブラウザで開いても、お好きな方法で構いません。

ボタンを押すと、おみくじの結果が表示されるはずです。

1行もコードを書かず、大雑把な指示でも、動くものが出来ました。
ページ全体のデザイン、結果表示のアニメーションも綺麗に出来ていますね。

補足：「ローカルで作業」について

指示を送ると、入力欄の下に 「ローカルで作業」 という表示が出てきます。
これは Codex をどこで動かすかの設定で、ローカル（自分のPC）にしておくのが無難ですし、無料版はクラウド実行が選べないのでそのままで良いです。
無料版、もしくはPlusプランなどで使用量が気になる方は、下部の「残り使用量」から確認ができます。

② 話しかけて直す

次は、出来上がったページを 会話で改善 してみます。
方法は、同じパネルで修正してほしいところを入力して送信するだけです。

HTML / CSS / JS を別ファイルに分割する

まずは、必要なら～と提案されていたファイルの分割をお願いしてみましょう。
基本的には、以下の１行でファイルを分割してくれます。

HTML / CSS / JS を別ファイルに分割してください。

ただ、AIが生成するコードは result や container といった 一般的なクラス名 と、ページ全体に効く CSS で書かれがちです。
このおみくじページ単体なら全く問題ありませんが、あとで別のページを足していくと 同じ名前の指定どうしがぶつかって崩れる・調整が面倒になる ことがあります。

そこで分割と同時に、クラス名をこのページ専用の名前に限定し、CSS もその中だけに効くように 指示を足してお願いして。こうした調整は、早い段階でやっておくほど、あとの修正がラクになります。

HTML / CSS / JS を別ファイルに分割してください。
あわせて、他に影響しにくいように、mainのクラス名をfortuneに変えてほしいです。
CSSは .fortune .result-value {} のように親セレクタ付きでお願いします。

送信すると、作業を進めてくれます。
自分でファイルを作って、「こっちは.jsファイル」「こっちは.cssファイル」とコピペしなくて良いので便利ですね。

index.htmlではCSS/JSの記述がなくなり、分割したページの読み込みタグが追加されています。
style.cssは指示通り、CSSセレクタが .fortune .クラス名と「fortuneクラスの要素の中にある○○」と限定した記述に変わっていることが確認できます。

指示通りファイル分割等がされていることを確認したら、ブラウザ表示を確認します。今回の場合は、変更前と変わらないデザイン・動作が出来ていればOKです。

見た目を変える

もちろん、見た目やアニメーションなどを変えるのもチャットでそのまま指示をすればできます。

「おみくじを引く」ボタンの配色をピンク系に変えてください。
結果が大吉の時だけ、背景色を変えてください。

　↓

Codex がそれぞれのファイルを見て、必要箇所だけを直してくれます。

修正されたページの表示はこんな感じ。
色を指定しなかったので背景色が凶っぽい気もしますが…指示した内容は実装してくれています。

• 自分でファイルのどこにそのコードを入れるか考えなくて良い
• 修正のたびにChatGPT にコードを伝えなくて良い

これがブラウザ等で行う「ただのチャット」との大きな違いです。

③ 壊れたコードを直させる（実務の入口）

最後に、わざとエラーのあるコードを直させてみましょう。
たとえば下のように、JSファイルを間違えたものに書き換えます。

const fortunes = ["大吉", "中吉", "小吉", "凶"];

↓

const fortune = ["大吉", "中吉", "小吉", "凶"];

よくやりがちなスペルミス（ sが抜けている ）パターン。
ボタンを押しても、なんの反応もしなくなります。

このファイルを開いた状態で、Codex にこう頼みます。

「おみくじを引く」ボタンを押しても動かなくなりました。
原因を見つけて直してください。

Codex はファイルを読んで「呼び出している関数名と、定義されている関数名が違う」ことを自分で見つけて直してくれます。

読んで直せる のがわかりますし、説明してくれるのも良いですね。
こういうシンプルなミスほど、発見しにくくて時間がかかることもあるので実務面でも心強いです。

まとめ

AI が書いてくれるなら、もう勉強はいらない？

ここまで試して、こう感じた方もいるかもしれません。
「AI がここまで書いてくれるなら、もう HTML や CSS を覚えなくていいのでは？」

気持ちはわかります。
ですが、今回のデモを振り返ると、答えはむしろ逆だと気づきます。

• デモ②でファイルを分割したとき、ただ「分けて」だけでなく 「クラス名を fortune に変えて、CSS は親セレクタ付きで」 と指示を足しました。これは あとで別ページと干渉する とわかっている人だけが出せる指示です。
• デモ②で見た目を変えたとき、背景色を細かく指定しなかったために 少し凶っぽい配色 になりました。「ここはこう直したい」と気づける目と指示する力の２つがあってこそ、AI を思い通りに動かせます。

Codexにしろ、他社AI にしろ、指示が具体的な人・コーディングやプログラミングの基本的な考え方がわかる人ほど力を発揮します。

基礎がないと何を・どう頼めば良いかが曖昧になり、AIの生成結果が不安定になったり、非効率になってしまうのです。また、「修正をどう指示するか」「出てきたものが合っているか」が判断できず、せっかくの AI を活かしきれません。

Codex は作業を任せられる部下／アシスタントです。
優秀な部下も、的確に指示できて・成果物をチェックできる上司がいてこそ活きます。

Claude Code × AIデザイン
次世代Web制作ワークフロー

GPTやGeminiでデザインを生成し、Claude Codeに「指示」を出して一気に実装から公開まで持っていく。
「AI時代のモダンな開発ワークフロー」と「新しい学び方」を14日で習得します。プロの個別メンタリング付きで、絶対に迷わせません。

結論

• Codex は 言葉でお願いすると自分で作って・直してくれる AIエージェントです。
• すごさは 「作る・直す・理解して直す」 の3つ。
• ChatGPT の無料アカウント＋VS Code 拡張（ローカルモード） で、お金をかけずに試せます。

Codexを使いこなすカギは、何が欲しいかを明確化するWeb制作の基礎力と、出された提案やコードを読める基礎力。だからこそ、いま基礎を学ぶ価値はむしろ上がっています。

全くWeb制作やコーディングの知識が無くても、Webページやアプリが作れまします。
ですが、AI を「部下として使いこなす」人になるためには、Web制作の基礎がある状態で、AIと会話のラリーを行える方が圧倒的に有利です。同じＡＩサービスを使っていても、基礎力の有無で制作物にはかなりの品質差が発生します。

Codexのすごさ、便利さを体験したい
基礎力が必要ってどういうこと？
と思った方は、まずはご紹介した「おみくじページ」のようなものを、作ってみてください。
「すごい！」と「あれ…なんか違う…」という部分の両方を体感できますよ。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。