AIで作った資産管理アプリのグラフを改善｜月次表示から入出金日ごとの推移へ

※本記事はプロモーションを含みます。

AIに相談しながら作っている資産管理アプリで、資産推移グラフの見え方を直しました。

これまでは、資産の推移を月単位で見る形になっていました。月ごとの流れをざっくり見るには分かりやすいのですが、実際に入金した日、出金した日、資産を移した日までは追いにくい状態でした。

FIREやサイドFIREの計画では、月単位で見ることも大事です。生活費、積立額、将来の見通しは、月ごとの表に落としたほうが考えやすいからです。

ただ、資産が実際に動いたタイミングを振り返るなら、月末残高だけでは足りないと感じました。今回は、月次計画とは別に、資産を記録した日ごとの変化を見られるようにした改善ログです。

取引日の資産推移は日次でみたい

今回の改善で最初に整理したのは、月単位の表示が悪いわけではないということです。むしろ、ライフプラン表では月単位の見方がかなり大事です。

生活費、積立額、副業収入、将来の支出予定を考えるときは、日ごとの細かい変化よりも、月ごとのまとまりで見たほうが考えやすいです。毎日の資産額を追いすぎると、かえって目先の増減に引っぱられます。

月別ライフプラン表を作った流れは、以前の記事で整理しています。将来のFIRE計画を月ごとに見るための土台として作ったものです。

今回の資産推移グラフは、そのライフプラン表とは役割が少し違います。こちらで見たいのは、将来の計画ではなく、実際に資産がいつ動いたかです。

私の中では、月単位は計画を見るため、取引日単位は実績を振り返るため、という分け方がしっくりきました。この分け方をしておくと、月単位の計画を否定せずに、実績側の見づらさだけを直せます。

資産管理アプリは、ひとつの画面で全部を説明しようとすると重くなります。計画を見る画面、実績を見る画面、変化を確認する画面。それぞれで見たいものを分けたほうが、あとから使い続けやすいと感じました。

月末残高だけでは資産が動いた日を振り返りにくかった

以前の資産推移グラフでは、同じ月の中で複数回トランザクションがあっても、その月の最後の残高だけがグラフに反映される形でした。

たとえば、月初に入金し、月中に資産を移し、月末に別の口座へ振り替えたとしても、グラフ上では月末時点のひとつの点にまとまります。全体の流れは見えますが、どの日にどのくらい変わったのかは見えません。

月末残高だけを見ると、資産が増減した理由やタイミングが薄まりやすいです。あとから振り返ったときに、なぜその月だけ大きく動いたのかを思い出しにくくなります。

私が見たかったのは、グラフの線がきれいに伸びているかだけではありません。入金した日、出金した日、投資用の口座へ移した日など、自分が実際に手を動かしたタイミングも一緒に確認したかったのです。

資産管理アプリの出発点は、そもそもFIREの数字を頭の中だけで考えないためでした。最初に作ったときの話はこちらに残しています。

作ったあとに実際に使ってみると、最初の画面では見えていなかった不便が出てきます。今回のグラフ改善も、そのひとつでした。

AIにはグラフとデータ集計の関係を先に調べてもらった

今回も、いきなりClaude Codeに修正させるのではなく、まずどこを見ればよいかを調べてもらいました。資産推移グラフは見た目だけの問題ではなく、データの集計方法にも関係しているからです。

確認してもらったのは、グラフを描画している画面、資産データを取得している処理、月次データを作っている部分、データベースの持ち方、使っているグラフライブラリです。今回のアプリでは、Next.js、Prisma、SQLite、Rechartsが使われています。

AIに修正を頼む前に、どのファイルが何を担当しているかを確認させたことで、変更する範囲を絞れました。グラフの見た目だけを触っても、元データが月単位のままなら、欲しい表示にはなりません。

結果として、主に見るべき場所は、資産データを集計しているページと、グラフ表示のコンポーネントでした。細かいファイル名を読者が覚える必要はありませんが、ここで大事なのは、表示の違和感を直すには、裏側のデータの作り方まで見る必要があったという点です。

