AIプロンプトの書き方｜Webデザインの実務で使える指示の型と例文

  AIを使ってみたけれど、返ってきた内容が思っていたものと違った…
  何度やりなおしてもいい回答を得られない…
  結局は自分で書き直した…

そんな経験はありませんか？ぬるま湯塾でも、

• AIを触ってみたけれど、思ったような答えが返ってこない
• どう指示すればいいか、いまいちわからない

というご相談をよくいただきます。

AIの回答の質が低い場合、まずは指示の書き方、つまりプロンプトに原因がないか確認しましょう。 そしてプロンプトには型があります。型を覚えるだけなら、そう時間はかかりません。

この記事で分かることは次の3つです。

1. プロンプトとは何か（一文の定義）
2. 伝わるプロンプトの型（5つの要素）
3. Webデザインの仕事で使えるプロンプト例文7つ（参考探し・配色を含む）

回答の精度を左右するAIプロンプト

プロンプトとは、AIに出す指示文のこと

プロンプトとは、AIに「何を、どうしてほしいか」を伝える指示文のことです。

英語もプログラミングの知識も要りません。普段の日本語の文章で構いません。実際、Google・OpenAI・Anthropicが公開しているプロンプト作成のガイドで共通して挙がっているのは、

• 明確で具体的な指示を出す
• 文脈の情報を足す
• 例を示す
• 出力の形を指定する

といった項目です（各社の公式ドキュメントを2026年9月2日に確認。URLは記事末尾に記載）。どれも特殊な技術ではなく、人に仕事を頼むときと同じ考え方です。

同じ質問でも、答えの質が変わる理由

回答の質が変わるのは、AIがあなたの案件の前提を何ひとつ知らないからです。

たとえば「良いサイトの作り方を教えて」と聞けば、教科書通りの一般論が返ってきます。誰に向けた、何のためのサイトなのかがAIに伝わっていないので、当然です。

つまり前提条件を詳しく伝えられて初めて、精度の高い回答を得ることができます。

この記事で扱う範囲

この記事で扱うのは、次の7つです。

1. ヒアリングの質問づくり
2. 打ち合わせメモの要件整理
3. サイト構成の壁打ち
4. キャッチコピーの案出し
5. 提案文・見積メールの文面づくり
6. デザインの参考探し
7. 配色の方向性出し

この記事では、AIにビジュアルを完成させる方法は扱いません。初心者のうちは、AIが出したデザインをそのまま採用するよりも、「なぜこの表現が適切なのか」を自分で判断できる力を優先して身につけてほしいからです。

伝わるプロンプトの型｜押さえる5つの要素

1. 役割……誰として答えてほしいか
2. 目的・背景……何のための作業で、誰に届けるのか
3. 依頼内容……一度の指示では、中心となる作業をひとつに絞る
4. 条件……文字数・個数・避けたい表現などの制約
5. 出力形式……箇条書きか、表か、文章か。いくつ出すか

要素	書き方の例	書かないとどうなるか
1. 役割	あなたはWeb制作の打ち合わせに慣れたディレクターです	誰に向けた言葉づかいか定まらない
2. 目的・背景	40代女性向けの美容サロンのサイトで、初回体験の申し込みを増やしたい	一般論しか返らない
3. 依頼内容	初回打ち合わせで聞くべき質問を挙げてください	何をすればよいか伝わらず、説明が返ってくる
4. 条件	専門用語は使わず、10個以内で	量が多すぎたり、専門用語だらけになる
5. 出力形式	箇条書きで、質問の意図を1行添えて	長い文章で返ってきて、そのまま使えない

ビフォー・アフターで見比べる

 Before
美容サロンのWebサイトのキャッチコピーを考えて

 After
あなたはWebサイトの文章を書くコピーライターです。
40代女性向けの美容サロンのサイトを作っています。
初回体験の申し込みを増やすことが目的です。
トップページのキャッチコピー案を出してください。
条件：20文字以内、競合が使っている「癒やし」「極上」「上質」「特別な時間」は使わない。
出力形式：方向性の違う案を5つ、箇条書きで。それぞれ狙いを1行添えて。

