今回やった作業
今回の作業では、小規模情報サイトを静的HTMLと共通CSSで構築しました。WordPressやDBを使わず、トップページ、下層ページ、運営者情報、ポリシー、免責、問い合わせ導線、robots.txt、sitemap.xmlをそろえ、公開前チェックまで行いました。
作業前の状態
作業前には、サイトの目的、ページ一覧、title案、description案、公開してよい情報、公開しない情報を整理しました。静的HTMLは軽く作れますが、共通ヘッダーやフッター、内部リンク、sitemapを手で管理するため、最初の構造設計が大切です。
作業前に問題だったこと
問題だったのは、静的HTMLサイトは簡単に見える一方で、ページ数が増えるとリンクやSEOタグのずれが起きやすいことです。共通CSSの読み込み、canonicalの自己URL、robots index,follow、sitemap掲載、未完成文言の混入を最初から確認項目に入れる必要がありました。
Codexに任せたこと
- ページ一覧からディレクトリ構成を作成
- 各ページのHTML作成
- 共通CSSの作成
- ヘッダーとフッターの導線整理
- robots.txtとsitemap.xmlの作成
- SEOタグと内部リンクの確認
- 公開後の報告書作成
人間が判断したこと
人間側では、サイトの目的、ページごとの役割、公開してよい情報、問い合わせ導線の扱いを決めました。CodexはHTMLやCSSの作成を補助できますが、どの情報を出すか、どのページを厚くするか、読者に何を持ち帰ってもらうかは人間が判断する必要があります。
実際に使った指示文の考え方
指示文では、WordPressを入れない、DBを使わない、.htaccessを変更しない、秘密情報を出さない、既存ファイルがある場合はバックアップする、という条件を先に入れました。静的HTMLサイトでは、作るファイルだけでなく、触らないものを明確にすることで安全性が上がります。
うまくいった点
うまくいった点は、ページ構成、共通CSS、SEOタグ、sitemap、robotsを一つの流れで整理できたことです。Codexにはファイル作成と確認項目の整理を任せ、人間はサイト方針と公開判断を担当しました。報告書形式を指定しておくと、作成したファイル、変更したファイル、確認したURL、未確認事項が追いやすくなります。
詰まった点・危なかった点
詰まりやすい点は、ページを増やすほど内部リンクやsitemap更新が漏れやすいことです。また、トップページがリンク集だけになる、下層ページが同じ説明になる、未確認URLをsitemapに入れる、といった失敗も起きやすくなります。静的HTMLでも公開前チェックは必須です。
作業後に確認したこと
作業後は、全ページ200 OK、title、description、canonical、robots index,follow、noindexなし、CSS読み込み、内部リンク、sitemap.xml、robots.txt、スマホ幅での表示、未完成文言、秘密情報混入なしを確認しました。
次から使える指示文テンプレート
目的: 静的HTMLサイトを初期構築する
前提:
- WordPressなし
- DBなし
- 共通CSS
作るもの:
- index.html
- 下層ページ/index.html
- assets/css/style.css
- robots.txt
- sitemap.xml
禁止事項:
- .htaccessを変更しない
- DBを作らない
- 秘密情報を出さない
確認:
- 全ページ200 OK
- title / description / canonical
- robots index,follow
- noindexなし
- CSS読み込み
- 内部リンク
- sitemap掲載
報告:
- 作成ファイル
- 変更ファイル
- 確認URL
- 未確認事項確認チェックリスト
- 全ページ 200 OK
- title と description がある
- canonical が自己URL
- robots が index,follow
- noindex がない
- sitemap.xml が 200 OK
- robots.txt が 200 OK
- CSSが読み込まれている
- 内部リンク切れがない
- 未完成文言がない
- 秘密情報が混入していない
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。作業対象サイトの条件や利用しているサービスの仕様は変わるため、実際に作業する前には現在の公式情報と自分の環境を確認してください。