CodexでWebページ制作を自動化｜5分の失敗と18分42秒の検証

この動画では、画像を作り、HTMLでWebページを組み立てる作業まで行えるAIツール（Codex）に、美容室のトップページ制作を任せる実演をしています。最初は約5分で完成したように見えましたが、必要なデザイン案を作らず、仮のデザインと画像を使っていたため、指示どおりの成功ではありませんでした。

手順を修正して再実行すると、8枚の画像、デザイン案、Webページを組み立てるHTMLが18分42秒で完成しました。一方で、全工程ではAIを使える上限の約20%を消費し、画像サイズや配置、余白など、人が直す箇所も残りました。

実演では、短時間で形になっても、正しい手順で使えるページが完成したとは判断できないことが分かりました。

この記事で分かることは、短時間の完成を成功と判断できない理由、完全自動より承認を挟む方がよい場面、時間とAIを使える上限の消費を抑える工程の分け方、完成後に人が確認すべき点です。

短時間で完成しても、指示どおりか確認する

完成時間や見た目だけでは、制作が成功したとは判断できません。予定していた途中成果物が作られ、指示した素材と手順が使われたかまで確認する必要があります。

最初の実演では約5分でトップページが完成したように見えましたが、保存物を確認するとデザイン案がありませんでした。Codexは、あらかじめ用意した作業手順であるスキルの指示を守らず、仮のデザインと画像を使ってページを作っていました。

発言者は早とちりだったと認め、同じ間違いを繰り返さないよう、作業用の指示を修正して再実行しました。

Webページ制作は最初から最後まで自動にせず、方向性とデザイン案が決まるまでは人が対話と承認を行い、その後の制作を自動化する方が現実的です。

修正後の実演では、最初にヒアリングを追加し、承認を得てから進むようにしました。店名、対象者、雰囲気などを直せる段階で一度対話を挟み、合意後に自動制作へ移っています。

発言者は、完全自動には無理にする意味がなく、デザイン案までは承認制にして、その後を自動化する流れになると整理しています。

重要な読み書きのルールは、作業ルールを書いたファイルに保存してあるだけで安心せず、新しい作業を始める時点で明示して読み込ませます。

実演では、ファイルの読み書きにPowerShellを使うと文字化けが続いたため、Node.jsを使うよう指示しました。作業ルールを書いたAgent.mdも先に添付し、Node.jsへ切り替えた後は文字化けなしで読み込めています。

ただし、発言者は自分の設定に原因がある可能性も述べています。すべての環境で同じ問題が起きるとは断定していません。

デザイン案は実際に作れる範囲で設計し、候補ごとに分けて保存して、後の工程で別の案を誤って参照しない状態にします。

実演では、画像生成AIのGPT Image 2が3つのデザイン案を作りましたが、保存場所がプロジェクトフォルダ外で、3案が1枚の画像にまとまっていました。そこで、3枚の別画像としてプロジェクトフォルダへ保存する修正を記録しました。

1枚にまとめた案は人への提案には使える場合がありますが、後工程のAIが選んだB案ではなく、選んでいないA案を誤って参照する可能性を避けるには、候補を分ける方がよいと判断しています。

最初から機能を増やしすぎず、簡単な骨組みを作ってから必要な要素を追加します。作業を一度に重くしすぎると、精度が悪くなる可能性があります。

実演では、ページ内に地図やインスタを表示する機能を加えることにも触れましたが、最初から難しいものを作らせることは勧めず、簡易的なページを先に作ってから足す流れを提案しています。

大きなトップページまで作れる可能性はある一方、発言者は初心者には難しく、デザイナーや制作会社が取り入れる技術だと見ています。

時間がかかり、AIを使える上限も多く消費する画像生成は、Webページを組み立てる工程と切り分け、速い方法で別に作って差し替える選択肢を持ちます。

Codex内の画像生成は1枚ずつ進み、8分15秒の時点で8枚中5枚が完成し、残り3枚を待っていました。一方、GPTのWeb画面では8枚をまとめて生成し、一度にダウンロードフォルダへ保存できました。

修正後の全工程は18分42秒で、AIを使える上限の約20%を消費しました。発言者は、画像生成を自分で行えば上限の消費は約10%で済むのではないかと見積もっていますが、10%は実測ではなく見立てです。

ページの土台が完成しても、画像の切れ方、配置、余白、文章の行分けを人が確認し、用途に合わせて整える必要があります。

最終成果物には8枚の画像、デザイン案、Webページを組み立てるHTMLがそろいました。一方で、スタッフの頭が切れ、画像サイズが誤っている可能性があり、地図横の画像配置やカード下部の余白にも修正点が残っています。

発言者はページの土台を評価しつつ、ページ完成後の調整が最も重要だと述べ、文章の行分けも含めて人が整える必要を示しています。