Codex でホームページを作る手順 — 設計から構築・公開まで

Codex がホームページ作成に向いている理由と2026年時点の対応範囲

ホームページ作成に Codex を選ぶ理由のひとつは、コードの生成から修正、動作確認まで一つの対話の中で完結しやすい点にある。「角丸のカードをグリッド状に3列で並べたい」「背景は明るいグレーにしたい」と伝えるだけで CSS が書き換わって反映される。デザイナーや非エンジニアがイメージを言葉で伝え、エンジニアが細部を詰めるといった役割の柔軟な分担もできる（出典: https://openai.com/codex ）。

2026年6月22日に安定版となった Codex CLI v0.142.0 では複数の機能強化が行われた。中でもホームページ作成に関わるのがインデックス付きウェブ検索の強化だ。参考にしたいサイトの URL や「○○のようなデザイン」というキーワードを添えると、Codex が検索結果を参照しながらコードを組み立てる補助ができるようになっている。また、Figma MCP を通じてデザインファイルを直接参照する連携も広がり、デザインカンプをコードに変換する手順が手軽になっている（出典: https://openai.com/index/codex ）。

Codex が対応できる主な制作物の範囲

Codex は HTML・CSS・JavaScript で構成された静的サイトはもちろん、React・Next.js・Vue・Svelte といったフレームワークベースのサイトも作成できる。「ポートフォリオサイトを Next.js で作りたい」と伝えれば、フォルダ構成から基本的なコンポーネントまでを雛形として出力する。WordPress テーマの作成や Tailwind CSS を使ったスタイリングにも対応している。

一方、外部サービスとの連携（決済・メール送信など）は Codex がコードを書けるが、実際の API キーやサービス設定は別途行う必要がある。Codex に「Stripe 決済を追加して」と伝えれば実装コードは生成されるが、Stripe アカウントや API キーの取得は人が担う。この役割分担を最初から意識しておくと、途中で詰まりにくい。

AGENTS.md を使った前提情報の渡し方

プロジェクトのルートに AGENTS.md というテキストファイルを置くと、Codex は作業前にそのファイルを読み込んでプロジェクトの前提を把握する。ホームページ作成では「技術スタック: Next.js 15 (App Router)、スタイル: Tailwind CSS、カラーパレット: プライマリ #4F46E5 / セカンダリ #F9FAFB」「ページ構成: ホーム・会社概要・サービス・お問い合わせの4ページ」のように書いておくと、複数回の指示にまたがって一貫したコードが生成される（出典: https://developers.openai.com/codex/guides/agents-md ）。

作成前に決める3つの要素

ホームページを Codex で作り始める前に、最低三つを決めておくと後の対話がスムーズになる。目的・ターゲット・技術スタックの三点だ。これらを事前に決めずに「とりあえずサイトを作って」と伝えると Codex は何らかのページを生成してくれるが、方向性が固まっていないまま修正サイクルが増えやすい。最初の5分で方針を固める時間が、後の作業量を大きく左右する。

Step 1: 目的とページ構成を固める

「誰に、何を伝えるためのページか」を言葉にする。個人のポートフォリオなら「スキルと制作物を見せる、採用担当者向け」、企業サイトなら「サービス内容と問い合わせ先を伝える、新規顧客向け」というように具体化する。次に、必要なページの一覧（ホーム・会社概要・サービス・お問い合わせなど）を決め、各ページに必要な主なセクションも書き出しておく。この情報を AGENTS.md に書いて Codex に渡しておくと、各ページの生成時に同じ前提が引き継がれる。

Step 2: 技術スタックとデザイン方針を選ぶ

更新頻度が低く、インタラクションも最小限なら静的 HTML が最もシンプルで、ホスティングの選択肢も広い。定期的に記事を追加したい、ユーザーの操作に応じた表示の切り替えが必要というなら、Next.js や Nuxt.js が候補になる。デザイン面では、最初から「Google の Material Design 風」「Apple のサイトのように大きな余白とシンプルなタイポグラフィ」のような参照先を決めておくと、Codex への指示が具体的になりやすい。

Codex CLI を使った実際の作成手順

Codex CLI がインストール済みで、ChatGPT アカウントでサインインできている状態を前提とする。プロジェクトのフォルダを作り、その中に AGENTS.md を置いて Codex を起動する。最初の指示でサイト全体の骨格を作り、その後セクション単位で追加・修正していくのが基本的な進め方だ。なお Codex CLI のインストール手順は公式のクイックスタートに詳しい（出典: https://developers.openai.com/codex/quickstart ）。

Step 3: 最初のプロンプトで骨格を生成する

