効果的なプロンプトの書き方

良いプロンプトとは？

AI コーディングツールへの指示は、新しく入ったチームメンバーへの作業依頼と同じです。相手が理解できるように、必要な情報を過不足なく伝えることが大事です。

基本原則

1. 具体的に書く

# 悪い例
ログイン機能を作って

# 良い例
メールアドレスとパスワードによるログインフォームを作って。
- バリデーション: メール形式チェック、パスワード8文字以上
- 送信先: POST /api/auth/login
- 成功時: /dashboard にリダイレクト
- 失敗時: フォーム上部にエラーメッセージ表示

2. 一度に一つのことを頼む

大きなタスクは分割して依頼します。「EC サイトを作って」ではなく:

まず商品一覧ページを作って
次にカートに追加する機能を作って
次に決済フローを作って

3. 既存コードを参照させる

UserCard コンポーネント（src/components/UserCard.tsx）と同じスタイルで
ProductCard コンポーネントを作って

AI にプロジェクト内の既存パターンを示すと、一貫性のあるコードを出力します。

4. 期待する結果を伝える

このボタンをクリックしたら、モーダルが表示されて、
中にフォームが表示される状態にして。
フォーム送信後はモーダルが閉じてトースト通知が出るようにして。

よくある失敗パターン

「いい感じにして」

AI は「いい感じ」の基準がわかりません。具体的な指標を伝えましょう。

# 悪い例
パフォーマンスをいい感じにして

# 良い例
商品一覧の初回表示が3秒かかっている。
React.memo と useMemo で再レンダリングを減らして、
画像は遅延読み込みにして

「全部やって」

大きすぎるタスクは AI も迷います。段階的に進めましょう。

過剰に詳細な指示

実装方法まで細かく指定すると、AI の強みを活かせません。「何を」作るかを伝え、「どう」作るかは AI に任せるのがコツです。

実践テンプレート

バグ修正

[問題] ログインボタンを押しても何も起きない
[再現手順] 1. /login にアクセス 2. メール・パスワードを入力 3. ログインボタンをクリック
[期待動作] /dashboard にリダイレクトされる
[実際の動作] 画面が変わらない。コンソールに 401 エラーが出る

新機能追加

[概要] ユーザーがプロフィール画像をアップロードできるようにしたい
[要件]
- ドラッグ&ドロップ対応
- 対応形式: JPG, PNG（5MB以下）
- アップロード先: /api/upload
- プレビュー表示あり
[参考] 既存の FileUpload コンポーネント（src/components/FileUpload.tsx）を拡張する形で

次のステップ

CLAUDE.md の書き方 — プロジェクトレベルでルールを設定する方法