まず一言でいうと
Webサイト作成では、1ページだけでなく、複数ページ・内部リンク・sitemapまでまとめて整える必要があります。
このページで整理すること
親ページ、子ページ、関連ページ、内部リンク、sitemap、公開確認を一つの流れとして整理します。
ホームページ制作は、文章、構成、画像、HTML/CSS、内部リンク、公開確認がつながる作業です。Codexには対象ファイル、やること、やらないこと、停止条件、確認項目を明確にして渡します。
Codexでできること
| 作業 | Codexでできること | 注意点 |
|---|---|---|
| サイト構成 | 親ページと子ページを整理する | 未作成URLにリンクしない |
| HTML/CSS | 既存テンプレートへ反映する | 共通CSSを壊さない |
| 内部リンク | 関連ページをつなぐ | 404確認が必要 |
| sitemap | 新規URLを掲載する | 重複追加に注意 |
| 公開確認 | 200 OKやSEOタグを見る | noindex混入に注意 |
Codexだけに任せないこと
CodexはHTML/CSSの反映や確認を助けますが、内容の正確性、権利確認、成果判断、問い合わせフォームや決済導線、本番反映の判断は人間が確認します。公式ロゴや外部画像素材、個人情報、認証情報は不用意に扱いません。
実際の作業フロー
- ChatGPTで目的と構成を整理する
- Geminiで調査や素材整理を行う
- CanvaやFigmaで見た目や素材を整理する
- CodexでHTML/CSSへ反映する
- 公開URL、スマホ表示、内部リンクを確認する
- Search Console反応を見て補強する
公開前チェック
| 確認項目 | 見ること |
|---|---|
| HTTP | 200 OKか |
| スマホ | 390px相当で表示崩れがないか |
| 内部リンク | 404がないか |
| SEOタグ | title / description / canonical |
| robots | index,followか |
| noindex | 混入していないか |
| sitemap | 新規URLが入っているか |
| 画像/CSS | 読み込みエラーがないか |
作る順番で迷わないために
サイト制作でつまずくのは技術より順番です。後回しにしてよいものを先にやると、いつまでも公開できません。
| 順番 | やること | 後回しにしてよいもの |
|---|---|---|
| 1 | 載せる内容を箇条書きで決める | デザイン、配色 |
| 2 | ページの構成と本文を書く | 細かい装飾 |
| 3 | 1ページ公開して表示を確認 | 残りのページ |
| 4 | 残りのページを作る | 見た目の調整 |
| 5 | 全体の見た目を整える | — |
3番目を早い段階に置くのが要点です。全ページ作ってから初めて公開すると、設定の間違いが全ページに及びます。1ページで公開の流れを確認してから残りを作れば、同じ間違いを繰り返しません。
最初から作り込みすぎない
サイトは公開後に直せます。最初から完成させようとすると、公開自体が遠のきます。
- ページ数を絞る：まず4〜5ページで十分です。内容が薄いページを増やすより、少なくても中身がある方が評価されます。
- 凝った仕組みを入れない：後から自分で直せない構造にすると、更新が止まります。
- デザインは後で変えられる：先に中身を作った方が、必要なデザインも見えてきます。
- 公開してから育てる：公開しないサイトは、どれだけ作り込んでも誰にも届きません。
特に1番目は重要です。ページ数を増やすことが目的になると、1ページあたりの中身が薄くなります。数より、1ページずつが読者の疑問に答えきれているかを基準にしてください。
やってはいけないこと
- Codexで必ずホームページが完成すると書かない。
- 上位表示、集客、AdSense合格を保証しない。
- 公式ロゴ、公式画像、権利不明の外部画像を勝手に使わない。
- 問い合わせフォーム、決済、DB、cron、.htaccessを軽作業扱いしない。
- AdSense、Search Console確認タグ、robots.txt、ads.txtを勝手に変更しない。
- APIキー、認証情報、秘密情報を本文や指示書に入れない。
FAQ
Codexだけでホームページは完成しますか？
完成を保証するものではありません。CodexはHTML/CSS反映や確認を助けますが、目的、文章、権利、公開判断は人間が確認します。
初心者は何から始めればいいですか？
まず目的、必要ページ、素材、やらないこと、停止条件を整理します。その後、Codexに小さな範囲から頼むと安全です。
スマホ表示はなぜ重要ですか？
PCで見やすくても、スマホでは横スクロールや文字詰まりが起きることがあります。390px相当で確認するのが実務的です。
既存CSSは直してよいですか？
必要な場合だけ、影響範囲を確認して最小限にします。共通CSSを大きく変える時は停止条件を置きます。
Codex × Google Drive
Drive素材を整理してCodexへ渡す導線
Google Driveは素材置き場として便利ですが、CodexがDriveを何でも直接操作するわけではありません。共有範囲、権限、画像や文章の権利、個人情報、会社情報、秘密情報を確認してから、Codex指示書へ整理します。