AIプロンプトのパターン集 ── コピペで使える実践テンプレート20選

プロンプトは「型」を持つと楽になる

毎回ゼロから指示を考えるのは大変。よく使うパターンを型として持っておくと、指示の質が安定する。

---

Webサイト系

1. 新規サイト作成

[フレームワーク]で[サイトの種類]を作ってください。

ページ構成：
1. [ページ名]（[内容]）
2. [ページ名]（[内容]）

デザイン：
- [カラー]基調
- [フォント]
- レスポンシブ対応

2. コンポーネント追加

以下のコンポーネントを作ってください：
- 名前: [コンポーネント名]
- 機能: [何をするか]
- Props: [受け取るデータ]
- デザイン: [見た目の説明]
既存の[ファイルパス]のスタイルに合わせてください。

3. レスポンシブ修正

[ファイルパス]をモバイル対応にしてください。
現在PCでは正常ですが、スマホ（幅375px）で以下の問題があります：
- [問題1]
- [問題2]

---

アプリ系

4. CRUD機能

以下のデータを管理するアプリを作ってください：
- データ項目: [名前、日付、金額など]
- 機能: 追加、編集、削除、一覧表示
- 保存先: localStorage
- デザイン: シンプルなカード形式

5. フォーム作成

以下の入力フォームを作ってください：
- 入力項目: [項目1]、[項目2]、[項目3]
- バリデーション: [必須チェック、文字数制限など]
- 送信後の動作: [何をするか]

6. API連携

[API名]のAPIを使って[機能]を実装してください。
- エンドポイント: [URL]
- 認証: [APIキー/OAuth]
- 取得したいデータ: [フィールド名]
- 表示方法: [カード/テーブル/グラフ]

---

修正・改善系

7. バグ修正

以下のエラーが出ています。修正してください：
[エラーメッセージ全文]

期待する動作: [どう動くべきか]
実際の動作: [何が起きているか]

8. デザイン改善

[ファイルパス]のデザインを改善してください：
- 現在: [現状の説明]
- 希望: [どうしたいか]
- 参考: [参考サイトURL]（あれば）

9. パフォーマンス改善

このページの読み込みが遅いです。改善してください：
- 画像の最適化
- 不要なJSの削除
- CSSの最小化

10. リファクタリング

[ファイルパス]のコードを整理してください：
- 重複しているコードをまとめる
- 変数名をわかりやすくする
- コメントを追加する
機能は変えないでください。

---

コンテンツ系

11. 記事生成

以下のテーマで記事を書いてください：
- テーマ: [テーマ]
- ターゲット: [誰向け]
- 文体: [です/ます調 or だ/である調]
- 文字数: 約[数字]文字
- 構成: [見出しの案]

12. SEO最適化

[ファイルパス]の記事をSEO最適化してください：
- 狙うキーワード: [キーワード]
- タイトルタグ、meta descriptionを改善
- 見出し構造（h2, h3）を最適化
- 内部リンクを追加

---

調査・分析系

13. 技術調査

[技術名]について調査してください：
- 何ができるか
- メリット・デメリット
- 料金体系
- 競合との比較
- 自分のプロジェクトで使えるか

14. コードレビュー

[ファイルパス]をレビューしてください：
1. バグがないか
2. セキュリティの問題がないか
3. パフォーマンスの問題がないか
4. 改善提案

---

デプロイ・運用系

15. Git操作

今の変更をgit commitしてください。
メッセージは日本語で、何を変更したか具体的に書いてください。

16. デプロイ設定

このプロジェクトをCloudflare Pagesにデプロイする設定をしてください：
- GitHubリポジトリの作成
- Cloudflare Pagesの接続
- 環境変数の設定

---

応用パターン

17. 段階的構築

まず[機能1]だけ作ってください。
動作確認してから次の機能を追加します。

18. 複数案の比較

[目的]を達成する方法を3つ提案してください。
それぞれのメリット・デメリットも教えてください。

19. 既存コード理解

まずこのプロジェクトの全体構成を把握してください。
その上で以下を教えてください：
- ファイル構成と各ファイルの役割
- データの流れ
- 変更する場合に影響が出そうな箇所

20. トラブルシューティング

[症状]が発生しています。
- いつから: [タイミング]
- 再現手順: [操作手順]
- 環境: [OS, ブラウザ, Node.jsバージョン]
原因を調査して修正してください。