【ShiftB vibe codingハッカソン】vibe codingでカフェ作業仲間を見つけるアプリを作る！

はじめに

ShiftBハッカソン2025に参加します。期間は3月21日〜4月21日の1ヶ月間。 今回のハッカソンのルールは「自分が本当に使いたいもの、または身近な人に届けたいものを作る」こと。

テーマはすぐ決まりました。
カフェで作業仲間を見つけるアプリ。
ひとりでカフェ作業することが多い自分にとって、ずっと「あったらいいな」と思っていたものです。 せっかく作るなら、ShiftBコミュニティのみんなにも使ってほしい。そんな気持ちで始めます。

題材選定の流れ

「自分の好きなものや日常の困りごとからテーマを選ぶ」をもとに、まずカフェにまつわるアイデアを出しました。
自分はカフェでよく作業をするのですが、ひとりだと集中できる一方で、少し孤独を感じることがある。
誰かと一緒に作業したいけど、誘う相手を探す・募集文を書く・カフェを決めるという3つのステップが面倒で、結局ひとりになりがちです。

1. 課題の発見
   カフェ作業は好きだけど、仲間を集めるのが面倒。誘う→募集文→カフェ選びのすべてが手間。

2. コンセプトの言語化
   「カフェに行くまでの面倒を、全部AIが解決する」というワンフレーズに整理した。

3. ネーミング
   シンプルで直感的な名前を探した結果、「もくもく会 × カフェ」でもくカフェに決定。

アプリのコンセプト

カフェに行くまでの面倒を、全部AIに任せよう。

「誘う相手を探す」「募集文を書く」「カフェを決める」——この3ステップをAIが全部サポートしてくれる。 ユーザーがやることは、行きたいエリアと日時を入れるだけ。あとはAIが全部考えてくれる、そんな体験を目指します。

リアルタイムで「今いるよ」と発信することも、事前に「来週一緒に行く人募集」とポストすることも両方できるので、 使い方は人それぞれ。気軽に使えることを最優先にします。

ペルソナ

ターゲットは自分とShiftBコミュニティのメンバー。
「仲間と作業したいけど声がかけづらい」という感覚、コミュニティの中にきっといるはずです。

主要機能

1ヶ月のMVPなので、機能は厳選します。AIを軸にした3つのコア機能に絞りました。

✍️ AI 募集文生成
「今日渋谷で3時間作業したい」と入力するだけ。
AIが魅力的な募集文を自動で生成してくれる。

🤝 AI 相性マッチング
プロフィール・作業スタイル・目的をもとにAIが相性の良い相手をおすすめ表示。

📋 募集投稿 / 参加申請
募集を投稿して、気になる募集に参加申請できる基本フロー。

☕ AI カフェ提案
エリア・人数・目的からAIが最適なカフェを提案。Google Places APIと連携。

技術スタック

スピードを最優先に開発します。

フロントエンド

React + Vite + TypeScript

バックエンド

TypeScript

Database / Auth

Supabase + Prisma

ホスティング

Vercel

AI

Gemini API: Gemini 2.5 Flash（無料枠）

外部API

Google Places API

4週間ロードマップ

1

題材選定・設計

• コンセプト・ペルソナ確定（本日完了！）

• 機能リスト整理（Must / Should / Could）（本日完了！）

• SNSアカウント・ハッシュタグ準備 (現在のアカウントで発信する)

WEEK2

開発環境・基盤構築

• Supabase / Vercel / Hono セットアップ

• 認証・DBスキーマ設計

• Gemini API 接続確認

WEEK3

デザイン・実装

• 募集投稿 + AI 募集文生成（Must）

• 募集一覧・参加申請（Must）

• AI 相性マッチング（Must）

• UI磨き・レスポンシブ対応

WEEK4

公開・ユーザー獲得・発信

• サービス公開

• X / Instagram / Threads 発信

• Zenn / note で開発記事投稿

• バグ修正・フィードバック対応

今回のハッカソンの様子を最初っから発信していく予定！！

おわりに

今は、コンセプトや題材選定を固められたのであとはセットアップなどClaude Codeの使い方なの色々調査していきます！