アプリを作ってもらうときに生成AIに渡すプロンプトのコツ

Claude CodeやChatGPTに「TODOアプリを作って」と頼んだら、思っていたものと全然違うものが出てきた――こんな経験はありませんか？ 生成AIは優秀ですが、指示が曖昧だと、AIは「たぶんこういうことだろう」と勝手に解釈してしまいます。

この記事では、プログラミング初心者でも実践できるプロンプトの書き方5つのコツを、具体的なビフォー・アフターの実例付きで解説します。

1. なぜプロンプトの書き方で結果が変わるのか

生成AIは、あなたの指示（プロンプト）だけを頼りにコードを書きます。人間の同僚なら「たぶんこういうことだよね？」と確認してくれますが、AIは与えられた情報の範囲で最もそれらしい回答を返すため、情報が足りないと的外れな結果になります。

曖昧な指示が引き起こす問題

• 使いたいフレームワークと違うもので作られる
• 想定と違うUI（画面デザイン）になる
• 必要な機能が抜け落ちる、または不要な機能が追加される
• エラーハンドリングやバリデーションが不十分なまま出力される

逆に言えば、プロンプトを具体的に書くだけで、AIの出力品質は劇的に向上します。生成AIの仕組みについて詳しく知りたい方は、生成AIとは？の記事をご覧ください。

2. AIに伝わるプロンプト5つのコツ

以下の5つのポイントを押さえるだけで、AIからの出力精度が大きく改善します。

コツ1：技術スタックを明示する

「Webアプリを作って」ではなく、使用する言語・フレームワーク・データベースを具体的に指定します。

❌ 悪い例：
「TODOアプリを作って」

✅ 良い例（エンジニア向け）：
「React + TypeScript でTODOアプリを作ってください。
状態管理は useState を使い、
データの永続化は localStorage を使ってください」

✅ 良い例（非エンジニア向け）：
「ブラウザで動くTODOアプリを作ってください。
ページを閉じてもデータが消えないようにしてください。
技術の選択はAIにお任せしますが、
初心者でも理解しやすい構成にしてください」

コツ2：機能を一覧で伝える

必要な機能を箇条書きにして、優先度や必須/任意を明記します。AIは長い文章より箇条書きのほうが正確に読み取れます。

✅ 良い例：
「以下の機能を実装してください：
【必須】
- タスクの追加（テキスト入力 + 追加ボタン）
- タスクの完了/未完了の切り替え
- タスクの削除
【任意】
- タスクの期限設定
- 完了済みタスクのフィルタリング」

コツ3：UI・画面の見た目を具体的に伝える

「いい感じのデザインで」と言われてもAIは困ります。配色やレイアウトの指示を出しましょう。

✅ 良い例（エンジニア向け）：
「UIの要件：
- Tailwind CSS を使用
- ダークモード対応（背景: slate-900）
- カード型レイアウト、角丸8px
- モバイルファーストのレスポンシブデザイン
- 追加ボタンは画面右下に固定フローティングボタン」

✅ 良い例（非エンジニア向け）：
「画面の見た目：
- 背景は暗い色（ダークモード）
- 各タスクはカード形式で表示
- スマホでも見やすいデザイン
- 追加ボタンは画面の右下に常に表示
- LINEのようなシンプルで見やすい雰囲気にしてください」

コツ4：制約条件・やらないことを伝える

AIは「やること」の指示に加えて、「やらないこと」を明示されると精度が上がります。

✅ 良い例（エンジニア向け）：
「制約条件：
- 外部ライブラリは Tailwind CSS のみ使用可
- Redux や Zustand などの状態管理ライブラリは使わない
- バックエンドは不要（フロントエンドのみで完結させる）
- コメントは日本語で記述する」

✅ 良い例（非エンジニア向け）：
「制約条件：
- サーバーやデータベースの準備は不要な構成にしてください
- ログイン機能は不要です
- できるだけシンプルな構成にしてください
- コードにはコメント（説明文）を日本語で付けてください」

