Claude Code に新しいアプリやツールを作ってもらうとき、最初に言いたくなるのは「こういうのを作って」です。
小さなツールなら、それでも動くものが出てくることがあります。Claude Code は新しいファイルを作るのが得意です。画面、コード、README、起動コマンドまで一気にそろうこともあります。
でも、最初の依頼が曖昧だと、途中でズレます。自分は1画面の簡単なツールを想像していたのに、認証、データベース、Docker、テスト、デプロイ設定まで出てくる。逆に、もっとちゃんとした構成にしたかったのに、1ファイルで終わってしまうこともあります。
tomoClaude Code が悪いというより、最初の地図が薄いと、Claude Code はよかれと思って道を広げます。
この記事では、Claude Code で新規プロジェクトを作る前に決めることを整理します。最初から立派な設計書を書く必要はありません。作りたいもの、最初の完成形、使う技術、ファイル構成、確認方法だけ小さく決めれば、かなり迷子になりにくくなります。
新規プロジェクトでは、いきなり「全部作って」と頼むより、まず「小さい完成形」と「やらないこと」を決めます。そのうえで、計画、確認、小さな実装の順に進めると、差分も判断もしやすくなります。
作り始める前に完成形を小さくする
新規プロジェクトで一番危ないのは、最初から完成版を作ろうとすることです。
たとえば「家計簿アプリを作って」と頼むとします。Claude Code は、入力画面、一覧、集計、保存、編集、削除、カテゴリ、グラフ、認証、データベースまで考え始めるかもしれません。
それ自体は間違いではありません。ただ、初心者が最初に見るには広すぎます。
最初の完成形は1画面か1機能でよい
最初の完成形は、1画面か1機能で十分です。
たとえば、家計簿なら最初からログインや月次レポートまで入れません。まずは、入力した金額とメモが画面に表示されるだけでもいいです。
最初の完成形は、1画面だけで構いません。
金額、カテゴリ、メモを入力すると、下に一覧表示されるところまで作りたいです。
保存機能、ログイン、グラフ、デプロイはまだ不要です。このくらい絞ると、Claude Code も作るものを決めやすくなります。あなたも、完成したかどうかを見やすくなります。
「何ができたら成功か」を先に書きます。
- ボタンを押すと結果が表示される
- CSVを貼ると表に変換される
- 1つのフォームに入力して一覧に追加できる
- ローカルで画面を開ける
npm run devで起動できる
ここが曖昧なまま作ると、あとで「たしかに動くけど、欲しかったものではない」となります。
使う人と使う場面を書く
Claude Code に伝えるときは、使う人と使う場面も書きます。
ただ「タスク管理アプリ」と言うより、次のほうがズレにくいです。
自分だけがローカルで使う小さなタスク管理ツールを作りたいです。
仕事前に今日やることを3〜5個メモして、完了したものにチェックを付けられれば十分です。
チーム共有、ログイン、スマホ対応、通知はまだ不要です。この依頼なら、Claude Code は大げさな構成にしにくくなります。
使う人を書くと、UIの作り方も変わります。自分だけが使うなら、見た目より入力の早さを優先できます。社内の人に配るなら、説明文やエラー表示が必要になります。
技術スタックは迷ったまま渡さない
Claude Code は、技術選定も提案できます。
ただし、何も決めずに「いい感じで作って」と頼むと、意図しない構成になることがあります。React で作るつもりが Next.js になったり、1ファイルHTMLでよかったものにビルド環境が入ったりします。
最初は、分かる範囲だけでいいので前提を書きます。
既に決めている技術を書く
使いたい技術があるなら、最初に書きます。
Windows の PowerShell で作業します。
Node.js は入っています。
React と Vite で小さなWebアプリとして作りたいです。
パッケージ管理は npm を使ってください。または、もっと小さくできます。
ブラウザで直接開ける、1ファイルのHTMLツールとして作りたいです。
ビルド環境、npm、外部ライブラリは使わないでください。この2つは、同じWebツールでも作り方がかなり違います。
初心者ほど、最初は小さい構成が楽です。1ファイルHTMLで足りるなら、それで始めて構いません。あとで React や Vite に移すほうが、いきなり大きく始めるより追いやすいことがあります。
分からないときは候補と理由だけ出してもらう
技術スタックが分からない場合もあります。
そのときは、実装させる前に候補だけ出してもらいます。
まだ実装しないでください。
このツールを作るなら、1ファイルHTML、React + Vite、Python のどれが向いているか比較してください。
初心者がローカルで動かす前提で、メリット、困る点、最初に選ぶならどれかを説明してください。ここでいったん止まります。
選定まで Claude Code に任せてもいいです。ただ、選定と実装を同じ依頼に混ぜると、後戻りしにくくなります。
tomo技術が分からないときは、「決めて作って」ではなく「候補を出して、まだ作らない」と頼むほうが扱いやすいです。
フォルダ構成とファイル数を増やしすぎない
新規プロジェクトでは、Claude Code が構成をきれいに広げてくれることがあります。
src、components、utils、hooks、tests、docs。慣れている人には悪くない構成です。でも初心者にとっては、最初からファイルが多いと読む気がなくなります。
最初は最小構成で頼む
最初は、ファイル数を少なくします。
| 作りたいもの | 最初の構成例 | 向いている場面 |
|---|---|---|
| 小さな計算ツール | index.html だけ | ブラウザで開ければよい |
| 少し見た目を分けたいWebツール | index.html、style.css、script.js | HTML/CSS/JSを分けて読みたい |
| Reactの練習アプリ | src/App.jsx と最低限の設定 | コンポーネント化を試したい |
| 小さなCLI | src/ と README.md | コマンドで処理したい |
最初からきれいな構成にしなくて大丈夫です。読めない構成より、少し雑でも追える構成のほうが初心者には向いています。
依頼文では、こう書けます。
最初の版では、ファイル数を増やしすぎないでください。
可能なら index.html、style.css、script.js の3ファイル以内で作ってください。
必要がある場合だけ、理由を説明してファイルを増やしてください。これで、Claude Code が勝手に大きな構成へ進むのを抑えられます。
生成された構成を説明してもらう
ファイルを作ったあとも、すぐ次の機能追加へ進まないほうがいいです。
まず、構成を説明してもらいます。
作成したファイルを一覧にしてください。
それぞれ何のためのファイルか、初心者向けに説明してください。
次に編集するとしたら、どのファイルを見るべきかも教えてください。ここで説明を読んで、自分が追えないなら止まります。
「動いているけど、どこを直せばいいか分からない」状態で機能追加を続けると、あとで苦しくなります。最初のうちに、読める構成へ戻しておくほうが楽です。
Plan Modeで先に作業方針を見る
新規プロジェクトでは、いきなりファイルを作らせるより、先に計画を見たほうが安全です。
Claude Code には、編集前に調査や計画へ寄せる Plan Mode があります。ファイルを作る前に、作るもの、使う技術、ファイル構成、確認方法を見られます。
変更前に読むファイルと作るファイルを出してもらう
新規作成でも、まず作業方針を出してもらいます。
まず計画だけ出してください。
まだファイルは作成しないでください。
以下を整理してください。
- 何を作るか
- 最初の完成形
- 使う技術
- 作成するファイル
- 起動コマンド
- 動作確認の方法
- 今回はやらないことこの段階では、まだ差分は出ません。計画を見て、広すぎるところを削れます。
たとえば計画に認証、データベース、Docker、CI、デプロイが入っていたら、最初の版には大きすぎるかもしれません。
計画が大きすぎたら削る
計画が大きいと感じたら、遠慮せず削ります。
今回は初回版なので、認証、データベース、Docker、デプロイは外してください。
ローカルで動く1画面のツールに絞って、計画を出し直してください。このやり取りは、実装前にやるほど効果があります。
実装後に「やっぱりDBはいらない」となると、削除や作り直しが発生します。計画段階なら、ただ書き直すだけです。
大きすぎる計画を見たときに、そのまま承認しないでください。最初の版に不要なものを削るのは、人間の大事な仕事です。
完了条件と確認方法を決める
Claude Code に新規プロジェクトを頼むときは、「完成」の意味も書きます。
「いい感じに作って」だと、Claude Code は自分なりに完成を判断します。動くファイルができた時点で完成とするかもしれません。README まで書くかもしれません。テストまで入れるかもしれません。
最初に、確認方法を決めます。
起動コマンドを決める
ローカルでどう動かすかを書きます。
完成後、Windows の PowerShell で次の手順で動作確認できるようにしてください。
1. `npm install`
2. `npm run dev`
3. ブラウザで表示されたURLを開く1ファイルHTMLなら、もっと簡単です。
完成後は、index.html をブラウザで開くだけで動くようにしてください。
npm、ビルド、外部ライブラリは使わないでください。起動方法が曖昧だと、完成後に「どう動かすの？」で止まります。ここは最初に決めます。
目で見る確認とコマンド確認を分ける
確認方法は、画面で見るものとコマンドで見るものに分けます。
画面で確認するなら、期待する動きを書きます。
動作確認では、次を確認したいです。
- 入力欄に文字を入れられる
- ボタンを押すと結果が表示される
- 入力が空ならエラーメッセージが出るコマンドで確認するなら、実行するコマンドを書きます。
最後に npm run build が通ることを確認してください。
テストはまだ不要です。初心者の最初のプロジェクトなら、手で触って確認するだけでも構いません。大事なのは、何を見たら完成と言えるかを決めることです。
そのまま貼れる依頼文
ここからは、Claude Code にそのまま貼るための依頼文です。
短い箇条書きだけでは、Claude Code が足りない部分を推測します。だから、ここでは「背景」「作りたいもの」「止まる条件」「報告してほしい内容」まで入れた、少し長めのプロンプトにします。
角括弧の中だけ、自分の内容に置き換えてください。
最初に貼る計画用プロンプト
新規プロジェクトでは、まずこのプロンプトを使います。ここではまだ作らせません。Claude Code に、作る前の設計メモを出してもらいます。
これから Claude Code で新しいプロジェクトを作りたいです。まだファイルは作成しないでください。既存ファイルの編集も、コマンド実行も、パッケージの追加も行わないでください。まずは、作る前の計画だけを出してください。
作りたいものは、[ここに作りたいものを書く。例: ブログ記事を書く前に、本文の文字数、見出し数、コードブロック数を確認できる小さなWebツール] です。使う人は [自分だけ / 社内の数人 / 不特定多数] で、使う場面は [例: Windows のローカル環境で、ブラウザを開いて使う] です。
最初の完成形は小さくしたいです。初回版では、[最初にできてほしい1画面または1機能を書く] までできれば十分です。認証、データベース、Docker、デプロイ、外部API連携、課金、チーム共有機能はまだ入れないでください。必要だと思っても、勝手に追加せず、理由を説明して確認してください。
技術スタックは [未定 / 1ファイルHTML / HTMLとCSSとJavaScript / React + Vite / Python] を考えています。もしこの選択が今回の用途に合わない場合は、実装せずに、候補と理由だけを出してください。初心者がローカルで動かして中身を読めることを優先してください。
作業場所は [新しい空フォルダ / 既存プロジェクト内 / まだ未定] です。もし現在のフォルダが空でない場合、または既存ファイルに触る必要がある場合は、そこで止まって確認してください。
出力は、次の順番でお願いします。
1. あなたが理解した作りたいもの
2. 不明点や確認したいこと
3. おすすめの技術スタックと、その理由
4. 初回版で作る範囲
5. 初回版では作らない範囲
6. 作成予定のファイル一覧と、それぞれの役割
7. 実行予定のコマンド
8. 動作確認の方法
9. 実装に進む前に私が判断すべきこと
不明点がある場合は、推測で埋めずに質問してください。私が「この計画で作って」と言うまで、ファイル作成、編集、削除、コマンド実行はしないでください。このプロンプトは少し長いです。でも、新規プロジェクトの最初はこれくらい書いたほうが安定します。短い依頼で始めると、あとから削るものが増えます。
1ファイルHTMLツールを作るプロンプト
計画を見て「1ファイルHTMLでよさそう」と決めたら、次のように頼みます。
さきほどの計画をもとに、ブラウザで直接開ける1ファイルHTMLツールを作ってください。
作るものは [例: ブログ本文の文字数と見出し数を数えるツール] です。自分だけがローカルで使います。サーバー、npm、ビルド、外部ライブラリは使わず、`index.html` をブラウザで開くだけで動くようにしてください。
画面は1つだけで構いません。画面には、入力欄、実行ボタン、結果表示、クリアボタンを置いてください。入力欄には [例: Markdown本文] を貼り付けます。結果には [例: 文字数、空白を除いた文字数、H2見出し数、H3見出し数、コードブロック数] を表示してください。
初回版では保存機能、ログイン、サーバー連携、デザインの作り込み、スマホ専用対応は不要です。見た目は最低限で構いませんが、入力欄と結果が読みやすいようにしてください。
作成前に、これから作る `index.html` の構成を短く説明してください。そのあと実装してください。もし現在のフォルダに同名ファイルがある場合は、上書きせずに止まって確認してください。
実装後は、次の形式で報告してください。
1. 作成したファイル
2. ブラウザで開く手順
3. 動作確認した内容
4. 表示文言を変えるなら、どこを編集すればよいか
5. 次に機能追加するなら、どこから触ればよいかこの依頼文では、1ファイルに閉じ込めています。最初の練習では、構成が小さいこと自体が価値です。
React + Viteで小さく始めるプロンプト
React を使いたい場合も、初回から広げすぎないようにします。
さきほどの計画をもとに、React + Vite で小さなWebアプリを作ってください。
作るものは [例: 今日やるタスクを追加して、完了チェックできる小さなタスク管理アプリ] です。まずは自分だけがローカルで使います。Windows の PowerShell で作業し、Node.js と npm は使える前提です。
初回版で必要なのは、1画面でタスクを追加できること、追加したタスクが一覧に表示されること、完了チェックを付けられることだけです。画面を再読み込みしたらデータが消えても構いません。localStorage、ログイン、データベース、ルーティング、状態管理ライブラリ、Docker、デプロイ設定、テストはまだ入れないでください。
現在のフォルダが空である前提で作ってください。空でない場合は、作業を止めて、既存ファイルの一覧と、作業を続けてよいかの確認を出してください。
ファイル構成は、Vite の最小構成に近い形にしてください。最初から `components`、`hooks`、`utils` などを増やしすぎないでください。必要な場合だけ、なぜ分けるのかを説明してください。
実装前に、作成予定ファイルと実行予定コマンドを提示してください。その内容で問題なければ、そのまま実装に進んでください。危険な削除や既存ファイルの上書きが必要な場合は、実装せずに確認してください。
実装後は、次の形式で報告してください。
1. 作成または変更したファイル
2. 起動手順
3. ブラウザで確認する操作
4. 今回あえて入れなかったもの
5. 次に機能追加するなら最初に見るファイルReact を使うと、最初から構成を増やしたくなります。だからこそ、「今は入れないもの」をプロンプト内に書いておきます。
技術スタックを相談するプロンプト
まだ何で作るか決めていないなら、実装前に相談します。
[作りたいもの]を作りたいですが、技術スタックが決まっていません。まだファイル作成、編集、コマンド実行はしないでください。技術選定の相談だけにしてください。
作りたいものは [例: 自分だけが使うタスク管理ツール] です。使う場面は [例: Windows のローカル環境で、仕事前に今日やることを整理する] です。最初に必要なのは [例: タスク追加、一覧表示、完了チェック] までです。
候補として、1ファイルHTML、HTML/CSS/JavaScriptの3ファイル構成、React + Vite、Python のどれが向いているか比較してください。比較では、初心者が読みやすいか、ローカルで動かしやすいか、ファイル数が増えすぎないか、あとから機能追加しやすいか、今回の用途に対して大げさすぎないかを見てください。
最後に、今回の初回版で選ぶならどれがよいかを1つ提案してください。ただし、実装には進まないでください。提案の最後に、その技術を選ぶ場合の最小フォルダ構成、起動方法、次に私が出すべき依頼文の形まで書いてください。このプロンプトは、技術選定だけで止めます。ここで納得してから、HTMLにするか React にするかを選びます。
途中で計画が大きくなったときの差し戻しプロンプト
Claude Code の計画に、初回版では重いものが入ってきたときに使います。
計画が初回版としては大きすぎます。今回は、ローカルで動く小さな1画面のツールに絞りたいです。
認証、データベース、Docker、CI、デプロイ、外部API連携、複雑な状態管理、複数ページ構成は外してください。必要そうに見えても、今回は入れません。
いまの計画を、次の条件で出し直してください。
まず、最初の完成形を1文で書いてください。次に、作成するファイルを最小限にしてください。最後に、動作確認方法を、初心者が手元で確認できる手順にしてください。
まだファイルは作成・編集しないでください。計画の出し直しだけをしてください。この差し戻し文を持っておくと、計画が膨らんだときに戻しやすくなります。
まとめ
Claude Code で新規プロジェクトを作る前に、立派な設計書を書く必要はありません。
ただ、最低限これだけは決めておくと楽です。
- 誰が何のために使うか
- 最初の完成形は何か
- 使う技術は何か、未定なら候補だけ出してもらう
- 最初のフォルダ構成を大きくしすぎない
- 起動コマンドと確認方法を決める
- やらないことを明示する
- いきなり実装せず、まず計画だけ見せてもらう
新規プロジェクトで大事なのは、最初から全部入りを目指すことではありません。自分が理解できる小さな完成形を作り、そこから育てることです。
Claude Code に頼む前に、作りたいものを少しだけ言葉にする。やらないことも書く。計画を見て、大きすぎたら削る。
それだけで、最初の一歩はかなり安定します。
