はじめに
こんな経験、ありませんか？
SEOのメタタグや構造化データ、毎回どこまでやるか迷う
セキュリティヘッダーの設定を毎回ゼロから調べる
要件定義書を作ろうとしても、あとから抜け漏れが発覚する
品質担保のために何をテストすればいいのか、基準が曖昧
そしてここ最近、こんな悩みも増えていないでしょうか。
「AIエージェントに任せたら、好き勝手に実装されて収拾がつかなくなった」
バイブコーディング全盛の今、AIエージェントを活用する開発現場では新たな問題が噴出しています。エンジニアやディレクターがAIに丸投げした結果、拡張性も保守性も無視したコードが量産される。AIが「できます」と言ったのに実際は嘘だった。気づいたら技術的負債の山——そして巻き戻しに膨大な時間が消える。
「Web Starter Kit」は、こうしたすべての手戻りを減らすために作りました。ドキュメントと規約を体系化したテンプレートリポジトリです。
GitHub: https://github.com/murakami-shoten/web-starter-kit
Web Starter Kit とは
ひとことで言えば「あらゆるWebサイト構築を素早く始められるテンプレート兼ベースプロジェクト」です。
ただし、よくある「ボイラープレート」とは少し性質が違います。このプロジェクトの主役はコードではなく、ドキュメントです。ヒアリングシート、要件定義書テンプレート、SOW（作業範囲記述書）、SEO・セキュリティ・パフォーマンスの規約、品質ゲート定義、リリースチェックリスト——こうしたドキュメント群が最初から揃っていて、要件定義から保守まで、Webサイトのライフサイクル全体をカバーします。
誰のためのプロジェクト？
Web開発・運用の基本的な流れを理解しているWeb制作者を対象にしています。
フリーランスで企業サイトやWebアプリを受託開発している方
少人数のチームで複数のWebプロジェクトを回している方
「毎回似たようなことをやっているのに、標準化できていない」と感じている方
AIエージェントを開発に活用している・したい方
AIに好き勝手やられて手戻りが発生し、痛い目を見たことがある方
最後の一点は、今この時代に特に重要です。
AIエージェントは指示が曖昧だと驚くほど自由に動きます。保守性を無視したベタ書き実装、なぜかコメントアウトされたセキュリティ設定、「対応済みです」と言いながら実は何もしていない——AIは悪意なく、しかし確実にそういった成果物を出すことがあります。問題は、それを見抜けるドキュメントも判断基準もなかったことです。
大事なポイントとして、本プロジェクトはAIエージェントとの協業を想定した設計を含んでいますが、AIエージェントがなくても、ドキュメントと規約だけで要件定義から保守運用まで進められます。 ヒアリングシートに沿ってクライアントと会話し、規約を参照しながら実装する——従来のチーム開発のワークフローとしてそのまま使えます。
一方で、AIエージェントを使う場合は「AIが守るべきルールを規約として先に決めておく」ことで、「AIがサボる・嘘をつく・暴走する」問題を構造的に防ぎます。ボタン一つで全自動でサイトが完成するわけではありません。あくまで工程を理解した制作者が主体となり、AIはそのパートナーとして規約に沿った作業を進めます。
「工程を理解した人間が舵を取り、ドキュメントが道筋を示す」——これが本プロジェクトの基本思想です。
※ Web開発未経験者向けのチュートリアルではありません。要件定義→設計→実装→テスト→デプロイ→保守のライフサイクルや、Git・Docker・CI/CDなどの基礎概念を把握していることを前提としています。
主な特徴
1. 要件定義ファースト——手戻りを仕組みで防ぐ
Web制作でもっともコストがかかるのは「手戻り」です。特にAIエージェントとの協業では、最初の要件定義が甘いと被害が指数関数的に拡大します。AIは曖昧な指示を補完しながら進んでしまうため、気づいたときには全部やり直し、という事態になりかねません。
本キットのヒアリングシートはサイト構成・デザイン・SEO・セキュリティ・インフラ・運用保守まで幅広い確認事項を網羅しており、それを要件定義書に転記する流れを標準化しています。確認事項はプロジェクト種別に応じて取捨選択でき、必須/推奨/あればの優先度付き。すべてを埋める必要はなく、関係ない項目はスキップできます。
AIエージェントを活用する場合は、既存の企画書やRFPを渡すことでヒアリングシートをある程度自動で埋めることも可能です。AIが埋めた内容を制作者が確認・修正し、不足分だけクライアントに確認する効率的な進め方ができます。
2. SEO・セキュリティ・パフォーマンスが最初から入っている
AIエージェントはこうした非機能要件を特に省きがちです。「動けばいい」という判断でセキュリティヘッダーが抜け落ちたり、Lighthouseスコアが壊滅的な状態でもスルーされたりする——規約として明示しておくことで、AIにも人間にも同じ基準が適用されます。
後付けになりがちな非機能要件を、プロジェクト開始時から規約として組み込みます。
SEO: robots.txt / sitemap.xml / メタ情報 / 構造化データ / Core Web Vitals
LLMO: llms.txt によるLLM向け情報提供の標準化
セキュリティ: CSP / HSTS / OWASP ASVS L1 準拠 / シークレットスキャン / 依存脆弱性検出
パフォーマンス: Lighthouse CI / CJKフォント最適化 / CSSバンドルサイズ監視
アクセシビリティ: Pa11y CI / WCAG 2.2 を目安にしたチェック
各規約はGoogleの公式推奨やOWASPなどの国際標準を一次ソースとして参照しており、「なぜこのルールがあるのか」をたどれるようになっています。
3. Docker 前提
ホストマシンにNode.jsやnpmがなくても、Dockerさえあれば開発を始められます。開発サーバー、lint、テスト、ビルド、品質ゲートの実行まで、すべてdocker compose経由で行う設計です。macOS（Docker Desktop）とWindows WSL2の両方に対応しています。
4. 低ロックインの設計思想
AIエージェントは「今すぐ動くもっとも簡単な方法」に引っ張られる傾向があり、後から乗り換えが困難なサービスに依存したコードを生成しやすいです。特定のベンダーやサービスに縛られにくい設計を意識しています。データ層はPostgreSQL想定、ストレージはS3互換の抽象レイヤー、認証・監視は差し替え可能な境界を設計。デプロイ先もVercel / Render / AWSなど、コンテナベースで移植可能です。
5. AIエージェントの「暴走・サボり・嘘」を構造的に防ぐ設計
AGENTS.mdにはAIエージェントが守るべき不変条件（要件定義の手順、Dockerコンテナ経由のコマンド実行、日本語での対話ルール、推測禁止）が定義されています。
「推測禁止」は特に重要です。AIは不明点があっても確認せず、それらしい実装を勝手に進めることがあります。あとで「なんでこうなってるの？」と聞いても、もっともらしい説明が返ってくるだけ。AGENTS.mdに明示することで、AIが迷ったときに立ち戻れる判断基準を与えます。
AIを使った開発でも、使わないチーム開発でも、同じ手順・同じ品質基準で進められます。詳細設計・実装フェーズではClaude Opus 4.6の利用をおすすめします。規約の理解やコードの品質、日本語での対話精度において安定した結果が得られています。
また、LLMO規約としてllms.txtの標準実装を含んでおり、作るサイト自体もAI時代に対応した設計になります。
6. 品質ゲート——「完成」の定義を先に決める
AIエージェントとの開発でよくある問題のひとつが、「完成」の基準が曖昧なまま進んでしまうこと。「動いてます」「実装しました」——でもテストは？lintは？セキュリティスキャンは？品質ゲートを最初に定義することで、AIにも人間にも「ここをクリアして初めて完成」という共通認識が生まれます。
必須ゲート: Lint / Typecheck / Format check / Unit テスト / Build / シークレットスキャン / 依存脆弱性スキャン
推奨ゲート: DAST / Lighthouse CI / Pa11y CI / E2Eテスト
実行環境も「ローカルのみ」「ローカル+CI」「CIのみ」の3パターンから選択でき、プロジェクトの規模に応じて柔軟に運用できます。
できること・できないこと
できること:
要件定義からリリースまでの標準ワークフローをすぐに使い始められる
SEO・セキュリティ等の業界標準に沿った規約を、調べ直さずに適用できる
Dockerによる再現可能な開発環境を素早く立ち上げられる
品質ゲートでチーム全体の品質基準を明文化・共有できる
AIエージェントと協業する際のルールと手順が整備されている
AIの暴走・手戻りを未然に防ぐ仕組みが最初から組み込まれている
できないこと / 前提条件:
技術スタックはNext.js（App Router）+ TypeScriptが前提です。Vue.jsやLaravelなど他フレームワークには直接適用できません（ただし、要件定義テンプレートや規約の考え方自体は参考になるはずです）
Docker Desktopが必須です
完成したWebサイトのコードは含まれていません。テンプレートとドキュメント群で構成されたスターターキットです
Web開発の基礎知識を前提としており、初学者向けチュートリアルではありません
使い方
GitHubリポジトリの「Use this template」から新規リポジトリを作成するのが最も簡単です。テンプレートから新プロジェクトを作成したら、まずヒアリングシートの項目を埋めるところから始めてください。
詳細な手順はREADMEに記載しています。
https://github.com/murakami-shoten/web-starter-kit
おわりに
Web制作において、コードを書くことはプロジェクト全体のごく一部です。要件のすり合わせ、非機能要件の担保、品質の可視化、リリース後の運用——こうした「コード以外」の部分こそ、再利用可能な形にしておく価値があると考えています。
そしてAIエージェントが当たり前になった今、もうひとつ加わりました。「AIに何をさせて、何をさせないかを最初に決める」こと。 これを怠ると、どんなに優秀なAIも手戻り製造機になりえます。
規約やテンプレートなどのドキュメント群は、実際のプロジェクトで得た知見やフィードバックをもとに今後も随時更新していく予定です。使ってみて気づいたことがあれば、IssueやPRでぜひ声を聞かせてください。
「Webサイトを作るときに毎回考えること」を最初から仕組みとして持っておく——このコンセプトに共感いただけたら、ぜひ使ってみてください。
GitHub: https://github.com/murakami-shoten/web-starter-kit
ライセンス: MIT License（商用利用含め自由に利用可能）