アプリ作り: データが生きているサービス

夜11時、ビューティースタジオのオーナーのスマホが静かに鳴ります。明日の午後2時の予約が入ったという通知です。お客はアプリで施術写真を見て、空いている時間帯を選んで予約し、その記録は管理者ダッシュボードに自動で積まれました。オーナーがしたのは、朝に確定ボタンを押しただけです。

今回のコースで作るのが、まさにこのアプリです。見せるだけのページではなく、予約を受け、お客を覚え、オーナーに管理画面を差し出すサービス。これまでのコースが看板の作り方だったなら、今度はお店全体を建てます。

上級コースという名前に緊張する必要はありません。難しいことはAIがやり、あなたはどんなお店を建てるか決めればいいのです。

ウェブページとアプリを分ける基準は、華やかさではなく記憶力です。ページは誰が来ても同じ内容を見せ、訪問者が去れば何も残りません。アプリは違います。お客が予約すればその予約が残り、また来れば見分けが付き、積もった記録で管理画面が埋まっていきます。

だからアプリには、ページになかった3つの部品が必要です。データを保管する保存庫(DB)、人を区別するログイン、そして状態によって変わる画面。この3つの部品が、今回のコースの主人公たちです。

自分のアイデアがアプリであるべきか迷ったら、こう問いましょう。「訪問者が残したものが、明日も残っているべきか?」そうならアプリです。

さあ、最初のひと掘りです。下の「スタジオで試す」ボタンを押すと、ビューティースタジオ予約アプリの骨組みプロンプトが入っています。時間帯スロット、顧客ログイン、予約を管理する管理者ダッシュボード。アプリの3大部品がすべて明示された注文書です。

ビルドの種類がアプリになっているか確認して送りましょう。お客に出すものの練習なので、ビルドモードはディープビルドをおすすめします。製品仕様書が画面フローとデータ構造まで押さえてくれるのを、自分の目で見ることになります。

間違えても大丈夫。再生成は無料です。アプリのビルドは部品が多いぶん、一発目から完璧でないのがむしろ正常で、このコース全体がそれを磨き上げる過程です。

アプリには2種類の人が入ってきます。お客とオーナーです。2つの動線を分けて描くことが、画面フロー設計の核心です。お客の動線は「施術を眺める → 時間帯を選ぶ → ログイン → 予約確定 → 自分の予約を確認」。オーナーの動線は「管理者ログイン → 今日の予約一覧 → 確定・キャンセル処理 → 時間帯の管理」です。

この動線をプロンプトや制作プランへのフィードバックで、矢印のまま言葉にすれば、AIが画面を正確に組みます。「お客はログインなしで眺めるところまでは可能にして、予約確定の直前にだけログインを求めて」のような、順序についての要望が特に価値があります。

なぜ動線が先かというと、画面ひとつひとつのデザインは直しやすくても、動線がこじれたアプリは骨組みから建て直すことになるからです。

お客が予約ボタンを押した瞬間、その予約はどこへ行くのでしょう? 画面にだけあるなら、再読み込み一回で蒸発します。だからアプリには冷蔵庫が必要です。データベース(DB)、入れておいたものを明日開けてもそのまま取り出せる保存庫です。

冷蔵庫の中は仕切りで整理されます。お客の仕切りには名前と連絡先、予約の仕切りには日付と時間帯と担当者、施術の仕切りにはメニューと価格。こうして仕切りを分けておけば、「今週の予約すべて」や「常連客の一覧」のように、望むものだけ選んで取り出せます。

幸い、仕切りの設計はAIが得意です。ディープビルドの仕様書にデータモデルというセクションがあったのを思い出してください。あなたは「何が保存されるべきか」だけ押さえればいいのです。予約アプリなら、お客、予約、施術の3つが必ず保存されるべきですね。

その冷蔵庫を誰の名義に置くのか。これがBYOの問題意識です。VibeCampusは、あなた自身のSupabaseをスタジオに直接つなぐことをサポートします。顧客名簿や予約記録のような事業の中核資産が、最初からあなた所有の倉庫に積もっていく構造です。

接続は難しくありません。Supabaseに登録してプロジェクトを作ると、アドレス(URL)と鍵(キー)を受け取りますが、この2つの値をスタジオの接続設定に入れれば終わりです。下の例のように環境変数という金庫に保管され、コードに直接書かれることはありません。

なぜここまでするかというと、データの名義がそのまま事業の独立性だからです。自分の倉庫に積もったデータは、いつでも丸ごと持って引っ越せます。下のカード4枚で、このステップの用語をしっかり押さえていきましょう。

$# .env — your own Supabase, connected in the studio (BYO)
$SUPABASE_URL=https://xxxx.supabase.co
$SUPABASE_ANON_KEY=eyJhbGciOi...

予約が保存され始めると、すぐに次の質問が来ます。この予約は誰のものか? だからログインが必要です。ログインは門番です。お客ごとに自分の予約だけ見えるようにし、管理者画面はオーナーにだけ開きます。

