Web制作 おくだ屋

WEB制作 おくだ屋

//この中に次から作るsvgデータを入れていく
ホーム > ホームページ制作 > プロンプトエンジニアリング入門:Web制作で使えるAIプロンプト集
ホームページ制作

プロンプトエンジニアリング入門: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を使う相談も承ります。お気軽にご連絡ください。