atom.web-builder.write-effective-prompts
AIに的確に依頼するプロンプトの型を覚える
AIに的確に依頼するプロンプトの型を覚える 旅行先のレストランで「何か美味しいものを」とだけ注文したら、出てきたのが激辛カレーだった——こんな経験はありませんか? AIへの依頼もまったく同じです。「いい感じにして」...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
AIに的確に依頼するプロンプトの型を覚える
旅行先のレストランで「何か美味しいものを」とだけ注文したら、出てきたのが激辛カレーだった——こんな経験はありませんか? AIへの依頼もまったく同じです。「いい感じにして」と言うだけでは、AIも迷ってしまい、あなたが思い描いていたものとは違う結果が返ってきます。
このレッスンでは、AIにあなたの意図をぴったり伝える「プロンプト(=AIへの指示文)」の型を15分で覚えます。型を1つ覚えるだけで、ChatGPT・Claude・Cursor など、どのAIツールでも回答の精度がぐんと上がります。
プロンプトの4つの要素を知る
良いプロンプトには、次の4つの要素が揃っています。料理の注文に例えてみましょう。

| 要素 | 意味 | レストラン注文に例えると |
|---|---|---|
| 役割(ロール) | AIに「あなたは〇〇の専門家です」と伝える | 「イタリア料理のシェフさん」 |
| 目的(タスク) | 「何をしてほしいか」を動詞ではっきり伝える | 「パスタを作ってください」 |
| 条件(コンストレイント) | 文字数、対象読者、使わない言葉などの制約 | 「辛くしないで、量は少なめで」 |
| 形式(フォーマット) | 箇条書き、表、HTMLファイルなど出力の形 | 「ワンプレートで出してください」 |
この4つが全部揃うと、注文が厨房に正確に伝わりますよね。AIへの依頼も同じ構造で組み立てます。
良い例と悪い例を比べる
悪い例
いい感じのランディングページを作って
このプロンプトの問題点:
- 「いい感じ」が曖昧——AIにもあなたの好みは分かりません
- 何のランディングページか、誰に向けたページか分からない
- どんな形式で出力してほしいか指定がない
良い例
あなたはWeb制作のプロフェッショナルです。
次の条件で、コーヒーショップのランディングページを1ページ作成してください。
条件:
- 対象読者:近所に住む20〜40代の会社員
- 雰囲気:落ち着いたカフェ風の温かみのあるデザイン
- 使わないこと:派手なアニメーション
- 文字の色:背景に対して読みやすいコントラストにする
出力形式:HTMLファイル1つにCSSを含めて出力
4つの要素を探してみましょう。「役割」→ Web制作のプロ、「目的」→ ランディングページを作成、「条件」→ 対象読者・雰囲気など、「形式」→ HTML+CSS。すべて入っています。
AIツールごとにプロンプトを入力する
4要素の型はどのAIツールでも使えます。ここでは代表的なツールでの入力方法を確認しましょう。
ChatGPT / Claude(チャット型AI)
- ブラウザで ChatGPT(chat.openai.com)または Claude(claude.ai)を開く
- メッセージ入力欄に、先ほどの「良い例」をそのままコピー&ペーストする
- 送信ボタンを押す
ポイント:チャット型AIでは、プロンプト全文を1つのメッセージとして送るのがコツです。条件をバラバラに送ると、AIが前の条件を忘れてしまうことがあります。
Cursor(AIコード編集ツール)
- Cursorを開いた状態で
Cmd + K(Mac)またはCtrl + K(Windows)を押す - 表示される入力欄に、同じプロンプトを入力する
- Enterを押すと、AIがコードを生成してくれる
ポイント:Cursorではファイルの中身をAIが自動で読んでくれるので、「今開いているファイルを修正して」という指示も通じます。その場合も「条件」と「形式」は省略しないようにしましょう。