コツ5：出力の形式・構成を指定する

ファイル分割の方針や命名規則を伝えると、実際のプロジェクトにそのまま使えるコードが出てきます。

✅ 良い例（エンジニア向け）：
「出力形式：
- コンポーネントごとにファイルを分割
  （App.tsx, TodoList.tsx, TodoItem.tsx, AddTodo.tsx）
- 型定義は types.ts にまとめる
- 各ファイルの先頭にファイルパスをコメントで記載する」

✅ 良い例（非エンジニア向け）：
「出力形式：
- 1つの巨大なファイルにまとめず、
  機能ごとにファイルを分けてください
- 各ファイルの先頭に、そのファイルが
  何をするものか日本語で説明を書いてください
- コピペして動かせるように、
  セットアップ手順も教えてください」

3. ダメなプロンプト vs 良いプロンプト（実例比較）

実際に「家計簿アプリ」を題材に、プロンプトの良し悪しで出力がどう変わるかを比較します。

ダメなプロンプト

家計簿アプリを作ってください。
収入と支出を記録できて、
グラフで見られるようにしてください。

この指示では、AIは以下を「勝手に判断」します：

• 言語（Python? JavaScript? Swift?）
• Webかモバイルか
• グラフの種類（棒グラフ？円グラフ？折れ線？）
• データの保存先（DB？ローカルファイル？）

良いプロンプト（エンジニア向け）

Next.js（App Router）+ TypeScript で家計簿Webアプリを
作ってください。

【技術スタック】
- フロントエンド: Next.js 14, TypeScript, Tailwind CSS
- グラフ: recharts ライブラリ
- データ保存: localStorage（DB不要）

【機能一覧】
1. 収支の登録（日付、カテゴリ、金額、メモ）
2. カテゴリ別の円グラフ表示（月単位）
3. 月別の収支推移を折れ線グラフで表示
4. 一覧表示と削除機能

【UIの要件】
- モバイルファースト
- 下タブナビゲーション（入力/一覧/グラフ）
- Tailwind CSS のデフォルトカラーを使用

【制約】
- 外部APIは使用しない
- 認証機能は不要
- 1ファイルにまとめず、コンポーネントごとに分割する

【出力形式】
- 各ファイルの先頭にパスを記載
- 日本語コメント付き

良いプロンプト（非エンジニア向け）

プログラミングの知識がなくても、「何ができるアプリか」「どう見えるか」「何がいらないか」を伝えるだけで十分です。

ブラウザで使える家計簿アプリを作ってください。
プログラミング初心者なので、技術選定はお任せします。

【やりたいこと】
1. 日付・カテゴリ（食費、交通費など）・金額・
   メモを入力して記録できる
2. 「食費にいくら使ったか」が円グラフでわかる
3. 「今月は先月より使いすぎか」が
   折れ線グラフでわかる
4. 記録の一覧表示と、間違えた記録の削除

【見た目のイメージ】
- スマホで使いやすいデザイン
- 画面下にタブ切り替え（入力/一覧/グラフ）
- シンプルで見やすい配色

【いらないもの】
- ログイン機能
- サーバーの準備が必要な仕組み
  （ブラウザだけで完結してほしい）

【お願い】
- セットアップの手順を初心者向けに教えてください
- コードに日本語で説明コメントを付けてください

4. コピペで使えるプロンプトテンプレート

以下のテンプレートを埋めるだけで、質の高いプロンプトが完成します。コピーしてそのまま使ってください。

[アプリの種類]を作ってください。

【技術スタック】
- 言語: [例: TypeScript]
- フレームワーク: [例: React / Next.js / Laravel]
- CSS: [例: Tailwind CSS]
- データ保存: [例: localStorage / SQLite / MySQL]

