🌟

バイブコーディング with Cursor / Manusでつくる家計精算アプリ：splitmate プロジェクト計画書

に公開
Cursor
Manus
Vibe Coding
idea

はじめに

本ドキュメントは、夫婦・カップル間の割り勘精算を支援するプロダクト「splitmate」の開発およびマーケティング計画をまとめたものです。本プロジェクトでは、開発支援にCursor、マーケティング支援にManusを活用しています。

目的は、エンジニアではないがプロダクト開発に関わる個人、たとえばPdM・PjM・PMMといった役割を担う人が、CursorとManusを活用することで、1週間以内に開発からマーケティング施策までを一気通貫で進められる状態、またプロトタイプを無料で公開できる状態をつくることです。たとえプロダクト自体はチープでも、この一連の流れが誰かの参考になれば嬉しく思います。

開発ではCursorのAgentモード（Pro Plus 参考）を使用し、プロンプトベースで設計・実装・改善を高速に進行。常時sonnet-4（参考）が利用可能な状態とし、Autoモード（Cursorが自動でコマンドラインを実行する機能）を原則ONにしています。なお、Autoモードは誤操作のリスクがあるため、本番データや削除系操作には注意が必要です。

開発中のシステム構成は以下のとおりです：

                             +--------------------+
                             |    ユーザー        |
                             | (PC / スマホ ブラウザ) |
                             +---------+----------+
                                       |
                                       v
                             +--------------------+
                             |   Netlify          |
                             | (フロントエンド: React) |
                             +---------+----------+
                                       |
                                       v
                             +--------------------+
                             |   Render           |
                             | (バックエンド:      |
                             |  Node.js + Express)|
                             +---------+----------+
                                       |
                                       v
 +---------------------+       認証/API/DB通信       +---------------------+
 |      Supabase       | <-------------------------> |     PostgreSQL      |
 | (認証・DB・ストレージ) |                         | (Supabaseに内包)   |
 +---------------------+                           +---------------------+

プロダクト完成後には、開発経緯やリリース内容も別途報告予定です。

プロダクト開発の背景

我が家の精算方法

splitmateは、家庭内のスプレッドシート運用に対する課題から生まれました。夫婦それぞれが年収比に応じて支出を按分し、個別シートに費用を記録。月ごとに相手の未払い分を集計し、差額を精算することで家計を公平に管理しています。

例：夫シート（スーパー 3,000円）

id 説明 合計金額 夫の配分比率 妻の配分比率 夫の負担金額 妻の負担金額
1 スーパー 3,000円 0.7 0.3 2,100円 900円

例：妻シート（実家へのお土産 7,000円）

id 説明 合計金額 夫の配分比率 妻の配分比率 夫の負担金額 妻の負担金額
1 実家へのお土産 7,000円 0.7 0.3 4,900円 2,100円

各人の未払い金額（＝各シートにおける相手方の負担金額）を集計した「合計シート」を見ると、誰がいくら支払うべきかが一目でわかります。

例：合計シート

  • 夫の未払い金額：4,900円
  • 妻の未払い金額：900円
  • → 差額精算：夫 → 妻 に 4,000円を支払う

スプレッドシート運用の課題

  • PCでしか入力できず、手間がかかる
  • スマホでは確認しづらい
  • スプレッドシート自体がモバイルに最適化されていない

プロダクトによる解決策

  • スマホから直感的に費用を入力・確認できるUIを提供

プロダクトの詳細

ユーザーはGoogle認証でログイン後、以下のタブを利用できます：

  • 費用管理：登録・編集・一覧確認・削除・負担割合設定
  • 月次精算：特定月の費用一覧を確認
  • 配分比率設定：スライダーで負担割合を変更
  • 精算管理：費用の承認→送金依頼→完了フロー

※精算金額の提示はせず、実際の送金は手動運用

システム構成

バックエンド

  • TypeScript（使用言語）
  • Node.js（実行環境）
  • Express.js（APIルーティング）
  • JWT（認証方式）
  • Supabase（BaaS：認証・DB・ストレージ）
  • Docker（開発・本番環境の統一）
  • Render（アプリホスティング）