Beforeでは、どんなサイトにも当てはまる無難な言葉が返ってきます。Afterでは、方向性の違う案が並ぶので「この方向は違うな」と自分で選べます。選ぶのは自分という状態を作れることが大事です。

※上記のBefore / Afterは前提条件をしっかり伝えた上でのプロンプトの例です。実務でもいきなり依頼をするのではなく、クライアントから共有された情報を伝えた上で案を出させるようにしましょう。
※前提条件を伝える際は個人情報の取り扱いに十分注意してください。

そのまま使えるプロンプト例文7選｜デザインの仕事編

ここからはコピーして使える例文です。〈 〉の中を自分の案件に置き換えてください。

1. ヒアリングの質問づくり

初回の打ち合わせで何を聞けばいいか分からないときに使います。

あなたはWeb制作の打ち合わせに慣れたディレクターです。
〈美容サロン〉のホームページ制作について、初回打ち合わせをします。
クライアントに聞いておくべき質問を挙げてください。
条件：専門用語は使わない。12個以内。
出力形式：箇条書き。各質問に「なぜ聞くのか」を1行添えて。

質問の意図も一緒に出させるのがポイントです。意図が分かっていれば、当日その場で質問を足したり削ったりできます。

2. 打ち合わせメモの要件整理

聞いた話がバラバラのままで、何から手をつければいいか分からないときに使います。

以下は〈美容サロン〉との打ち合わせメモです。
制作の要件として整理してください。
条件：メモに書かれていないことは補わず、不明な点は「確認が必要」として分けて。
出力形式：目的／ターゲット／必要なページ／優先度（高・中・低）の4項目に整理。
---
〈ここにメモを貼る〉

「書かれていないことは補わない」と条件に入れておくと、AIが勝手に埋めた推測と、実際に聞いた話が混ざらずに済みます。

3. サイト構成の壁打ち

自分で考えた構成に抜けがないか不安なときに使います。AIに構成を決めさせるのではなく、自分の案を叩かせる形にします。

〈美容サロン〉のサイト構成案を自分で作りました。
〈初回体験の申し込みを増やす〉という目的に対して、抜けている観点を指摘してください。
条件：指摘だけで、代わりの構成案は出さないでください。
出力形式：指摘を5つまで。それぞれ理由を1行添えて。
---
〈ここに自分の構成案を貼る〉

「代わりの案は出さないで」と書くのが肝です。こう指定しておかないと、AIの案をそのまま採用してしまい、人間側が自分で構成を考える力が伸びません。

4. キャッチコピーの案出し

言葉が思いつかず、手が止まってしまうときに使います。

あなたはWebサイトの文章を書くコピーライターです。
〈美容サロン〉のトップページのキャッチコピー案を出してください。
ターゲットは〈40代女性〉、目的は〈初回体験の申し込みを増やすこと〉です。
条件：20文字以内。〈癒やし〉〈極上〉という言葉は使わない。
出力形式：方向性の違う案を5つ、箇条書きで。それぞれ狙いを1行添えて。

方向性の違う案を複数出させて、選ぶのは自分です。5案から1案を選ぶ作業を繰り返すと、「なぜこれを選んだか」を言葉にする練習にもなります。

5. 提案文・見積メールの文面

伝えたい要点は決まっているのに、失礼のない書き方が分からないときに使います。

以下の要点をもとに、クライアントへ送る〈提案メッセージ〉の文面を作ってください。
条件：丁寧すぎて回りくどい表現は避ける。300文字以内。金額や納期は要点に書いた数字から変えない。
出力形式：そのまま送れるメール文面。
---
要点：
・〈相談内容をどう理解したか〉
・〈提案する内容〉
・〈納期の目安〉
・〈確認したいこと〉

「金額や納期は変えない」という条件を入れておけば、AIが関与してほしくない部分が明確になります。

6. デザインの参考探し

デザインを作りたいけれど、何を参考にすればいいのか分からないというときに使います。

あなたはWebデザインのアートディレクターです。
〈美容サロン〉のホームページの参考デザインを、ギャラリーサイトで探します。
目的は〈初回体験の申し込みを増やすこと〉、ターゲットは〈40代女性〉です。
探すときの手がかりを整理してください。
条件：サイト名と根拠となるURLを挙げてください。
出力形式：
1. 検索キーワード（日本語5個・英語5個）
2. 絞り込み条件（業種／テイスト／レイアウト／色味）
3. 見つけたサイトのどこを見るべきかのチェック観点を5つ

