実装チェックリストへ分解する

料理をするとき、レシピがなければ「なんとなく」進めることになりますよね。塩を入れるタイミングを忘れたり、野菜を切りながらお湯を沸かすのを忘れたり……。Webアプリ制作も同じです。「なんとなく作り始める」と、途中で何を作っていたか迷ってしまいます。

この Atom では、あなたの MVP（＝最小限の機能で作る試作品）の画面構成を実装チェックリストに分解します。AI ツール（＝あなたの指示でコードを書いてくれる賢い助手）に手伝ってもらい、15分以内にチェックリストを完成させましょう。

この Atom を進める前に、以下が準備できていることを確認してください。

• MVP のページ構成が決まっている（例：トップページ、投稿ページ、マイページの3ページ）
• 各ページで「何ができるか」が箇条書きで書かれている

まだ MVP のページ構成が決まっていない場合は、先に「MVPのページを決める」Atom を終わらせてから戻ってきてください。

チェックリストとは、**「やるべきことを小さなタスクに分けて並べたリスト」**のことです。

旅行の準備を例にしてみましょう。

• ❌ 悪い例：「旅行の準備をする」→ これだけでは何から始めればよいか分かりません

• ✅ 良い例：

  1. 航空券を予約する
  2. ホテルを予約する
  3. 荷物をまとめる
  4. 持ち物リストを確認する

  → 具体的で、1つずつ片づけていけます

Webアプリでも同じです。

• ❌ 悪い例：「ユーザー登録機能を作る」→ 範囲が大きすぎて手が止まります

• ✅ 良い例：

  1. メールアドレス入力フォームを表示する
  2. パスワードの強度をチェックする
  3. 登録ボタンを押したら確認メールを送る

  → 1つひとつが小さくて明確です

AI ツールを使うと、チェックリストの下書きを数分で作れます。ここでは Claude Code（＝ターミナルで動く AI アシスタント）を例に進めますが、ChatGPT や Cursor でも同じ手順が使えます。

ステップ1：AIを起動する

プロジェクトのフォルダでターミナルを開き、次のように入力します。

claude

（Claude Code を起動するコマンドです。初回はセットアップ画面が出ますが、画面の指示に沿って進めてください。）

ステップ2：プロンプトを入力する

AI が起動したら、次のようなプロンプト（＝AI への指示文）をコピーして貼り付けます。あなたの MVP の内容に書き換えてから送信してください。

以下のMVPページ構成を、開発用の実装チェックリストに分解してください。

【ルール】
- 各タスクは「1人で15分以内で終わる粒度」にすること
- タスクはMarkdownのチェックリスト形式（- [ ]）で書くこと
- ページごとにセクションを分けること
- 指定した機能以外は追加しないこと
- 日本語で出力すること

【ページ構成】
- トップページ：サービス紹介、新着投稿一覧
- 投稿ページ：タイトル入力、本文入力、画像アップロード、投稿ボタン
- マイページ：自分の投稿一覧、プロフィール編集

💡 プロンプトのコツ: 「ルール」を先に書いてからページ構成を渡すと、AI が勝手に機能を追加したり、英語で返したりするミスが大幅に減ります。

ステップ3：AIの出力を受け取る

AI は数秒〜十数秒でチェックリストを返してくれます。次のステップで中身を確認するので、まずはそのまま受け取ってください。

AI が出力したチェックリストを、自分の目で確認しましょう。AI は優秀ですが、あなたの MVP を完全には理解していません。ここが一番大事なステップです。

確認する3つのポイント

粒度の判断基準

タスクが適切な大きさかどうか、こう考えてみてください。

• ✅ 「これだけなら15分で終わりそう」→ ちょうどいい
• ❌ 「これは1時間かかりそう……」→ 大きすぎるので3つに分割する
• ❌ 「これは1分で終わる」→ 小さすぎるので隣のタスクと合体させる

良いチェックリストの完成イメージ

• ヘッダーにサイト名を表示する
• サービスのキャッチコピーを表示する
• 新着投稿を3件カード形式で表示する
• 各カードにタイトルと投稿日を表示する

• タイトル入力欄を配置する
• 本文入力欄（複数行）を配置する
• 画像選択ボタンを配置する
• 「投稿する」ボタンを配置する
• 投稿後にトップページへ戻る

• 自分の投稿を一覧で表示する
• プロフィール画像を表示する
• 名前の編集フォームを表示する
• 「保存する」ボタンを配置する

---

チェックリストが完成したら、次の基準でセルフチェックしましょう。

• MVP の全ページがリストに含まれている
• 各タスクが「これだけで15分で終わる」と言える大きさになっている
• タスクの合計数が 20〜50 個程度に収まっている（少なすぎると粒度が粗いサインです）
• 順番に沿って上から進められる（前のタスクが終わらないと次ができない、という依存関係が守られている）
• 「何を表示する」「何を入力できるようにする」のように、動詞で終わるタスク名になっている

💡 もし5個以上チェックが付かなかった場合は、AI にもう一度チェックリストを見直してもらいましょう。次のプロンプトが使えます。

このチェックリストを見直してください。
・各タスクは15分以内で終わる粒度ですか？
・抜けている機能はありませんか？
・順番は上から順に進められますか？

完成したチェックリストを保存しましょう。

1. プロジェクトフォルダに docs フォルダがなければ作る
2. チェックリストを docs/checklist.md として保存する
3. 保存した画面のスクリーンショットを撮っておく

このスクリーンショットが、この Atom の完了を示す成果物です。おつかれさまでした！次の Atom では、このチェックリストを使って実際にコードを書き始めます。