SplitMate完成報告：計画と実装の軌跡
はじめに
本記事は、夫婦・カップル間の割り勘精算を支援するプロダクト「SplitMate」の完成報告です。当初の計画書で掲げた「非エンジニアがCursorを活用して1週間以内に開発からリリースまでを一気通貫で進める」という目標に対し、実際にどのようなプロダクトが完成したのか、計画との違いや学びを含めて報告します。
プロダクト概要
完成したSplitMate
- URL: https://splitmate-free-not-auth.onrender.com
- 機能: 夫婦・カップル間の費用入力・配分・精算管理
- 技術: React + TypeScript + Vite + Tailwind CSS
- 特徴: 完全フロントエンド、識別子ベースのデータ分離
主要機能
- 費用入力・管理: スマホ最適化された直感的な入力フォーム
- 配分比率設定: 数値入力で負担割合を変更（デフォルト70:30）
- 精算管理: 費用の承認機能（不要な費用は削除で対応）
- 精算サマリー: 承認済み費用の自動計算と詳細表示
- LINE共有: 精算結果のワンクリックコピー機能
- データ分離: 識別子ベースの完全プライバシー保護
計画と実装の比較
📋 当初の計画
技術スタック：
- フロントエンド: React + Netlify
- バックエンド: Node.js + Express + JWT
- データベース: Supabase (PostgreSQL)
- 認証: Google認証
- ホスティング: Netlify + Render
🚀 実際の実装
技術スタック：
- フロントエンド: React + TypeScript + Vite + Tailwind CSS
- バックエンド: なし（完全フロントエンド）
- データストレージ: localStorage
- 認証: なし（識別子ベースのデータ分離）
- ホスティング: Render（静的サイト）
- コンテナ: Docker対応（本番用）
🔄 変更の理由と判断
1. バックエンド削除の判断
理由:
- 要件の本質を見極めた結果: 我が家の精算では「その場で精算の方向と金額が分かれば十分」
- データを永続的に保持する必要がない
- ユーザーのプライバシー保護（サーバーにデータを送信しない）
- 開発・運用コストの削減
メリット:
- 開発期間の大幅短縮（1週間以内での完成）
- インフラ費用ゼロ
- メンテナンス不要
2. 認証システムの変更
当初: Google認証によるユーザー管理
実装: 8文字のランダム識別子によるデータ分離
判断の背景:
- 要件の精緻化: 夫婦・カップル間での利用であれば、厳密な認証は不要
- 「精算結果をコピペ共有するだけで使える」方が実用的
- 個人データを預かる責任を避けたい
メリット:
- アカウント作成不要でアクセス障壁を削減
- 完全匿名での利用が可能
- 夫婦・カップル間での簡単な共有（コピペ共有のみ）
3. ホスティングの統一
当初: Netlify（フロント）+ Render（バック）
実装: Render（静的サイト）のみ
理由: 構成の簡素化とコスト削減
技術的なポイント
1. データの扱い方
localStorage活用: データは利用者のブラウザ内にのみ保存。サーバーには一切送信されない
識別子分離: 8文字のランダムIDで完全にデータを分離
自動クリーンアップ: 精算完了後は承認済みデータを自動削除
2. ユーザー体験の工夫
モバイルファースト: スマホでの利用を前提とした画面設計
連続入力対応: レシート入力時、説明と支払者を保持して金額のみクリア
視覚的フィードバック: 精算金額や方向を大きく分かりやすく表示
3. 共有機能
LINE対応: 精算結果を夫婦・カップル間で簡単に共有できる形式でテキスト生成
ワンクリックコピー: 計算結果を即座にコピーして、LINEなどに貼り付け可能
開発プロセスでの学び
1. Cursor Agentモードの効果
- 驚異的な開発速度: 基本機能を数時間で実装。従来なら数日かかる作業が一瞬
- 品質の自動確保: バグの少ないコードを最初から生成
- デザインの一貫性: 見た目の美しさも同時に実現
2. 段階的な機能実装
- Phase 1: 基本的な費用入力・表示
- Phase 2: 配分比率設定・計算ロジック
- Phase 3: 精算管理・承認フロー
- Phase 4: ユーザー分離・データプライバシー
- Phase 5: LINE共有・UX改善
- Phase 6: 本番デプロイ・Docker対応
3. 要件の精緻化が最大のポイント
- 「本当に必要なもの」の見極め: 我が家の場合「その場で精算方向と金額が分かれば十分」
- データ保持の必要性を疑う: 精算が終われば履歴は不要。むしろ邪魔
- 認証の必要性を疑う: 夫婦間利用ならURLの共有で十分
- 技術的な華やかさより実用性: 動くものを素早く作って使ってみる
実際のユーザー体験
💡 利用開始
- アクセス: URLにアクセスするだけで即利用開始
- 共有: パートナーにコピペ結果を送信するだけでデータ共有
- プライバシー: アカウント作成・ログイン不要
📱 日常的な利用
- レシート入力: スマホから「説明・金額・支払者」を30秒で入力
- 確認: 入力した費用をリアルタイムで確認
- 承認: ワンタップで費用を承認・却下
💰 精算時
- 自動計算: 配分比率に基づく精算金額の自動算出
- 詳細確認: 費用別の負担内訳を詳細表示
- LINE共有: 精算結果をLINEで送信可能な形式でワンクリックコピー
- データクリア: 精算完了後、承認済みデータを自動削除（無駄なデータを保持しない）
成果と課題
✅ 達成できたこと
- 開発期間: 計画通り1週間以内での完成
- コスト: インフラ費用ゼロでの運用
- ユーザビリティ: スマホ最適化された直感的なUI
- プライバシー: サーバーレスによる完全データ保護
マーケティング・次のステップ
- これからやる。
まとめ
プロジェクトの成果
SplitMateは当初の計画と異なる形で完成しましたが、**「1週間以内でプロダクトを完成させる」**という目標は達成できました。特に、過度な複雑化を避けて必要最小限の機能に集中したことで、ユーザーにとって本当に価値のあるプロダクトを短期間で実現できました。
Cursorの衝撃
- 開発速度: 「こんなに早くできるの？」という驚き
- 学習不要: 知らない技術も、使いながら覚えられる
- 完成度: 最初からそれなりに動くものができる不思議
非エンジニアでもできた
本プロジェクトで一番大切だったのは、実は技術力ではありませんでした。最も重要だったのは：
- 要件の精緻化: 「本当に必要なのは何？」を徹底的に考える
- シンプルさを保つ勇気: 「あれもこれも」の誘惑に負けない
- 完璧主義を捨てる: まず動くものを作って、使ってみる
- ユーザー目線: 技術的にかっこいいより、実際に便利か
技術は道具に過ぎません。Cursorのようなツールがあれば、アイデアと要件定義力さえあれば、誰でもプロダクトは作れる時代になりました。
今後の展望
SplitMateは現在MVPとして機能していますが、ユーザーフィードバックを基に継続的な改善を行っていきます。特に、データの永続化やより豊富な分析機能など、ユーザーの実際のニーズに応じた機能拡張を検討しています。
このプロジェクトが、同様の取り組みを考えている方々の参考になれば幸いです。
プロジェクト情報
- 開発期間: 1週間
- 技術スタック: React + TypeScript + Vite + Tailwind CSS
- デプロイ: Render (Static Site)
- 開発支援: Cursor Agent Mode
- ライセンス: MIT
- リポジトリ: GitHub
最終更新: 2025年7月
Discussion