home / works / Pay History

Pay History

支出管理アプリ「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