※上記のBefore / Afterは前提条件をしっかり伝えた上でのプロンプトの例です。実務でもいきなり依頼をするのではなく、クライアントから共有された情報を伝えた上で案を出させるようにしましょう。
※前提条件を伝える際は個人情報の取り扱いに十分注意してください。

7. 配色の方向性を出させる

配色を決めるのに迷ってしまうときも、正しく指示をすればそれに見合う案を出してくれます。

あなたはWebデザインのアートディレクターです。
〈美容サロン〉のホームページの配色の方向性を提案してください。
目的は〈初回体験の申し込みを増やすこと〉、ターゲットは〈40代女性〉、
与えたい印象は〈清潔感がある・落ち着く〉です。
条件：ベースカラー・メインカラー・アクセントカラーの3つの役割に分けてください。
　　　〈ピンク〉は使わない方向でお願いします。
出力形式：方向性の違う案を3つ。各案にカラーコードと「なぜこの色か」を1行添えて。

この指示では「役割」を3つに分けて依頼しています。役割で分けると、より具体的な提案が返ってきます。

注意したい点
返ってきたカラーコードは、あくまで案のひとつです。実際の画面に置いてみると印象が変わることがあり、文字と背景のコントラストが足りているか、読みやすいかどうかは、AIの提案では担保されません。最後は自分の目で確かめて調整してください。

判断の土台そのものに自信がないうちは、以下の関連記事を先に読んでおくと、AIの提案を見たときに「これはいい / わるい」の判断基準がわかります。

ここまでの7つは、すべて「考える・調べる・伝える」の補助です。参考を選ぶのも、色を決めるのも、最後はあなたです。

AIに任せきりにしない3つのこと

便利だからこそ、渡してはいけないものが3つあります。

1. ビジュアルの判断は自分の目で確認する

• レイアウト
• 配色
• 写真の選び方

のよしあしは、目的に照らして最終的には人間が決めるものです。

デザインは見た目を整える作業ではなく、目的を達成するための手段です。「なぜこの配色にしたのか」に答えられなければ、クライアントの一言で全部を作り直すことになります。

説明のスキルを上げるためには、判断基準を自分の中に作って出力を採用しましょう。

2. 事実は必ず一次情報で確認する

AIは、事実と違うことをもっともらしい文章で書くことがあります。

これらの重要な情報は必ず事前にクライアントに確認するか、公式サイトや公的機関の資料で裏を取ってください。特に著作権まわりは判断が難しいところです。

国内では文化庁が「AIと著作権について」というページで考え方やチェックリストを公開していますので、そういった一次情報にあたる習慣をつけておくと安心です。

3. クライアントの機密情報は伝えない

• 未公開の情報
• 個人情報
• 他社の見積もりの詳細

などは、そのままAIとのチャットに貼り付けないでください。社名や店舗名は伏せて「〈美容サロン〉」のように置き換えれば、たいていの相談は成立します。

入力した内容がどう扱われるか、学習に使われるかどうかはサービスや契約プランによって違い、変更もあります。お使いのサービスの公式ヘルプで、必ずご自身の環境の設定を確認してください。

まとめ

プロンプトの書き方は、次の5つの要素を埋めることを意識しましょう。

プロンプトで埋めるべき5つ
1、役割
2、目的・背景
3、依頼内容
4、条件
5、出力形式

指示の出し方は、書き方を知っているかどうかだけで今日から埋められる差です。

参考にした情報源

• Google Cloud「Overview of prompting strategies」 https://docs.cloud.google.com/vertex-ai/generative-ai/docs/learn/prompts/prompt-design-strategies
• OpenAI「Prompt engineering」 https://developers.openai.com/api/docs/guides/prompt-engineering
• Anthropic「Prompting best practices」 https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/claude-prompting-best-practices
• 文化庁「AIと著作権について」 https://www.bunka.go.jp/seisaku/chosakuken/aiandcopyright.html

いずれも2026年9月2日に本文を確認しました。AIサービスの仕様や規約は変更が早いため、ご利用の際は必ず最新のページをご確認ください。