【機能一覧】（必須 / 任意を明記）
1. [機能A]（必須）
2. [機能B]（必須）
3. [機能C]（任意）

【UIの要件】
- [レイアウト方針]
- [配色・テーマ]
- [レスポンシブ対応の有無]

【制約・やらないこと】
- [使わないライブラリ / 不要な機能]

【出力形式】
- [ファイル分割方針]
- [コメント言語]

非エンジニア向けテンプレート

技術用語がわからなくても、以下のテンプレートを埋めるだけでAIに伝わります。

[アプリの種類]を作ってください。
プログラミング初心者なので、技術選定はお任せします。

【やりたいこと】（「必須」「あれば嬉しい」を明記）
1. [やりたいこと①]（必須）
2. [やりたいこと②]（必須）
3. [やりたいこと③]（あれば嬉しい）

【見た目のイメージ】
- [スマホ向け？パソコン向け？]
- [「LINEのような」「Notionのような」参考アプリ]
- [明るい雰囲気？ダークモード？]

【いらないもの】
- [ログイン機能、課金機能など不要なもの]

【お願い】
- セットアップの手順を初心者向けに教えてください
- コードに日本語で説明コメントを付けてください
- できるだけシンプルな構成にしてください

5. AIとの会話を繰り返して精度を上げる方法

1回のプロンプトで完璧なコードが出ることは稀です。AIとの対話を重ねることで、段階的に完成度を高めていくのが効率的なやり方です。

ステップ1：まず骨格を作らせる

最初は基本構造だけを依頼します。

「まずプロジェクトの基本構造と、
タスク追加機能だけを実装してください」

ステップ2：動作確認して修正を依頼

出力されたコードを動かして、問題点を具体的にフィードバックします。

「追加ボタンを押してもテキスト入力欄が
クリアされません。追加後に入力欄を
空にしてください。
また、空文字でも追加できてしまうので、
バリデーションを追加してください」

ステップ3：機能を追加していく

基本が動いたら、次の機能を段階的に追加します。

「タスクの追加と削除が動くようになりました。
次に以下を追加してください：
1. 完了/未完了の切り替え（チェックボックス）
2. 完了済みタスクのフィルタリング機能
既存のコードは変更せず、機能を追加する形で
お願いします」

AI活用でのアプリ開発の全体像を知りたい方は、素人でもAIだけでアプリは作れる？の記事もあわせてお読みください。

6. 初心者がやりがちな失敗パターン

失敗1：一度に全部を頼む

10個以上の機能を一度に依頼すると、AIは重要度を判断できず中途半端な実装になりやすいです。3〜5機能ずつ段階的に依頼するのがおすすめです。

失敗2：「いい感じに」「適当に」と書く

「いい感じのデザインで」「適当なダミーデータを入れて」といった曖昧な指示はAIが最も苦手とするパターンです。具体的な数値や例を出しましょう。

❌「適当なダミーデータを入れて」
✅「以下の5件のダミーデータを初期値として入れてください：
   - 牛乳 ¥200（食費）
   - 電車代 ¥500（交通費）
   - ランチ ¥800（食費）
   - 書籍 ¥1,500（教育費）
   - 水道代 ¥3,000（光熱費）」

失敗3：エラーをそのまま貼るだけ

エラーが出たとき、エラーメッセージだけを貼っても、AIは文脈がわからず的外れな修正をすることがあります。何をしたらどうなったかを伝えましょう。

❌「TypeError: Cannot read properties of null」

✅「タスクの削除ボタンをクリックしたときに
以下のエラーが出ます：
TypeError: Cannot read properties of null
TodoList.tsx の 42行目でエラーが発生しています。
タスクの追加と表示は正常に動いています」

失敗4：前の会話を無視して新しく聞く

AIとのチャットは文脈が引き継がれます。新しいチャットで最初から聞き直すと、これまでの設計方針が失われます。同じチャット内で会話を続けるのが効率的です。

7. まとめ

FAQ