フロントエンド

  • React（UI構築）
  • Netlify（ホスティング）

※ 将来的なスケーリングはAWS（ECS / Fargate / RDS）を想定

開発とリリース計画

  1. 要件定義：Cursor形式でユーザー・課題・機能を整理
  2. プロトタイプ開発：Agentモード + sonnet-4 + Autoで迅速に実装
  3. イシュー管理：優先順位の明確化
  4. 開発実行：小単位で開発、検証しやすい構成に
  5. UAT：ユーザー目線での受け入れテストを実施
  6. 初回リリース：費用登録→配分→精算の一連フローを提供
  7. マーケティング準備：ManusでLP作成 / デプロイ / GA4 / Google広告準備
  8. 改善：検証→修正→再リリースを1週間以内で回す

マーケティング概要

想定ユーザーは、スプレッドシートで費用精算を行っている家計意識の高い夫婦・カップル。公平性や可視化を求めつつも、現状に手間や不満を感じている層。また、「なんとなく」精算しているが、モヤモヤを抱えている層も副次的に想定する。

初期施策として、Manusで作成したLPを活用し、「エクセル家計管理 限界」「割り勘にモヤモヤしている方へ」といった切り口でGoogle検索広告を出稿。反応を見ながら仮説検証を行う。

マーケティングの詳細

ソリューション概要

splitmateは、

  • 「スマホから快適に使える」
  • 「月次精算の流れが明確になる」

という2つの価値を提供。

対象ユーザーは、現状の家計精算に不満や手間を感じつつも、可視化・公平性を重視している層。また副次的に「なんとなく精算派」も対象とする。

運用とリリース計画

LPはManusで作成し、Google検索広告を1週間単位で出稿。初期は「エクセル 家計管理」などの検索ワードを中心に出稿し、クリック率や滞在時間、フォーム反応をもとに改善を重ねる。

検証計画

初期段階では、以下の指標で広告と導線の有効性を評価する：

  • CTR（クリック率）：1.5%以上
  • 遷移完了率：50%以上
  • 滞在10秒以上のセッション：70%以上

登録完了や離脱理由の分析は、一定のトラクションが得られた後に実施予定。

計測方法：GA4の活用

ユーザー行動の可視化にはGA4（Google Analytics 4）を利用。以下の手順で導入・確認を行う：

導入手順（概要）

  1. GA4プロパティを作成し、LPとアプリに計測タグを埋め込む
  2. page_view, click, session_start 等の基本イベントを計測
  3. CTAクリックやフォーム送信など、カスタムイベントを定義
  4. アプリ遷移をコンバージョンとして定義し、効果測定可能に

主に確認する指標（初期）

  • LPのユニークユーザー数とセッション数
  • CTAボタンのクリック数（例：event_name = "cta_click"）
  • アプリへの遷移完了数（URL遷移 or タグベース）
  • 遷移後の平均滞在時間と直帰率

このようにすることで、単なる広告反応にとどまらず、「誰が」「どこで」「どれだけ興味を持ったか」を定量的に把握でき、次の改善サイクルの土台となる。

まとめ

本ドキュメントでは、夫婦・カップル間の割り勘精算を支援するプロダクト「splitmate」について、その背景・開発・システム構成・マーケティング・検証の各フェーズを一通り整理しました。

導入で述べたように、本プロジェクトの目的は「非エンジニアでも、CursorやManusといったツールを活用することで、短期間で開発からリリース・マーケまでを自走できる状態をつくること」です。その実践として、実際の課題起点の発想からプロトタイプの実装、検証設計、広告出稿、改善サイクルまでの道筋を明確にしました。

プロダクト自体はシンプルで、使える機能も限られています。しかし、その分「どんな順番で、どんな工夫をしながら作っていくのか」というプロセスを重視しています。少しでもPdM、PjM、PMMといった立場の方の参考になれば幸いです。

splitmateの今後の改善と発展については、初期のユーザー行動データや定性的なフィードバックをもとに優先順位を見直しながら、週単位で改善を回していく方針です。今後も継続的にプロセスと成果を記録していく予定ですので、引き続きお付き合いいただければ嬉しいです。

Discussion