はじめに
「AIでサイトを作る」という話は2026年現在、珍しくなくなった。しかし 規制業種向け、つまり医療・法律・金融・行政が相手のサイトを、OWASP Top 10 全項目クリア・WCAG 2.2 AA 準拠・プライバシーポリシー完備の状態で、しかも4週間以内に完成させた例は、まだほとんど公開されていない。
この記事では、弊社（OKIRAKUWORKS）がセキュリティ企業のDNAを持ちながら WEB 制作支店「FORGEGODMAN」を立ち上げ、自社コーポレートサイトを最初のポートフォリオ兼実証実験として4週間で完成させたプロセスを、技術的な観点から全部開示する。
技術スタック
| 領域 | 採用技術 | 選定理由 |
|---|---|---|
| フロントエンド | Astro 5 + React Islands + Tailwind CSS | 静的優先・高速・TypeScript ネイティブ |
| ホスティング | Cloudflare Pages | WAF・CDN・分析が一体。追加費用ゼロ |
| フォーム | Resend API | サーバーレス、SPF/DKIM 設定まで込み |
| エラー監視 | Sentry | パフォーマンス監視・アラート即日設定 |
| セキュリティヘッダー | Cloudflare Workers | CSP・HSTS・X-Frame-Options を全ページに適用 |
| アクセシビリティ | axe-core + Lighthouse | 自動テストを CI に組み込み |
| E2E テスト | Playwright MCP | ブラウザ実操作でスクリーンショット＋採点 |
PGE ループとは何か
今回の制作に使った品質保証の仕組みが PGE（Planner-Generator-Evaluator）ループ だ。
- Planner — サイトマップ・コンポーネント設計
- Generator — Astro/React 実装、1機能ずつ完成させる
- Evaluator — Playwright 実ブラウザ操作で採点（10点満点、8点未満は差し戻し）
Claude Code 上で 7 名のサブエージェントが並列稼働し、それぞれが専門的な役割を担う。ポイントは 「AI が自動実装する」ではなく「AI + 人間レビューの多段階ループで品質を保証する」 ことだ。
セキュリティを「標準装備」にするための具体的実装
セキュリティヘッダーの全量設定
Cloudflare Pages の _headers ファイルと Workers を組み合わせて、CSP・HSTS・X-Frame-Options・X-Content-Type-Options・Referrer-Policy・Permissions-Policy を全ページに適用した。
OWASP Top 10 への対応（代表的な対応を抜粋）
- A03 インジェクション対策 — お問い合わせフォームへの入力は Zod でスキーマバリデーション後に Resend API に渡す。HTML タグは sanitize-html でサニタイズ。
- A05 セキュリティ設定ミス — Cloudflare ダッシュボードの設定を Wrangler で管理。設定ドリフトを防ぐ。
- A09 セキュリティログとモニタリング — Sentry に全エラーを集約。
WCAG 2.2 AA を「設計から」入れる
アクセシビリティを後から入れると手戻りが大きい。デザインコンポーネント設計の段階から以下を組み込んだ。
- カラーコントラスト — テキストと背景のコントラスト比を 4.5:1 以上に設計
- キーボードナビゲーション — 全インタラクティブ要素に
focus-visibleスタイルを適用 - スクリーンリーダー対応 — 全画像に
altテキスト。ランドマークロールを適切に配置 - フォームのラベル —
<label for>またはaria-labelledbyで全フォームフィールドに紐付け
実際の制作工数と期間
| フェーズ | 内容 | 実稼働時間 |
|---|---|---|
| Phase A: 要件定義・サイトマップ | planner エージェント主導 | 約 4 時間 |
| Phase B: デザイン・実装 | frontend-developer が Astro 実装 | 約 20 時間 |
| Phase C: PGE ループ検証 | Playwright 実操作で採点（5ループ） | 約 8 時間 |
| 法務書類作成 | PP・利用規約・特商法表記を生成 | 約 2 時間 |
| セキュリティレビュー | OWASP 全項目チェック | 約 3 時間 |
| 合計 | 約 37 時間（約 4.6 人日） |
カレンダー日数では 18 日（実稼働ベース） で公開まで完了した。従来の制作会社が同等仕様で 8〜12 週間を要することと比較すると、大幅な工数削減を実現している。
PGE ループの採点ログ（最終ラウンド）
| 採点軸 | スコア | コメント |
|---|---|---|
| 仕様適合度 | 10/10 | 全ページ仕様書との一致確認済み |
| デザイン品質 | 9/10 | タイポグラフィ・余白は高水準 |
| アクセシビリティ | 9/10 | WCAG 2.2 AA 適合。axe-core 違反ゼロ |
| パフォーマンス | 10/10 | LCP 1.2s / INP 45ms / CLS 0.02 |
| セキュリティ | 10/10 | OWASP Top 10 全項目クリア |
| 合計 | 9.4/10 | 合格（8点以上） |
まとめ
AI 駆動 WEB 制作のポイントを一言でまとめると、「AIは速さを提供し、PGEループが品質を保証する」 ことだ。
規制業種向けのサイト制作では、スピードよりもコンプライアンスと品質の証拠が重要になる。FORGEGODMAN が提供するのは「完成したサイト」だけでなく、「採点ログ・合格証・セキュリティ診断レポート」という証跡のセットだ。
もし規制業種の WEB 制作でお困りであれば、まずは 60 分の無料相談からどうぞ。
FORGEGODMAN — Hardened by Fire, Crafted by Code.