プロンプトは「仕様書」だと考える
AIへの指示は、開発者へ渡す仕様書と同じです。あいまいな仕様から良いコードが生まれないように、あいまいなプロンプトから良いコードは生まれません。
良いプロンプトの5つの構成要素
- 目的：何を作りたいか（例：「商品一覧ページのカテゴリフィルター機能」）
- 技術スタック：使う言語・ライブラリ（例：「バニラJS・jQueryなし・CSSのみ」）
- 入出力仕様：何を入力して何が出力されるか
- 制約条件：使ってはいけないもの、守るべきルール
- 出力形式：HTML/CSS/JSを分けて出力・コメント付き、など
Before / After 比較
❌ 悪い例：「ハンバーガーメニューを作って」
✅ 良い例：「バニラJavaScriptでハンバーガーメニューを実装してください。クリックで左からドロワーが開閉し、オーバーレイクリックでも閉じます。アニメーションはCSSトランジション 0.3s。aria属性でアクセシビリティも対応。HTML・CSS・JSを分けて出力してください。」
追加するとコードが改善される便利フレーズ
- 「コードに日本語コメントをつけてください」
- 「既存の HTML・CSS・JS 構造を崩さないように追加してください」
- 「レスポンシブ対応も含めてください（ブレイクポイント：768px・1024px）」
- 「このコードの問題点を指摘し、改善版を書いてください」
- 「より短く・読みやすく書き直してください」
- 「BEMの命名規則に従ってください」
会話形式で改善していくコツ
最初のプロンプトで完璧を求めず、生成されたコードを見て「〇〇を修正してください」「〇〇を追加してください」と会話形式でブラッシュアップしていくのが最も効率的です。
