子供向けに、AIで遊びや学びの機能を作っていこうと思います。
対象は5歳と0歳です。
絵本やクイズ、間違い探しなど、日常の中で使えるものを少しずつ増やしていく予定です。
ただ、単発で作っていくのではなく、継続して作るためには、最初に開発の土台を作っていきます。
試したこと
やったことはシンプルです。
Claude Codeに対して、モノレポ構成を設計させました。
入力として渡したのは、以下のような内容です。
- このプロジェクトの目的
- 子供向けAIという前提
- 対象ユーザー（5歳・0歳・親）
- 将来的に作る機能一覧
- 設計のルール（体験単位、プロンプト分離など）
- 技術スタック
- 出力形式（調査、設計、実装）
- 制約（最小構成、拡張性）
- 完了条件
実際の入力(ChatGPTに作ってもらいました)
# 目的
子供（5歳・0歳）向けに、AIを使った遊びや学びの機能を開発するためのモノレポを構築したい。
このリポジトリは、単なるアプリ開発ではなく、
「AIを使った体験を試作し、その試行錯誤を記録し、ブログにする」
ことを目的とする。
—
# 前提コンセプト
・AIは「道具」として使う
・子供に何かを教えるのではなく、体験を豊かにする
・試行錯誤のプロセスも重要な成果物
・親（自分）の時間や体験がどう変わるかも重視する
—
# 対象ユーザー
・主に5歳児（メイン）
・0歳児（サブ）
・親（操作する主体）
—
# 作りたい機能（初期）
以下のような子供の遊びや学びができる機能を将来的に追加していく前提
– 間違い探し
– ウォーリーを探せみたいなもの
– 時計の読み方を学ぶ
– オリジナル絵本生成
– クイズ生成
– 寝る前ストーリー生成
– 音・子守唄生成
– 成長記録の整理
– 印刷コンテンツ（ぬりえ等）
—
# 要求事項（重要）
Claude CodeのBest Practicesに従って進めてください。
特に以下を守ること：
1. 調査 → 設計 → 実装 の順で進める
2. ディレクトリ構造は拡張性を重視する
3. コンテキスト管理しやすい構造にする
4. CLAUDE.mdでルールを定義する
5. 機能単位ではなく「体験単位」で分割する
6. プロンプト（AIへの指示）はコードと分離する
7. 実験や試行錯誤を保存できる構造にする
—
# 技術スタック（希望）
– TypeScript
– Next.js（フロント）
– Node.js（API）
– モノレポ管理（pnpm + turbo など）
※最適な構成があれば提案してよい
—
# 出力してほしい内容
## Step1: 調査
・この要件に対して適切なモノレポ構成の方針を整理
・なぜその構成が良いか説明
## Step2: 設計
・ディレクトリ構造を具体的に設計
・各ディレクトリの役割を説明
・featuresの切り方を定義
・packagesの役割を定義
・docsの設計方針を定義
・CLAUDE.mdに書くべき内容を設計
## Step3: 実装
以下を実際に生成する
1. ディレクトリ構造（tree形式）
2. 初期ファイル一覧
3. CLAUDE.mdの中身
4. README.md（プロジェクト概要）
5. 最低限のpackage.json
6. pnpm workspace設定
7. turbo設定
8. サンプルfeature（picture-book）の雛形
—
# 制約
・過剰に複雑にしない
・初期は最小構成で動くことを重視
・あとから拡張しやすい構造にする
—
# 完了条件
以下が満たされていること
・そのまま開発を開始できる構成になっている
・Claude Codeが読みやすい構造になっている
・feature単位で独立して開発できる
・プロンプト管理が分離されている
・実験結果を保存できる
—
# 最後に
実装は一気にやらず、
まず調査と設計をしっかり出力してください。
ポイントは、いきなりコードを書かせるのではなく、
まず調査と設計をさせたこと
です。
AIの調査・設計
Claude Codeは、まず調査フェーズで設計方針を整理しています。
例えば、
- pnpm + turborepo を選定
- 体験単位で分割する
- プロンプトはコードから分離する
といった判断です
機能単位ではなく体験単位で分割することで、
Claude Codeが1フィーチャー単位で理解できる粒度になる
これは指示に含まれているモノレポは、AIの文脈を整理するための構造
という話とつながっており、指示通りに考えてくれていることがわかります。
AIによるモノレポ構築
実際のやりとりの流れはこうでした。
調査 → 設計 → 実装
まずいきなりファイルを作るのではなく、
- なぜその構成にするのか
- どのように分割するのか
といったことを整理し、その上で、
- apps
- packages
- prompts
- experiments
- docs
といった構造を設計しています。
実際の設計内容
例えば、featuresの設計はかなり具体的でした。
- picture-book
- spot-the-diff
- clock-reading
- bedtime-story
のように、すべて体験単位で分割されています。
実装フェーズ
設計を承認すると、Claude Codeはそのまま実装に入ります。
実際に生成されたものは、
- ルート設定ファイル
- Next.js フロントエンド
- Hono APIサーバー
- 型定義パッケージ
- フィーチャー単位の構成
- 実験ディレクトリ
などです。
以下のディレクトリ構成が作成されていました。
child_play/
├── CLAUDE.md ← Claude Code の動作ルール
├── apps/
│ ├── web/ ← Next.js フロントエンド
│ └── server/ ← Node.js API サーバー（AI コール）
├── packages/
│ ├── types/ ← @child-play/types（型定義の唯一の真実）
│ ├── ui/ ← @child-play/ui（共有コンポーネント）
│ ├── config/ ← @child-play/config（フィーチャーレジストリ）
│ └── eslint-config/
├── prompts/ ← AI プロンプト（現在の最善版のみ）
│ ├── picture-book/
│ └── _shared/ ← 共通スニペット（年齢安全フレーミング等）
├── experiments/ ← 試行錯誤の記録（削除しない永続記録）
│ └── _template/ ← 新実験のコピー元最終的には、
pnpm install と type-check が通る状態まで一気に作られました。
途中での方針変更
指示が悪かったせいか、最初は、絵本を作るツールが一緒にできあがっており、絵本を作るのに
外部のLLM APIを使う構成
になっていました。
- Anthropic SDK
- promptsディレクトリ
- prompt-loader
などが含まれていました。
ただ、せっかくClaude Code使っているのに、別のAIを使っていたらお金が2重にかかってしまいます。
使うAIは、ChatGPT or Claude codeだけにしたいです。
そのため、修正を指示しました。絵本のツールは残ってても気にしないことにしました。
修正指示
Claudeに対して、
外部AIは使わない
と指示を出しました。
変更結果
その結果、
- Anthropic SDK 削除
- service.ts 削除
- prompt-loader 削除
- prompts ディレクトリ削除
という構成に変わりました。
代わりに、
- 将来的にロジックを追加する形
になっています。
結果
最終的にできた構造は、かなりシンプルです。
- apps
- packages
- experiments
- docs
そして、特徴はこれです。
- 体験単位で機能が分かれている
- 実験の流れが構造に組み込まれている
- Claude Codeが理解しやすい粒度になっている
つまり、
AIにとって使いやすい構造を作ってくれている
と感じています。
学び
重要なのは、
AIは優秀な実装者だが、設計は与える必要がある
ということです。
今回も、
- 目的
- 制約
- 完了条件
を渡したことで、精度の高い構成が出てきました。
足りていない部分もありましたが、最終的には修正できたのでよしとします。
まとめ
子供向けに、AIで遊びや学びの機能を作っていくためのディレクトリ構成を作成しました。
開発土台はできたので、
次はこの上で実際の機能を作っていきます。
最初は、子供が片付け中に遊んでしまって、いつまで経っても片付けてくれないので、
お片付けタイマー
を作ってみる予定です。
ここでも、
- AIにどう指示するか
- どこまで任せられるか
を引き続き試していきます。