スタジオに頼むときは、レベルを決めてあげると良いです。軽くいくならメールログイン、ハードルを下げるならソーシャルログイン、そして管理者は別権限で。「お客はソーシャルログイン、管理者は別の管理者アカウントで分離して」という一文で、AIがドアと鍵を一緒に取り付けてくれます。

アプリのデータ品質はフォームで決まります。お客が電話番号の欄に「メッセージください」と書き込んだり、過ぎた日付で予約したりすることは必ず起きます。入力検証は、こうしたおかしな値を保存される前にドアの前で追い返す仕掛けです。

リクエストのコツはルールを並べることです。「電話番号は数字のみ、予約日は今日以降のみ、名前は必須」のように。そして断るときの案内文も一緒に用意しましょう。「不正な入力です」より「電話番号は数字のみで入力してください」のほうが、お客を逃しません。

お客側の画面が店舗なら、管理者画面はコックピットです。今日の予約一覧、確定とキャンセルのボタン、時間帯の開け閉め、簡単な統計まで。オーナーが毎朝開く画面なので、華やかさより一目で分かることが最高の美徳です。

リクエストするときは、オーナーの一日を基準に話しましょう。「朝開くと今日の予約が時間順に見え、各予約の横に確定・キャンセルボタン、上部に今週の予約数のサマリー」のように。実際の運営の動線が入ったリクエストが、役に立つコックピットを作ります。

予約に決済が付くと、無断キャンセルが減り、売上が前倒しになります。スタジオでは決済フローをまずデモモードで建てられます。金額表示、決済ボタン、完了画面まで本物とまったく同じように動きますが、本当のお金は動かない状態です。

なぜデモからかというと、決済はフロー設計が9割だからです。いつ決済を求めるか(予約確定前? 来店後?)、キャンセルしたらどうなるかといったルールをデモで十分に磨いてから、決済プロバイダとの連携準備が整ったら本番決済に切り替えるのが安全な順序です。

お客はこのアプリをスマホで使います。スマホ表示でiPhoneとGalaxyの2つのフレームを開き、時間帯ボタンが親指で押すのに十分か、予約までのスクロールが長くないか確認しましょう。フォーム入力は特にスマホで地獄になりやすいので、スマホフレームの中で実際に予約を1件完走してみるのが最高の点検です。

そしてお客に教えてあげたい豆知識をひとつ。ブラウザの「ホーム画面に追加」機能を使うと、あなたのアプリがスマホのホーム画面にアイコンとして収まります。アプリストアを経由せずに、インストールされたアプリのように使われるのです。常連さんには、この方法を案内文で教えてあげるのも良いでしょう。

ローンチされたアプリは育ち続けます。お客の要望が生まれ、メニューが変わり、画面がもうひとつ必要になります。VibeCampusでアプリを育てる道は三筋です。第一に、リファインチャット。言葉で頼む日常的な修正にいちばん速い道です。第二に、クリック編集。文言とデザインの微調整を手で直接行います。第三に、引き継ぎパック。コードを丸ごとダウンロードして、外部の開発ツールや開発者に渡して続けていく、大工事用の道です。

ほとんどの日は第一と第二で十分です。第三の道があるという事実が重要な理由は、安心です。どんな瞬間でも、あなたのアプリはこのプラットフォームの中に閉じ込められません。

引き継ぎパックは、あなたのビルドの引っ越し荷物です。ダウンロードすると、完成したコードに、実行とホスティングの方法を記したREADME、そしてAI開発ツールに渡す引き継ぎ文書のAGENTS.mdまで、zipひとつに収まって出てきます。

このzipを解凍してClaude CodeやCursorのようなツールで開けば、外でもそのまま続けて開発できますし、開発者を雇うことになれば、このパックひとつがそのまま引き継ぎ書類になります。フォームと会員機能も動き続けるように準備されて出てくるので、引っ越し初日から営業できます。

離れろと作った機能ではなく、離れられるからこそ安心して留まれるように作った機能です。あなたの事業のどんな資産も人質にならないこと。それがこのプラットフォームの約束です。

最後の実戦です。下の「スタジオで試す」ボタンを押すと、習慣トラッカーアプリのプロンプトが入っています。デイリーチェックリスト、連続達成を数えるストリークカウンター、週間進捗チャート。今回はビューティースタジオとまったく違うテーマで、学んだことが本当の実力になったか確かめます。

核心の関門はひとつです。データが本当に生きているか。チェックして、再読み込みして、それでも残っているかを、あなたの目で確認してください。

このコースを始めたとき、あなたは画面を作る人でしたが、今はサービスを建てる人です。動線を設計し、データの名義を押さえ、門番を立て、コックピットを取り付け、決済の順序を決めることまで。これが、アプリを作るという言葉の本当の意味です。

ここで学んだ骨組みは、どんな業種にも移植できます。ビューティースタジオが美容室になり、習慣トラッカーが読書会の出席簿になるのは、プロンプトの数単語の違いにすぎません。次は、あなた自身のアイデアの番です。