spec-kitにNWGを導入するハンズオン動画を公開しました

はじめに

spec-kit に nextjs-web-governance、略して NWG を導入し、AIエージェントと対話しながら Next.js のサンプルサイトを構築するハンズオン動画を公開しました。

YouTube:
https://youtu.be/AjHaO1J4ymM

今回のテーマは、SDD・仕様駆動開発です。

AIエージェントに曖昧な指示で何となく作らせるのではなく、要件定義、設計、実装、品質ゲートの流れに沿って、Next.js のWebサイト制作を進めていきます。

今回のポイントは、spec-kit に NWG を導入することで、Next.js Web制作向けの規約をAIエージェントの開発フローに組み込めることです。

spec-kit を使っている方や、Next.js でバイブコーディングしている方に向けて、AIに自由に作らせるだけではなく、一定のルールに沿って開発を進める流れを紹介します。

今回の動画で扱っていること

今回の動画では、spec-kit プロジェクトに NWG を導入し、Next.js Web制作向けの規約を開発フローに組み込んでいきます。

主に扱う内容は以下です。

区分	内容
NWGの導入	spec-kit プロジェクトに NWG を導入します
要件定義・設計	サンプルサイトの要件を整理し、実装方針を作成します
実装	AIエージェントと対話しながら Next.js サイトを構築します
品質ゲート	lint、test、build、規約チェックなどを確認します
完成確認	ローカル環境で完成したサイトをプレビューします

今回作成するのは、美容室向けのサンプルサイトです。

Storyblok を利用したブログ・ギャラリー管理、問い合わせフォーム、下書きプレビュー機能、日本語・英語の多言語対応などを扱います。

本番環境として Vercel や Resend を想定できる構成ではありますが、今回の動画ではデプロイは行いません。

あくまでローカル環境で、要件定義、設計、実装、品質ゲート、完成サイト確認までを進めます。

spec-kitについて

spec-kit は、GitHub が公開している仕様駆動開発のためのOSSツールキットです。

いきなりコードを書くのではなく、まず仕様を整理し、その仕様をもとに計画、タスク、実装へ進めていくための流れを提供します。

代表的なコマンドには、以下のようなものがあります。

コマンド	役割
constitution	開発全体の原則を作る
specify	何を作るのかを仕様にする
plan	どう作るのかを実装計画にする
tasks	実装作業をタスクに分解する
implement	タスクに沿って実装する
checklist	要件や品質の抜け漏れを確認する

spec-kit の良いところは、AIエージェントによる開発を、単なる一発生成ではなく、仕様、計画、タスク、実装という流れに整理できることです。

Next.js のバイブコーディングでも、最初に仕様を整理しておくことで、後から破綻しにくい開発に近づけることができます。

NWGについて

NWG は nextjs-web-governance の略です。

Next.js を使ったWeb制作で必要になりやすい要件定義、開発規約、SEO、セキュリティ、アクセシビリティ、品質ゲートなどを整理した規約群です。

もともとは Web Starter Kit に含まれていた規約部分を、複数プロジェクトや外部ツールから再利用できるように独立させたものです。

今回の動画では、Web Starter Kitを直接使うのではなく、この独立したNWGを spec-kit に導入して利用します。

NWG には、たとえば以下のような内容が含まれます。

種類	内容
ヒアリング	サイト制作前に確認すべき項目
要件定義	目的、ページ構成、機能、未確定事項の整理
開発規約	Next.js / TypeScript を前提にした実装ルール
SEO	メタ情報、構造化データ、サイトマップなどの考え方
セキュリティ	セキュリティヘッダー、CSP、フォーム保護など
アクセシビリティ	alt、キーボード操作、コントラスト、フォーカス表示など
品質ゲート	lint、test、build、規約チェックなど

ポイントは、NWG が単なる参考資料ではなく、AIエージェントに参照させる開発ルールとして使えることです。

AIに「いい感じに作って」と任せるのではなく、守るべき基準を渡したうえで開発を進めやすくなります。

spec-kitにNWGを導入する意味

spec-kit は、仕様を起点にして開発を進めるための便利なツールです。

ただし、Web制作では、単に仕様を作って実装するだけでは不十分な場面があります。

たとえば、以下のような観点を最初から意識する必要があります。

観点	内容
目的	何のためのサイトなのか
ターゲット	誰に向けたサイトなのか
導線	問い合わせや予約につながる構成になっているか
SEO	検索やSNS共有を意識した情報設計になっているか
セキュリティ	フォームや外部サービス連携に問題がないか
アクセシビリティ	誰でも使いやすい画面になっているか
品質	lint、test、build などを通して確認できているか

NWG を導入することで、これらのWeb制作向けの観点を、spec-kit の開発フローに組み込みやすくなります。

