【GPT-6 Astra】ChatGPTの最新モデルでWordPressサイトを制作から納品まで実演解説【Codex】

概要

ChatGPT Codexの最新モデル「GPT-6 Astra」を使い、整体サロンを想定したWebサイトを、ヒアリング整理・競合調査・設計・制作・表示崩れ修正・WordPressオリジナルテーマ化・問い合わせフォーム実装・本番公開まで一貫して実演する動画です。見た目だけでなく、クライアントが自分で更新でき、問い合わせが実際に届く「納品レベル」までの7ステップを解説しています。

主なポイント

• Astraはトークン消費が大きい: 重い処理をするため利用枠が急速に減る。設定で「モデルはAstra」「推論の強さは低〜中」「ウルトラは使わない」「サブエージェントはconfig.tomlで軽量モデルのLunaに固定し同時起動2つまで」「ファストモードは使わない(1.5倍消費)」の4点を押さえる。
• 承認設定と作業フォルダの制限: 最初は「承認を求める」で運用し、慣れたら「代わりに承認」へ。作業は指定フォルダ内だけ(サンドボックスをワークスペース内書き込み)にする。
• 制作前の4段構え: 案件概要(brief.md)→競合リサーチ(隣接業種も混ぜ、理由まで書かせる)→サイト設計図→デザインルール(配色・フォント・余白を根拠付き)の順で材料を整え、AIっぽさを消す。
• 画像→スキル→1回で生成: 共通トーンを先に決めて画像を一括生成し、frontend-designスキルを先に読み込ませてからHTML/CSSサイトを1回で作らせる。リサーチ先行により作り直しが減りトークンも節約できる。
• コンピューターユースで表示崩れを自己修正: 375/768/1140pxの3幅で、AI自身が画面を見て確認・修正・ログ出力まで行う。「完璧になるまで繰り返す」と明記するのがコツ。残り2割(日本語フォントの詰め、影、写真の質感)は人間が調整し、画面上のコメント機能で直接指示すると早い。
• ローカル環境(Local)で作ってから本番へ: 本番環境をいきなり触らせない。LocalでWordPressを立て、作業フォルダ内に配置すればCodexと同一プロジェクトで進められる。
• WordPressオリジナルテーマ化: 有料テーマを使わず、静的サイトを元にAstraに専用テーマを作らせる。固定ページは標準ブロックのみで構成しブロックエディターで編集可能に。動きのある部分はテーマ側に持たせる。
• エディタと実サイトの見た目を一致させる: theme.jsonに色・文字サイズ・余白を登録し、エディタ側にもCSSを読み込ませ、並べたスクショで差分がなくなるまで直させる。
• フォーム実装と公開前処理: Contact Form 7、WP Mail SMTP、画像WebP最適化(EWWW)をまとめて導入。ローカルのメール受け皿(Mailpit)で動作確認する。
• 本番移行と届く設定: All-in-One WP Migrationで移行(サーバーのアップロード上限緩和が必要な場合あり)、ログインURL変更プラグインでセキュリティ強化。SMTP認証まで設定し、実際に送信して受信を確認する。クライアントには編集者権限のアカウントを渡す。

実践に使えること

• Codex(またはClaude Code)を使う際は、先に枠を守る設定(推論は低〜中、サブエージェント固定、高速モード不使用)を済ませる。
• 案件ごとに「ヒアリング→brief.md→競合リサーチ→設計図→デザインルール」の順で成果物を作り、それぞれをクライアントへの提案根拠として使う。
• 表示崩れ確認は、幅を数値で指定し「完璧になるまで繰り返す」と指示してコンピューターユースに任せる。
• WordPress納品では、標準ブロックのみ・theme.json整備・エディタCSS読み込みを指示に含め、エディタと実サイトのスクショ比較で仕上げる。
• 公開前はフォーム送信から受信までを自分で必ずテストする(SMTP認証の設定漏れが典型的な原因)。