ChatGPTだけでホームページを作る時に詰まりやすいこと｜コード貼り付け・ファイル名・Codexとの分業

GPTだけでも小さなページは作れる。でも本格サイトはCodexと分業した方が楽

ChatGPTだけでも、1ページLP、HTML/CSSの下書き、文章ブロック、FAQ、構成案はかなり作れます。CanvasやProjectsなどで、昔より編集や文脈管理もしやすくなっています。

ただし本格的なホームページ制作では、複数ファイル、複数URL、ディレクトリ、sitemap、内部リンク、canonical、CSS読み込み、GitHub差分、本番反映が絡みます。

chatgptguide.jpでは、ChatGPTは考える、Codexは実装する、GitHubは差分を残す、という分業で整理します。

昔はHTMLをもらって、人間が貼る作業が多かった

以前のGPTホームページ制作は、コードを出してもらい、人間がファイルへ貼り付ける流れになりがちでした。

• GPTにHTMLを書かせる
• index.htmlに貼る
• style.cssに貼る
• about/index.htmlに貼る
• contact/index.htmlに貼る
• 画像パスを直す
• CSS読み込みを直す
• 内部リンクを直す
• sitemap.xmlを手で直す
• canonicalを確認する
• FTPでアップする
• 表示崩れを直す

貼り付け方式で起きやすい問題

1ページなら何とかできても、複数ページになると、ファイル名、階層、内部リンク、sitemapが混ざりやすくなります。

• ファイル名を間違える
• 同じページを別ファイル名で作る
• index.html と index.php が混ざる
• /about/ と /about.html が混ざる
• CSSパスがズレる
• 内部リンクが404になる
• sitemapに入れ忘れる
• canonicalが違う
• スマホ表示が崩れる
• コード貼り付け漏れが起きる

ChatGPT単体も、昔よりかなり改善されている

Canvasは文章やコードの編集・修正に向くインターフェースで、Projectsは長く続く作業の文脈をまとめる場所として使えます。HTML/CSS下書き、文章、FAQ、見出し、構成案、小さな修正案ではChatGPTだけでも十分な場面があります。

このページはChatGPTを否定する話ではありません。小さな作業はChatGPT、本番サイト運用はCodexやGitHubへ分ける、という現実的な分業です。

複数ページになると、ファイル名・階層・リンク管理が重くなる

GPTはコードや文章を作れます。ただし、どのファイルを作り、どの既存ファイルを補強し、どこにリンクを張り、公開後に何を確認したかを継続管理するのは別作業です。

Codexは、ファイルを触る実装班として使いやすい

Codexを使うと、GPTで作ったコードを人間が貼るのではなく、Codexにファイル構成・既存URL・内部リンク・sitemapまで確認させる流れにできます。

• 既存URL確認
• 既存ファイル確認
• 新規ファイル作成
• 既存ページ補強
• 内部リンク追加
• sitemap追加
• title / description / H1確認
• canonical確認
• robots index,follow確認
• FAQ JSON-LD追加
• スマホ表示確認
• 内部リンク404確認
• 秘密情報スキャン
• mojibake確認
• 本番反映
• 作業報告

ChatGPTは司令塔、Codexは実装班、GitHubは差分管理

ChatGPTはテーマ、記事化、正本化、オーダー作成、Search Consoleやキーワードの整理に向きます。Codexはファイル編集、新規URL作成、既存URL補強、内部リンク、sitemap、本番反映、報告に向きます。GitHubは差分、PR、rollback、履歴管理に向きます。

GPTだけで十分な作業もある

1ページLPの文章下書き、HTML/CSSの小さな部品案、見出し案、FAQ案、チェックリスト、meta description案、記事構成案、比較表、Codexオーダー下書き、Search Consoleクエリ分類ならGPTだけでも扱いやすいです。

複数ファイル・複数URL・本番反映はCodex向き

作業が文章作成からサイト運用へ入ったらCodex向きです。複数ファイル、複数URL、既存URL確認、内部リンク、sitemap、FAQ JSON-LD、GitHub差分、本番アップ、公開URL 200 OK、スマホ表示、秘密情報スキャン、報告書まで含む場合はCodexに渡します。

URLとファイル名は、その場で思いつきで決めない

ファイル名地獄を避けるには、既存URL確認と命名ルールを先に決めます。

• 既存URLを先に確認する
• 既存受け皿があれば新規作成より補強
• 日本語URLを避ける
• 意味不明URLを避ける
• /test/ /sample/ /new/ /copy/ /old/ /draft/ を避ける
• 短く意味の分かる英数字＋ハイフンにする
• サイト別命名ルールを守る
• sitemapに入れるURLだけを作る
• 未作成URLへリンクしない
• canonicalとURLを合わせる
• index.php / index.html の重複に注意する

貼り付け作業から、Codex実装オーダーへ変える

失敗しやすいのは、HTML、CSS、別ページ、sitemapを順番に生成して、人間がそれぞれ貼る流れです。改善するなら、既存URL確認、作成または補強、内部リンク、sitemap、公開確認、SEOタグ、秘密情報確認までをCodexに一つの作業条件として渡します。

Codexオーダーテンプレート

GPTでコードだけを出すのではなく、Codexに既存URL確認、ファイル編集、内部リンク、sitemap、公開URL、SEOタグ、AdSenseコード、Search Consoleタグ、秘密情報確認、最終報告まで含めて実装させるテンプレートです。

/GOAL

GPTでコードを貼り付ける方式ではなく、Codexで既存URL確認・実装・公開確認まで行ってください。

目的：
ファイル名ミス、貼り付け漏れ、内部リンク404、sitemap漏れ、canonicalズレ、AdSenseコードやSearch Consoleタグの消失を避けながら、ホームページまたは記事ページを実装する。

やること：
・既存URL確認
・既存ファイル確認
・新規作成か既存補強か判断
・URL名を短い英数字＋ハイフンで決める
・HTML/CSSを既存テンプレートに合わせる
・必要な内部リンクを追加
・sitemapに新規URLのみ追加
・公開URL 200 OK確認
・title / description / H1確認
・canonical確認
・robots index,follow確認
・内部リンク404確認
・スマホ表示確認
・AdSenseコード維持確認
・Search Consoleタグ維持確認
・秘密情報や認証情報の混入確認
・最終報告

やらないこと：
・コードだけ出して人間に貼らせない
・既存URL確認なしに新規作成しない
・同じ本文コピーをしない
・薄いページを量産しない
・未作成URLへリンクしない
・AdSenseコードやSearch Consoleタグを変更しない
・robots.txt、ads.txt、.htaccess、DB、cron、DNSを変更しない

停止条件：
既存テンプレート不明、sitemap更新方法不明、URL重複、内部リンク衝突、秘密情報混入、公式未確認の断定、設定変更が必要な場合は停止して報告する。

ChatGPT利用者向けの結論

ChatGPTは司令塔として、構成、文章、FAQ、コード下書き、Codexオーダー作成に使います。貼り付けが増えてきたらCodex実装へ切り替えるのが楽です。