Claude Code(ターミナルから使うAIツール)
ターミナル(黒い画面)で次のように入力します。
claude "あなたはWeb制作のプロフェッショナルです。コーヒーショップのランディングページをHTMLで1ページ作成してください。対象読者は20〜40代の会社員、落ち着いたカフェ風デザインで。"
これは「claudeというコマンドに、プロンプトを渡してAIに依頼する」という意味です。
ポイント:Claude Code ではプロンプトを " で囲みます。長いプロンプトもそのまま入力できます。
テンプレートに当てはめて書く
あなた自身のプロジェクトで使うプロンプトを、次のテンプレートに沿って書いてみましょう。【 】の中を自分の言葉で埋めてください。
あなたは【役割】です。
【目的】をしてください。
条件:
- 【条件1:誰に向けたものか】
- 【条件2:やってはいけないこと】
- 【条件3:その他の制約】
出力形式:【形式】
例:ポートフォリオサイトの自己紹介文を作る場合
あなたはコピーライターです。
私のポートフォリオサイト用の自己紹介文を書いてください。
条件:
- 対象読者:制作を依頼してくれる企業の担当者
- 使わないこと:「精一杯がんばります」のような抽象的な表現
- 長さ:200文字以内
出力形式:テキストのみ(HTML不要)
条件を書くときのコツ
良い書き方:
- 「使わないこと:〜」と除外を明示する
- 「対象読者:〜」と誰向けか書く
- 「〇〇文字以内で」と長さを指定する
- 条件は 3〜5個 に絞る(多すぎるとAIが一部を無視します)
悪い書き方:
- 「よろしく」だけ(何をすればいいかAIに伝わりません)
- 「おまかせで」(AIはあなたの好みを知りません)
- 「あの感じで」(「あの」が何か、AIには分かりません)
結果を確認して修正を依頼する
AIから回答が返ってきたら、次の3つのチェックポイントで確認しましょう。
| チェック項目 | 確認すること | 例 |
|---|---|---|
| 目的 | 依頼した内容がちゃんとできているか | ランディングページが生成されているか |
| 条件 | 指定した制約が反映されているか | 派手なアニメーションが入っていないか |
| 形式 | 希望した出力形式になっているか | HTML+CSSの1ファイルになっているか |
ズレていたら、ズレている部分だけを具体的に指摘して再度依頼します。
良い修正依頼の例
2番目のセクションの背景色を白から薄いベージュ(#f5f0e8)に変更してください。
また、「お問い合わせ」ボタンの文字サイズを16pxに大きくしてください。
悪い修正依頼の例
なんか違うのでもう一回やり直して
「もっと良くして」ではなく「〇〇の部分を〇〇に変更して」——このように、場所と変更内容をセットで伝えるのがコツです。
つまずきやすいポイントを押さえる
| つまずきポイント | なぜ起きる? | 対策 |
|---|---|---|
| 条件を10個以上書いたら、AIが一部を無視した | AIには一度に処理しやすい情報量の限界がある | 条件は3〜5個に絞る。本当に重要なものを上の方に書く |
| 役割や形式を省略したら、回答がぼんやりした | AIが「何者として」「どんな形で」答えればいいか分からない | 省略しない。1行でいいので必ず書く |
| 何度修正しても思い通りにならない | 元のプロンプトの目的や条件自体にズレがある | 修正を重ねるより、最初のプロンプト全体を整理して新しく送り直す |
| AIの回答が長すぎて読みきれない | 長さの指定をしていない | 「〇〇文字以内で」「箇条書き5つで」のように出力量を指定する |
| 英語で回答が返ってきた | AIが言語を判断しきれなかった | プロンプトの最後に「日本語で回答してください」と明記する |
完成を確認する
次の3つすべてにYesと言えたら、このレッスンは完了です。
- テンプレートを使って自分のプロンプトを1つ書けた——4要素(役割・目的・条件・形式)がすべて含まれている
- AIツール(ChatGPT、Claude、Cursorのいずれか)にプロンプトを送って回答を受け取った——送信のスクリーンショットを保存してある
- 回答のズレを1箇所以上見つけて、修正依頼を具体的に書けた——「〇〇の部分を〇〇に変更して」の形で指摘した
スクリーンショットの撮り方がわからない場合:
- Mac →
Cmd + Shift + 3(画面全体)またはCmd + Shift + 4(範囲選択) - Windows →
Windows + Shift + S
このレッスンで身についたこと
- プロンプトは「役割・目的・条件・形式」の4要素で組み立てる
- 具体的に書くほど、AIの回答も的確になる
- 結果がズレたら、場所と変更内容をセットで伝えて修正する
- どのAIツールでも同じ型が使える
次は、この型を使って実際のプロジェクトでAIに本格的な依頼をしてみましょう!
種類: markdown_doc
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア