コピーして使える vibe coding プロンプト30選（早見表）

良い vibe coding プロンプトは、短く、具体的で、動作について書かれています。誰が使うか、何ができるか、何を保持するか、どんな見た目か、です。以下に、最初の構築から公開までの段階別に、コピー＆ペーストで使える30個のプロンプトを載せました。[ ] 内の部分は、自分の内容に置き換えてください。

どのAIアプリビルダーやコーディングエージェントでも使えます。考え方を知りたい方は、より詳しいAIアプリビルダー向けプロンプトの書き方ガイドで原則を説明しています。このページは早見表です。

この早見表の使い方

• 最初の構築用プロンプトを1つ選んでから、ほかのものを一つずつ使います。
• **プロンプトのたびにテストしましょう。**次を送る前に、変更を実際にクリックして確認します。
• **うまくいっているものは残しましょう。**ここにあるフォローアップのプロンプトの多くが「ほかはそのままにして」で終わるのには理由があります。
• **文言はそのまま貼りましょう。**エラーメッセージ、ボタンのラベル、画面上の言葉は、説明よりいつも確実です。

最初の構築用プロンプト

アプリの形を決めるものです。どれも、ユーザー、操作、データ、見た目を明示しています。

1. シンプルなトラッカー

[習慣]トラッカーを作ってください。名前と色を付けて[習慣]を追加でき、1日1回チェックでき、30日分のグリッドと現在の連続日数を見られます。更新しても残るようにすべて保存してください。スマホでも使える、すっきりしたミニマルなデザインにしてください。

2. 小さなお店の予約ページ

私の[美容室]用の予約ページを作ってください。お客様はサービス（[カット30分、カラー90分]）、日付、[9:00〜18:00]の空いている時間枠を選び、名前、電話番号、メールアドレスを入力します。同じ枠に2人が予約することはできません。ログインが必要な非公開の管理ページで、今後の予約を日ごとに一覧できるようにしてください。

3. 社内ツール

チームが[備品の貸出]を管理するための社内ツールを作ってください。各品目には名前、コード、状態（利用可能、貸出中、故障）があります。スタッフはログインして、品目を自分に貸し出し、返却できます。状態で絞り込める表と、各品目を誰が持っていたかの履歴を表示してください。

4. ウェイティングリスト付きのランディングページ

[自社製品：忙しい親向けの献立プランニングアプリ]の1ページのサイトを作ってください。見出しと1文のサブ見出し、メール登録を置いたヒーロー、その下に3つのメリット、短い使い方セクション、FAQを入れます。登録されたメールはデータベースに保存し、非公開の管理ページで一覧を見られるようにしてください。

5. クライアントポータル

私の[デザインスタジオ]用のクライアントポータルを作ってください。各クライアントはログインして、自分のプロジェクトだけを、状況、私がアップロードしたファイル、コメントのスレッドとともに見られます。私は管理者としてログインし、すべてのクライアントを見ます。クライアント同士のデータは絶対に見えないようにしてください。

6. 計算機・見積もりツール

私の[清掃業]用の見積もり計算機を作ってください。入力は、寝室の数、バスルームの数、追加サービス（オーブン、窓、冷蔵庫）、頻度（1回のみ、毎週、毎月）です。選択肢を変えると内訳付きで金額が変わるようにしてください。料金：[料金表を貼り付け]。見積もり依頼を私にメールで送るボタンも追加してください。

計画用プロンプト

大きな機能の前や、どう説明すればいいか分からないときに使います。

7. 作る前に計画を立てる

コードを書く前に、作る画面、保存するデータ、私に決めてほしいことを、普通の言葉で説明してください。私がOKするまで待ってください。

8. ごちゃごちゃしたアイデアを最初のバージョンにする

私のアイデアはこれです：[メモを貼り付け]。それでも役に立つ、最小の最初のバージョンを5〜8個の箇条書きで提案してください。後回しにするものと、その理由も挙げてください。

9. 足りないものを聞く

開発者がこれを作る前に私に聞くことは何ですか？一つずつ質問して、最後に私の回答を短い仕様にまとめてください。

10. 大きな変更を先に確認する

[複数の人が1つのワークスペースを共有するチームアカウント]を追加したいです。データ、画面、権限に何を変える必要があるか、何が壊れる可能性があるかを説明してください。まだ何も変更しないでください。

デザイン用プロンプト

11. はっきりしたスタイルにする

