2026年6月1日

チャッピー（ChatGPT）だけでは時代遅れ？AIエージェント『Codex CLI』なら、Webサイト構築から公開まで全部丸投げできる話

「ChatGPTは使っているが、業務を任せられるAIまでは活用できていない」

「生成AIを触っているだけで、開発や業務フローに組み込めていない」

本記事のような AIエージェントを使った実践的な開発手法 を、手を動かしながら学べるAI研修を提供しています。

Furious Greenでは既に、Claude Codeなどを活用したハンズオン形式のワークショップを実施しており、最新のAI活用スキルを実務レベルで習得できます。

お問い合わせはこちら

はじめに：AIは「お喋り相手」から「同僚」へ

皆さんは「チャッピー（ChatGPT）」を使っていますか？

調べ物をしたり、メールの文面を考えてもらったり、とても便利ですよね。でも、「AIができるのはそこまで」だと思っていませんか？

実は、エンジニアの世界では「AIエージェント」と呼ばれる、もっと自律的に動くツールが使われ始めており、以下のようなwebサイトを簡単に作ることができます！

今回は、OpenAIが提供する「Codex CLI」というツールを使って、ターミナルに命令するだけで、Webサイトを作り、全世界に公開するまでの過程を紹介します。「AIってここまでできるのか！」という驚きを共有できればと思います。

1. Codex CLI とは？（チャッピーとの違い）

普段使っているChatGPT（Webブラウザ版）は、あくまでチャットボットです。コードを書いてくれても、それをファイルに保存したり、サーバーにアップするのは人間がやる必要がありました。

しかし、Codex CLIは違います。
これは「あなたのPC（今回はクラウド環境）の中で直接作業してくれるAI」です。

「HTMLファイルを作って」と言えば、勝手にファイルを作成
「デザインを直して」と言えば、ファイルを書き換え
「公開して」と言えば、Gitコマンドを叩いてアップロード

つまり、アドバイザーではなく、「手を動かしてくれる優秀な部下」なのです。

2. 環境準備：「GitHub Codespaces」

「でも、環境構築とか難しいんでしょ？」と思った方、安心してください。
今回は「GitHub Codespaces」を使います。これはブラウザ上で動くVS Code（高性能なエディタ）です。

手順はたったこれだけ：

GitHubにログインし、「New repository（Webサイトの保管場所）」を作成。

「Repository name」を設定（今回は「coffee-ai」とした）し、「public（全世界へ公開を想定）」を選択、「Add README」をONにして、「Create codespace」ボタンをクリック。

これだけで、面倒なインストール作業なしで、ブラウザの中にあなた専用の開発用スーパーコンピュータが立ち上がります。

3. Codex CLI のインストール

次に「New codespace」を押し、「select a repository」で先ほどの「coffee-ai」を選択後、「Create codespace」をクリックします。

💰Codespacesの料金と無料枠の詳しい仕組み

GitHub Freeプラン（個人）には、毎月以下の無料枠がついてきます。

🖥 コンピュート（稼働時間）：120コア時間
目安：約60時間（標準的な2コアマシンの場合）
※毎日2時間使っても無料の範囲内です。
💾 ストレージ（保存容量）：15GB
目安：プロジェクト数個分なら余裕があります。

⏱ 「コア時間」の消費スピードに注意

「1時間使う＝ 1コア時間消費」ではありません。使うマシンの性能によって消費スピードが変わります。

1. 2コアマシン（標準・推奨）
消費量：1時間あたり 2コア時間
無料時間：月に 最大60時間
2. 4コアマシン（高性能）
消費量：1時間あたり 4コア時間
無料時間：月に 最大30時間

💡 初心者へのアドバイス
今回のようなWeb制作であれば、一番スペックの低い「2コア」で十分サクサク動きます。設定を変えずにそのまま使えば、月60時間まで無料で使えます。

準備ができたら、いよいよAIエージェントを呼び出します。
画面下の「ターミナル」に以下のコマンドを入力してEnterを押してください。

npm i -g @openai/codex

「added 1 package...」と出ればインストール完了です。続けて、以下のコマンドで起動します。

codex

すると、画面にOpenAIのロゴが表示されます。ここから最初に一度だけ行う「2つの設定」があります。

① ライセンス認証（ログイン）

起動すると、認証方法を聞かれます。

ChatGPT有料プランの方: ブラウザ認証を選択してログインします。
APIキーを利用する方: OpenAIのサイトで発行したAPIキーをペーストします。

上記２通りを「②モデルの選択」では分けて説明していきます。

② モデルの選択

＜ChatGPTの課金プランを利用する人向け＞

ポート1455の転送設定

Step 1: 認証用ポートを開放する
Codespacesの画面下部にあるパネルで「PORTS（ポート）」タブをクリックします。

「Add Port（ポートの転送）」ボタンを押し、ポート番号 1455 を入力して追加します。

Step 2: 転送用URLをコピーする
追加された 1455 の行にある「Local Address（ローカルアドレス）」の列を見てください。
右クリックしてアドレスをコピーし、控えておきます。
（例: https://...app.github.dev のようなURLです）

Step 3: わざとエラー画面を出す
ターミナルで codex と入力し、認証を開始します。「Browser」を選択してログインを進めてください。
OpenAIの認証が終わると、画面が真っ白になったり「接続が拒否されました」というエラーが出ますが、これで正解です。

Step 4: URLを書き換える
エラーが出ているブラウザのアドレスバーを見てください。
http://localhost:1455/auth/callback... のようになっているはずです。

