Vibe Coding 事例10選：実際に作られるアプリ、プロンプト、つまずきポイント

vibe coding の事例として最も多いのは、小さくて役に立つWebアプリです。トラッカー、予約ページ、社内ツール、クライアントポータル、ランディングページ、クイズ、ダッシュボード、シンプルなAIツールなどです。ここではそのうち10個を紹介します。それぞれについて、誰が作るのか、最初のプロンプト、よくある失敗、それを直すフォローアップのプロンプトを載せています。

これらは、AIアプリビルダーに持ち込まれることが最も多いプロジェクトを組み合わせたもので、特定の誰かの事例紹介ではありません。プロンプトはコピーして使えます。失敗は何度も繰り返し起きるものばかりで、だからこそ役に立ちます。vibe coding 自体が初めての方は、まずvibe coding とはをご覧ください。

1. 個人用の家計簿トラッカー

**作る人：**表計算を試して挫折した個人。

最初のプロンプト：

月ごとの家計簿トラッカーを作ってください。金額、カテゴリ（食費、家賃、交通費、娯楽、その他）、日付、メモを入力して支出を追加します。今月のカテゴリ別合計を棒グラフで表示し、最近の支出を一覧にしてください。カテゴリごとに予算を設定でき、残りがいくらかも見られるようにしてください。

**何がうまくいかなかったか：**グラフが今月分だけでなく、これまで入力したすべての支出を集計していたため、2か月目にはどのカテゴリも使いすぎに見えました。また、カンマ付きで入力した金額（「1,200」）が1として保存されました。

修正のプロンプト：

グラフと合計は、選択した月の支出だけを対象にしてください。上部に月の選択を追加し、初期値は今月にします。カンマやスペース付きで入力した金額も受け付けて、数値として保存してください。

学び：「今月」はルールです。ルールは言葉にして伝えましょう。

2. 小さなサロンの予約ページ

**作る人：**電話やDMでの予約対応に疲れた小規模事業のオーナー。

最初のプロンプト：

私のサロン用の予約ページを作ってください。お客様はサービス、日付、空いている時間枠を選び、名前と電話番号を入力します。ログインが必要な非公開の管理ページで、日ごとの予約を確認できるようにしてください。

**何がうまくいかなかったか：**ページが読み込み時にしか空き状況を確認していなかったため、2人のお客様が1分違いで同じ10:00の枠を予約してしまいました。また、90分のカラーの予約が、その後の枠をふさぎませんでした。

修正のプロンプト：

お客様が予約を送信したとき、その予約がカバーするすべての枠がまだ空いているかをサーバー側で確認し、空いていなければ「その時間は今ちょうど埋まりました」と表示して拒否してください。サービスはその所要時間ぶんの枠をふさぎます。10:00開始の90分の予約なら、10:00、10:30、11:00がふさがります。

**学び：**2人が同時にできることには、サーバー側のチェックが必要です。完全版は予約アプリの作り方をご覧ください。

3. QRコード付きのレストランメニュー

**作る人：**メニューを頻繁に刷り直しているカフェやレストランのオーナー。

最初のプロンプト：

私のカフェ用に、スマホ向けのメニューサイトを作ってください。朝食、ランチ、ドリンク、デザートのセクションに分け、各品目に名前、価格、短い説明、食事タグ（ビーガン、グルテンフリー）を付けます。品目を編集して売り切れにできる管理ページも必要です。印刷できる、メニューへのリンクのQRコードを表示してください。

**何がうまくいかなかったか：**壊れたものはありませんでしたが、各品目にスマホのフルサイズ写真が読み込まれていたため、カフェのWi-Fiではメニューが遅くなりました。

修正のプロンプト：

メニューの写真が重すぎます。アップロードされた画像は幅の上限を800pxにリサイズして圧縮し、訪問者がスクロールしたときに遅延読み込みしてください。

**学び：**オフィスだけでなく、遅い回線でもテストしましょう。

4. チーム向けの備品・在庫トラッカー

**作る人：**共有の表計算を置き換えたい運用担当者。

最初のプロンプト：

倉庫チーム向けの在庫管理ツールを作ってください。品目には名前、SKU、数量、保管場所、最低在庫数があります。スタッフがログインして在庫を追加でき、理由を付けて在庫を減らせます。最低在庫数を下回っている品目は赤くハイライトした一覧で見られるようにしてください。すべての変更と、誰が行ったかの履歴を残してください。

**何がうまくいかなかったか：**履歴に名前ではなく「user 3」と表示され、在庫より多く減らすと数量がマイナスになりました。

修正のプロンプト：

履歴にはIDではなく担当者の名前を表示してください。数量がゼロを下回る出庫は許可せず、代わりに「在庫は4個だけです」と表示してください。

**学び：**できることだけでなく、できてはいけないことも書きましょう。残りの部分は在庫管理アプリの作り方で解説しています。

5. フリーランスやスタジオ向けのクライアントポータル

**作る人：**デザイナー、会計士、コンサルタント、代理店。

最初のプロンプト：

クライアントポータルを作ってください。私がメールでクライアントを招待します。各クライアントはログインして自分のプロジェクト、ファイル、請求書だけを見ることができ、コメントを残せます。私は管理者としてログインし、すべてを見られます。

**何がうまくいかなかったか：**これはこの一覧で最も重要な失敗です。ページ上では各クライアントに自分のプロジェクトしか表示されていませんでしたが、サーバーはアドレスバーの番号を変えれば、どのプロジェクトでも返していました。1人のクライアントとして画面をたどるだけでは、まったく気づけません。

修正のプロンプト：

プロジェクト、ファイル、コメント、請求書を返すサーバーのルートをすべて確認してください。どれも、ログイン中のクライアントがそのレコードの所有者であることを確認し、そうでなければ「見つかりません」を返してください。そのうえでテストしてください。クライアントAとしてログインし、クライアントBのプロジェクトをIDで開こうとしてみます。

**学び：**画面上で隠すことと、守ることは別です。詳しくはvibe coding は安全？をご覧ください。

6. ウェイティングリスト付きのローンチページ

**作る人：**作る前にアイデアを試したい創業者。

最初のプロンプト：

家庭教師がレッスンの日程を調整して支払いを受け取れるアプリのランディングページを作ってください。ヒーローの見出し、サブ見出し、メール登録、3つのメリット、使い方セクション、FAQを入れます。登録は日付付きでデータベースに保存し、非公開ページからCSVでダウンロードできるようにしてください。

**何がうまくいかなかったか：**数日のうちにボットによる迷惑な登録でリストがいっぱいになり、ページにタイトルも説明もなかったため、共有したリンクのプレビューが空白でした。

修正のプロンプト：

登録フォームに基本的なボット対策（隠しハニーポットのフィールドと、1つのIPアドレスにつき1時間に5件までという制限）を追加してください。ページのタイトル、メタディスクリプション、SNS共有用の画像も追加してください。

**学び：**公開フォームは必ず見つかります。ウェイティングリストページの作り方をご覧ください。

7. 先生向けのクイズアプリ

**作る人：**LMSより軽いものが欲しい先生やトレーナー。

最初のプロンプト：

クラス用のクイズアプリを作ってください。私が、正解が1つの選択式の問題でクイズを作ります。生徒はコードと下の名前で参加し、問題に答えて、最後にスコアを見ます。クイズごとの結果の表を私が見られるようにしてください。

**何がうまくいかなかったか：**正解が問題と一緒にブラウザへ送られていたため、好奇心のある生徒がページのソースで読めました。また、生徒は100%になるまで何度でも再提出できました。

修正のプロンプト：

正解をブラウザに送らないでください。回答は送信後にサーバーで採点してください。1つのクイズにつき、生徒の名前ごとに提出は1回までとし、再挑戦しようとした人がいたら先生に表示してください。

**学び：**ブラウザはユーザーのものです。そこにあるものは読まれてしまいます。