AIに渡した依頼も、単に「グラフを見やすくして」ではなく、「金額の変更があったタイミングもグラフにプロットしたい」と伝えました。何が不便で、どう見えるようにしたいのかを具体的に渡すほうが、修正の方向がずれにくくなります。

取引日ごとのドットで実データの変化を見えるようにした

修正後は、月ごとではなく、トランザクションが発生した日付ごとにデータポイントを作る形になりました。つまり、同じ月の中で複数回資産が動けば、それぞれの日付がグラフ上に残ります。

裏側では、これまで月をキーにしてまとめていた集計を、日付単位で扱うように変えています。読者向けに言い換えるなら、「その月の最後だけを残す」のではなく、「資産が動いた日を残す」形です。

グラフ上には、実際に資産額が変わった日を小さなドットとして表示するようになりました。
線だけを見るより、どこで資産が動いたのかが分かりやすくなります。

さらに、ドットにカーソルを合わせると、その日付と各口座の金額、合計残高を確認できます。日付も機械的な形式ではなく、日本語の日付として表示されるようになっています。

この変更で、資産推移グラフはただの月末残高の線ではなくなりました。入金や資産移動をした日が、あとから見返せる点として残ります。

ここで大事なのは、細かく見えるようにしたからといって、毎日資産額に一喜一憂するための画面にしたわけではないことです。日々の値動きを追うというより、自分が資産を動かしたタイミングを振り返るための改善です。

細かく表示するほどX軸と予測データの見せ方を分ける必要があった

取引日ごとにデータ点を増やすと、別の問題も出ます。X軸にすべての日付を表示すると、ラベルが多すぎて読みにくくなることです。

そこで、グラフのデータ点は日付単位で持ちつつ、X軸のラベルは月初だけ表示する形になっています。細かい変化はドットで見られるけれど、横軸の見た目は月ごとの流れとして読める状態です。

情報を細かくするほど、全部を画面に出せばよいわけではないと感じました。見たい情報を増やすなら、同時に見せ方も整理しないと、かえって使いにくくなります。

期間の絞り込みも、日付単位に合わせて見直しました。これまではデータの個数をもとに3か月、6か月、1年を扱いやすかったのですが、日付単位になるとデータ点の数は月によって変わります。そこで、日付そのものを基準にして表示期間を判断する形になっています。

もうひとつ分けたのが、実データと予測データです。実際の取引日にドットを出す一方で、予測や目標残高にはドットを出さないようにしました。

予測データまで実績と同じ見た目にすると、まだ起きていない数字まで確定したもののように見えます。資産管理では、この見え方の違いも大事だと思いました。

計画と実績を分けて見る考え方は、ライフプラン表を改善したときにも近いものがありました。予定として置く数字と、実際に起きた数字を混ぜると、後から振り返りにくくなります。

今回のグラフ改善も、その延長にあります。予測は予測、実績は実績として、見た目でも区別できるようにしたかったのです。

資産管理アプリは計画と実績を分けながら使って直していく

今回の修正で、資産推移グラフは月末残高を見るだけの画面から、資産が動いた日も振り返れる画面に近づきました。入金や出金、資産移動のタイミングが見えると、あとから家計や資産形成の動きを思い出しやすくなります。

ただし、この改善でFIRE計画が自動的に正しくなるわけではありません。グラフはあくまで見える化の道具です。見えた変化をどう読むか、どこを次に直すかは、自分で判断する必要があります。

AIで作った資産管理アプリは、完成品として眺めるより、使いながら違和感を直していくほうが自分に合っていました。最初から完璧な画面を作るより、使って初めて分かる不便を小さく直していく感覚です。

今回のように、月単位の計画と取引日単位の実績を分けると、見るべきものが少し整理されます。将来を考えるときは月単位で見る。実際に資産が動いた理由を振り返るときは取引日を見る。そう分けておくと、グラフに振り回されにくくなります。

今後は、このドットを見たときに、その日のメモや取引理由へ戻れるようにすることも考えたいです。資産が動いた日だけが見えても、なぜ動かしたのかが残っていなければ、振り返りとしてはまだ弱いからです。

資産管理アプリは、数字をきれいに並べるためだけのものではありません。自分の判断をあとから見返し、次の改善につなげるための道具として、少しずつ育てていきたいです。