メインコンテンツへスキップ
レッスン一覧に戻る

atom.web-builder.write-effective-prompts

AIに的確に依頼するプロンプトの型を覚える

AIに的確に依頼するプロンプトの型を覚える 旅行先のレストランで「何か美味しいものを」とだけ注文したら、出てきたのが激辛カレーだった——こんな経験はありませんか? AIへの依頼もまったく同じです。「いい感じにして」...

effective-promptingeffective-promptingAI に伝わりやすい指示文(プロンプト)の書き方がわかります。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

AIに的確に依頼するプロンプトの型を覚える

旅行先のレストランで「何か美味しいものを」とだけ注文したら、出てきたのが激辛カレーだった——こんな経験はありませんか? AIへの依頼もまったく同じです。「いい感じにして」と言うだけでは、AIも迷ってしまい、あなたが思い描いていたものとは違う結果が返ってきます。

このレッスンでは、AIにあなたの意図をぴったり伝える「プロンプト(=AIへの指示文)」の型を15分で覚えます。型を1つ覚えるだけで、ChatGPT・Claude・Cursor など、どのAIツールでも回答の精度がぐんと上がります。


プロンプトの4つの要素を知る

良いプロンプトには、次の4つの要素が揃っています。料理の注文に例えてみましょう。

プロンプト4要素の構造図

要素意味レストラン注文に例えると
役割(ロール)AIに「あなたは〇〇の専門家です」と伝える「イタリア料理のシェフさん」
目的(タスク)「何をしてほしいか」を動詞ではっきり伝える「パスタを作ってください」
条件(コンストレイント)文字数、対象読者、使わない言葉などの制約「辛くしないで、量は少なめで」
形式(フォーマット)箇条書き、表、HTMLファイルなど出力の形「ワンプレートで出してください」

この4つが全部揃うと、注文が厨房に正確に伝わりますよね。AIへの依頼も同じ構造で組み立てます。


良い例と悪い例を比べる

悪い例

いい感じのランディングページを作って

このプロンプトの問題点:

  • 「いい感じ」が曖昧——AIにもあなたの好みは分かりません
  • 何のランディングページか、誰に向けたページか分からない
  • どんな形式で出力してほしいか指定がない

良い例

あなたはWeb制作のプロフェッショナルです。
次の条件で、コーヒーショップのランディングページを1ページ作成してください。

条件:
- 対象読者:近所に住む20〜40代の会社員
- 雰囲気:落ち着いたカフェ風の温かみのあるデザイン
- 使わないこと:派手なアニメーション
- 文字の色:背景に対して読みやすいコントラストにする

出力形式:HTMLファイル1つにCSSを含めて出力

4つの要素を探してみましょう。「役割」→ Web制作のプロ、「目的」→ ランディングページを作成、「条件」→ 対象読者・雰囲気など、「形式」→ HTML+CSS。すべて入っています。


AIツールごとにプロンプトを入力する

4要素の型はどのAIツールでも使えます。ここでは代表的なツールでの入力方法を確認しましょう。

ChatGPT / Claude(チャット型AI)

  1. ブラウザで ChatGPT(chat.openai.com)または Claude(claude.ai)を開く
  2. メッセージ入力欄に、先ほどの「良い例」をそのままコピー&ペーストする
  3. 送信ボタンを押す

ポイント:チャット型AIでは、プロンプト全文を1つのメッセージとして送るのがコツです。条件をバラバラに送ると、AIが前の条件を忘れてしまうことがあります。

Cursor(AIコード編集ツール)

  1. Cursorを開いた状態で Cmd + K(Mac)または Ctrl + K(Windows)を押す
  2. 表示される入力欄に、同じプロンプトを入力する
  3. Enterを押すと、AIがコードを生成してくれる

ポイント:Cursorではファイルの中身をAIが自動で読んでくれるので、「今開いているファイルを修正して」という指示も通じます。その場合も「条件」と「形式」は省略しないようにしましょう。

Cursorでのプロンプト入力画面

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に本格的な依頼をしてみましょう!

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_capture
学習完了