バイブコーディングでアプリを作る方法：アイデアから公開まで

バイブコーディングでアプリを作るには、最初のバージョンの説明を1ページにまとめ、それをAIアプリビルダーへの最初のプロンプトとして渡し、そのあとは小さなテスト済みのステップを積み重ねてアプリを育てます。データ、ログイン、メインの業務フロー、仕上げ、セキュリティ確認、そして最後に公開です。このガイドでは、小さなヨガスタジオの予約アプリを例にとり、各段階で使ったプロンプトとともに進めます。

バイブコーディングを初めて試すなら、より小さな課題から始められる 初心者向けのバイブコーディングのチュートリアル をご覧ください。バイブコーディングに限らない広い概要は、AIでアプリを作る方法 にあります。

例のプロジェクト

ヨガスタジオのオーナーであるSaraは、週に8つのクラスを運営しているとします。予約はWhatsAppで届き、クラスごとに紙のリストを付けていますが、しばしば定員を超えて予約を受けてしまいます。彼女が求めているのは次のことです。

• 受講者が週の時間割を見て、空きを予約できること。
• 各クラスに定員があること。
• 受付で確認できる、クラスごとの名簿があること。
• 受講者が2時間前までならキャンセルできること。

これが最初のバージョンのすべてです。決済、会員制、アプリストアは含みません。それらは後で追加するか、追加しないかのどちらかです。

ステップ1：1ページの仕様書を書く

ツールを開く前に、最初のバージョンを平易な言葉で書き出してください。ここで10分かけると、あとで何時間もの往復作業を省けます。役立つ構成の例は次のとおりです。

• 誰が使うか: 受講者（予約とキャンセル）、Sara（クラスの管理と名簿の確認）。
• 画面: 時間割、クラスの詳細、自分の予約、管理者のクラス一覧、管理者のクラスごとの名簿。
• データ: クラス（名前、講師、開始時刻、長さ、定員）、予約（受講者、クラス、ステータス）、受講者（名前、メール、電話番号）。
• ルール: 満席のクラスは予約できない。1人の受講者は1つのクラスに1回だけ予約できる。キャンセルは2時間前まで。管理者ページはSaraだけが見られる。
• v1に含めないもの: 決済、回数券、キャンセル待ち、リマインダー。

「v1に含めないもの」のリストが、もっとも重要です。これがあるので、構築を完了させられます。より詳しい仕様書が必要なら、AIで製品要求仕様書を書く方法 をご覧ください。

ステップ2：全体の流れを扱えるツールを選ぶ

データベース、ログイン、公開URLを備えたアプリには、ファイルを渡すだけのチャットアシスタントではなく、コードを実行し、データベースを接続し、公開までを行うAIアプリビルダーを使ってください。バイブコーディングツールの比較 に選択肢が挙がっています。ここではMythexを使います。チャット、ライブプレビュー、実際のデータベースとファイルストレージ、ワンクリックの公開を、1か所で各ステップに対応できるからです。

ステップ3：最初のプロンプト

仕様書を1つの段落にまとめます。すべての詳細を一度に貼り付けるのではなく、中核を伝え、残りは段階的に追加してください。

ヨガスタジオのための予約アプリを作ってください。受講者は名前、メール、電話番号で登録し、今週の時間割を見て、クラスの空きを予約できるようにしてください。各クラスには名前、講師、開始時刻、長さ、定員があり、満席のクラスは「満席」と表示され、予約できないようにしてください。受講者は自分の予約を見られ、2時間前まではキャンセルできるようにしてください。私は管理者です。クラスの追加と編集ができ、各クラスの予約者の一覧を見られるようにしてください。落ち着いた簡潔なデザインで、スマートフォンでも使いやすくしてください。

ツールが理解したか不安な場合は、先に計画を求めてください。Mythexでは、Planモードでコードを書く前に画面とデータの構成が示され、承認してから進められます。

ステップ4：基本の流れを動かす

このアプリの目的そのものである基本の流れを、まずテストします。

1. 受講者としてサインアップし、クラスを予約する。
2. 管理者の画面を開く。予約が表示されているか。
3. 同じクラスをもう一度予約する。拒否されるはずです。
4. クラスの定員を2に設定し、2つの受講者アカウントで予約し、3人目を試す。

この段階では、典型的に次の2つの問題が出てきます。時間割がスタジオのタイムゾーンではなく、サーバーのタイムゾーンで表示されること。そして「満席」の確認がページ上でしか行われないため、素早くダブルクリックすると2件の予約ができてしまうことです。

すべてのクラス時刻を、閲覧者の端末の設定に関係なく、スタジオのタイムゾーン［Asia/Dubai］で表示してください。

予約が作成されるときに、ページだけでなくサーバー側で定員と重複予約を確認してください。最後の1席に対して2つのリクエストが同時に届いても、成功するのは1件だけにしてください。