アプリのスタイルを変えてください。温かみのあるオフホワイトの背景、濃い文字色、アクセントカラー1色[#1F6F50]、角丸、ゆったりした余白、モダンなゴシック体。レイアウトとすべての機能はそのままにしてください。

12. 参考にしたい雰囲気に寄せる

ダッシュボードを、落ち着いた金融アプリのような雰囲気にしてください。余白を広くとり、数字は大きく太く、ラベルは小さく灰色にし、上部にシンプルなグラフを1つ置きます。どのブランドのロゴや文言もコピーしないでください。

13. スマホのレイアウトを直す

幅375pxのスマホで、[注文ページ]の表が横にスクロールし、ボタンが重なります。小さい画面では各行を縦に積んだカードにしてください。PCのレイアウトは変えないでください。

14. 空の状態、読み込み中、エラーの状態

[プロジェクト一覧]に適切な状態を追加してください。最初のプロジェクトを追加するボタン付きの親しみやすい空の状態、データ読み込み中のスケルトン、読み込みに失敗したときの分かりやすいメッセージと再試行ボタンです。

15. 右から左（RTL）への対応

インターフェースのアラビア語版を、完全な右から左のレイアウトで追加してください。方向を示すアイコンは反転させ、数字と日付はそのロケールの形式にしてください。デフォルトは日本語のままにしてください。

データと機能のプロンプト

16. データを保存する

今は更新するとデータが消えてしまいます。代わりに本物のデータベースに保存し、今の画面は同じように動くままにしてください。

17. ログインを追加する

メールアドレスとパスワードによる登録とログインを追加してください。各ユーザーは自分の[記録]だけを見て編集できるようにします。上部バーにユーザーのメールアドレスとログアウトボタンを表示してください。

18. 権限（ロール）を追加する

管理者とメンバーの2つのロールを追加してください。管理者は[商品]を追加、編集、削除でき、メンバーは閲覧のみです。ボタンを隠すだけでなく、サーバー側でも強制してください。

19. 検索と絞り込みを追加する

[連絡先一覧]の上に、入力に合わせて名前、会社、メールアドレスに一致する検索ボックスと、[状態]の絞り込みを追加してください。今の並び順は変えないでください。

20. ファイルのアップロードを追加する

各[物件]に、画像を最大[5]枚、1枚あたり最大[5 MB]まで添付できるようにしてください。物件にはサムネイルを表示し、クリックすると大きく表示します。画像を削除できるのは所有者だけです。

21. 表計算ソフトからインポートする

インポートボタンを追加してください。[名前、メールアドレス、電話番号、メモ]の列を持つCSVを受け取り、最初の10行のプレビューを表示して、保存前に私が確認できるようにします。メールアドレスのない行は飛ばし、何行飛ばしたかを教えてください。

修正用プロンプト

22. バグを分かりやすく報告する

[編集フォームの保存をクリック]すると「[エラーの文言そのまま]」と表示され、変更が保存されません。期待する動作：変更が保存されて一覧に戻ります。原因を見つけて1〜2文で説明し、そのあと直してください。

23. 修正のループを止める

この問題を直そうとして3回失敗しています。コードの変更はやめてください。最も可能性の高い原因を3つ挙げ、それぞれの確認方法と、どれだと思うかを教えてください。

24. 副作用を元に戻す

直前の変更で日付ピッカーは直りましたが、[サイドバー]が消えました。サイドバーを元とまったく同じに戻し、日付ピッカーの修正は残してください。

25. 変更する前に説明する

[チェックアウトの合計]が今どう計算されているか、関係するファイルを示しながら順を追って説明してください。何も変更しないでください。

テストとレビューのプロンプト

26. エッジケース

実際のユーザーが[予約フォーム]を壊す方法を10個挙げてください。空のフィールド、非常に長いテキスト、ダブルクリック、2人が同時に操作、間違ったタイムゾーンなどです。それぞれテストして、失敗したものを直してください。変更した内容を報告してください。

27. 最近の変更をまとめる

直近[5]ステップで行ったすべての変更を、普通の言葉でまとめてください。既存のデータに影響しうるものがあれば指摘してください。

セキュリティのプロンプト

vibe coding は安全かのページと合わせて使ってください。

28. データへのアクセスを確認する

サーバーのコードを確認してください。ログイン中のユーザーが、リクエストのIDを変えることで、他のユーザーの[記録]を読んだり変更したりできますか？アクセスがどこで確認されているかを示し、抜けがあれば直してください。

29. 公開されてしまっているシークレットを確認する

このアプリが使っているAPIキー、パスワード、トークンをすべて挙げ、それぞれがどこに保存されているか教えてください。ブラウザで動くコードやファイルにコミットされているものがないようにしてください。あればシークレットに移してください。

公開用プロンプト

30. 公開前の最終チェック

実際のユーザー向けにこれを公開しようとしています。レビュー担当者として確認してください。壊れたリンク、ページのタイトルと説明の抜け、検証のないフォーム、遅いページ、コンソールのエラー、スマホで未完成に見える部分です。重要度順のリストにして、上位5つを直してください。

避けたいプロンプト

次のようなプロンプトは、ほぼ確実に結果が悪くなります。

• **「もっと良くして。」**どう良くするのですか？画面と変更内容を名指ししましょう。
• **「全部直して。」**AIが多くを変更し、何が動いたか分からなくなります。
• **「[ライブラリ]と[フレームワーク]と[パターン]を使って。」**理由がない限り、動作を説明して、技術構成はツールに任せましょう。
• **「APIキーはこれです：…」**チャットにシークレットを貼らないでください。ツールのシークレット設定を使います。
• **1つのメッセージに10個の機能。**分けましょう。

プロンプトを習慣にする

いくつかプロジェクトをこなすと、自分用のバージョンができます。メモに残して、うまくいったものを使い回しましょう。Mythexは、あなたが誰で、どう作業するかをプロジェクトをまたいで覚えているため、いつものスタイルや技術構成のように何度も伝えている好みは、入力し直さなくても引き継がれます。

最初のプロンプトで詰まったら、無料のアプリプロンプトジェネレーターが、一行のアイデアをより充実した出発点のプロンプトにしてくれます。これらのプロンプトで実際に何ができるかは、vibe coding 事例をお読みください。または、プロンプト1をAIアプリビルダーに貼り付けて、[ ] の部分を自分のアイデアに変えてみましょう。

よくある質問