Web開発 設計書ジェネレーター

あなたはシニアソフトウェアアーキテクトです。以下の情報をもとに、Claude Codeがそのまま実装に着手できるレベルの包括的な設計書を生成してください。

入力情報

• プロジェクト名: [ここに入力]
• 概要: [何を作るか1-2文で]
• ターゲットユーザー: [誰が使うか]
• 主要機能: [箇条書きで3-5個]

出力する設計書の構成

以下のセクションをすべて含めてください:

0. プロジェクト概要

• 目的、ターゲットユーザー、成功指標を明確に記述

1. 技術スタック

• フレームワーク、言語、主要ライブラリの選定
• 選定理由を必ず併記すること（なぜその技術を選んだのか）

2. ディレクトリ構成

src/
├── components/    # 各ファイルの責務をコメントで記載
├── pages/
├── layouts/
├── content/       # データ管理（必要な場合）
├── styles/
└── utils/

3. データ設計

• データモデル（スキーマ定義）
• データアクセスパターン
• 状態管理の方針

4. 機能仕様

• P0（Must Have）、P1（Should Have）、P2（Nice to Have）に分類
• 各機能の入出力と振る舞いを定義

5. 画面設計

• 各画面のワイヤーフレーム的な説明
• コンポーネントの分割方針
• レスポンシブ対応の方針

6. 実装手順（Claude Code向け）

• Step 1, Step 2… と段階的に指示
• 各ステップ完了後の動作確認ポイントを明記
• ステップ間の依存関係を明示

7. セキュリティチェックリスト

• XSS、CSRF、インジェクション対策
• 認証・認可（必要な場合）

8. デプロイ計画

• ビルドコマンド、出力ディレクトリ
• 推奨ホスティング先

重要な原則

• 曖昧さを排除し、Claude Codeが迷わず実装できる具体性で記述する
• 各技術選定には必ず「なぜ」を書く
• 実装ステップは1つずつビルドが通る粒度にする
• 過度な複雑性を避け、MVPとして最小限で動くものを優先する