Codexでホームページを作ってみた！VS Codeで一から制作する手順を解説

VS CodeとCodexで作るサイトを決める

題材は地元の小さな街居酒屋

今回は、地元の人がふらっと立ち寄れる小さな街居酒屋のホームページを題材にします。店主はスキンヘッドの優しいおっちゃんです。初めてのお客さんにも気さくに声をかけてくれる、そんなお店を想定しました。

この居酒屋は説明用の架空の設定です。実在する店舗の制作実績や、完成済みサイトの紹介ではありません。ここからは、VS CodeのCodexに送る依頼文と確認手順を、制作の順番に沿って紹介します。

店主の人柄が伝わるデザインにする

目指すのは、料理のおいしさと店主の親しみやすさが伝わるサイトです。高級店のように緊張する雰囲気よりも、「仕事帰りに一杯寄ってみよう」と感じられる見せ方を考えます。

色はこげ茶、えんじ色を候補にします。木のカウンターや暖簾を思わせる配色です。店主紹介には笑顔の写真が似合いそうですが、実際の素材がない段階では写真の配置枠を用意します。

HTMLからWordPressへ進める

まずはHTMLでホームページの見た目を作り、ブラウザで確認してからWordPressテーマへ移す流れにします。デザイン調整とWordPressへの組み込みを工程として分け、確認したHTMLを移行の基準にします。

test-themeをVS Codeで開く
↓
店舗の設定と制作ルールを伝える
↓
index.htmlとSassで見た目を作る
↓
ブラウザで確認・調整する
↓
WordPressテーマへ移す
↓
ローカルのWordPressで動作を確認する

VS CodeでCodexを使う準備をする

Codexの接続を確認する

VS Code、Codex拡張機能、Sassのビルド環境はセットアップ済みとして進めます。WordPress化後の確認には、ローカルのWordPress環境も使用します。

Codexのサイドバーでログイン状態を確認します。拡張機能のセットアップがまだの場合は、OpenAI公式のIDE拡張機能ガイドを参照してください。

空のtest-themeフォルダを開く

新規の作業ディレクトリとしてtest-themeを作成し、VS Codeで開きます。既存テーマのコードを持ち込まず、要件に合わせて必要なファイルを作成していきます。

Codexの作業対象がtest-themeになっていることを確認してから、要件整理へ進みます。

依頼する場所と変更履歴を確認する

Codexへの依頼は、サイドバーのチャット欄に入力します。作業場所がtest-themeであることを依頼文にも入れると、対象が明確になります。操作やコマンド実行の承認が表示されたら、何を実行するのか確認して選択してください。

Gitを初期化し、HTMLの初稿、デザイン調整後、WordPress化後を節目にコミットします。Codexの変更は差分でレビューし、意図した範囲に収まっているか確認します。

Codexへ居酒屋サイトの要件を伝える

店の雰囲気と見てほしい人を伝える

「居酒屋のサイトを作って」だけでは、賑やかな大衆酒場なのか、落ち着いた料理店なのかが伝わりません。まずはお店の設定と、サイトを見た人に感じてほしいことをまとめます。最初の依頼では、まだファイルを作らず構成を提案してもらいます。

test-themeフォルダで、地元の小さな街居酒屋のホームページを一から作りたいです。
店主はスキンヘッドの優しいおっちゃんで、初めてのお客さんにも気さくに声をかける人です。
仕事帰りに一杯寄りたくなる、温かく親しみやすいサイトにしてください。

まずHTMLでデザインを確認し、その後にWordPressテーマへ移します。
今はファイルを作らず、トップページの構成とデザインの方向性を提案してください。
実在する店舗ではないので、店名・住所・電話番号・価格などは確定情報として作らないでください。

必要な情報をページの順番に並べる

トップページには、お店の雰囲気、料理、店主、来店に必要な情報を載せます。最初にお店の魅力を伝え、読み進めた人がメニューやアクセスを確認できる順番を考えました。

