はじめに
Web Starter Kit を使ったハンズオン動画を公開しました。
YouTube: https://youtu.be/p_ftvycgBY4
以前の記事では、Web Starter Kit を「要件定義から品質保証まで、Web制作で毎回必要になるドキュメントと規約を体系化したテンプレートリポジトリ」として紹介しました。
元記事:
https://murakami-shoten.com/news/web-starter-kit
今回はその実践編として、AIエージェントと対話しながら、Webサイト制作の流れを実際に進めていく動画を作成しました。
テーマは、SDD・仕様駆動開発です。
AIに曖昧な指示で丸投げするのではなく、ヒアリング、要件整理、仕様、開発規約、品質チェックに沿って、Web制作を進めていきます。
今回の動画で扱っていること
今回の動画では、GitHub から Web Starter Kit のソースコードを取得するところから始めます。
その後、AIエージェントと対話しながら、ヒアリングシートや要件定義テンプレートに沿って必要な情報を整理し、サンプルサイトの制作を進めていきます。
単に画面を作って終わりではなく、公開後の運用まで見据えて、以下のような流れを一通り扱っています。
区分 | 内容 |
|---|---|
開発・テスト | GitHubからのソース取得、ローカル環境構築、AIエージェントによるヒアリング、要件整理、実装、テスト、品質チェック |
デプロイ | Vercelを使った本番環境・ステージング環境へのデプロイ |
運用・監視・保守 | GitHub Actionsによる自動処理、Cloudflare R2へのバックアップ、Better Stackによる監視、Dependabot Alertsによる脆弱性通知 |
Webサイトは、作って公開して終わりではありません。
公開後に安全に運用し、障害やバックアップ失敗、依存関係の脆弱性に気づける状態を作っておくことが重要です。
AIエージェントとSDD・仕様駆動開発
AIエージェントを使うと、実装スピードは大きく上がります。
一方で、最初の指示や前提条件が曖昧なままだと、意図しない実装や保守しづらい構成が生まれやすくなります。
そこで重要になるのが、SDD・仕様駆動開発の考え方です。
今回の動画では、AIエージェントにいきなり実装を任せるのではなく、Web Starter Kit に含まれるヒアリングシートや規約を使いながら、必要な情報を確認してから開発を進めています。
AIエージェントを「全部自動で作ってくれる存在」として扱うのではなく、人間が判断し、仕様と規約に沿って一緒に進めるパートナーとして使うイメージです。
Web Starter Kit について
Web Starter Kit は、Next.js、TypeScript、Docker を前提にした Webサイト制作向けのテンプレートです。
ただし、一般的なコードだけのスターターキットとは少し違います。
Web Starter Kit の中心にあるのは、コードそのものというよりも、Web制作を安全に進めるためのドキュメントと規約です。
たとえば、以下のようなものが含まれています。
種類 | 内容 |
|---|---|
ヒアリング | サイト制作前に確認すべき項目を整理するためのヒアリングシート |
要件定義 | 制作範囲や仕様を明確にするためのテンプレート |
開発規約 | 実装時に守るべき基本ルール |
SEO規約 | メタ情報、構造化データ、サイトマップなどの考え方 |
セキュリティ規約 | セキュリティヘッダーや脆弱性対策の方針 |
品質ゲート | Lint、型チェック、テスト、ビルドなど、完成前に確認する基準 |
リリース | 公開前に確認するためのチェックリスト |
Web Starter Kit:
https://github.com/murakami-shoten/web-starter-kit
紹介記事:
https://murakami-shoten.com/news/web-starter-kit
今回使用した主なサービス
今回の動画では、Web Starter Kit を中心に、複数の外部サービスを組み合わせています。
サービス | 主な用途 |
|---|---|
GitHub | ソースコード管理 |
GitHub Actions | 自動処理・CI/CD・バックアップ処理 |
Vercel | 本番環境・ステージング環境へのデプロイ |
Cloudflare R2 | バックアップ用ストレージ |
Better Stack | HTTP監視、バックアップ監視、サービス監視 |
microCMS | コンテンツ管理 |
Gmail API | お問い合わせフォームなどのメール送信 |
favicon generator | ファビコン一括生成 |
Dependabot Alerts | 依存関係の脆弱性通知 |
Antigravity / Claude Code | AIエージェントを使った開発支援 |
注意点
本動画では、Antigravity などのエディタ、Claude Code、microCMS、Gmail API、Vercel、Cloudflare R2、Better Stack、favicon generator などの外部サービスも利用しています。
ただし、各サービスの細かい仕様や詳細な使い方を解説することが目的ではありません。
あくまで、Web Starter Kit を使って、AIエージェントと対話しながら、Web制作から運用準備までの全体フローを確認する動画です。
各サービスの画面や仕様は変更される可能性があるため、詳細は公式ドキュメントをご確認ください。
この動画を見るとわかること
項目 | 内容 |
|---|---|
AIエージェント活用 | AIに丸投げせず、ヒアリングしながら開発を進める流れ |
SDD・仕様駆動開発 | 仕様や規約を先に整理してから実装する考え方 |
Web制作フロー | ソース取得から実装、テスト、公開までの流れ |
デプロイ | Vercelを使った本番・ステージング環境の確認 |
運用準備 | バックアップ、監視、脆弱性通知まで含めた構築 |
保守性 | 公開後も安全に運用し続けるための考え方 |
こんな方におすすめです
対象 | 理由 |
|---|---|
AIエージェントを使ってWeb制作したい方 | AIとの開発を規約に沿って進める流れを確認できます |
SDD・仕様駆動開発に興味がある方 | 仕様を起点に開発を進める具体例として見られます |
Next.js / TypeScript の制作テンプレートを探している方 | Web Starter Kit の使い方のイメージをつかめます |
小規模サイトでも運用まで考えたい方 | 監視、バックアップ、脆弱性通知まで含めた構成を確認できます |
Web制作の標準化に興味がある方 | ヒアリング、規約、品質ゲートを使った進め方を参考にできます |
おわりに
AIエージェントを使えば、Web制作のスピードは大きく上がります。
しかし、仕様やルールが曖昧なまま進めると、手戻りや保守しづらい実装につながる可能性もあります。
Web Starter Kit は、AIエージェントと協業しながら、要件定義、設計、実装、テスト、デプロイ、運用準備までを進めるための土台です。
今回の動画では、その流れをハンズオン形式で紹介しています。
AIを使ったWeb制作や、SDD・仕様駆動開発、保守運用まで見据えたサイト構築に興味がある方は、ぜひご覧ください。
YouTube:
https://youtu.be/p_ftvycgBY4
Web Starter Kit:
https://github.com/murakami-shoten/web-starter-kit