何かを追加する前に、基本の流れを直してください。ほかのすべては、その上に成り立っています。

ステップ5：残りのルールを1つずつ追加する

仕様書のルールを、1つずつ確認していきます。

受講者は、クラスの開始の2時間前までなら予約をキャンセルできるようにしてください。それを過ぎたら、キャンセルボタンを隠し、サーバー側でもキャンセルを拒否して、分かりやすいメッセージを表示してください。

管理者ページを開けるのは私のアカウントだけにしてください。メニューを隠すだけでなく、管理者のすべての操作をサーバー側で確認してください。

それぞれの後にテストし、動いたことを確認してから次に進んでください。変更で何かが壊れたら、最後に正常だったチェックポイントに戻し、より明確な依頼を出し直してください。修正を積み重ねてはいけません。

ステップ6：実際の利用者が気づく細部を整える

実際の利用者は、小さなことに気づきます。Saraのアプリで挙げるべき項目は次のとおりです。

• 空の状態: 真っ白なページではなく、「今週のクラスはまだありません」と表示する。
• 予約完了の確認: 予約後に「火曜日18:00のヴィンヤサに予約しました」と表示する。
• スマートフォンの表示: 大きなボタン、375pxの画面でも読める時間割。
• 残りの空席: 各クラスに「残り3席」と表示し、受講者が早く予約するように促す。

各クラスのカードに「残り3席（全12席中）」のように空席を表示してください。予約後は、クラス名、曜日、時刻を示す確認画面を出し、自分の予約ページへのボタンを付けてください。

ステップ7：部外者のつもりでテストする

他の人が使う前に、30分ほど時間を取ってアプリを壊そうと試してください。

AIに、エッジケースを確認させることもできます。

実際の受講者が予約やキャンセルを壊しかねない操作を10個挙げ、それぞれをテストして、失敗したものを直してください。何を変更したかも教えてください。

ステップ8：セキュリティの確認

このアプリは名前、メール、電話番号を保存するため、短いセキュリティ確認を行う価値があります。主な問いは次のとおりです。

• 1人の受講者が、別の受講者の予約や連絡先を見られないか？
• ブラウザで実行されるコードに、キーやパスワードが含まれていないか？
• サインアップフォームはボットから守られているか？
• データのバックアップがあるか？

各確認の内容と、その確認のためのプロンプトは、バイブコーディングは安全か で説明しています。長いバージョンは AIで作ったアプリのセキュリティチェックリスト にあります。

ステップ9：公開する

基本の流れ、ルール、確認項目がすべて通ったら、公開します。Mythexでは、ワンクリックで公開でき、データベースとホスティングがすでに用意された公開URLが発行されます。Proでは、book.sarasyoga.comのような独自ドメインを接続できます。独自ドメインの接続方法 を参照してください。

URLを送る前に、公開版をもう一度確認してください。スマートフォンからクラスを予約してみてください。本番とプレビューは同じように動くはずですが、確かめてください。

ステップ10：最初の利用者と次のバージョン

リンクは、まず定期的に通ってくる受講者5人に渡してください。全員にではありません。次の授業もそこから予約してもらい、分かりにくかった点を教えてもらいます。そのうえで、挙げられた上位3つを直してください。

数週間の実際の利用のあとには、このようなアプリのv2のリストが自然に見えてきます。満席のクラスのキャンセル待ち、前日の夜に届くメールのリマインダー、オンラインで支払う回数券などです。それぞれ同じように扱います。数行で仕様を書き、プロンプトを出し、テストし、公開します。決済の追加については アプリに決済を追加する方法 を、ユーザーを集める方法については アプリを公開して最初の利用者を獲得する方法 を参照してください。

スマートフォンアプリにする

多くのスタジオは、受講者のスマートフォンにアイコンを置きたいと考えています。Mythex Proでは、公開したアプリを、Android向けのアプリ（Google Playにアップロードできるファイル）と、自分のApp Store Connectキーを使ってTestFlightに送るiPhoneアプリにできます。Macは不要です。スマートフォンアプリは公開済みのウェブアプリを開くため、アップデートを公開するたびに、スマートフォンアプリにも反映されます。

まとめ

実際の構築は短い部分でした。アプリを使えるものにしたのは、仕様書の「v1に含めないもの」のリスト、基本の流れを最初にテストしたこと、定員とアクセスをサーバー側のルールで確かめたこと、そして50人より前に5人の実際の利用者に使ってもらったことです。アプリが他の人にも機能しなければならないとき、バイブコーディングとはこういうものです。

自分のアプリを試す準備はできましたか。1ページの仕様書を書き、最初の段落を AIアプリビルダー に貼り付けてください。他のアプリの種類とそのプロンプトを見たい場合は、バイブコーディングの例 をお読みください。

よくある質問