• メインビジュアル：お店の雰囲気と短いメッセージを伝えます。
• お店について：気軽に立ち寄れる街居酒屋の紹介を載せます。
• 料理とお酒：メニューを紹介する枠を用意します。
• 店主紹介：優しいおっちゃんの人柄を伝えます。
• お知らせ：営業に関する案内を載せる場所を作ります。
• 店舗情報・アクセス：営業時間、住所、来店方法をまとめます。

店名や営業時間は未設定のまま進めます。メニューにも「料理名を入力」「価格を入力」と置き、架空の情報を実際の営業案内のように見せないようにします。

AGENTS.mdに制作ルールを残す

構成が決まったら、フォルダ直下のAGENTS.mdに制作ルールをまとめます。HTMLとWordPressで共通にするスタイルや、移行時に維持する命名を先に決めておきます。読み込み仕様はOpenAI公式のAGENTS.mdガイドでも説明されています。

test-theme直下にAGENTS.mdを作成し、以下のルールを記録してください。

- まずindex.htmlでデザインを作り、確認後にWordPressへ移す
- スタイルはSassで編集し、生成したstyle.cssをHTMLとWordPressで使う
- クラス名は小文字とハイフンでつなぎ、l-は共通レイアウト、p-はページの要素に使う
- HTML・Sass・JavaScriptは4スペースでインデントする
- 画像はimage/に置き、素材がない箇所は配置枠で示す
- 店舗情報の未設定箇所を明示し、実在する連絡先を捏造しない
- JavaScriptは必要な操作がある場合だけscript.jsに書く
- 実行方法とSassのビルド方法をREADME.mdに記録する
- 編集後は変更内容、確認結果、未確認事項を報告する

CodexでHTMLのサイトを一から作る

最初の制作依頼を送る

ここからコードの作成を依頼します。最初のゴールは、居酒屋サイトのトップページをブラウザで見られる状態にすることです。WordPressの投稿連携は後の工程に回し、まずはお店の雰囲気とページの構成を形にします。

提案した構成で、test-theme内に居酒屋サイトのトップページを作成してください。
AGENTS.mdのルールに従ってください。

作成するもの：
- デザイン確認用のindex.html
- style.scssとscss/以下のSassファイル
- コンパイルしたstyle.css
- 実行方法・ビルド方法を記載したREADME.md

構成はメインビジュアル、お店について、料理とお酒、店主紹介、お知らせ、店舗情報・アクセスです。
こげ茶・えんじ色を使い、地元の人が気軽に入れる温かい雰囲気にしてください。
店主はスキンヘッドの優しいおっちゃんという設定です。写真がない箇所は配置枠を用意してください。
スマートフォンにも対応し、店舗情報は未設定と分かる表記にしてください。
この段階ではPHPファイルの作成とWordPressへの接続は行わないでください。

作成されたファイルを確認する

作成されたファイルと差分をレビューします。Sassはstyle.scssから各partialを読み込み、HTMLとWordPressで同じ生成CSSを使う構成にします。

test-theme/
├── AGENTS.md
├── README.md
├── index.html
├── style.scss
├── style.css
├── scss/
│   ├── common.scss
│   ├── foundation/
│   ├── layout/
│   └── object/
│       ├── component/
│       ├── project/
│       └── utility/
└── image/

Sassのビルド結果とHTMLの参照先を確認します。再現できるように、ビルドコマンドと依存関係はREADMEに残します。

HTMLをブラウザで開く

index.htmlをローカルで表示し、構成、余白、タイポグラフィ、画像枠の比率を確認します。初稿では店舗の雰囲気と情報の優先順位を中心にレビューします。

Codexの変更報告とブラウザの表示を照合し、要件から外れた部分を次の依頼にまとめます。

HTMLを見ながらCodexでデザイン調整

お店らしい雰囲気になっているか見る

