---
name: "demand-definition"
description: "新機能のアイデアを壁打ちし、本当に必要な要件を見極めるためのスキル。JSON進捗管理でステップバイステップに進行。トリガー：「壁打ちしたい」「機能を考えたい」「要件を整理したい」「この機能について相談」「新機能のアイデア」「要求定義」「要件定義」"
allowed-tools: "Read, Write, Edit, Glob, Grep, Task, mcp__serena__find_file, mcp__serena__get_symbols_overview, mcp__serena__find_symbol, mcp__serena__search_for_pattern, mcp__serena__list_dir"
---

# Demand Definition - 要求定義・要件定義スキル

新機能のアイデアを壁打ちし、要件定義・UI設計プロンプト生成まで段階的に進めるスキル。

## コア原則

1. **すぐに解決策を出さない** - まず「なぜ？」を深掘りする
2. **各ステップを確実に完了** - 進捗をJSONで管理
3. **既存資産を活用** - コードベースを参照して代替案を検討
4. **コードファーストの調査** - **全フェーズで必ず現状のコードを把握してから質問する**

## 行動方針（CRITICAL）

**各ステップ開始時、必ず以下の順序で実行すること**:

1. ✅ **ドメイン知識ドキュメントを読み込む**（最優先）
- `docs\domain\`配下のドキュメントを確認
- ユーザーが言及した画面に関連するドキュメント（`http:\\task-board.md`, `http:\\plan.md`, `http:\\progress.md`）を読む
- アプリケーション全体の機能概要、目的、ユースケースを把握

2. ✅ **コードを調査する**（ユーザーに聞く前に）
- ユーザーが言及した画面、機能、コンポーネントを特定
- `mcp__serena__*`ツールで現状の実装を把握
- 既存のパターン、制約、類似機能を確認

3. ✅ **調査結果から不要な質問を省く**
- ドメイン知識ドキュメント・コードから分かることは質問しない
- 既に実装されている機能は前提として扱う
- 現状の制約を理解した上で提案する

4. ✅ **本当に分からない部分だけ質問する**
- ドメイン知識・コードからは読み取れないユーザーの意図
- ビジネス要件や優先順位
- 将来の拡張計画

**NG例**:
- ❌「現在の画面構成はどうなっていますか？」→ ドメイン知識ドキュメント・コードを見れば分かる
- ❌「どんな状態がありますか？」→ ドメイン知識ドキュメント・コードを見れば分かる
- ❌「既存の類似機能はありますか？」→ ドメイン知識ドキュメント・コードを検索すれば分かる
- ❌「この画面の目的は何ですか？」→ ドメイン知識ドキュメントに記載されている

**OK例**:
- ✅ ドメイン知識ドキュメント・コードから現状を把握 → 「`docs\domain\progress.md`を確認しました。現在は3カラム構成（未着手\進行中・保留\完了）ですが、スクロール問題が課題とのこと。どのくらいの頻度で困っていますか？」
- ✅ ドメイン知識ドキュメント・既存実装を確認 → 「ドメイン知識ドキュメントと既存実装を確認しましたが、完了タスクのトグル機能は見つかりませんでした。完了タスクを確認したい頻度はどのくらいですか？」

## ワークフロー概要

**Note**: 依存関係分析はcc-sdd（Claude Code Spec-Driven Development）に任せるため、このスキルでは扱いません。

## セッション開始

壁打ちセッション開始時、以下を実行：

1. **セッション名（feature-slug）を生成**:
- 機能名を英語のkebab-caseスラッグに変換
- 日本語の場合は英訳してからスラッグ化
- 既存セッションと重複する場合は末尾に連番を付与

**生成例**:
- 「進捗管理画面レイアウト改善」 → `progress-layout-improvement`
- 「ユーザーのお気に入り機能」 → `user-favorite-feature`
- 「カテゴリーフィルター追加」 → `category-filter-addition`
- 「タスク一括削除機能」（既存あり） → `task-bulk-delete-2`

2. `.agent\demand_definition\sessions\<feature-slug>\` ディレクトリを作成
3. 新規セッションファイル `session.json` を作成
4. **ディスカッション議事録** `discussion_log.md` を作成
5. Step 1 から開始

## ディスカッション議事録（CRITICAL）

各ステップでユーザーとの対話を行うたびに、セッションディレクトリの `discussion_log.md` に対話内容を**必ず追記**する。

**詳細**: `.agent\demand_definition\references\discussion_log_format.md` を参照

**ディレクトリ構造**:

### 初期JSONテンプレート

```json
{
"sessionId": "<feature-slug>",
"feature": "<機能名>",
"status": "in_progress",
"currentStep": 1,
"createdAt": "<ISO8601>",
"updatedAt": "<ISO8601>",
"steps": {
"1_purpose": false,
"2_alternatives": false,
"3_scope": false,
"4_requirements": false,
"5_ui_prompt": false
}
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 壁打ちセッション: <機能名>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
現在: Step <N>\5 - <ステップ名>

進捗: [██████░░░░] 60%

[質問や確認事項]

✅ Step <N> 完了: <ステップ名>
→ <簡潔なサマリー>
次へ進みますか？（「次へ」で続行）

{

"currentStep": 2,

"steps": {

"1_purpose": true,
"2_alternatives": false,
...

},
"updatedAt": "2025-01-15T10:30:00Z"
}

{
"status": "completed",
"completedAt": "<ISO8601>",
"steps": {

"1_purpose": true,

"2_alternatives": true,

"3_scope": true,
"4_requirements": true,
"5_ui_prompt": true
}
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 壁打ちセッション: ユーザーのお気に入り機能
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
現在: Step 1\5 - 課題・目的の深掘り

進捗: [██░░░░░░░░] 20%

この機能で解決したい課題は何ですか？

誰のための機能でしょうか？

なるほど。もう少し詳しく教えてください：
- その課題は、どのくらいの頻度で発生していますか？

- 今はその課題をどうやって回避していますか？
- この機能がないと、具体的にどんな不便がありますか？

.agent\demand_definition\references\discussion_log_format.md

## [ステップ名] - YYYY-MM-DD HH:MM

### ユーザー発言
> [ユーザーの発言内容]

### Claude提案\質問
[Claudeの提案や質問内容]

### 決定事項
- [決まったこと]
- [却下されたこと]

### 理由\背景
[なぜその決定をしたのか]

---

## Step 2: 代替案・既存機能の検討 - 2025-01-15 10:30

### ユーザー発言
> カラムの順番は変えたくなくて...かつ、未着手に関しても、通常時は非表示にしておきたいかも

### Claude提案
4つの代替案を提示：
1. カラム順序変更 + 完了カラム非表示
2. 進行中カラムの幅を広げる
3. 完了カラムをアコーディオン式に折りたたむ
4. 完了カラムをサイドバー化

### 決定事項
- ❌ カラムの順序変更は却下
- ✅ 未着手も通常時は非表示にする
- ✅ 進行中カラムのみ表示 + トグルで未着手・完了を表示

### 理由\背景
- カラムの順序は既存のユーザー体験を維持したい
- 未着手も頻繁に見るわけではないので非表示にできる
- スクロール問題を完全に解決するため、1カラム表示が最適

---

## [Step X修正] 変更内容の簡潔な説明 - YYYY-MM-DD HH:MM

### ユーザー発言
> [変更を促した発言]

### 変更内容
- ❌ 却下: [初期決定の内容]
- ✅ 採用: [新しい決定の内容]

### 理由\背景
[なぜ変更したのか]

### 影響を受けるステップ
- Step X: [初期決定のセクション名]

---

## Step 3: スコープ決定（MVP定義） - 2025-12-24 08:00

### 決定事項
- ✅ **スマホ**: タブ切り替え方式（デフォルト: 未着手 | 進行中）
- ✅ **スワイプ対応**（左右スワイプでタブ移動）
### 理由\背景

- スクロールがしんどいので、タブで1画面に1カラムのみ表示
- スワイプで直感的に切り替えられるとモバイルフレンドリー
---

## [Step 3修正] スマホUIパターンの変更 - 2025-12-24 08:20

### ユーザー発言

> こっちさ、Drawerじゃダメかな？（モバイル対応のセクションを見て）
### Claude質問

スマホでもドロワー方式を採用するということですね？デメリットを整理しました。
### ユーザー回答

> タブ切り替えだと、Dragした時の挙動操作が若干めんどくさそうだなと思った
### 変更内容

- ❌ 却下: スマホのタブ切り替え方式
- ❌ 却下: スワイプ対応
- ✅ 採用: スマホもドロワー方式に統一
- ✅ 採用: ドロワー幅はレスポンシブ対応（PC: 300px、スマホ: 80-85%）
### 理由\背景

- ドラッグ&ドロップの操作性を重視
- タブ切り替えだと、タブをまたいだドラッグが複雑になる
- PC\スマホで統一されたUX体験を提供
### 影響を受けるステップ

- Step 3: スコープ定義の「スマホ」セクション
- Step 4: 要件定義の US-5, US-6
---

.agent\demand_definition\references\step1_purpose.md

「〇〇機能」について壁打ちを始めましょう。
まず教えてください：

この機能を作ろうと思ったきっかけは何ですか？

整理させてください：

課題: 〇〇
対象ユーザー: △△
解決後の状態: □□

この理解で合っていますか？

.agent\demand_definition\references\step2_alternatives.md

既存のコードベースを確認させてください。
類似の機能や再利用できそうな部分があるか調べます。

代替案を3つ考えました：

1. [案A]: [概要]
工数: [小\中\大]
価値: [低\中\高]
メリット: ...
デメリット: ...

**UIイメージ**:
[ASCII artまたはMarkdownで視覚的に表現]

2. [案B]: ...

**UIイメージ**:
[...]

3. [案C]: ...

**UIイメージ**:
[...]

どれが最も適切だと思いますか？

### 案A: カラム順序変更

**PC\タブレット**:
┌────────────────────────────────────────┐
│  ┌──────┐  ┌──────┐  ┌──────┐        │
│  │進行中│  │未着手│  │完了  │        │
│  │      │  │      │  │      │        │
│  │      │  │      │  │      │        │
│  └──────┘  └──────┘  └──────┘        │
└────────────────────────────────────────┘

**スマホ**:
┌──────────┐
│ 進行中   │
│          │
├──────────┤
│ 未着手   │
│          │
├──────────┤
│ 完了     │
│          │
└──────────┘

### 案B: ドロワー式（推奨）

**PC\タブレット**:
┌─┬──────────────────────────────────┐
│○│  ┌──────────────────────┐        │
│ │  │ 進行中（全幅表示）    │        │
│未│  │                      │        │
│着│  │                      │        │
│手│  │                      │        │
│ │  └──────────────────────┘        │
└─┴──────────────────────────────────┘
↑ クリックでドロワー開く

ドロワー展開時:
┌────────┬─────────────────────────┐
│未着手  │  進行中（全幅表示）      │
│        │                         │
│タスク1 │                         │
│タスク2 │                         │
│        │                         │
│ [×]   │                         │
└────────┴─────────────────────────┘
↑ 背景クリックで閉じる

.agent\demand_definition\references\step3_scope.md

この機能をリリースする最小限の形を考えましょう。

もし1週間しかなかったら、何を削りますか？
逆に、絶対に外せない機能は何ですか？

機能を整理しました：

🔴 MVP（絶対必要）
- ...
- ...

🟡 Nice to Have（あったら嬉しい）
- ...
- ...

🟢 Future（将来拡張）
- ...
- ...

この分類で進めていいですか？

.agent\demand_definition\references\step4_requirements.md

As a [ユーザー種別]
I want [達成したいこと]
So that [得られる価値]

As a リピートユーザー
I want 過去の相談履歴を見返せるようにしたい
So that 同じ相談を繰り返さずに済む

Given [前提条件]
When [アクション]
Then [期待される結果]

Given ユーザーがログインしている
When お気に入りボタンをクリックする
Then その相談がお気に入り一覧に追加される

# [機能名] 要件定義書

## 1. 機能概要
[1段落で機能の目的と価値を説明]

## 2. ユーザーストーリー
- As a ... I want ... So that ...
- ...

## 3. 受け入れ条件
### [ユーザーストーリー1]
- Given ... When ... Then ...
- ...

## 4. 非機能要件
### 応答性
- ユーザーが操作してから結果が表示されるまでの体感速度

### 使いやすさ
- キーボード操作の対応
- モバイルでの使いやすさ

### アクセシビリティ
- スクリーンリーダー対応
- 色覚サポート

### エラー時の挙動
- ユーザーへのフィードバック方法

### US-1: タスクタイトルでの検索
As a タスクを50件以上管理しているヘビーユーザー
I want タスクのタイトルをキーワードで検索したい
So that スクロールせずに目的のタスクを素早く見つけられる

**AC-1.1: 部分一致検索が動作する**
Given ユーザーがタスクボードを開いている
When 検索バーに「会議」と入力する
Then タイトルに「会議」を含むすべてのタスクが表示される

### 非機能要件
#### 応答性
- 検索キーワードを入力してから0.5秒以内に結果が表示される
- 入力中も結果がリアルタイムに更新される

#### 使いやすさ
- 検索バーはTabキーでフォーカス可能
- Escapeキーで検索をクリアできる
- モバイルでも検索バーが使いやすいサイズ

.agent\demand_definition\references\step5_ui_prompt.md

## 画面: [画面名]

### 目的
[この画面で達成したいこと]

### レイアウト図

### 主要コンポーネント
- [コンポーネント1]: [説明]
- [コンポーネント2]: [説明]

### ユーザーフロー
1. [ステップ1]
2. [ステップ2]

### デザイントーン
- スタイル: [既存UIとの一貫性についての指示]
- カラー: [使用する色について]
- 参考: [既存の類似画面があれば]

### 実装プロンプト
[frontend-design Skillや実装者に渡すための詳細なプロンプト]

┌─┬─┐  上辺・角
│ │ │  縦線・区切り
├─┼─┤  中間の区切り
└─┴─┘  下辺・角

[要素]   コンポーネントやUI要素
[🔍]     アイコン（絵文字で表現）
━━━━━   強調する区切り線

┌─────────────────────────────────────┐
│  タスク作成                    [×]  │
├─────────────────────────────────────┤
│                                     │
│  タスク名                           │
│  ┌─────────────────────────────┐   │
│  │ [入力欄]                    │   │
│  └─────────────────────────────┘   │
│                                     │
│  優先度                             │
│  ○ 今やる  ○ 後でやる  ○ いつかやる │
│                                     │
│  カテゴリー                         │
│  [▼ 選択してください]               │
│                                     │
├─────────────────────────────────────┤
│              [キャンセル] [作成]    │
└─────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│  [🔍] 検索...                              [+]  │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌───────────────────────────────────────┐      │
│  │ ☐ タスクタイトル1          [仕事]     │ [⋮] │
│  │   説明文...                2024\01\15  │      │
│  └───────────────────────────────────────┘      │
│                                                 │
│  ┌───────────────────────────────────────┐      │
│  │ ☑ タスクタイトル2          [個人]     │ [⋮] │
│  │   説明文...                2024\01\14  │      │
│  └───────────────────────────────────────┘      │
│                                                 │
│  ┌───────────────────────────────────────┐      │
│  │ ☐ タスクタイトル3          [趣味]     │ [⋮] │
│  │   説明文...                2024\01\13  │      │
│  └───────────────────────────────────────┘      │
│                                                 │
└─────────────────────────────────────────────────┘

┌────────────┬────────────┬────────────────────┐
│  今やる     │  後でやる   │  いつかやる         │
├────────────┼────────────┼────────────────────┤
│ ┌────────┐ │ ┌────────┐ │ ┌────────┐         │
│ │ Task 1 │ │ │ Task 3 │ │ │ Task 5 │         │
│ └────────┘ │ └────────┘ │ └────────┘         │
│            │            │                    │
│ ┌────────┐ │ ┌────────┐ │ ┌────────┐         │
│ │ Task 2 │ │ │ Task 4 │ │ │ Task 6 │         │
│ └────────┘ │ └────────┘ │ └────────┘         │
│            │            │                    │
└────────────┴────────────┴────────────────────┘

\svg-logo-designer を使って以下のUIコンポーネントを作成:
- ボタンデザイン
- アイコンセット
- ロゴやバッジ

mcp__image-generate__generate_image を使って:
- 画面全体のモックアップ
- 複雑なレイアウトのビジュアライゼーション

Create a modern task management app interface with:
- Clean, minimalist design
- Three-column layout (Today, Later, Someday)
- Each column contains task cards with checkboxes
- Top navigation bar with search and add button
- Soft shadows and rounded corners
- Color scheme: white background, blue accents (#3B82F6)
- Mobile-friendly responsive design

タスク管理アプリのメイン画面を作成してください：
- シンプルでモダンなデザイン
- 3カラムレイアウト（今やる・後でやる・いつかやる）
- 各カラムにはチェックボックス付きのタスクカード
- 上部に検索バーと追加ボタン
- 柔らかい影と角丸
- 配色：白背景、青のアクセント（#3B82F6）
- モバイル対応のレスポンシブデザイン

## 画面: お気に入り一覧画面

### 目的
ユーザーが保存した相談履歴を一覧で確認し、詳細を見返せるようにする

### レイアウト図

### 主要コンポーネント
- **ヘッダー**: 「お気に入り一覧」タイトル + 戻るボタン
- **お気に入りカード**: サムネイル、タイトル、日付、お気に入り解除ボタン（★）
- **空状態**: お気に入りがない場合の案内メッセージとアイコン

### ユーザーフロー
1. 画面を開く → お気に入り一覧が表示される
2. カードをタップ → 相談詳細画面へ遷移
3. ★ボタンをタップ → お気に入り解除の確認ダイアログ表示
4. 確認 → お気に入りから削除され、リストから消える
5. お気に入りが0件の場合 → 空状態の案内を表示

### デザイントーン
- **スタイル**: 既存のチャット履歴画面と統一
- **カラー**:
- プライマリ: #3B82F6（青）
- 背景: #FFFFFF（白）
- テキスト: #1F2937（濃いグレー）
- サブテキスト: #6B7280（グレー）
- **角丸**: 12px（カード）
- **シャドウ**: subtle（0 2px 4px rgba(0,0,0,0.1)）
- **参考**: チャット履歴画面と同じカードデザイン

### 実装プロンプト

お気に入り一覧画面のUIコンポーネントを作成してください。

**画面構成**:
1. ヘッダー
- 左: 戻るボタン（<アイコン）
- 中央: 「お気に入り一覧」タイトル

2. お気に入りカード（リスト形式）
- 左: サムネイル画像（正方形、60x60px）
- 中央上: タイトル（太字、14px）
- 中央下: 相談内容の抜粋（2行まで、12px、グレー）
- 右上: 日付（12px、グレー）
- 右: お気に入り解除ボタン（★アイコン、黄色）

3. 空状態
- 中央: 星アイコン（大きめ、グレー）
- メッセージ: 「お気に入りがありません」
- サブメッセージ: 「相談をお気に入りに追加してみましょう」

**インタラクション**:
- カードタップ → 詳細画面へ遷移
- ★ボタンタップ → 確認ダイアログ → 削除
- 削除時はフェードアウトアニメーション

**レスポンシブ**:
- モバイル: カードを縦に並べる
- タブレット以上: 2カラムのグリッド表示も検討

**アクセシビリティ**:
- カードにaria-label追加（「タイトル、日付、お気に入り解除ボタン」）
- キーボード操作対応

## 画面ごとにプロンプトを作成

複数の画面が必要な場合は、それぞれの画面について上記フォーマットでプロンプトを作成します。

例：
- 画面1: タスク一覧画面
- 画面2: タスク作成モーダル
- 画面3: タスク詳細画面
- 画面4: カテゴリー設定画面

## 出力先

セッションディレクトリ内の`5_ui_prompt.md`に上記フォーマットで保存

## 完了条件

- [ ] 全画面のレイアウト図を作成
- [ ] 主要コンポーネントを明記
- [ ] ユーザーフローを記載
- [ ] 実装プロンプトを作成
- [ ] （オプション）ビジュアルイメージを生成