個人開発で、無料の積立シミュレーター「Growfolio」を作りました。
一般的な積立シミュレーターは、毎月の積立額と想定利回り、運用期間を入力するシンプルなものが多いと思います。
Growfolioでは、それらの基本条件に加えて、年ごとに積立額や追加投資、現金の増減を変更できます。
この記事では、作った理由や機能、Codexを活用した開発方法、スマートフォンのホーム画面に追加して使う方法を紹介します。
作った理由
資産形成について考えるとき、毎月の積立額が何十年も変わらないとは限りません。
例えば、次のような変化があります。
- 昇給したので積立額を増やす
- 住宅購入の年だけ積立額を減らす
- 教育費が必要な期間は現金を多めに残す
- ボーナスや退職金の一部を追加投資する
- 転職や休職に合わせて積立計画を見直す
既存のシミュレーターを使っていると、このような変化を反映するには条件を何度も入力し直す必要がありました。
そこで、年ごとの条件をまとめて設定し、投資資産と現金の推移を一緒に確認できるツールを作ることにしました。
Growfolioでできること
基本的な積立シミュレーション
以下の条件を入力すると、将来の資産推移を計算できます。
- 現在の投資資産
- 現在の現金・預貯金
- 毎月の積立額
- 想定利回り
- 積立期間
結果画面では、総資産、投資資産、現金、投資元本、運用益をグラフと年次表で確認できます。
年ごとの詳細プラン
「詳細プランを使う」を有効にすると、年ごとに次の条件を変更できます。
- 毎月の積立額
- 毎月の現金増減
- 年末の追加投資額
例えば、次のような計画を一度に試算できます。
| 期間 | 毎月の積立額 | 現金増減 | 追加投資 |
|---|---|---|---|
| 2026〜2028年 | 5万円 | 毎月+3万円 | 2027年に50万円 |
| 2029〜2031年 | 7万円 | 毎月+1万円 | なし |
| 2032年 | 2万円 | 毎月-10万円 | なし |
| 2033年以降 | 6万円 | 毎月+2万円 | なし |
「ずっと同じ金額を積み立てた場合」だけでなく、生活の変化を含めた資産形成を確認できるようにしました。
条件の保存と共有
入力した条件はブラウザ内に保存できます。
また、共有URLやQRコードを使って、別の端末で同じ条件を開くこともできます。
試算結果を画像として保存できる機能も追加しました。
計算方法
入力された年利を月利に変換し、月次複利で計算しています。
毎月の処理は、基本的に次の順番です。
- 投資資産へ運用益を反映
- 毎月の積立額を投資資産へ追加
- 現金残高へ毎月の現金増減を反映
- 指定がある年は、年末に追加投資を実行
税金、信託報酬などの手数料、インフレ、実際の価格変動は含めていません。
将来の運用成果を予測するものではなく、条件を比較するための概算として利用する想定です。
Codexと一緒に開発した
Growfolioの開発では、生成AIを積極的に利用しました。
要件の整理、UIの検討、実装、テスト、文章の推敲、SEO設定などをCodexと相談しながら進めています。
ただし、Codexが出力したコードをそのまま採用するのではなく、次の流れで開発しました。
- 実現したい機能と利用場面を整理する
- Codexに実装案を出してもらう
- 実装内容と計算処理を確認する
- テストを追加する
- 実際のブラウザで表示と操作を確認する
- 気になる部分をCodexへフィードバックして修正する
Codexを使って特に便利だったのは、細かな改善を何度も繰り返せる点です。
例えば、入力画面の文言、スマートフォン表示、共有機能、構造化データ、OG画像などを、実際の表示を確認しながら少しずつ調整しました。
一方で、計算条件や金融に関する注意書きなど、誤解につながる部分は人間側でも確認する必要があります。
Codexによって実装速度は上がりましたが、「何を作るか」「どこまでを機能に含めるか」「結果をどう説明するか」は、引き続き開発者が判断する部分だと感じました。
使用した技術
主な構成は以下の通りです。
- Next.js
- React
- TypeScript
- Sass
- Vitest
- Redis
- Vercel
トップページだけでなく、積立額や想定利回りを比較できる静的ページも用意しています。
毎月1万・3万・5万円の積立比較
年利3%・5%・7%の比較
検索エンジンやSNSのクローラーが内容を取得しやすいように、metadata、サイトマップ、構造化データ、OG画像も設定しました。
スマートフォンのホーム画面に追加すると便利
Growfolioは、スマートフォンのホーム画面に追加しておくと、通常のアプリに近い感覚で開けます。
毎回URLを検索したり、ブックマーク一覧から探したりする必要がありません。
iPhoneの場合
- Safariで https://growfolio.dev を開く
- 画面下部の共有ボタンをタップする
- メニューの「ホーム画面に追加」を選ぶ
- 表示名を確認して「追加」をタップする
ホーム画面にGrowfolioのアイコンが追加されます。
「ホーム画面に追加」が見つからない場合は、Safariで開いていることを確認してください。
Androidの場合
- Chromeで https://growfolio.dev を開く
- 右上のメニューボタンをタップする
- 「ホーム画面に追加」または「インストール」を選ぶ
- 画面の案内に沿って追加する
端末やChromeのバージョンによって、表示される名称が異なる場合があります。
作ってみて感じたこと
積立シミュレーター自体は珍しいものではありません。
それでも、自分が欲しい条件を細かく設定できるツールを作ることで、既存サービスとは異なる使い方を提案できました。
個人開発では、最初から大きなサービスを目指すよりも、「自分が不便だと思った小さな部分」を解決する方が、作る目的を保ちやすいと感じます。
Codexを使う場合も同様で、曖昧な指示を一度に渡すより、目的を小さく分け、実際の画面やテスト結果を見ながら改善する方がうまく進みました。
まとめ
Growfolioは、毎月の積立だけでなく、年ごとの積立額変更、追加投資、現金増減まで設定できる積立シミュレーターです。
無料・登録不要で利用できます。
スマートフォンで使う場合は、ホーム画面への追加も試してみてください。
まだ改善したい部分はあるので、使って気になった点や「この条件も試算したい」といった要望があれば、コメントで教えてもらえるとうれしいです。
Growfolioの試算結果は、入力条件にもとづく概算です。将来の運用成果を保証するものではありません。実際の運用では、税金、手数料、価格変動なども考慮する必要があります。