03. AIの基本とプロンプト設計

この章では、AIに依頼するときの基本を学びます。

AI活用で大切なのは、きれいな命令文を暗記することではありません。自分が何をしたいのかを整理し、AIが答えやすい形で伝えることです。

AIへの依頼文のことを、一般的にプロンプトと呼びます。

AIにできること

AIは、文章やコードをもとに、次に来そうな内容を生成できます。

Web制作では、次のような使い方ができます。

  • 用語を説明してもらう
  • コードの意味を解説してもらう
  • HTML構造の案を出してもらう
  • CSS設計の方向性を相談する
  • JavaScriptの実装方針を比較する
  • 文章の下書きを作る
  • 提案書の構成を作る
  • チェックリストを作る
  • エラーの原因候補を出す

AIは、考える材料を出すのが得意です。

特に、複数案を出したり、複雑な内容を整理したり、文章をわかりやすく言い換えたりする場面で役立ちます。

AIにできないこと

AIには苦手なこともあります。

  • 常に最新情報を正確に知っているとは限らない
  • 出力したコードが必ず動くとは限らない
  • 案件の背景を完全に理解しているわけではない
  • 著作権や利用規約を最終判断できない
  • 本番環境への影響を責任を持って判断できない

AIは自信のある口調で間違えることがあります。

そのため、AIの回答は「答え」ではなく「確認すべき候補」として扱います。

良い質問と悪い質問

AIへの質問は、情報が少ないほど曖昧な答えになりやすいです。

避けたい依頼:

曖昧な依頼
いい感じのLPを作って。

これだけでは、対象者、目的、業種、トーン、必要なセクション、制約がわかりません。

よい依頼:

前提を渡した依頼
Web制作スクールの無料相談LPを作ります。
対象は、未経験からWeb制作を学びたい20〜30代です。
目的は、無料相談の申し込みを増やすことです。

まず、ファーストビュー、悩み訴求、サービス内容、受講後の未来、FAQ、CTAの順で構成案を作ってください。
各セクションに、見出しと本文の方向性も付けてください。

前提があると、AIは目的に近い答えを出しやすくなります。

プロンプトに入れる要素

プロンプトには、次の要素を入れると精度が上がりやすくなります。

要素書くこと
目的何のために作るのか
対象者誰に向けるのか
前提すでに決まっている条件
制約やってほしくないこと、守ること
出力形式箇条書き、表、コードなど
判断基準何を重視してほしいか

すべてを毎回書く必要はありません。

ただし、AIの回答がズレるときは、たいてい前提や制約が足りていません。

目的の伝え方

AIには、作業内容だけでなく目的も伝えます。

目的を入れた依頼
お問い合わせを増やすためのコーポレートサイトを作ります。
トップページの構成案を、Web制作初心者にも実装しやすい粒度で作ってください。

「何を作るか」だけでなく、「何のために作るか」を伝えると、AIの提案が実務に近づきます。

対象者の伝え方

Web制作では、誰に向けたものかで文章もデザインも変わります。

対象者を入れた依頼
対象者は、はじめてホームページ制作を依頼する中小企業の経営者です。
専門用語を避け、安心感が出る表現でサービス説明文を作ってください。

対象者を伝えると、説明の細かさや言葉の選び方が変わります。

制約条件の伝え方

制約条件は、AIの出力を実務に合わせるために重要です。

制約条件を入れた依頼
次の条件でCSSを書いてください。

- JavaScriptは使わない
- class名はBEM風にする
- 既存のHTML構造は変えない
- スマホ幅では1カラムにする
- 余白は8px単位で調整する

制約を入れないと、AIが勝手にHTMLを変えたり、必要以上に複雑な実装を出したりすることがあります。

出力形式の指定

AIには、どの形式で返してほしいかも指定します。

出力形式を指定する
次の形式で出してください。

1. 改善ポイント
2. 理由
3. 修正例
4. 注意点

表で整理してほしい場合は、表形式を指定します。

表で比較する
FlexboxとGridの使い分けを、Web制作初心者向けに表で比較してください。

出力形式を決めると、あとから読み返しやすくなります。

段階的に依頼する

AIに一度で全部やらせようとすると、ズレた出力になりやすいです。

Web制作では、次のように段階を分けると進めやすくなります。

  1. 目的を整理する
  2. 構成案を作る
  3. セクションごとの内容を作る
  4. HTML構造を作る
  5. CSSを作る
  6. レスポンシブ対応を確認する
  7. アクセシビリティを確認する

AIの回答を検証する

AIの回答は、必ず確認します。

確認する観点は、内容によって変わります。

  • 事実として正しいか
  • 案件の目的に合っているか
  • 読者やユーザーに伝わるか
  • コードが実際に動くか
  • 既存コードを壊していないか
  • セキュリティや権利面に問題がないか
  • 説明できる内容になっているか

AIの出力をそのまま納品するのではなく、自分の判断を通した上で使います。

この章のまとめ

  • プロンプトは、AIに依頼するための文章
  • 目的、対象者、前提、制約、出力形式を伝えると精度が上がりやすい
  • 一度で全部やらせず、段階的に依頼する
  • AIの回答は、正しそうに見えても必ず検証する
  • AIに正解を出させるより、一緒に詰める考え方が大切