支出管理アプリ「Pay History」を個人開発しました。
解決したい課題
家計簿管理はMoney Foward MEを使って自動化していたのですが、クレジットカードの明細は反映されるまで時間がかかってしまい、後いくら使っていいのかを把握できないという問題がありました。
作ったのも
支出する度に金額を入力して予算残高を簡単に確認できるwebアプリを作成しました。
家計簿の自動作成はこれまで通りMoney Foward MEを使用し、「Pay History」はできるだけシンプルに予算管理だけをできるインタフェースにしています。
サービスリンク : https://pay-history.kanaru.jp
githubリンク : https://github.com/kanaru-ssk/pay-history
こだわりポイント
予算残高がわかりやすい

Pay Historyの最も重要な機能である、月の予算残高を一目で確認できるように表示しています。
支出入力のしやすさ
支出する度に金額を入力したいため、その時の操作ができるだけシンプルになるように設計しました。
支出日の入力欄はデフォルトでその日の日付が入力されており、金額だけを入力して追加できます。
PWA対応
日常的に使うツールであるため、PWAに対応してインストールして使用できるようにしました。
アイコンもドロップシャドウとインナーシャドウでiosアプリっぽい画像を作りました。

詳細情報
制作情報
- 作業担当箇所 : 企画、設計、デザイン、開発、運用 (個人開発なので全行程)
- 制作時間 : 10時間程度
- ランニングコスト : 0円〜 (Firebaseが従量課金。ほぼ0円)
使用技術
- デザインツール : Illustrator, Figma
- 言語など : NextJS, TypeScript, TailwindCSS
- インフラ : Firebase, Vercel
- バージョン管理 : Git, GitHub