この http://localhost:1455 の部分だけを、Step 2でコピーしたURLに書き換えて、Enterキーを押してください。

変更前: http://localhost:1455/auth/callback?code=...
変更後: https://your-codespace-url-1455.app.github.dev/auth/callback?code=...

これで認証信号が正しくCodespacesに届き、ターミナル側で「Successfully logged in」と表示されれば成功です！

成功後、「codex」と打てば以下のような選択を迫られますが、「①ユーザーの許可なしでAIが実行」or「②ユーザーの許可ありでAIが実行」という違いがあります。お好きな方を選択します。

＜APIキーを利用する人向け＞

OpenAIのAPIキーをお持ちの方は、codex コマンドで起動した後、矢印キーで「API Key」を選択し、取得しておいたキーをペーストしてください。

⚠️ 注意点
キーをペーストしても、セキュリティのため画面には ***** すら表示されない（カーソルが動かない）ことがありますが、入力はされています。気にせずペーストして Enter キーを押してください。

成功すると、Welcome to Codex CLI! といったメッセージと共に起動します。

モデルと「思考レベル」の最適化

起動した初期状態では、オーバースペックな設定になっていることがあります。
今回は「Web制作」という明確なタスクなので、お財布に優しく、かつ爆速で動く設定に変更しましょう。

Codexが待機している状態で、以下を入力してください。

/model

設定画面が表示されるので、以下の通りに変更します。

① Model（頭脳の選択）

矢印キーでモデルを選択します。おすすめは gpt-5.1-codex-mini です。

以前の GPT-4o などに比べ、コーディングに特化して軽量化されています。
Webサイト構築のようなタスクでは、最上位モデルを使わなくても mini で十分すぎるほどの精度が出ますし、何よりレスポンスが高速です。

② Reasoning Level（思考の深さ）

続いて default を選択してください。

Reasoning（推論）レベルを上げると、AIは答えを出す前に長考しますが、HTMLやCSSを書く作業に「深い悩み」は不要です。default にすることで、サクサクとコードを書いてもらうことができます。より複雑なwebサイトにしたい場合は、自由にレベルを選択してください。

4. 実践：言葉だけでWebサイトを作る

ここからが魔法の時間です。Codex CLIに対して、日本語で指示を出していきます。

① HTMLを作らせる

user> 架空のカフェ「AI Coffee」のWebサイトを作ってください。
構成は「ヒーローセクション（大きな画像とキャッチコピー）」「メニュー紹介」「アクセス情報」の3部構成で、1つのindex.htmlにまとめてください。

これだけで、AIが勝手にフォルダ内に index.html を生成します。

「②ユーザーの許可ありでAIが実行」を選択した場合、以下のように聞かれます。yes側でエンターキーを押せば実行されます。

②修正も言葉で

タイトルを変えたい時も、ファイルを直接いじる必要はありません（いじってもOKですが）。

user> デザインを「サードウェーブコーヒー風」のおしゃれなスタイルにしてください。
全体的に白と濃いグレーを基調にし、余白を広めにとって、清潔感を出して。
メニュー部分はカード形式にして、マウスを乗せると少し浮き上がるアニメーションを追加してください。

これでCSSの記述まで自動で行ってくれます。

③プレビューを確認

作成されたサイトを見るために、以下のコマンドで簡易サーバーを立ち上げます。

python3 -m http.server 5500

ブラウザで確認すると、ちゃんとWebページが表示されています。まだ真っ白なキャンバスですが、ここからAIと一緒に作り込んでいけるのです。

5. 公開：Git操作すらAI任せ

一般的に、Webサイトをインターネット上に公開するには、通常「Git（ギット）」という難しいバージョン管理ツールの操作が必要です。git add して git commit して git push して……初心者が最も挫折するポイントです。

しかし、Codex CLIなら以下のように入力することでも出来ます。

user> 変更を確認してpushしてください

AIが「あなたの意図を理解し、適切なGitコマンドに変換して実行」してくれます。

あとはGitHubの設定画面（Settings > Pages）で「公開（Deploy）」の設定をONにするだけ。

数分後には、あなただけのWebサイトのURLが発行され、世界中の誰でもアクセスできるようになります。

作ったwebサイトを消したい方へ

リポジトリを開く: 削除したいリポジトリのメインページにアクセスします。
Settingsに移動: リポジトリ名の下にある「Settings」タブをクリックします。
Danger Zoneへスクロール: 設定ページを一番下までスクロールします。
Delete this repositoryをクリック: 「Danger Zone」セクションにある「Delete this repository」ボタンをクリックします。
確認: ポップアップが表示されるので、削除するリポジトリ名（例: your-account/repository-name）を正確に入力します。
最終確認: 「delete this repository」ボタンをクリックして、リポジトリを完全に削除します。

まとめ：AIは「作る」ハードルを極限まで下げた

今回行った作業を振り返ってください。

ブラウザを開く
AIに「サイト作って」「公開して」と頼む

実質これだけです。

もちろん、凝ったものを作るにはHTML/CSSやJavaScriptの知識があった方が良いですが、「とりあえず形にして公開する」という0から1のステップは、Codex CLIのようなAIエージェントが劇的に簡単にしてくれました。

「チャッピーですごいね」で止まっているのはもったいないです。

ぜひ、AIという「優秀な部下」を使って、あなた自身の作品を世に出してみてください。

Author

Koki Akimoto

一覧に戻る