ページを開いたら、最初に「この店なら入りやすそう」と感じられるかを見ます。色や装飾が整っていても、店主の人柄が伝わらなければ今回の狙いから離れてしまいます。メインビジュアルだけでなく、店主紹介まで読み進めて確認してください。

料理と店主のどちらかだけが目立ちすぎていないか、店舗情報へ迷わず移動できるかも見ます。修正したい箇所があれば、対象のセクションと、どう変えたいかをセットで伝えます。

感覚的な要望を具体的な指示にする

「もう少し居酒屋っぽくして」では、文字も色も配置も変わるかもしれません。例えば温かさが足りないと感じたら、背景や写真枠など、変更したい要素を絞って依頼します。次の文は、初稿を見て修正するときの入力例です。

メインビジュアルを調整してください。
ところどころの画像はイメージを入れておいてください。
メインビジュアルの背景は明るい茶色にして、見出しの改行は収まりよくお願いします。
初めての方へ。というセクションによくあるご質問をつけて、日替わりのメニューもご用意してますってのをどこかに入れて欲しいです。
セクションとセクションの区切りがわかりづらいから、わかりやすいようなデザインにしてください。
料理とお酒、店舗情報の構成は維持してください。
スタイルはSassで修正し、style.cssへコンパイルしてください。
変更したファイルとブラウザで確認した結果を教えてください。

修正後はブラウザを再読み込みし、依頼した部分を見比べます。気に入った状態はGitで記録しておくと、次の変更が合わなかったときにも比較しやすくなります。

スマートフォンと中間幅でも確認する

ブラウザの開発者ツールで画面幅を変え、スマートフォン、タブレット程度の中間幅、PCで確認します。320px程度の狭い幅でも、文字や写真枠が画面からはみ出していないかを見てください。

店主の写真枠が縦に伸びていないか、料理の一覧が読めるか、店舗情報の長い文字が折り返されるかが確認ポイントです。メニューの開閉を実装した場合は、タップとキーボードの両方で操作を確かめます。

スマートフォン幅で、料理とお酒のカードが横にはみ出しています。
320pxを含む狭い幅で収まるように、カラム幅と余白をSassで調整してください。
ページ全体のoverflow-x: hiddenで隠すだけにはしないでください。
PCと中間幅でも崩れないことを確認し、CSSへ反映してください。

CodexでWordPressテーマへ移す

確認したHTMLをPHPへ分ける

HTMLの見た目が決まったら、test-themeをWordPressのクラシックテーマへ移します。確認済みのDOM構造とクラス名を維持し、共通部分の分割と動的出力への置き換えを進めます。

確認済みのindex.htmlをもとに、test-themeをWordPressのクラシックテーマにしてください。
HTMLで確認したデザインとクラス名を引き継いでください。

- 共通部分をheader.phpとfooter.phpへ分ける
- トップページの本文をfront-page.phpへ移す
- フォールバック用のindex.phpを作る
- front-page.phpでget_header()とget_footer()を使う
- header.phpにwp_head()、footer.phpにwp_footer()を設ける
- style.cssにテーマ情報を記載し、Theme Nameはtest-themeにする
- Sassの再ビルドでテーマ情報が消えない構成にする
- functions.phpでCSSをenqueueし、必要なJSがあれば依存関係も指定する
- テーマ内アセットのURLをWordPress用に変更し、出力先に合わせてエスケープする

index.htmlはデザイン確認用として残してください。
店舗情報の未設定表記も維持してください。
WordPressで未確認の動作は、確認済みと報告しないでください。

テーマに必要なファイルを揃える

移行後は次の構成にします。index.phpのフォールバック、共通テンプレート、アセット読み込みをレビューします。ファイル構成はWordPress公式のテーマファイル構成を参照してください。

test-theme/
├── index.html       ← デザイン確認用
├── style.scss
├── style.css        ← テーマ情報と生成CSS
├── index.php
├── front-page.php
├── header.php
├── footer.php
├── functions.php
├── AGENTS.md
├── README.md
├── scss/
└── image/

