プロンプトエンジニアリング入門:Web制作で使えるAIプロンプト集
「ChatGPTに聞いてみたけど、思ったような答えが返ってこない…」
AIをうまく使いこなすには、プロンプト(指示文)の書き方が9割といっても過言ではありません。同じ質問でも、聞き方を工夫するだけで答えの質が劇的に変わります。
今回はWeb制作の現場で実際に使える実践プロンプト集を、コピペで使える形でまとめました。
結論:「役割・目的・条件・出力形式」の4要素を入れる
良いプロンプトには共通の型があります。
| 要素 | 例 |
|---|---|
| 役割(誰が) | あなたは経験10年のWebデザイナーです |
| 目的(何のため) | カフェの新規HPを作るため |
| 条件(前提) | ターゲットは20〜30代女性、予算30万円 |
| 出力形式(どう返すか) | 箇条書きで5項目 |
この4つを意識するだけで、AIの返答が劇的に良くなります。
キャッチコピー作成のプロンプト
あなたはコピーライターです。
以下の業種・サービス向けに、サイトのファーストビューに使うキャッチコピーを5つ提案してください。
業種:整体院
ターゲット:30〜50代の女性
強み:完全予約制、施術後のアフターケアが手厚い
トーン:安心感・温かさ
各案について「どんな印象を与えるか」も簡潔に解説してください。
サイト構成(サイトマップ)のプロンプト
あなたは経験豊富なWebディレクターです。
以下の業種のコーポレートサイトに必要なページ構成を提案してください。
業種:BtoB向けの社労士事務所
規模:従業員5名
目的:問い合わせ獲得
階層構造で、各ページに含めるべき主要セクションも併記してください。
サイトマップの考え方はLPとHPの違いでも触れています。
SEOキーワード調査のプロンプト
あなたはSEOコンサルタントです。
以下の業種・地域のローカルSEO戦略において、ブログ記事のテーマを20個提案してください。
業種:美容室
地域:岐阜県大垣市
ターゲット:20〜40代女性、髪のダメージで悩んでいる人
各テーマについて、想定検索キーワード(メイン+サブ)を併記してください。
具体的なSEO戦略は地域密着SEO戦略を参考にしてください。
HTML/CSSのコード生成プロンプト
HTMLとCSSで、以下の条件のカードコンポーネントを作ってください。
要件:
- 画像 + タイトル + 本文 + ボタンの構成
- レスポンシブ対応(スマホで縦並び、PCで横並び)
- BEM命名で書く
- ホバーで影が深くなるアニメーション
CSSはSCSS形式で、コメント付きで返してください。
ライティング修正のプロンプト
以下の文章を、Web集客向けの記事として読みやすく改稿してください。
【条件】
- ですます調を維持
- 専門用語は使わず、初心者でもわかる言葉に
- 1段落3行以内
- 結論を冒頭に持ってくるPREP法で構成
【元の文章】
(ここに元文章を貼り付け)
うまくいかない時のコツ
① 一度に詰め込まない
長すぎるプロンプトはAIも処理しきれません。一つの指示につき一つの目的に絞り、必要なら段階的に深掘りしましょう。
② 例を見せる
「こういう感じで」と具体例を渡すと、AIが意図を理解しやすくなります。
③ 出力を改善させる
「もう少し砕けた口調で」「専門的な内容を3倍に」と追加で指示するだけで、出力がどんどん磨かれます。
まとめ:プロンプトは「会話」と「指示」のバランス
AIは便利な道具ですが、こちらの意図を伝えなければ良いアウトプットは返ってきません。「役割・目的・条件・出力形式」の4要素を意識して、AIと上手に対話しましょう。
「うちのサイトのコピーをAIに書かせたいけど、どう指示すればいい?」など、実務でAIを使う相談も承ります。お気軽にご連絡ください。