spec-kit の汎用的な流れに、Next.js Web制作向けのルールを重ねるイメージです。

今回の動画では、要件定義、設計、実装、品質ゲートの各工程で、NWG の規約を参照しながら開発を進めています。

AIエージェントに自由に作らせるのではなく、ルールに沿って作らせる。

これが、NWG を spec-kit に導入する大きな利点です。

今回作成するサンプルサイト

今回のハンズオンでは、美容室向けのサンプルサイトを構築します。

想定している主なページは以下です。

ページ	内容
トップページ	サロン紹介、CTA、サービス概要
サービスページ	カット、カラー、パーマなどのメニュー
スタッフ紹介	スタイリストのプロフィール
ギャラリー	ヘアスタイル写真の表示
サロン情報	住所、営業時間、アクセス
お問い合わせ	問い合わせフォーム
ブログ	Storyblok 管理の記事一覧
FAQ	よくある質問

また、以下のような機能も扱います。

機能	内容
Storyblok連携	ブログ、ギャラリー、問い合わせ情報の管理
プレビュー機能	Storyblok の下書きプレビュー確認
多言語対応	日本語・英語の切り替え
問い合わせフォーム	フォーム入力、送信、保存の流れ
品質ゲート	lint、test、build、規約チェック

サイトのデザインイメージは、ChatGPT の画像生成機能で作成したものを参考にしています。

今回使用した主なもの

今回の動画では、主に以下を利用しています。

項目	主な用途
spec-kit	仕様駆動開発の流れを作るため
NWG	Next.js Web制作規約を組み込むため
Next.js	サンプルサイトの実装
TypeScript	型安全な実装
Storyblok	ブログ、ギャラリー、問い合わせ情報の管理
AIエージェント	要件整理、実装、品質確認の支援

なお、Git や Docker Desktop などの前提となる開発環境の細かい説明は行いません。

また、Storyblok など外部サービスの個別操作説明も、この動画の主目的ではありません。

あくまで、spec-kit に NWG を導入して、Next.js Web制作規約をAIエージェントの開発フローに組み込む流れを中心に紹介しています。

この動画を見るとわかること

項目	内容
spec-kit の使い方のイメージ	仕様、計画、タスク、実装、チェックの流れ
NWG の役割	Next.js Web制作規約を開発フローに組み込む考え方
AIエージェント活用	丸投げではなく、規約に沿って開発を進める流れ
Next.js Web制作	ローカル環境でサンプルサイトを構築する流れ
品質ゲート	実装後に lint、test、build などを確認する流れ
Storyblok連携	CMSを使ったブログ、ギャラリー、問い合わせ情報管理の構成

今回扱わないこと

今回の動画では、以下の内容は詳しく扱いません。

項目	理由
Git や Docker Desktop の導入手順	前提環境として扱うため
Storyblok の個別操作説明	外部サービス解説が主目的ではないため
Vercel へのデプロイ	今回はローカル開発までを対象にしているため
Resend の本番設定	本番メール送信は想定に留めるため
バックアップ設定	今回の動画範囲外のため
監視設定	今回の動画範囲外のため
脆弱性通知設定	今回の動画範囲外のため

今回の主目的は、spec-kit に NWG を導入して、Next.js Web制作向けの規約をAIエージェントの開発フローに組み込むことです。

こんな方におすすめです

対象	理由
spec-kit を使っている方	標準フローにWeb制作規約を組み込む例として確認できます
Next.js でバイブコーディングしている方	AIに自由に作らせるだけでなく、ルールに沿って開発させる流れを確認できます
AIエージェントをWeb制作に使いたい方	要件定義から品質ゲートまでの進め方を参考にできます
SDD・仕様駆動開発に興味がある方	仕様を起点に実装へ進める具体例として見られます
Next.js / TypeScript の制作規約を整えたい方	SEO、セキュリティ、アクセシビリティ、品質ゲートの考え方を確認できます
Storyblok を使ったサイト制作に興味がある方	Next.js と Storyblok を組み合わせた構成例として確認できます

おわりに

AIエージェントを使えば、Web制作のスピードは大きく上がります。

一方で、要件やルールが曖昧なまま進めると、意図しない実装や、後から直しづらい構成になってしまうことがあります。

今回の動画では、spec-kit に NWG を導入し、Next.js Web制作向けの規約を開発フローに組み込む流れを紹介しています。

AIに何となく作らせるのではなく、要件定義、設計、実装、品質ゲートまでを同じ基準で進める。

そのための一つの方法として、NWG を試していただければと思います。

spec-kit を使っている方や、Next.js でバイブコーディングしている方は、ぜひ動画をご覧ください。