「個人ポートフォリオサイトを作りたい。HTML/CSS/JS の静的サイトで、ヘッダー・自己紹介・スキル一覧・制作物・フッターの5セクション構成。ナビゲーションはスクロールリンクにする。」のように、ページ構成とインタラクションの概要を一文で伝える。Codex は index.html と style.css を生成し、各セクションの骨格を作る。

生成されたファイルをブラウザで開いて確認し、意図と違う部分があれば「スキル一覧はカードをグリッド3列で並べて」「ヘッダーの背景を白に変えて」と追加指示を出す。Codex はそのファイルを読み込んで修正コードを返す仕組みのため、前の指示の文脈を保ちながら変更が積み上がっていく。

Step 4: セクションごとにコンテンツを追加する

骨格ができたら実際のコンテンツを入れていく。「自己紹介セクションに以下のテキストを入れて」と本文を添えて渡すか、「制作物カードに画像・タイトル・説明・リンクを入れる構造で、3件分のサンプルデータを作って」のように指示する。コンテンツの量が多い場合は、一度に全部渡すより「ファーストビューのみ仕上げて」「次にスキル一覧を完成させて」と段階的に進める方が各部分の精度が上がりやすい。Codex は長い指示が複雑になるほど一部を読み落とすことがあるため、小さく区切って確認しながら進めるのが実用的だ。

Step 5: レスポンシブ対応とアクセシビリティを整える

デスクトップのデザインができたところで「スマートフォン向けのレスポンシブ対応を追加して。ブレークポイントは 768px 以下で縦並びに切り替える」と指示する。Codex はメディアクエリを追加してくれる。ブラウザの開発者ツールでスマホ表示を確認し、ずれている部分があれば「メニューがスマホで画面幅を超えている」と伝えれば修正コードが返ってくる。

アクセシビリティについては「画像に alt テキストを追加して」「ボタンの aria-label を適切に設定して」と指示すれば対応できる。あわせて「Lighthouse でスコアを上げるための改善点を教えて」と尋ねると、パフォーマンスや SEO の観点での修正提案が返ってくることもある。

デザイン指示の出し方と参考サイトの活用

Codex へのデザイン指示は、なるべく具体的な言葉で伝えるのが効果的だ。「おしゃれにして」「プロっぽくして」のような抽象的な指示より、「背景は #F8F8F8、テキストは #1A1A1A、アクセントカラーは #4F46E5」のように数値で伝えるか、「Apple のホームページのように余白を大きく、フォントサイズを大きめにして」のように参照先を明示すると、意図に近い結果が得やすい（出典: https://openai.com/codex ）。

フォントは Google Fonts から選んで「見出しに Inter を使い、本文は Noto Sans JP にして」と伝えると、外部フォントの読み込みコードを含む形で CSS が生成される。アニメーションについては「ページロード時にフェードインを追加して」「ボタンにホバー時の色変化を付けて」と機能単位で指示するのが管理しやすい。

v0.142.0 のインデックス付きウェブ検索機能を使う場合、「○○ というサービスのホームページを参考に、ヘッダーのナビゲーション構成を提案して」と伝えると、Codex が検索して得た情報をもとに提案を行う。あくまで「構成やレイアウトのアイデアを参考に」という使い方が適切で、既存サイトのコードをそのまま複製させる用途には向かない。Figma でデザインカンプを作っている場合は、Figma MCP 連携を活用してデザインデータを直接 Codex に渡す方法も選べる（出典: https://developers.openai.com/codex ）。

公開方法と公開後の継続的な更新

ホームページが完成したら、公開の手段を選ぶ。主な選択肢は静的ホスティングサービスと、Codex の Sites プラグインだ。どちらを選ぶかは、対象サイトの規模やメンテナンス体制によって変わる。

静的 HTML のサイトであれば、Vercel や Netlify が利用しやすい。無料プランでも独自ドメインを割り当てられ、ファイルをアップロードまたは Git リポジトリと連携するだけで公開が完了する。GitHub Pages も無料で使え、パブリックリポジトリにファイルを push するだけで公開される（出典: https://pages.github.com ）。

Sites プラグインを使う場合は、Codex のウェブ版またはアプリからプラグインを有効化し、「このサイトを公開して」と指示するだけで OpenAI のインフラ上にデプロイされる。現時点では ChatGPT Business・Enterprise のワークスペース向けプレビュー提供となっているため、個人利用では静的ホスティングサービスを選ぶのが現実的な選択肢になる（出典: https://developers.openai.com/codex/sites ）。

公開後の更新は、変更内容を Codex に伝えてコードを修正し差し替えるサイクルで継続できる。「問い合わせページを追加したい。現在のデザインに合わせてフォームを含む contact.html を作って」のように指示するだけで、スタイルが統一された新しいページが生成される。コードを手で管理することなく、テキストの指示だけでサイトを育てていける点が、Codex をホームページ作成に活用する際の大きな利点だ。