🎉

Cursorで作った「SplitMate」：夫婦・カップルの家計精算を変えるWebアプリ開発

に公開
Cursor
Vibe Coding
idea

はじめに

家計の精算って、地味にストレスありませんか？

我が家の場合、毎月の精算が夫婦間の小さな火種になっていました。Excel表に手動で入力し、計算ミスを見つけて修正し、「これ本当に必要だった？」と議論になって...。

そんな課題を解決するために、AIコーディングツール「Cursor」を使って1週間でWebアプリを開発しました。その名も「SplitMate」です。

🔗 実際のアプリ: https://splitmate-free-not-auth.onrender.com

今回は、サービスのコンセプトから開発の軌跡、そしてCursorを使った開発体験まで、包括的にお伝えします。

🎯 サービスコンセプト：「精算のストレスを、技術で解決する」

SplitMateとは

夫婦・カップル間の月次家計費精算を自動化し、手動作業とヒューマンエラーを削減する家計費精算システム

シンプルに言うと「スマホでレシート入力 → 自動で精算計算 → LINEで共有」が可能なWebアプリです。

核となる価値提案

  1. 時短効果: 月末の精算作業を5分に短縮
  2. ミス防止: 自動計算でヒューマンエラーを排除
  3. 透明性: 配分ロジックが明確で納得感がある
  4. 手軽さ: アカウント登録不要で即利用開始

😰 ユーザーが抱える課題

従来の精算方法の問題点

1. 手動作業の煩雑さ 

🛒 レシートを集める
📝 Excelに手動入力
🧮 電卓で計算
💸 配分比率を適用
📊 精算金額を算出
💬 パートナーと確認

これを毎月やるのは、正直しんどい...。

2. 計算ミスによるトラブル

  • 手動計算での単純ミス
  • 配分比率の適用間違い
  • 立替者の記録漏れ
  • 結果として「金額が合わない」問題が発生

3. 透明性の欠如

  • 「なぜこの金額になった？」が分からない
  • 計算過程がブラックボックス
  • パートナーからの信頼を得にくい

4. 時間コストの問題

  • 月末の精算に1-2時間かかる
  • 忙しい時期は精算が滞る
  • 溜まった分の精算がさらに大変

実際の声（我が家の場合）

「また計算間違ってる...」
「この買い物、本当に家計費？」
「精算面倒だから、今度でいいや」

💡 SplitMateの解決策

1. スマホ最適化された入力体験

Before：家でPCを開いて入力

帰宅 → PC起動 → Excel開く → レシート探す → 手入力

After：買い物直後にスマホで入力

会計後 → スマホでアプリ開く → 30秒で入力完了

具体的な改善点：

  • レスポンシブデザインでスマホでも快適
  • 連続入力機能（店舗名と支払者を保持）
  • 直感的なUI（説明・金額・支払者の3項目のみ）

2. 自動精算計算エンジン

計算ロジックの自動化

// 配分比率に基づく自動計算例
配分比率: 夫70% / 妻30%
夫の支払い: 10,000円

→ 夫の負担額: 7,000円
→ 妻の負担額: 3,000円
→ 精算: 妻 → 夫 3,000円

メリット：

  • 計算ミスの完全排除
  • 複雑な配分比率にも対応
  • リアルタイムでの結果表示

3. 透明性の確保

計算過程の可視化

📊 精算詳細表示
├── 費用別の負担内訳
├── 配分比率の適用結果
├── 立替者・精算対象者の明示
└── 最終精算金額の根拠

パートナーが「なぜこの金額？」と疑問に思うことがなくなります。

4. プライバシー重視の設計

認証不要のデータ分離

  • 8文字のランダム識別子でデータ管理
  • サーバーにデータを送信しない（localStorage使用）
  • アカウント作成・ログイン不要
  • URLの共有だけでデータ共有が可能

セキュリティ面の配慮：

❌ 個人情報の収集なし
❌ サーバーへのデータ送信なし  
❌ アカウント管理の煩雑さなし
✅ 完全匿名での利用
✅ 必要最小限のデータのみ保持

🛠️ Cursorを使った開発体験

なぜCursorを選んだのか

1. 非エンジニアでも本格的な開発が可能

従来のプログラミングでは数週間〜数ヶ月かかる作業が、Cursorなら数日で完成。

2. AIによる品質保証

  • バグの少ないコードを最初から生成
  • ベストプラクティスに沿った実装
  • TypeScriptによる型安全性も自動で考慮

3. デザインも同時に実現

  • Tailwind CSSを使った美しいUI
  • レスポンシブデザインの自動対応
  • アクセシビリティにも配慮

実際の開発プロセス

Phase 1: 基本設計（1日目）

💭 "夫婦の家計精算アプリを作りたい"
↓
🤖 Cursor: "React + TypeScript + Tailwind CSSで構築しましょう"
↓
✅ プロジェクト骨格完成

Phase 2: 機能実装（2日目）

機能追加のたびに：
📝 "費用入力フォームを追加して"
🤖 → 美しいフォームが完成
📝 "精算計算ロジックを実装して"  
🤖 → バグのない計算機能が完成

Phase 3: UX改善（3日目）

📝 "スマホでも使いやすくして"
🤖 → レスポンシブデザイン完成
📝 "LINE共有機能を追加して"
🤖 → ワンクリックコピー機能完成

Phase 4: デプロイ（4日目）

📝 "Renderにデプロイしたい"
🤖 → Dockerfile生成 → 本番環境完成

Cursor開発の驚きポイント

1. 学習コストの劇的な削減 

従来: React学習 → TypeScript学習 → デザイン学習 → デプロイ学習
Cursor: 「作りたいもの」を伝えるだけ

2. エラーの自動修正 

🐛 エラー発生
📝 "このエラーを修正して"
🤖 → 即座に修正コード提案
✅ 動作確認完了

3. ベストプラクティスの自動適用

  • ファイル構成の最適化
  • コンポーネント設計の改善
  • パフォーマンス最適化
  • セキュリティ対策

📊 技術スタック：シンプルだからこその強さ

採用技術

Frontend: React + TypeScript + Vite + Tailwind CSS
Data Storage: localStorage (完全クライアントサイド)
Hosting: Render (静的サイト配信)
Container: Docker (本番環境用)

技術選択の理由

React + TypeScript

  • 安定性: 大規模なコミュニティサポート
  • 型安全性: バグの事前発見
  • 開発効率: Cursorとの親和性が高い

Tailwind CSS

  • 開発速度: デザインシステムが既に完成
  • レスポンシブ: モバイル対応が簡単
  • 保守性: クラス名の一貫性

localStorage

  • プライバシー: サーバーにデータを送信しない
  • コスト: インフラ費用ゼロ
  • シンプルさ: 複雑なデータベース設計不要

🎯 実際の使用体験

日常的な利用フロー

1. レシート入力（30秒） 

🛒 スーパーで買い物
📱 会計後すぐにスマホでアプリ開く
✍️ 「マルエツ / 3,000円 / 妻」と入力
✅ 保存完了

2. 月末精算（5分） 

📊 精算管理タブを開く
👀 入力した費用一覧を確認
✅ 不要な費用は削除、必要な費用は承認
📋 精算サマリーで最終結果を確認
📲 LINEでパートナーに結果を共有

3. パートナーとの共有 

💬 LINE: "今月の精算結果だよ"
📋 精算詳細をコピペ
💰 "妻 → 夫 15,000円"
✅ パートナーも納得

実際の効果

Before vs After

Before:
⏰ 精算時間: 1-2時間/月
🐛 計算ミス: 月2-3回
😰 ストレス: 高
💸 精算頻度: 月1回（重い腰）

After:
⏰ 精算時間: 5分/月
🐛 計算ミス: 0回
😊 ストレス: 低
💸 精算頻度: リアルタイム

🚀 今後の展望

短期的な改善計画

1. データ永続化オプション

現在はlocalStorageですが、ユーザーの要望に応じてクラウド保存にも対応予定。

2. カテゴリ分析機能

「食費」「日用品」などのカテゴリ別分析機能を追加。

3. 予算管理機能

月次予算設定と実績比較機能。

長期的なビジョン

1. 他の精算パターンへの対応

  • 友人グループでの旅行費精算
  • シェアハウスでの共益費精算
  • 職場での歓送迎会費精算

2. 家計簿アプリとの連携

既存の家計簿アプリとのデータ連携機能。

3. AIによる支出分析

機械学習を活用した支出パターンの分析と改善提案。

💭 開発を通じて学んだこと

1. 要件定義の重要性

技術的な華やかさより、「本当に必要な機能は何か？」を見極めることが最重要。

2. ユーザー体験の追求

「技術的に可能」と「ユーザーにとって使いやすい」は別物。

3. Cursorの可能性

非エンジニアでも、アイデアさえあれば本格的なWebアプリが作れる時代。

4. シンプルさの価値

複雑な機能より、シンプルで確実に動く機能の方が価値がある。

🔚 まとめ：技術で日常の小さなストレスを解決する

SplitMateの開発を通じて実感したのは、技術は日常の小さな課題を解決するためにあるということです。

家計精算という地味な作業かもしれませんが、毎月のストレスがなくなることで、夫婦関係にも良い影響があります。「お金の話」が「喧嘩の原因」ではなく、「透明で建設的な会話」に変わりました。

Cursorの衝撃

最も印象的だったのは、アイデアから実装までの距離が劇的に短くなったことです。

従来: アイデア → 学習 → 設計 → 実装 → デバッグ → デプロイ（数ヶ月）
Cursor: アイデア → 実装 → デプロイ（1週間）

これにより、「思いついたらすぐ作る」が可能になり、創造的な活動への障壁が大幅に下がりました。

読者への提案

もし日常生活で「これ、もっと効率化できるのに...」と思うことがあれば、まずは作ってみることをお勧めします。Cursorのようなツールがあれば、プログラミング経験がなくても、想像以上のものが作れるはずです。

🔗 リンク集

Discussion