※この記事にはプロモーションが含まれます。
「もっと勉強してから作ろう。」 HTMLを調べ、CSSを調べ、JavaScriptを調べる。 でも、まだ画面には何もない。 そこで順番を逆にします。 まず小さな1ページを作る。分からないところは、その途中で聞く。 Codexはこの作り方と相性のいいコーディングエージェントです。
Codexは「コードを教えるAI」より「プロジェクトで作業するAI」に近い
OpenAI公式では、Codexはコードを読み、編集し、実行できるコーディングエージェントとして案内されています。CLIは選択したディレクトリ内のコードを読み、変更し、実行できます。IDEやアプリ、クラウドなど複数の使い方も提供されています。
つまり、回答欄にコードを表示して終わるのではなく、実際のプロジェクトを見ながら作業を進められるのが大きな違いです。
今日は、1ページだけ作る
最初から会社サイトを10ページ作ろうとしません。
ファーストビュー、実績、サービス、問い合わせ。それだけのポートフォリオ風LPを作ります。
ChatGPTで構成を考え、Codexに実装を頼みます。
最初の依頼は具体的にする
たとえば次のように伝えます。
「このプロジェクトに1ページのポートフォリオサイトを作ってください。白背景、余白を広く、実績を3件、最後に問い合わせCTA。スマートフォン対応もしてください。」
ここで重要なのは「かっこよくして」だけで終わらせないことです。目的、構成、雰囲気、必要な機能を伝えます。
ブラウザを開く。少し違う。だから直す
最初の画面が表示されます。
でも、思っていたより普通。見出しが小さい。作品画像が弱い。
ここでやり直すのではなく、「ファーストビューの文字をもっと大胆に」「WORKSの画像を大きく」と伝えます。
生成 → 確認 → 修正。Web制作はこの繰り返しです。Codexが便利なのは、2回目以降の修正でも同じコードベースを見ながら進められることです。
スマホで崩れたら、それも教材になる
パソコンではきれいでも、スマートフォンで崩れることがあります。
「375px幅でタイトルがはみ出している。原因を確認して修正して」と頼みます。
修正されたコードを見て、「なぜこのメディアクエリが必要なの？」と聞く。
そうすると、作業のたびに少しずつコードが読めるようになります。
CodexでWeb制作するときの役割分担
| 役割 | 向いている作業 |
|---|---|
| ChatGPT | 企画、構成、コピー、デザイン方向の相談 |
| Codex | ファイル編集、実装、修正、テスト、コード理解 |
| 人 | 目的設定、デザイン判断、品質確認、公開判断 |
Codexだけで完結させない
コードができても、そのサイトを公開する場所が必要です。
WordPressならレンタルサーバー、静的サイトやWebアプリなら目的に合ったホスティングを選びます。
AIエージェントにも役割の違いがある
Codexを使っていると、「他のAIエージェントは何が違う？」という疑問も出てきます。
コードを開発するCodex、クラウドで常時動かすタイプ、会議や資料を整理するタイプ。同じAIエージェントでも役割はかなり違います。
本当のゴールは「Codexを使える」ではない
Web制作で評価されるのは、AIツールの操作数ではありません。
1ページを完成させられる。依頼された修正を直せる。スマホでも表示できる。公開まで持っていける。
その経験が積み重なると、Codexは「勉強する対象」から「仕事を進める道具」に変わります。
まとめ
最初に全部理解する必要はありません。
小さく作り、ブラウザで見て、直す。分からないコードはその場で聞く。
最初の目標は完璧なWebサイトではなく、自分の手元から1つのサイトを外へ出すことです。