Family Finance Dashboard
家計データを可視化・分析するNext.js製ダッシュボード
プロジェクト概要
目的
家計データを可視化・分析することで、支出の内訳を分かりやすく表示し、家族で共有しやすい形にしました。これにより「家計の透明性」を高め、日常的な支出を客観的に把握できるようにしました。
開発背景
従来の家計簿では入力や閲覧が個人単位で完結しやすく、家族間での共有や支出傾向の直感的な把握が難しいと感じていました。そこで、実際の家計データを基に「グラフ中心」で直感的に理解できる仕組みを試したいと考え、このアプリを開発しました。
プロジェクト画像
メイン画面 - 家計データの可視化ダッシュボード
詳細画面 - 支出カテゴリ別の分析
技術詳細
使用技術
Next.js 15
TypeScript
Tailwind CSS
Recharts（グラフ描画）
Firestore（データ管理）
Firebase（認証）
開発期間
2025年7月 - 2025年9月（2ヶ月）
開発体制
個人開発
デプロイ
Vercel、Firebase
主な機能
データ可視化機能
- • 月別・年別の支出分析
- • カテゴリ別支出の棒グラフ
- • 支出カテゴリ別の円グラフ表示
- • 支出の内訳を分かりやすく表示
- • 夫婦間でのデータ共有
UI/UX機能
- • 直感的なダッシュボードUI
- • データの視覚的な表示
- • サイドバーによるページナビゲーション
開発過程
1
要件定義・設計
家計管理の課題を分析し、支出の可視化に焦点を当てた要件定義を行いました。家族間での共有を前提とした設計を行い、データの透明性を重視した機能設計を実施しました。
2
フロントエンド開発
Next.js 15とTypeScriptを使用して、型安全な開発を実施。Rechartsを活用してグラフ描画機能を実装し、データはFirestore及びFirebase Authenticationを利用して管理しました。この時点でフィードバックをもらい、UI改善や機能追加を行いました。
3
テスト・デプロイ
家計データの正確性とUI/UXの使いやすさを重視したテストを実施。Vercelでデプロイし、実際の家計管理での使用を開始しました。
成果・学び
技術的な学び
- • Rechartsを使ったデータ可視化の実装
- • 家計データの構造設計とデータベース設計
- • Firebaseを使ったデータおよび認証の実装
プロダクト面の学び
- • 家計管理におけるユーザビリティの重要性
- • データの可視化による家計の透明性向上
- • 家族間での共有を前提とした設計
- • 実際の家計管理での継続的な利用を想定した場合の課題