8. 小さなAIツール

**作る人：**用途を絞ったAIの助っ人が欲しいマーケター、ライター、創業者。

最初のプロンプト：

商品説明から、トーン違いのSNS投稿を5つ（フレンドリー、専門家風、楽しい、短め、長め）作るツールを作ってください。AI APIを使います。私が説明を貼り付けてプラットフォームを選ぶと、コピー用ボタン付きで投稿が表示されるようにしてください。

**何がうまくいかなかったか：**最初のバージョンは、ページの中にAPIキーを入れたまま、ブラウザから直接AIサービスを呼び出していました。誰でもキーをコピーして、請求額を膨らませることができてしまいます。

修正のプロンプト：

AIの呼び出しをサーバーに移してください。APIキーはシークレットとして保存し、フロントエンドのコードには絶対に入れないでください。訪問者1人につき、1日の生成回数を20回までに制限してください。

**学び：**キーはサーバーのシークレットに置きます。APIキーを安全に管理する方法とアプリにAI機能を追加する方法をご覧ください。

9. アラビア語と英語のビジネスサイト

**作る人：**湾岸諸国やアラブ圏で、2つの言語を使う事業者。

最初のプロンプト：

インテリアデザイン会社のサイトを、アラビア語と英語で、言語切り替え付きで作ってください。ページはホーム、サービス、実績、会社概要、お問い合わせです。アラビア語は完全に右から左のレイアウトにしてください。

**何がうまくいかなかったか：**アラビア語の文字は右揃えでしたが、レイアウトは反転しておらず、矢印の向きが逆のままで、メニューも逆側にありました。電話番号が逆順に表示される箇所もありました。

修正のプロンプト：

アラビア語ではレイアウト全体を反転してください。ページの方向を右から左に設定し、メニューを右側に置き、方向を示すアイコンを反転させ、電話番号とメールアドレスはアラビア語の文中でも左から右のままにしてください。

**学び：**右から左は、揃えではなくレイアウトです。Mythexはアラビア語などの右から左のレイアウトに対応しており、アラビア語でそのままプロンプトを書くこともできます。

10. スマホアプリになるトラッカー

**作る人：**利用者がスマホ中心で暮らしているコーチ、ジム、コミュニティ。

最初のプロンプト：

パーソナルトレーニングのクライアント向けのワークアウト記録を作ってください。各クライアントがログインして、私が割り当てた今週のプランを見て、種目にチェックを入れ、重量を記録します。各クライアントの進捗をグラフで見られるようにしてください。

**何がうまくいかなかったか：**Webアプリは動きましたが、スマホではトレーニング中に押すにはボタンが小さすぎ、グラフも読み取れませんでした。

修正のプロンプト：

スマホで片手で使えるように設計してください。画面下部に大きなタップ領域を置き、1画面に1種目、大きな「次へ」と「完了」のボタン、シンプルな週間進捗グラフにしてください。

**学び：**スマホで使われるなら、スマホを先に設計しましょう。Mythex Proでは、公開したアプリをGoogle Play向けのAndroidアプリや、TestFlightに送るiPhoneアプリにできます。スマホアプリは公開したアプリを開く仕組みなので、公開（Publish）のたびに更新されます。モバイルアプリビルダーのページをご覧ください。

これらの事例に共通するパターン

10件を通して、失敗はいくつかのグループに分かれます。

どれも、コードを読む必要はありません。好奇心旺盛な、少し意地悪なユーザーのつもりでテストし、見たことを正確に伝えることが必要です。

自分でも試してみましょう

自分のアイデアに一番近い事例を選び、最初のプロンプトをコピーして、内容を変えてみてください。そのあと、修正のプロンプトを共有前のチェックリストとして使いましょう。vibe coding プロンプト集にはさらに30個あり、vibe coding でアプリを作る方法では、1つのプロジェクトをアイデアから公開まで順に解説しています。準備ができたら、AIアプリビルダーで始めるか、テンプレートから探して、出だしを楽にしましょう。

よくある質問