説明からプロジェクトを作る
1 つのプロンプトでアイデアから動くアプリへ
⏱ 想定 ~8 分
01 · 読む
本物を作ってみましょう。ここまで単一ファイルや小さな編集を扱ってきました。でも Claude Code はもっとできます —— 完全なプロジェクトの説明を渡せば、まるごと作ってくれます。
良い結果を引き出すコツは十分に具体的であることです。機能、振る舞い、デザインの詳細を多く提供するほど、Claude は一発で目指すものに近づけます。
今回作るのは ブックマークマネージャー —— ブックマークを保存、表示、削除できるシンプルな Web アプリです。サーバーは不要 —— すべてブラウザの localStorage で動きます。
02 · プロンプトテンプレート
Claude に詳細なプロジェクト説明を渡します。このプロンプトがどれだけ具体的か注目してください —— 各機能を列挙し、振る舞いを説明し、技術的アプローチを指定しています。
シンプルなブックマークマネージャーの Web アプリを作ってください：
- ブックマーク（URL とタイトル）を追加するフォーム付きの HTML ページ
- ブックマークを localStorage に保存する JavaScript
- 保存されたブックマークすべてを表示するリスト
- 各ブックマークに削除ボタン
- クリーンでモダンな CSS スタイリング
- 全部シングルページアプリで（サーバー不要）
03 · 実機演習
Claude が作った HTML ファイルをブラウザで開いて試してみましょう。いくつかブックマークを追加し、リロードして保存されているか確認、削除ボタンもテストしてください。
open index.html
04 · チェックリスト
ブックマークマネージャーを徹底的にテストしましょう。各機能が動くことを確認してチェックを入れてください。
- URL とタイトルでブックマークを追加できる
- ブックマークがリストに表示される
- 削除ボタンでブックマークを削除できる
- リロード後もブックマークが残る
05 · クイズ
Claude Code に効果的なプロンプトとは？
- 言葉は少ないほど良い
- 自然な言葉ではなくコードで書く
- 一度に全部聞く
- 機能、技術スタック、構造を具体的に指定する
06 · 空欄補充
Claude Code にプロジェクトを作らせるとき、具体的な機能を含む _____ な説明は曖昧な依頼よりはるかに良い結果になります。
07 · 読む
あなたは自然言語の説明だけで完全に動く Web アプリを作りました。手書きでやったら何時間かかるか考えてみてください —— HTML 構造をセットアップして、localStorage の JavaScript を書いて、フォーム送信を処理して、削除ロジックを実装して、CSS で全部レイアウトする。
Claude Code なら最初のバージョンは数秒です。何か気に入らなければイテレーションする：Claude に修正してもらう、機能を追加する、デザインを変える。
これが AI 支援開発の力です。あなたはアイデアと判断を持ち込み、Claude はスピードを持ち込みます。
ポイントまとめ
- 詳細なプロンプトは良いアウトプットを生む —— 欲しい機能を 1 つずつ書く
- 進める前に必ず自分でアウトプットをテストする
- 何かおかしければ問題を説明して Claude に修正してもらう
- Claude は数秒で作る。手書きならずっと時間がかかる
08 · クイズ
Claude Code に TODO リストアプリを作らせたい。1 回で最高の結果を出すプロンプトはどれ？
- TODO リストの Web アプリを作って。タスク追加の入力欄、すべてのタスクを表示するリスト、完了用のチェックボックス、各タスクに削除ボタン、リロードしても残る localStorage 付き
- TODO アプリを作って
- JavaScript で何か役に立つものを作って
- 全機能つきの TODO アプリを作って
09 · 空欄補充
Claude がプロジェクトを作り終えたら、次へ進む前に必ず自分でアウトプットを _____ しましょう。
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。