普段、AIを使用してコードを書く際に、意図した通りの出力が行われないことあります。
例えば、tsで型定義を行なって欲しかったのに処理自体を変更しようとしてきたり、cssで指定した一部の色だけを変更したいのに全体のトンマナを変更してきたりします。
このように、小さい内容で正確に改修するようにさせるには、要件定義書のような大掛かりなプロントは書かなくても良いですが、かといって簡潔に書きすぎても意図した通りに動かないことがあります。
そのため、どのように指示してあげれば意図した通りに動きやすくなるのかを知る必要があります。
この記事では、どのようにプロンプトを書いてあげれば意図した通りの動きになりやすいかのテクニックを例と共に解説します。
今回の記事で使用したAIはすべて下記の通りになります。
- モデル:Claude Opus 4.5
- AIエージェント: Claude Code
使用するモデルやエージェントによって、出力結果が大きく異なる可能性があるので注意してください。
0.そもそも文章生成AIは
本題に入る前に、まずは文章生成AIの特性について知っておいた方が理解しやすくなると思います。
文章生成AIは、大量のテキストデータをもとに言葉同士の関係性について学習しています。
この学習データをもとに、ある言葉が来た時、その次にはこの言葉が来やすい文を確率で出力します。
例えば、「秋刀魚は、」という言葉があるとします。
この文の後ろに続く文は、「魚である」や「美味しい」というような言葉が自然と連想されます。
しかし、「空を飛ぶ」や「体が赤い」といった言葉は出てこないと思います。
(もし、学習データの中に「秋刀魚は、空を飛ぶ」「秋刀魚は、体が赤い」という文章が含まれていれば出力される場合があります。)
逆に、AIは「わからないこと」を「わからない」と出力しずらいです。
なぜなら、文章の意味を考えているのではなく、文章がどのように続くのかを出力しているためです。
(最近の文章生成AIは、賢くなりつつあるので、「わからないこと」に出会っても「それに関する情報をください」と出力される場合があります。)
このように、あくまでそれまでの文章に続く言葉は何かという確率で生成するのが、今日の文章生成AIです。
1.役割を与える
プロンプトの中に役割を与える文を入れることで、AIがその役割になりきって出力しやすくなります。
例えば、「あなたはデザイナーです。」とプロンプトの頭に入れることで、デザインを意識した内容を出力しやすくなります。
普通にプロンプトを入力した場合
プロンプト
test_01.htmlに対して、ToDoリストのデザインを作成してください。
思考内容
出力結果
プロンプトに役割を含めた場合
プロンプト
あなたはデザイナーです。
test_02.htmlに対して、ToDoリストのデザインを作成してください。
思考内容
出力結果
「あなたはデザイナーです。」の文言を入れているかどうかのみで、UI/UXが大きく変わります。
文言を入れていない方は、リスト追加項目と完了チェックボックスのみの最小限のToDoリストを作成しています。
思考内容も、ただ「ToDoリストを作成しましたよ」って感じで出力されています。
一方で、「あなたはデザイナーです。」と入れている方は、完了と未完了を切り替えられるボタンが設置されていたり、実際にありそうなデザインで明らかにクオリティが上がっています。
思考内容もきちんとユーザビリティの目線に立って作成していることが伺えます。
このように、AIがどのように振る舞ってほしいかを明確に入れてあげることで、まるでその役割になりきったかのような出力をしてくれやすくなります。
他にも「AWSのプロとして、適切なインフラ構築を教えてください」や「SEOのプロとして、ページ構造を考えてください」といったこともできそうです。
2.タスクを分割させる
行ってほしい作業の内容をプロンプトに含めたとき、「その作業内容を分解してください」と入れることで、AIが処理しやすい単位に分解してくれます。
このおかげで、いきなり完成を目指そうとしないので、頓珍漢な出力になりにくかったり、逐一実装内容を確認できるので軌道修正が行いやすくなったりします。
普通にプロンプトを入力した場合
プロンプト
test_01.htmlに電卓のレイアウトで計算ができるページを作成してください。
思考内容
「タスクを分割してください」と入れた場合
プロンプト
test_02.htmlに電卓のレイアウトで計算ができるページを作成してください。
このタスクを分割して作成してください。
思考内容
今回は、どちらもしっかり動作するアプリが完成しましたが、「タスクを分割してください」と入れた場合は、ファイル編集のたびに、「実行していいですか?」と確認してきます。
そのため、「実装内容が間違っていないか」、「コードに含まれているとまずいものはないか」などを確認しやすいです。
もし、間違った内容を出力しようとした場合には、すぐに停止したり、代わりのプロンプトを投げたりできます。
特に、変えてほしくないコードを変えてしまい、「さっきまで動いていたのに、いきなり動かなくなってしまった」問題をグッと防ぎやすくなると思います。
モデルによっては、勝手にタスクを分割して実行してくれたりすることもあるので、必要ない場合もあります。
また、わざわざ「タスクを分割して」とプロンプトを入れなくても、エージェントによっては、タスク分割を行なってくれるモードに切り替えられたりできます。
例えば、Claude Codeであれば、入力欄の左下をクリックすると、Plan modeに変更でき、タスクを分割してくれます。
また、GoogleがリリースしたエディタのAntigravityもPlaningモードに切り替えるとタスクを分割してくれます。
3.タスクの不備を出力させる
作成したプロンプトの内容に自信がないのであれば、AIに指摘してもらうことで、軌道修正がしやすくなります。
特に、複雑なプロンプトを投げるとき、意図せず途中で文章が矛盾してしまうことがあると思います。
また、タイポしてやってほしいことと全く異なる内容になってしまうこともあると思います。
人間が見ると明らかに間違っていると判断できる内容であっても、AIは「わからない・矛盾している」と出力せず、勝手に補完して進めてしまいます。
それを防ぐには、一度AIがプロンプトを確認して、AIから指摘してもらうことで防ぐことができます。
普通にプロンプトを入力した場合
プロンプト
@AI_test/test_01.html
htmlとして、2つのdivタグを作成して、その中に4つのimgタグを作成して、計10個のimgタグを作成してください。
utf8で日本語が問題なく表示されるようにしてください。
思考内容
「不備があったら教えてください」と入力した場合
プロンプト
@AI_test/test_02.html
下記の内容を作成して欲しいのですが、不備や間違えている点があったら教えてください。
htmlとして、2つのdivタグを作成して、その中に4つのimgタグを作成して、計10個のimgタグを作成してください。
utf8で日本語が問題なく表示されるようにしてください。
思考内容
2つのdivタグを生成して、その中に4つのimgタグを作成するように依頼しています。
つまり、8個のimgタグを作成してほしいというのが今回の内容です。
しかし、「合計10個のimgタグを作成する」と間違えて依頼してしまったとします。
普通に入力した方は、特に何も教えてくれず、勝手に10個のimgタグを作成してしまいました。
一方で、「不備があったら教えてください」と入れている方は、「文章が矛盾している」と作成する前に指摘してくれました。
特に、複雑なタスクになる場合やプロンプトの投げる内容について知識がない場合などは、プロンプト自身を確認させることでミスが発覚して軌道修正が行いやすくなるんじゃないかなと思います。
4.参考元と出力結果を比較させる
Figmaなどにデザインが既に存在する状態では、MCPを使用して作成することもあると思います。
そのような場合では、デザインの参照元と出力結果を比較させることによって、AIにより正確なデザインを作成してもらうことができます。
参照元と出力結果を比較させるには、下記の設定をします。
- デザインの情報をプロンプトに含めて作成させる(Fimga MCPなどを利用してデザインを参照できる仕組みにする)
- 「Live Server」などを使用して、作成したコードをブラウザ上で参照できるようにする
- Playwright MCPなどを使用して、URL形式で参照先を指定できるようにする
ただコードを記述する一方通行になりがちなコードの編集を、「実際にはブラウザ上でどのように表示されているか」をAIが認識できるようになります。
この状態で、プロンプトに「参照元のデザインと出力先のURLのデザインを変更してください」と入れることで、AIが比較するようになります。
比較することで、勝手に補完して出力しがちなAIを参照元のデザインに準拠するよう矯正することができ、より正確なデザインを出力しやすくなります。
まとめ
エンジニアがAIを使う際に、少しでも出力精度を上げる方法を4つほど紹介しました。
やってほしいことをただ単純にプロンプトに投げるのではなく、一工夫加えてあげることで、出力精度がグンと上がります。
そして、ここまで読んできてお気づきになった方もいらっしゃるかもしれませんが、AIに投げるプロンプトは人間に依頼する時の内容と大体は同じです。
最初で紹介した、「あなたはデザイナーです。」という文言も、人間に伝えるなら「デザイナーの気持ちになってください。」と言ってるのと変わりありません。
タスクを分割させると、AIも人間も「自分は何をしなければならないのか」、「あとは何が残っているのか」を認識しやすくなるのは同じです。
結局は「人間への指示」と「AIへの指示」はほとんど一緒なんじゃないかなと思います。
AIをただのツールとして使用するのではなく、同じ人間として接するように意識することで、出力精度を上げるプロンプトを自分でも生み出せると思います。
この記事で書かれた内容以外にも、より良い出力をしてくれるような書き方があると思うので、自分に合ったプロンプトの投げ方をぜひとも探してみていただきたいです。