AIでつくるサイトに抜けがち項目チェックリスト

AI生成でコーディングされたサイトをみかけることが増えてきました。サムネイルのOGPがない、など、メタ的な項目は抜けがちだったりするので、視点としてチェックリストを用意してみました。

事例、たとえば下記のサイトはおそらくAI生成でコーディングされていますが、OGPなどリンクに対するユーザビリティ的な項目が抜けていたりします。

画像のタイトルを入れてください

自己紹介

こんにちは、Web365の野田です。
普段、Web365というフリーのWeb担当として、クライアント企業へのWebから売上増を目標に、企業のデータ分析、Webサイト分析改善（分析・制作・マーケティング）をワンストップでサポートしております。

視点別チェックリスト

いくつかの視点でチェックリストを作成したので、AI生成コーディングする際にプロンプトなどにいれておくとユーザビリティにおいて網羅性の高いサイト制作ができます。

画像のタイトルを入れてください

1. セキュリティ

  • [ ] CSP（Content-Security-Policy）の設定（metaタグまたはレスポンスヘッダー）
  • [ ] サードパーティCDN読み込みへのSRI（integrity属性）付与
  • [ ] 本番非推奨CDNの使用回避（例：Tailwind Play CDN cdn.tailwindcss.com）
  • [ ] HTTPS化・混在コンテンツの排除
  • [ ] Cookie・セッションのセキュア設定（Secure/HttpOnly/SameSite）

抜けやすい理由（仮説）： AIは「動くコード」を優先して生成するため、レスポンスヘッダーやCDN配信元の信頼性設定など、見た目に現れない防御層は指示がない限り実装されない傾向がある。

2. マーケティング（メタ情報・OGP）

  • [ ] og:title / og:description / og:image / og:url / og:type
  • [ ] og:imageの絶対URL指定（相対パスだとプレビューに反映されないケースあり）
  • [ ] twitter:card（例：summary_large_image）
  • [ ] <title> / meta descriptionとOGPの内容を分けて最適化（SNS用文言 vs 検索結果用文言）

抜けやすい理由（仮説）： <title>やmeta descriptionは「基本セット」として学習データに強く出るが、OGPはSNSシェア時にしか効果が可視化されないため、指示がないと省略されやすい。

3. アクセシビリティ

  • [ ] 画像へのalt属性
  • [ ] 見出し階層の一貫性（h1→h2→h3の飛ばしがないか）
  • [ ] コントラスト比（WCAG基準）
  • [ ] キーボード操作のみでの操作可否（フォーカス順序・フォーカスリング）
  • [ ] フォーム要素へのlabel紐付け

抜けやすい理由（仮説）： 見た目上は問題なく表示されるため、スクリーンリーダーやキーボード操作といった非マウス・非視覚のユーザー体験は検証されないまま抜け落ちやすい。

4. SEO・構造化データ

  • [ ] JSON-LD構造化データ（Organization、WebSite等）
  • [ ] sitemap.xml
  • [ ] robots.txt
  • [ ] canonical URL

抜けやすい理由（仮説）： ページ単体の見た目には影響しないため、「サイト全体の設計」を意識しない限り生成対象から漏れる。

5. パフォーマンス

  • [ ] 画像の遅延読み込み（loading="lazy"）
  • [ ] Webフォントのpreload
  • [ ] 本番非推奨CDNの利用回避（再掲：パフォーマンス面でも影響）
  • [ ] 画像フォーマットの最適化（WebP等）・サイズ指定（width/height）

抜けやすい理由（仮説）： 初回描画で「見える」ことが優先され、読み込み速度やレイアウトシフト対策は後回しになりやすい。

6. 法務・コンプライアンス

  • [ ] 特定商取引法に基づく表記
  • [ ] プライバシーポリシーの中身（雛形だけでなく実態に即した記載か）
  • [ ] Cookie同意バナー（該当する場合）

抜けやすい理由（仮説）： 業種・提供形態によって必要要件が変わるため、汎用的な指示では「とりあえずダミーページ」で済まされやすい。

7. 信頼性・E-E-A-T

  • [ ] 運営者情報・会社概要
  • [ ] 電話番号・所在地の明記
  • [ ] 代表者名・お問い合わせ導線

抜けやすい理由（仮説）： コンテンツの「本文」に注力する分、周辺情報としての運営者情報は後回しにされやすい。RASHINの例のように、セキュリティ企業自身がここを薄くしているケースは記事のオチとして効果的。

8. 国際化

  • [ ] hreflangタグ
  • [ ] lang属性が"ja"固定のまま多言語対応が考慮されていないか

抜けやすい理由（仮説）： 単一言語での依頼が前提になっている場合、将来の多言語展開を見据えた設計はそもそも指示に含まれない。

9. 計測・分析

  • [ ] GA4・GTM等の効果測定タグ

抜けやすい理由（仮説）： マーケティング視点と混同されがちだが、「集客導線を作る」ことと「効果を計測する」ことは別の指示として扱われるため、後者だけ抜けるケースがある。

10. エラーハンドリング

  • [ ] 404ページのカスタマイズ
  • [ ] フォーム送信時のバリデーションエラー表示

抜けやすい理由（仮説）： 「正常系」の画面は指示通りに作られるが、異常系（エラー時の挙動）は明示的に依頼しないと標準の素っ気ない表示のまま残る。

実例：RASHINページの現状（参考データ）

さきの事例サイトのソースコードをみると、下記の状態なので、対応例を記載します。

存在するタグ（OGP系の項目がない事例）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="サイバーレジリエンスの運用をすべてこの1つのOSで。自動診断からIT資産管理、規程作成まで自走化。">

存在しないタグ（OGP系の項目を追加する）

<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="...">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

抜け項目の定期更新について

項目は変化していくので、それもAIにチェックしてもらう、で良いと思います。

画像のタイトルを入れてください