CSSの読み込みはfunctions.phpにまとめます。HTMLで書いていたCSSのlinkタグをそのまま重ねると二重読み込みになるため、移行時に確認します。読み込み方法はWordPress公式のアセット読み込みガイドを参照してください。

お知らせを投稿から表示する

HTMLの「お知らせ」は、見た目を確認するための枠です。WordPressで更新できるようにするには、管理画面の投稿を取得して表示する処理を接続する必要があります。PHPへ移しただけで更新機能が完成したとは判断できません。

front-page.phpのお知らせ欄を、WordPressの通常投稿から新しい順に最大3件表示するようにしてください。
表示項目は投稿日、タイトル、記事詳細へのリンクです。
投稿がない場合は「お知らせはまだありません」と表示してください。
詳細表示用のsingle.phpも作成し、見出しや本文を読める状態にしてください。
動的な出力は適切にエスケープしてください。
HTML確認用のindex.htmlでは、表示例と分かる表記を維持してください。

最大3件は今回のトップページ用に決めた表示数です。投稿を試す工程はローカルのWordPressで行い、一覧の並びと記事詳細への移動を確認します。

WordPress上で表示と更新を確かめる

ローカル環境でtest-themeを有効化する

ローカルのWordPress環境のwp-content/themes/以下にtest-themeを配置します。HTML確認時と同じビルド済みCSSを使い、移行による表示差分を確認します。

test-themeを有効化し、トップページと投稿詳細の表示を確認します。テンプレート階層、トップページの表示設定、アセットのURL、管理バー表示時のレイアウトも確認対象です。

投稿とリンクを実際に操作する

お知らせ用のテスト投稿を作成し、トップページに表示されるかを確認します。タイトルをクリックして記事詳細へ移動し、本文が読めるかも確かめてください。投稿がない状態も確認すると、公開直後の表示を把握できます。

確認用のHTMLとWordPressの両方で、CSS、画像、メニュー、ページ内リンクを点検します。移行後に画像が消えた場合は、HTMLの相対パスが残っていないかを調べます。問題を依頼するときは、URL、症状、該当ファイルを添えて伝えましょう。

公開前の差し替え箇所を整理する

今回の居酒屋は架空の題材なので、店舗情報や写真は未設定です。実店舗のサイトに使う場合は、店名、営業時間、定休日、住所、電話番号、メニュー、価格、写真を店主に確認して差し替えます。予約ボタンを置く場合も、実際に使える予約先へ接続します。

最後に、Codexへ未設定箇所と確認結果の整理を依頼します。ブラウザで見た目が整うことと、店舗サイトとして公開できることは、それぞれ確認が必要です。

test-themeの公開前確認を行ってください。
未設定の店舗情報、仮画像、未接続のリンクを一覧にしてください。
HTMLの表示確認と、WordPress上の動作確認を分けて報告してください。
PC・スマートフォン・中間幅での表示、メニュー操作、お知らせ一覧と記事詳細を確認してください。
実行できなかった確認は未確認と明記してください。
公開や外部サーバーへのアップロードは行わないでください。

VS CodeとCodexで一から作る流れ

既存コードを修正する相談に加えて、空のフォルダからページを作る依頼にもCodexを使えます。今回の題材では、居酒屋の雰囲気を言葉にし、HTMLで見た目を確認してからWordPressテーマへ移す順番にしました。

• 空のtest-themeフォルダをVS Codeで開きます。
• 地元の小さな居酒屋と、優しい店主の設定を伝えます。
• AGENTS.mdに制作ルールをまとめます。
• index.htmlとSassを作り、ブラウザでデザインを確認します。
• 修正した見た目をWordPressのPHPテンプレートへ移します。
• ローカルのWordPressで投稿と操作を確認します。

最初の一歩は、お店の雰囲気とサイトの目的を伝えることです。まずは下の依頼文を自分の題材に合わせて書き換え、ページ構成を相談するところから始めてみてください。