指示の出し方を学ぼう

「いい感じのサイトを作って」とAIに投げるのは、新入社員に「よしなに頼む」と言うのと同じです。
プロとアマチュアの違いは、センスではなく「伝え方（プロンプト）を知っているかどうか」だけです。

01 良い指示と悪い指示を比べてみよう

Webサイト作って。かっこいい感じで。

TikTokマーケティング研修のまとめサイトを構築してください。

条件:
- 2月の13日間のカリキュラムをカレンダー形式で表示するポータルページ
- 各日の詳細はサブページとして分離
- カレンダーの日付をクリックすると対応するサブページに遷移
- 今日の日付を自動ハイライトする機能
- フォントはNoto Sans JP + Teko、アクセントカラーはIndigo系
- 外部ライブラリ不要のVanilla HTML/CSS/JS

02 良い指示の5つの鉄則

AIに「いい仕事」をさせるための5つの鉄則です。全てを盛り込む必要はありませんが、多いほど精度は上がります。

1. 01

   ① 役割を与える

   「あなたはフロントエンドのシニアエンジニアです」「あなたは研修コンテンツのプロデューサーです」など、AIに立場を与えると回答の質が劇的に変わります。

2. 02

   ② 背景情報を渡す

   「2月に全13日間のTikTok研修を実施する」「読者は完全な初心者」など、前提条件を明確にします。AIは文脈が多いほど精度が上がる確率の機械です。

3. 03

   ③ 出力形式を指定する

   「Vanilla HTML/CSS/JSで」「ファイル構成を表形式で提示して」「コードブロックは出力しないで」といったフォーマット指定。

4. 04

   ④ 具体例を見せる

   「このサイト（URL）のようなデザインで」「手書き風のボーダーはこんな感じ（CSSの例）」など、見本を提示すると認識のズレが激減します。

5. 05

   ⑤ やってはいけないことを明記する

   「外部ライブラリは禁止」「ファイル数は5つ以内」「既存の〇〇フォルダは絶対に触るな」など、やってはいけないことを事前に明記します。

03 そのまま使えるテンプレート集

テンプレート A: まとめサイトの新規作成

# 役割
あなたはUI/UXを得意とするフロントエンドエンジニアです。

# 目的
〇〇研修の「まとめサイト」を新規構築してください。

# 条件
- ポータルページ（index.html）にカレンダーUIを配置し、各日の詳細ページへリンク
- 今日の日付を自動でハイライトする機能
- 各日の詳細ページは vol01-X_topic.html のファイル名規則
- フォントは Noto Sans JP + Teko、カラーは Indigo系
- Vanilla HTML/CSS/JS のみ。npm/React等は禁止
- コードブロックは出力せず、実装計画書とファイル構成のみ提示すること

# 出力
1. ディレクトリ構成（tree形式）
2. 各ファイルの役割と概要（表形式）
3. デザインの方針（配色・フォント・レイアウト）

テンプレート B: デザインの修正依頼

# 指示
現在のindex.htmlのヒーローセクションのデザインを変更してください。

# 変更内容
- 背景を黒基調のグラデーション（#2d3436 → #000）に変更
- タイトル文字をTekoフォント、5rem、白色に
- ヒーロー下部に4pxの青いグラデーションラインを追加

# 注意
- 他のセクションは一切変更しないこと
- styles.cssの該当箇所のみをピンポイントで修正すること

テンプレート C: 新しい機能の追加

# 目的
既存のまとめサイトに「クイズ機能」を追加してください。

# 仕様
- 各日の詳細ページの最下部にクイズセクションを配置
- 4択のラジオボタン形式、3問程度
- 正解を選ぶと緑のフィードバック、不正解なら赤のフィードバック
- スコアをlocalStorageに保存し、ポータルページで表示

# 制約
- 既存のデザインシステム（colors, fonts, border-radius）を踏襲
- 新規ファイルを追加する場合はquiz_data.jsのみ許可