この記事は「モバイルアプリ開発における AI 活用術」の詳細記事です。
目次
- はじめに
- Flutter プロジェクト生成
- cc-sdd とは
- サブエージェントとは
- product.md の配置
- tech.md と structure.md の生成
- 最終的なディレクトリ構成
- .kiro/ 配下の役割
- CLAUDE.md について
- このフェーズの成果物
- 👤 人の判断ポイント
- 次のステップ
- 参考リンク
はじめに
企画が固まったら、ローカル環境でプロジェクトを作成します。このフェーズでは cc-sdd（Spec-Driven Development）をセットアップし、企画情報をプロジェクトに統合します。
このフェーズのゴール:
- Flutter プロジェクトの作成
- cc-sdd のインストールと設定
- ステアリング（開発方針）の配置と生成
Flutter プロジェクト生成
私は自作の GUI ツール「YokoFlu」を使っています。
このツールは Flutter アプリを作成する際に毎回実施する定型作業を自動化するために作成しました。
YokoFlu の機能:
- アプリ名、Bundle ID、アプリアイコンなどを GUI で設定
- 設定内容から Flutter プロジェクトを自動生成
- Firebase 設定なども CLI 経由で自動化
- 普段使うディレクトリ構成・ライブラリ構成を反映
詳しく知りたい方は下記をご参照ください。
Flutter アプリ爆速初期構築ツールを作ってみた
cc-sdd とは
cc-sdd（Claude Code Spec-Driven Development）は、AWS の AI IDE「Kiro」が提唱する Spec-Driven Development（仕様駆動開発） のワークフローを Claude Code で実現するためのツールです。
Kiro とは: AWS が 2025 年に発表した AI ネイティブ IDE です。「仕様書 → 設計 → タスク → 実装」という構造化されたワークフローで、AI と人間が協調しながら開発を進められます。cc-sdd はこのワークフローを Claude Code に持ち込むことで、Kiro を使わなくても同様の開発体験を得られるようにしたものです。
なぜ cc-sdd を使うのか
従来の AI コーディングでは「コードを書いて」と指示すると、AI が即座に実装を始めます。しかしこのアプローチには問題があります：
| 問題 | 詳細 |
|---|---|
| 要件の曖昧さ | 何を作るか明確でないまま実装が始まる |
| 設計の欠如 | アーキテクチャを考慮せずにコードが生成される |
| 手戻りの多さ | 「思ってたのと違う」が頻発 |
| コンテキストの分断 | 会話が長くなると AI が文脈を見失う |
cc-sdd は 「仕様を先に固める」 アプローチでこれらを解決します：
┌─────────────────────────────────────────────────────────────────────┐
│ cc-sdd の開発フロー │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Requirements（要件） ─────▶ 👤 人がレビュー │
│ │ │
│ ▼ │
│ Design（設計） ─────▶ 👤 人がレビュー │
│ │ │
│ ▼ │
│ Tasks（タスク） ─────▶ 👤 人がレビュー │
│ │ │
│ ▼ │
│ Implementation（TDD実装） │
│ │
└─────────────────────────────────────────────────────────────────────┘
cc-sdd の特徴
| 特徴 | 説明 |
|---|---|
| 3 フェーズ承認 | 要件 → 設計 → タスクの各段階で人間がレビュー |
| ステアリング | プロジェクトの「記憶」を保持し、AI が全体像を理解 |
| サブエージェント | 仕様策定・設計・実装を専門のエージェントが担当 |
| TDD 実装 | テストファーストで品質を担保 |
| 仕様の永続化 |
.kiro/specs/ に仕様が残り、後から参照・修正可能 |
cc-sdd のインストール
私は Claude Code のサブエージェント機能を活用した使用駆動開発を行いたいため、下記コマンドで cc-sdd をインストールしています。
npx cc-sdd@latest --claude-agent --lang ja
| オプション | 説明 |
|---|---|
--claude-agent |
Claude Code 用の 12 コマンドと 9 サブエージェントを生成 |
--lang ja |
日本語で仕様書を生成 |
作成されるファイル・ディレクトリ
| 作成されるもの | 説明 |
|---|---|
.claude/agents/kiro/ |
サブエージェント定義（spec-design.md, spec-impl.md など） |
.claude/commands/kiro/ |
スラッシュコマンド定義（/kiro:spec-* コマンド） |
.kiro/settings/ |
ルールとテンプレート |
CLAUDE.md への追記 |
AI-DLC セクションが追加される |
サブエージェントとは
Claude Code は複雑なタスクを専門のサブエージェントに委譲できます。cc-sdd では、インストール時に以下の 9 つのサブエージェント が定義されます。
仕様策定系（Spec）
| サブエージェント | 役割 |
|---|---|
spec-requirements |
EARS 記法で要件定義を生成 |
spec-design |
技術設計書を生成 |
spec-tasks |
実装タスクリストを生成 |
spec-impl |
TDD で実装（テストファースト） |
検証系（Validate）
| サブエージェント | 役割 |
|---|---|
validate-gap |
要件と既存コードの差分分析 |
validate-design |
設計の品質チェック（インタラクティブ） |
validate-impl |
実装が仕様を満たすか検証 |
ステアリング系（Steering）
| サブエージェント | 役割 |
|---|---|
steering |
.kiro/steering/ の初期化・同期（プロジェクト記憶） |
steering-custom |
カスタムステアリング作成（独自の開発方針を追加） |
ステアリング系とは: steering はプロジェクトの「記憶」を管理するエージェントです。product.md、tech.md、structure.md などを生成・同期します。steering-custom は API 規約やテスト方針など、プロジェクト固有のルールを追加したいときに使います。
product.md の配置
企画フェーズで生成した product.md を .kiro/steering/ に配置します。
product.md の内容例
# Product Overview
**Sodalio** は、自分専用にカスタマイズした AI キャラクターとの対話を通じて日々の振り返り（セルフリフレクション）を行い、会話内容を要約・保存できるモバイルアプリです。
「日記を書きたいけど何を書けばいいかわからない」「一人で考えを整理するのが苦手」というユーザーに、AI キャラクターとの自然な会話を通じて内省をサポートします。
## Core Capabilities
- **カスタマイズ可能な AI キャラクター**: アバター（見た目）と性格・口調を自分好みに設定し、愛着を持てる「自分だけの AI」を作成
- **対話型セルフリフレクション**: 日記のように書くのではなく、AI キャラクターとの会話を通じて自然に日々の出来事や感情を振り返る
- **会話要約・保存機能**: AI が会話内容を自動要約し、いつでも振り返れる形で保存。会話履歴としてタイムライン表示
- **多言語対応**: 16 言語（日本語、英語、中国語、韓国語など）での完全ローカライゼーション
- **ゲーミフィケーション**: XP システム、連続日数記録、レベルアップによるユーザーモチベーション維持
- **プレミアム機能**: サブスクリプションベースの高度な AI 機能と制限解除
- **クロスプラットフォーム**: iOS・Android 対応の Flutter アプリケーション
## Target User
### Primary Persona
- **年齢層**: 20〜35 歳の若年社会人・学生
- **特徴**: 自己成長への関心が高い、テクノロジーに親和性あり、日記を書きたいが続かない
- **ニーズ**: 気軽に内省したい、でも人に話すのは抵抗がある。カウンセリングには抵抗がある。AI キャラクターという「人ではない相手」だからこそ、気軽に本音を話せる
### Use Cases
- **デイリーリフレクション**: 1 日の終わりに AI キャラクターと 5〜10 分の会話で今日を振り返り、要約を保存
- **感情の整理**: モヤモヤする気持ちや悩みを AI に話すことで、自分の感情を言語化・整理
- **継続的な自己理解**: 保存された要約を定期的に見返し、自分の思考パターンや成長を認識
- **継続習慣形成**: ゲーム要素による日記習慣の継続サポート
- **多言語学習者**: 各言語での自然な表現学習と文化適応
## Value Proposition
- **「書く」から「話す」へ**: 従来の日記アプリの「白紙に向かって書く」プレッシャーを、AI との自然な会話で解消。質問されることで自然と内省が深まる
- **カスタマイズによる愛着**: 見た目と性格をカスタマイズした AI キャラクターは「自分だけの存在」となり、継続利用のモチベーションに直結
- **要約機能による価値の蓄積**: 会話は流れてしまうが、要約として保存されることで「自分の記録」としての価値が残る
- **親しみやすい AI 体験**: 堅い AI アシスタントではなく、親しみやすいキャラクターとの自然な対話
- **文化的配慮**: 各言語・文化に適応したキャラクター設定とプロンプト設計
- **プライバシー重視**: Firebase バックエンドによる安全なデータ管理と暗号化
- **段階的価値提供**: 無料版からプレミアムへの自然なアップグレードパス
## Success Metrics
- **North Star Metric**: 週間アクティブ会話ユーザー数（WAU with conversation）
- **Primary KPIs**:
- DAU/MAU 比率（目標 25%以上）
- Day7 継続率（目標 40%）
- 無料 → 有料転換率（目標 5%）
- ARPU
- **Secondary KPIs**:
- 平均セッション時間
- 会話完了率
- 要約閲覧率
## Market Context
### 市場機会
AI コンパニオン市場は 2024 年に約$28B で、2030 年まで CAGR 30%以上で成長予測。特に「メンタルヘルスサポート」セグメントが急成長中（48%のユーザーがメンタルヘルス目的で利用）。一方、デジタルジャーナリングアプリ市場も 2025 年に$6.5B、2035 年に$19B へ成長予測（CAGR 9.5%）。
### 未充足ニーズ
既存の AI コンパニオンアプリ（Replika, Character.AI 等）はエンターテインメント・ロマンス志向が強く、「セルフリフレクション」に特化したポジショニングは空白地帯。ジャーナリングアプリ（Reflectly, Day One 等）は AI 対話機能が限定的で、深い内省支援には不十分。
### 競合との価格比較
| サービス | 月額 | 年額 |
| ----------------- | --------- | ---------- |
| Replika Pro | $19.99 | $69.99 |
| Character.AI Plus | $9.99 | $94.99 |
| Reflectly Premium | $4.99 | $59.99 |
| **Sodalio** | **$9.99** | **$79.99** |
---
_Focus on patterns and purpose, not exhaustive feature lists_
ポイント: 企画で整理したペルソナ、市場調査の要点、収益戦略、ビジョンを product.md に含めることで、AI が仕様策定時に「なぜこの機能が必要か」「どこに向かっているか」を理解できます。
tech.md と structure.md の生成
product.md を配置したら、ローカルの Claude Code で /kiro:steering コマンドを実行します。
/kiro:steering
Sync Mode
product.md が既に存在する場合、このコマンドは Sync Mode で動作し、コードベースを解析して以下を自動生成します：
| ファイル | 内容 |
|---|---|
tech.md |
技術スタック、アーキテクチャパターン |
structure.md |
ディレクトリ構成、コーディング規約 |
tech.md の内容例
# Technical Stack
## Framework
- Flutter 3.x
- Dart 3.x
## State Management
- Riverpod
## Backend
- Firebase (Authentication, Firestore, Functions)
- Vertex AI
## Architecture
- Repository Pattern
- Provider Pattern (via Riverpod)
structure.md の内容例
# Project Structure
## Directory Layout
lib/
├── screens/ # UI 画面
├── models/ # データモデル
├── services/ # ビジネスロジック
├── providers/ # Riverpod プロバイダー
├── widgets/ # 共通ウィジェット
└── utils/ # ユーティリティ
## Coding Conventions
- ファイル名: snake_case
- クラス名: PascalCase
- 変数名: camelCase
最終的なディレクトリ構成
cc-sdd を使うと、仕様策定時に必要なディレクトリが自動で作成されます。
モノレポ構造: このプロジェクトは Sodalio/（Flutter アプリ）と Sodalio-backend/（Firebase Functions）を含むモノレポ構成です。cc-sdd 関連ファイルはルートに配置されます。
最終的には以下のような構成になります：
your_project/ # モノレポルート
├── .claude/ # Claude Code 設定（cc-sdd自動生成）
│ ├── agents/ # サブエージェント定義（9個）
│ │ └── kiro/
│ │ ├── spec-design.md
│ │ ├── spec-impl.md
│ │ ├── spec-requirements.md
│ │ ├── spec-tasks.md
│ │ ├── steering.md
│ │ ├── steering-custom.md
│ │ ├── validate-design.md
│ │ ├── validate-gap.md
│ │ └── validate-impl.md
│ ├── commands/ # スラッシュコマンド定義（12個）
│ │ └── kiro/
│ │ ├── spec-design.md
│ │ ├── spec-impl.md
│ │ ├── spec-init.md
│ │ ├── spec-quick.md
│ │ ├── spec-requirements.md
│ │ ├── spec-status.md
│ │ ├── spec-tasks.md
│ │ ├── steering.md
│ │ ├── steering-custom.md
│ │ ├── validate-design.md
│ │ ├── validate-gap.md
│ │ └── validate-impl.md
│ └── settings.local.json # ローカル設定
├── .kiro/
│ ├── steering/ # プロジェクト全体の方針（Project Memory）
│ │ ├── product.md # 製品ビジョン・ペルソナ・収益戦略
│ │ ├── tech.md # 技術スタック・アーキテクチャ
│ │ └── structure.md # ディレクトリ構成・コーディング規約
│ ├── specs/ # 機能ごとの仕様（cc-sdd自動生成）
│ │ └── {feature-name}/
│ │ ├── requirements.md # 要件定義
│ │ ├── design.md # 技術設計書
│ │ └── tasks.md # 実装タスクリスト
│ └── settings/ # ルールとテンプレート
│ ├── rules/ # 仕様策定ルール
│ └── templates/ # テンプレート
├── CLAUDE.md # プロジェクトの憲法
├── Sodalio/ # Flutterアプリ
│ ├── lib/ # ソースコード
│ └── test/ # テストコード
└── Sodalio-backend/ # Firebase Functions
.kiro/ 配下の役割
| ディレクトリ | 役割 | 作成タイミング |
|---|---|---|
steering/ |
開発方針 + 企画情報（なぜ・どう作るか） | 企画: product.md（Claude.ai）、初期化: tech.md, structure.md（ローカル） |
specs/ |
機能仕様（何を作るか） | 開発フェーズで自動生成 |
steering（ステアリング）とは
ステアリングは「プロジェクトの記憶」として機能します：
- product.md: なぜこのアプリを作るのか（企画意図）
- tech.md: どんな技術で作るのか（技術スタック）
- structure.md: どう構成するのか（ディレクトリ、規約）
これにより AI は「全体像を理解した上で」仕様策定・実装ができます。
specs（仕様）とは
specs は機能ごとの詳細仕様を保存します：
.kiro/specs/
├── user-authentication/
│ ├── requirements.md # 認証機能の要件
│ ├── design.md # 認証機能の設計
│ └── tasks.md # 認証機能の実装タスク
├── character-chat/
│ ├── requirements.md
│ ├── design.md
│ └── tasks.md
└── ai-image-generation/
├── requirements.md
├── design.md
└── tasks.md
CLAUDE.md について
CLAUDE.md はプロジェクトの「憲法」として機能します。cc-sdd インストール時に AI-DLC セクションが追記されます。
追記される内容
# AI-DLC and Spec-Driven Development
Kiro-style Spec Driven Development implementation on AI-DLC (AI Development Life Cycle)
## Project Context
### Paths
- Steering: `.kiro/steering/`
- Specs: `.kiro/specs/`
### Steering vs Specification
**Steering** (`.kiro/steering/`) - Guide AI with project-wide rules and context
**Specs** (`.kiro/specs/`) - Formalize development process for individual features
### Active Specifications
- Check `.kiro/specs/` for active specifications
- Use `/kiro:spec-status [feature-name]` to check progress
## Development Guidelines
- 回答は日本語で行う。requirements.md、design.md、tasks.md、research.md、validation reports などの仕様関連 Markdown は spec.json.language に従う。
## Minimal Workflow
- Phase 0 (optional): `/kiro:steering`, `/kiro:steering-custom`
- Phase 1 (Specification):
- `/kiro:spec-init "description"`
- `/kiro:spec-requirements {feature}`
- `/kiro:validate-gap {feature}` (optional: for existing codebase)
- `/kiro:spec-design {feature} [-y]`
- `/kiro:validate-design {feature}` (optional: design review)
- `/kiro:spec-tasks {feature} [-y]`
- Phase 2 (Implementation): `/kiro:spec-impl {feature} [tasks]`
- `/kiro:validate-impl {feature}` (optional: after implementation)
- Progress check: `/kiro:spec-status {feature}` (use anytime)
## Development Rules
- 3-phase approval workflow: Requirements → Design → Tasks → Implementation
- Human review required each phase; use `-y` only for intentional fast-track
- Keep steering current and verify alignment with `/kiro:spec-status`
- Follow the user's instructions precisely, and within that scope act autonomously: gather the necessary context and complete the requested work end-to-end in this run, asking questions only when essential information is missing or the instructions are critically ambiguous.
## Steering Configuration
- Load entire `.kiro/steering/` as project memory
- Default files: `product.md`, `tech.md`, `structure.md`
- Custom files are supported (managed via `/kiro:steering-custom`)
これにより Claude Code がプロジェクトの開発フローを理解できます。
このフェーズの成果物
| 成果物 | 説明 |
|---|---|
| Flutter プロジェクト | 基本的なプロジェクト構造 |
.claude/ |
サブエージェント、コマンド定義 |
.kiro/steering/ |
product.md, tech.md, structure.md |
CLAUDE.md |
AI-DLC セクション追記済み |
👤 人の判断ポイント
このフェーズで人が判断すべきポイント：
| # | 判断内容 | 詳細 |
|---|---|---|
| 1 | ステアリングの最終確認 | tech.md, structure.md が実態と合っているか |
次のステップ
👉 cc-sdd 開発編 へ進む