こんにちは、とまだです。
ChatGPTのサブスクリプション(Plus/Pro)を契約しているけど、チャット機能しか使ってないという方も多いのではないでしょうか?
そのサブスクで 追加料金なしで使えるAIコーディングツール「Codex」 はご存知でしょうか。
最近は AI でのコーディングといえば カーソルやClaude Codeが主流になりつつありますが、Googleトレンドを見るとCodexも特に日本で人気を集めています。
今回は、Codexの基本的な使い方から実際にWebサイトを作るまでを解説します。
忙しい人のために要約
- ChatGPT Plus/Proユーザーなら 追加費用なし でCodexが使える
- IDE版とCLI版の2種類があり、用途で使い分け可能
- 環境構築は5分、Webサイト作成は30分で完成
- トークン制限は5時間ごとにリセットされる仕組み
動画版ではもっと詳しく、よく使う設定やコマンドまで解説してます!
Codexとは?
OpenAIが提供するAIコーディングエージェント「Codex」は、ChatGPTの技術を活用した開発支援ツールです。
CursorやClaude Codeと同じように、自然言語で指示を出すだけでコードを生成してくれます。
2つの使い方を理解しよう
Codexには大きく分けて2つの使い方があります。
IDE版(VS Code拡張機能)
普段使っているVS Codeから直接使える方法です。
サイドパネルにCodexが常駐し、エディタから離れることなくAIと対話できます。
対応エディタ:
- VS Code
- VS Code Insiders
- Cursor
- Windsurf
CLI版(ターミナル)
ターミナルからcodexコマンドで起動する方法です。
より柔軟な操作が可能で、プロジェクト全体を把握しながら開発を進められます。
Claude Codeを使ったことがある方なら、すぐに馴染めるはずです。
どちらから始めるか迷ったら、まずはIDE版から試してみることをおすすめします。
慣れてきたら、より高度な操作ができるCLI版にチャレンジしてみましょう。
5分で完了!環境構築ガイド
ChatGPTサブスクリプションの準備
まず、ChatGPTでPlusまたはProプランに登録します。
月額$20〜で、Codexだけでなく最新のGPT-5も使い放題になります。
ちなみに私は20ドルの Plus プランを使ってCodexを普段は使っていますが、これだけでも十分コーディングはできます。
IDE版のセットアップ
VS Codeを開いて、拡張機能マーケットプレイスで「Codex」を検索します。
OpenAI公式の青いバッジが付いているものをインストールしてください。
インストール後の流れ:
- サイドバーのCodexアイコンをクリック
- 「Sign in with ChatGPT」でログイン
- 認証完了で準備OK
CLI版のセットアップ
Node.jsがインストールされていることを確認してから、以下のコマンドを実行します。
# Node.jsの確認
node -v
npm -v
# Codexをインストール
npm install -g @openai/codex
# 起動
codex
初回起動時にChatGPTアカウントでの認証が必要になります。
実践!3分でウェブサイトを作ってみよう
実際にCodexを使って、モダンなWebサイトを作成してみましょう。
IDE版で作る場合
新しいフォルダを作成してVS Codeで開きます。
Codexパネルを開いて、以下のような指示を入力してみてください。
モダンなUIのウェブサイトを作成してください
HTML、CSS、JavaScriptも使って動きのあるサイトにしてください
数分で、グラデーション背景やスムーズなアニメーション付きのウェブサイトが完成します。
CLI版で作る場合
プロジェクトフォルダで以下のコマンドを実行しましょう。
# プロジェクトフォルダで起動
codex
# プロジェクトを理解させる(AGENTS.mdを作成)
/init
# ランディングページを作成(プロンプト送信)
Codexのランディングページを作成してください。モダンなUIで動きのあるページにしてください
CLI版では、ファイルの生成過程が詳細に表示されるので、何が起きているかを理解しやすいです。
知っておきたい!重要な機能・コマンド
IDE版とCLI版でそれぞれできることは異なりますが、基本的にどちらでも便利な機能がありますので一部ご紹介しておきます。
IDE版の必須機能
| 機能 | 説明 |
|---|---|
| モード切り替え | Agent/Chat/Full Accessから選択 |
| 新規チャット | 鉛筆アイコンで新しい会話を開始 |
| コンテキスト追加 | +ボタンでファイルを会話に含める |
CLI版の必須コマンド
| コマンド | 機能 |
|---|---|
/init |
プロジェクトを理解させる(AGENTS.md生成) |
/model |
AIの賢さレベルを調整 |
/compact |
会話を要約してトークン節約 |
/new |
新しい会話を開始 |
/status |
使用状況を確認 |
他にもありますが、よく使うものでいうとこの辺りですね。
具体的な使い方は動画版で詳しく解説しています。
テクニック:AGENTS.mdでプロジェクトを理解させる
AGENTS.mdは、Codexにプロジェクトの情報を伝える指示書です。
Claude Codeにおける、CLAUDE.mdファイルに相当するものです。
このファイルを作成しておくと、Codexがプロジェクトの文脈を理解して、より適切なコードを生成してくれます。
よくあるトラブルと解決法
トークンの上限に達してしまった
/compactコマンドで会話を要約するか、5時間待ってリセットされるのを待ちます。
効率的に使うコツは、定期的に会話を整理することです。
例:
Windows環境でインストールできない
Node.jsの最新版をインストールし、管理者権限でコマンドプロンプトを実行してください。
それでも解決しない場合は、npmのキャッシュをクリアしてみましょう。
使用制限を理解して効率的に活用
Codexには以下の制限があります。
- 5時間ごとにリセットされる仕組み
- 一度に処理できるトークン数に上限あり
- 同時実行できるタスク数に制限
以下のコマンドを使ってトークン節約をしておきましょう。
- 定期的に
/compactを実行 - 新しいタスクは
/newで開始 - モデルレベルを適切に調整(
/model)
これらを意識することで、制限内で最大限の成果を出せます。
📺 Codex の使い方をもっと学びたい方へ
本記事では基本的な使い方を解説しましたが、Codex にはまだまだ多くの機能があります。
特にコマンドの使い方など、知っておくべき知識が多いので動画版もおすすめです!
動画で学べる内容:
- 実際の操作画面を見ながらの環境構築
- エラーが出たときの具体的な対処法
- IDE版とCLI版の使い分けのコツ
- AGENTS.mdの高度な活用方法
- トークンを節約するテクニック
- 実際にウェブサイトとランディングページを作る様子
チャンネル登録もお忘れなく!最新のAI開発ツールの情報を定期的にお届けしています。
また、参考になりましたら高評価で応援をよろしくお願い致します!








