設計
最初に、サイトの目的、ページ数、URL、title、H1、狙うキーワード、共通ナビ、フッター、禁止事項を整理します。WordPressを使わない静的サイトなら、構成を明確にしたうえでCodexに一括生成を依頼できます。
構築
ページ一覧を作る
トップ、主要ページ、FAQ、運営者情報、ポリシー類を決めます。
共通CSSを作る
白ベース、読みやすい本文幅、コードブロック、目次、FAQを整えます。
SEOタグを入れる
title、description、canonical、robots、OGPを各ページに入れます。
内部リンクを張る
トップから主要ページへ、関連ページ同士へ自然にリンクします。
公開確認
公開後は、全ページの200 OK、SSL、wwwの挙動、robots.txt、sitemap.xml、CSS読込、スマホ幅の崩れを確認します。既存サイトへの反映では、公開前バックアップも必須です。
関連ページ
Codexでホームページ制作するときの全体像
Codexでサイトを作る時は、企画、ページ構成、本文、HTML/CSS化、公開ディレクトリ配置、SEOタグ、sitemap、robots、問い合わせ導線、公開確認までを分けて考えます。
ChatGPTで構成や文章の方向性を整理し、Codexで実ファイルの作成・修正・確認を進めると、作業の役割がはっきりします。
ChatGPTとCodexの役割分担
- ChatGPT: サイト構成案、ページタイトル案、本文草案
- ChatGPT: SEOキーワード整理、Codexへの指示文作成
- Codex: HTML/CSS作成、既存デザインへの合わせ込み
- Codex: robots、sitemap、canonical、内部リンクの確認
- Codex: 作業報告書と公開前チェック
小型コードサイト制作の流れ
目的とページ構成
サイト目的、ページ一覧、公開してよい情報を決めます。
共通デザイン
HTML/CSSの共通レイアウトを作ります。
SEO基本ファイル
title、description、canonical、sitemap、robotsを確認します。
公開確認
全ページ200 OK、スマホ表示、内部リンクを確認します。
Codexに任せる前に準備するもの
- サイト名とドメイン
- ページ一覧
- title案とdescription案
- 見出し構成
- 公開してよい情報と公開しない情報
- 触ってよいファイルと触らないファイル
- バックアップと戻し方
公開前チェックリスト
- 全ページ200 OK
- titleとdescriptionあり
- canonical自己URL
- robots index,follow
- noindexメタなし
- sitemap掲載
- robots.txt 200 OK
- CSS読み込み
- スマホ表示
- 未完成文言なし
- 秘密情報なし
- 問い合わせ導線確認
失敗しやすい点
sitemapに未完成URLを入れる、canonicalを間違える、robots.txtで必要ページを塞ぐ、.htaccessを不用意に触る、本番ファイルをバックアップなしで大量変更する、といった失敗に注意します。
関連ページ
よくある質問
Codexの仕様は固定ですか？
固定ではありません。利用できる機能、プラン、CLIやアプリの挙動は更新される可能性があるため、作業前にOpenAIの公式情報を確認するのが安全です。
初心者でも使えますか？
使えます。ただし、作業フォルダ、編集権限、Gitの扱い、秘密情報の管理は最初に整理しておくと安心です。
Codexでホームページを作る時、最初に決めることは何ですか？
サイトの目的、ページ一覧、公開してよい情報、触ってよいファイル、触らないSEOタグを先に決めます。最初から全ページを任せず、トップ、下層ページ、公開前確認に分けると進めやすいです。
Codexで作ったホームページは公開前に何を見ますか？
200 OK、スマホ表示、内部リンク、画像404、title、description、canonical、robots、noindexの有無を確認します。AdSenseコードやSearch Console確認タグを変更していないことも見ておきましょう。
ChatGPT使い方シリーズ
ChatGPTで作業を整理し、Codexで実装・確認する流れを知りたい方は、初めて、入門、中級、上級、判断のページを順番に確認できます。
初めてのChatGPT / ChatGPT入門編 / ChatGPT中級編 / ChatGPT上級編 / 判断を自分に戻す使い方
ChatGPTでホームページ制作する実践手順
サイト目的、ページ構成、本文、SEOタグ、内部リンク、Codex実装、公開前チェックまでを実務の流れで整理しています。
Codexでホームページ作成を頼む前に決めること
ホームページ作成をCodexに頼む時は、全体を丸投げする前に、目的、読者、ページ数、導線、触ってよいファイル、触ってはいけないファイルを決めると安全です。
Codexは、既存ページ補強、HTML/CSS作成、内部リンク整理、公開前チェックを手伝わせる使い方が向いています。文章はChatGPT、素材はCanva、設計はFigma、管理はGitHub、安全確認はHALと分けると、作業範囲がはっきりします。
| 段階 | やること | 使うAIサイト | Codexに頼めること | 人間が確認すること | 関連ページ |
|---|---|---|---|---|---|
| 目的整理 | 誰に何を伝えるかを決める | ChatGPT | 指示書の形へ整理 | 公開してよい内容か | 依頼前チェック |
| ページ構成 | トップ、下層、問い合わせ導線を決める | ChatGPT | HTML構成案の作成 | 未作成URLを混ぜない | Webデザイン |
| 文章作成 | 見出し、本文、FAQを用意する | ChatGPT | 既存ページへの反映 | 事実確認と表現 | 作業報告 |
| 素材整理 | 画像名、alt、権利を確認する | Canva | 画像配置とCSS調整 | 公式画像や権利 | CodexとCanva |
| HTML/CSS化 | 既存デザインへ合わせる | Codex | HTML/CSSの作成・修正 | 共通CSSへの影響 | HTML/CSS |
| 公開前チェック | 200 OK、SEOタグ、リンク、スマホを確認する | HAL | 確認項目の洗い出し | 最終公開判断 | 公開前チェック |
通常ホームページ、LP、記事、サービス案内の違い
| 種類 | 目的 | 向いている構成 | Codexに頼む内容 | 公開前チェック | 関連ページ |
|---|---|---|---|---|---|
| 通常ホームページ | サイト全体の入口 | トップ、概要、導線、問い合わせ | ページ構成と内部リンク整理 | 全ページの200 OKとスマホ表示 | ホームページ作成 |
| LP | 1つの目的へ誘導 | 悩み、提案、CTA、FAQ | HTML/CSSとセクション整理 | 成果保証を書いていないか | LP作成 |
| ブログ記事 | 検索意図への回答 | 直答、手順、注意、関連リンク | 既存記事の補強 | 事実確認と引用範囲 | 作業報告 |
| サービス案内 | 提供内容を説明 | 対象、流れ、注意、問い合わせ | 導線とFAQの整理 | 料金や仕様の断定を避ける | 公開前チェック |
| 問い合わせページ | 連絡を受ける | 入力項目、注意、送信後案内 | HTMLと確認文の整理 | 個人情報とフォーム設定 | GitHub管理 |