AI にコードを頼むときの伝え方：思いどおりに作ってもらうコツ

この記事で分かること

• AI への「頼み方」で結果が大きく変わる理由
• 伝えるべき4つの要素（目的・条件・完成形・制約）
• 大きな仕事を小さく分けて頼む方法
• よくある失敗と、その言い換え

AI コーディングツールは、頼み方がそのまま結果に出ます。プログラミングの知識が浅くても、伝え方 を身につけるだけで、作れるものの幅が一気に広がります。所要時間は 45 分です。

なぜ「いい感じに」では失敗するのか

「自己紹介ページをいい感じに作って」と頼むと、AI は「いい感じ」を自分で想像して埋めます。その想像があなたの頭の中と一致することは、まずありません。結果、「思っていたのと違う」を何度も繰り返すことになります。

人間の新人に仕事を頼むときと同じです。「なんかいい感じの資料作って」と言われた新人は困ります。「来週の会議で、上司に予算の増額を説得するための資料。A4 1枚。グラフを1つ」なら、動けます。

AI も同じです。相手が動けるだけの情報を渡す。それだけです。

伝えるべき4つの要素

1. 目的：何のために

「自己紹介ページ」だけでなく、「就職活動で企業に見せる」「趣味仲間に見せる」で作るべきものは変わります。

2. 条件：何を含めるか

名前、写真、趣味の数、リンク先、ページ数。具体的な内容と数を伝えます。

3. 完成の形：どう見えるか

「スマホでも見やすい」「白背景で文字は濃いグレー」「見出しは左に緑の線」。参考になるサイトがあれば「○○のような雰囲気」も有効です。

4. 制約：やってほしくないこと

「外部のライブラリは使わない」「ファイルは index.html と style.css の2つだけ」「JavaScript は使わない」。制約を書くと、AI が余計なものを足さなくなります。

4つを入れた頼み方の例

就職活動で企業に見せるための自己紹介ページを作って。

含めるもの：
- 名前（山田 太郎）と一言の自己紹介
- 学んだこと（HTML/CSS、JavaScript、Claude Code）を3つの箱で
- 作ったもの（あとで追加するので、ダミーを2つ）
- 連絡先はメールのみ

見た目：
- 白背景、文字は濃いグレー、アクセントは緑
- スマホでも1列で読みやすいように

制約：
- ファイルは index.html と style.css の2つだけ
- 外部ライブラリやフォントの読み込みはなし

この頼み方なら、1回目からほぼ意図どおりのものが出てきます。

大きな仕事は小さく分ける

「ブログサイトを作って」のような大きな頼みごとは、一度にやらせると途中で方向がずれます。段階に分けてください。

1. まず 構造だけ：「記事一覧ページと記事ページの HTML だけ作って。CSS はまだいらない」
2. 次に 見た目：「一覧ページをカード型のレイアウトにして」
3. 次に 動き：「記事のタイトルをクリックしたら記事ページに移動するようにして」
4. 最後に 仕上げ：「スマホで確認したら文字が小さいので、16px 以上にして」

各段階で 必ず自分でブラウザを開いて確認 してから、次に進みます。確認をはさむことで、ずれた方向に進み続けることを防げます。

「直して」の頼み方

修正の頼み方にもコツがあります。

• 場所を示す：「見出しの色を変えて」より「ページ上部の h1 の色を #2f5bea にして」
• 現状と希望を両方書く：「今は3つの箱が縦に並んでいる。横に並べたい」
• エラーはそのまま貼る：エラー文を要約せず、コピーして貼ります。AI はエラー文からかなり正確に原因を特定します。

ブラウザの Console に次のエラーが出ています。
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
script.js の 3 行目です。原因と直し方を教えて。

「教えて」の頼み方

コードを書いてもらうだけでなく、理解するために使う のが上達の近道です。

• 「この行は何をしている？初心者向けに説明して」
• 「この書き方と、さっきの書き方は何が違う？」
• 「もっと簡単な書き方はある？」
• 「この部分を自分で書きたい。ヒントだけちょうだい」

特に最後の「ヒントだけ」は強力です。答えを見る前に自分で考える時間ができて、記憶に残ります。

よくある失敗と言い換え

失敗しやすい頼み方	言い換え
かっこよくして	余白を広く、文字を大きく、色は2色まで
直して	何が起きていて、どうなってほしいかを書く
全部作って	まず一覧ページだけ。確認したら次
速くして	どの操作が遅いか、何秒かかるかを書く
動かない	エラー文と、期待した動作を書く

頼む前のチェックリスト

• 何のために作るか、書いた
• 含める内容と数を、書いた
• 見た目のイメージを、言葉か参考サイトで書いた
• やってほしくないことを、書いた
• 一度に頼む量は、確認できる大きさか

やってみよう

次のお題を、4つの要素を入れて頼んでみてください。できたものと、自分の意図とのずれを見比べるのが練習です。

1. 家計簿の入力フォーム（日付・項目・金額を入れて、一覧に追加される）
2. 今日の献立ルーレット（ボタンを押すと、登録した料理からランダムに1つ表示）
3. 読んだ本の記録ページ（タイトル・著者・感想・星の数）

まとめ

• AI への頼み方は、新人への頼み方と同じ。動けるだけの情報を渡す。
• 目的・条件・完成形・制約の4つ。
• 大きな仕事は分けて、確認しながら進める。
• 「作って」だけでなく「教えて」「ヒントだけ」で理解を深める。

次は「AI が書いたコードの読み方・確かめ方」です。AI に任せきりにしないための、いちばん大事な回です。