5-2 効果的な指示のコツ

プロンプトの質 = 成果の質

Claude Code の出力品質は、指示（プロンプト）の質に大きく依存します。同じ作業でも、指示の出し方で結果が大きく変わります。

このレッスンでは、すぐに使える実践的なテクニックを紹介します。

テクニック①：完成形を具体的に伝える

❌ 曖昧な指示: 「ユーザー管理ページを作って」

✅ 具体的な指示: 「ユーザー管理ページを作って。テーブルに名前・メール・ロール・登録日を表示。検索ボックス付き。1ページ20件のページネーション。CSSはTailwindを使用」

完成形が明確なほど、やり直しが減ります。

> ユーザー管理ページを作って。
> - テーブルに「名前, メール, ロール, 登録日」を表示
> - 検索ボックスでリアルタイムフィルタリング
> - 1ページ20件のページネーション
> - CSS は Tailwind を使用

テクニック②：段階的に進める

大きなタスクは小さく分割して依頼しましょう。

❌ 一度に全部: 「ECサイトを作って」

✅ 段階的に:

1. 「商品一覧ページのHTMLを作って」
2. 「商品詳細ページを追加して」
3. 「カートに入れるボタンを追加して」
4. 「注文確認画面を作って」

# ステップ1
> 商品一覧ページの HTML を作って。商品名と価格を表示。

# ステップ2（完成を確認してから）
> 商品をクリックしたら詳細ページに遷移するようにして。

テクニック③：参考例を見せる

「こういう感じで」と参考を示すと精度が上がります。

• スクリーンショットを貼り付ける
• 「〇〇のサイトのような」と参考サイトを伝える
• 既存のコードを見せて「これと同じパターンで」と依頼する

> 既存の src/pages/Users.tsx と同じパターンで、
> 商品管理ページ src/pages/Products.tsx を作って。
> テーブルの列は「商品名, カテゴリ, 価格, 在庫数」。

テクニック④：制約を伝える

技術的な制約や要件を事前に伝えると、後からの修正が減ります。

• 「ライブラリの追加はしないで」
• 「既存のコードのスタイルに合わせて」
• 「Internet Explorer は対応不要」
• 「モバイル対応は必須」

> 在庫管理ページを作って。
>
> 制約:
> - 外部ライブラリは使わない（HTML + JS のみ）
> - 既存の style.css のデザインに合わせる
> - モバイル対応必須（スマホで操作できること）

実践：テクニックを組み合わせる

4つのテクニックを組み合わせた指示の例です。

> 社内の在庫管理ページを作って。
>
> 要件:
> - 商品名、在庫数、最終入荷日のテーブル
> - 在庫数10以下の行は赤色でハイライト
> - 検索ボックスでリアルタイムフィルタリング
>
> 制約:
> - HTML + JavaScript のみ（ライブラリ不要）
> - レスポンシブ対応
> - 既存の style.css のデザインに合わせて

よくある失敗パターン

効果が出にくい指示のパターンです。

失敗①: 一度に多くを求めすぎる → 大きなタスクは3-5のステップに分割しましょう。

失敗②: 曖昧な形容詞を使う 「かっこいいデザイン」「使いやすいUI」は人によって違います。「青系の配色」「左サイドバーのレイアウト」のように具体的に。

失敗③: 修正指示が漠然としている ❌「もっと良くして」 ✅「テーブルの列幅を均等にして、ヘッダーの背景色をグレーにして」

# NG: 曖昧な修正指示
> もっと良くして

# OK: 具体的な修正指示
> テーブルの列幅を均等にして、
> ヘッダーの背景色を #f0f0f0 にして。

まとめ

このレッスンのポイントを振り返ります。

• 完成形を具体的に伝える
• 大きなタスクは段階的に分割する
• 参考例や既存コードを見せる
• 制約を事前に伝える
• 「要件」と「制約」を分けて書くと精度が上がる

次のレッスンでは、複数案を比較する「Best of N」パターンを学びます。