AIへの指示の出し方

このセクションでは、AIを効果的に使いこなすコツを学びます。

基本原則

1. 具体的に伝える

❌ いい感じにして
✅ 背景色を青（#3498db）に、文字色を白にして

❌ ボタンを追加して
✅ ヘッダーの右上に「ログアウト」ボタンを追加して

2. 一度に一つ

❌ ボタンを追加して、色を変えて、レイアウトも直して、あとアニメーションもつけて
✅ まずヘッダーにボタンを追加して
（確認後）
✅ 次にボタンの色を青にして

3. 結果を確認してから次へ

1. 指示を出す
2. 結果を確認
3. OKなら次へ / NGなら修正を依頼

効果的な指示パターン

パターン1：新規作成

[機能]を作って。

要件：
- [要件1]
- [要件2]
- [要件3]

デザイン：
- [デザイン要件]

例：

ユーザー登録フォームを作って。

要件：
- 名前、メールアドレス、パスワードを入力
- 入力チェックをする（メールの形式、パスワードは8文字以上）
- 送信ボタンでAPIに送信

デザイン：
- 中央寄せ、幅400px
- 入力欄は角丸

パターン2：修正依頼

[場所]の[問題]を修正して。

現状：[今の状態]
期待：[こうなってほしい]

例：

ヘッダーのロゴの位置を修正して。

現状：ロゴが右寄せになっている
期待：ロゴを左寄せにしたい

パターン3：エラー対応

以下のエラーが出ている。原因を調べて修正して。

エラーメッセージ：
[エラーメッセージをコピペ]

発生状況：
[どんな操作をしたらエラーが出たか]

パターン4：デザイン調整

[要素]のデザインを変更して。

変更内容：
- [変更1]
- [変更2]

例：

カードコンポーネントのデザインを変更して。

変更内容：
- 角丸を大きく（16px）
- シャドウを追加
- ホバー時に少し浮き上がるアニメーション

うまくいかない時の対処法

ケース1：意図と違うものができた

対処：

これじゃなくて、[具体的に違う点]を修正して。

期待していたのは：
[具体的な期待]

実際には：
[実際の結果]

ケース2：エラーが出る

対処：

このエラーを修正して：

[エラーメッセージ全文]

ポイント

エラーメッセージは省略せずに全文を貼り付けてください。

ケース3：何度やってもうまくいかない

対処：

別のアプローチで試して。

今までの方法：[やった方法]
問題：[何がうまくいかないか]

または、一度立ち止まって：

現在の状況を整理して。
何が問題で、どう解決すべきか教えて。

ケース4：どう指示すればいいかわからない

対処：

[やりたいこと]を実現したい。
どうすればいいか教えて。

AIが方法を提案してくれます。

よく使う指示テンプレート

開発サーバー起動

開発サーバーを起動して

ビルドエラーの確認

ビルドして、エラーがあれば修正して

コードの説明

このファイルの内容を説明して

機能追加

[機能]を追加して

要件：
- [要件リスト]

バグ修正

[現象]というバグを修正して

再現手順：
1. [手順1]
2. [手順2]
3. [エラーが発生]

リファクタリング

このコードを読みやすく整理して

デプロイ

このプロジェクトをVercelにデプロイして

困った時のフローチャート

問題発生
    ↓
エラーメッセージがある？
    ├─ Yes → エラーメッセージを貼り付けて修正依頼
    └─ No → 現状と期待を説明して修正依頼
    ↓
解決した？
    ├─ Yes → 次へ進む
    └─ No → 別のアプローチを試す
    ↓
まだ解決しない？
    └─ コーチに相談！（10分ルール）

練習問題

以下の「悪い指示」を「良い指示」に直してみましょう。

問題1：デザインを変えたい

悪い指示：

もっとかっこよくして

良い指示の例

ToDoアプリのデザインを改善して。

変更内容：
- 背景色をダークグレー（#1a1a1a）に
- カードに影をつけて浮き上がって見えるように
- 完了したタスクは薄い色で表示

ポイント： 「かっこいい」は人によって違う。色、形、配置など具体的に伝える。

問題2：機能を追加したい

悪い指示：

検索できるようにして

良い指示の例

ToDoリストに検索機能を追加して。

要件：
- 入力欄をリストの上に配置
- 入力するとリアルタイムで絞り込み
- タイトルに入力文字が含まれるものを表示

ポイント： どこに、どんな動きで、何を検索するか伝える。

問題3：エラーが出た

悪い指示：

動かないんだけど

良い指示の例

追加ボタンを押すとエラーが出る。修正して。

エラーメッセージ：
TypeError: Cannot read properties of undefined (reading 'map')

再現手順：
1. タイトルを入力
2. 追加ボタンをクリック
3. 上記エラーが表示される

ポイント： エラーメッセージは全文コピペ。何をしたら起きたかも伝える。

---

次はアプリ開発の実践に進みます！