AIが作ったサイトは、headerやnavが全部divになっていないかコードを見る

どんな問題を解決するか / いつ使うか

コーディングエージェントや画像→コードでサイトを出したあと、公開前の軽い品質チェックをするとき。

やり方

1. 生成されたHTML（またはコンポーネント）で、ページ先頭・グローバルナビ・メイン・フッターを探す。
2. 次を満たすか確認する。
   • サイト見出し付近は <header>
   • グローバルナビは <nav>（必要なら aria-label）
   • 本文は <main>
   • フッターは <footer>
3. 足りなければエージェントに「見た目は変えず、該当するdivをセマンティックな要素に置き換えて」と頼む。ルールファイルに「レイアウト用の汎用divで header/nav/main/footer を代替しない」と書いておくと再発しにくい。

関連：アクセシビリティツリーを整えると、人だけでなくAIエージェントにも理解・操作しやすいサイトになる

注意点

• 見た目のレビューだけでは気づきにくい。コード差分かアクセシビリティツリーで見る。

出典

• @wokobo_net · 2026-11-05