メインコンテンツにスキップ

借金返済プランナー

バラバラな借入残高を、具体的な返済計画にまとめる借金返済プランナーアプリです。借入を入力し、返済方式を選んで予算を設定すれば、いつ完済できるかが正確にわかります。

Lovable
·0件のリミックス

こんな用途におすすめ

  • クレジットカード、自動車ローン、奨学金の返済に取り組む家庭
  • 複数の借入先にまたがる2〜10件の残高管理
  • 顧客向けの返済ツールを作るファイナンシャルコーチ
  • アバランチ方式とスノーボール方式の並列比較

主なポイント

  • アバランチ方式とスノーボール方式
  • 予算シミュレーションスライダー
  • URLで共有できるプラン
  • 返済予定表
  • CSV・PDF出力
  • 利息のドーナツグラフ

技術スタック

ライブラリ

  • shadcn/ui
  • Recharts
  • TanStack
  • DnD Kit
  • Framer Motion
  • Rive
  • React Flow

デプロイ

  • Lovable
  • GitHub

このテンプレートについて

このテンプレートを使えば、見た目がプロ品質で、開いた瞬間から使える借金返済プランナーアプリが手に入ります。サインアップもバックエンドも不要で、スプレッドシートの数式を管理する必要もありません。借入を入力し、アバランチ方式かスノーボール方式を選んで毎月の予算を入力すれば、あとはエンジンがすべて計算します。

技術的な部分はすでに実装済みです。元利返済の計算、利息の複利計算、返済戦略の比較ロジック、そして入力状態をURLにエンコードする仕組みまで、すべて完成しています。URLを使えば、パートナーやファイナンシャルアドバイザーとプランをそのまま共有できます。あとは借金の返済に集中するだけです。

含まれる機能:3ステップのガイド付きウィザード(借入、戦略、予算)、完済日のアニメーション表示と紙吹雪で結果を見せる演出、返済期間をリアルタイムで再計算する「もしも」スライダー、返済順リスト、残高推移のエリアチャート、利息のドーナツチャート、戦略比較パネル、折りたたみ式の返済スケジュール表、CSVエクスポート、PDFへの印刷。すべてが単一のルートで、クライアントサイドで動作します。

多くの借金返済ツールは、月額$10以上のサブスクリプションが必要か、数式がひとつ壊れるだけですべての数字が狂ってしまう融通の利かないスプレッドシートを使うしかありません。このテンプレートなら、同じ計算を洗練されたUIで継続費用なしに利用でき、共有可能なURLがアカウント機能の代わりを完全に果たします。

複数の借入の返済スケジュールを可視化

クレジットカード、自動車ローン、奨学金を同時に抱えていると、いちばん難しいのはどれから返すべきかを判断することです。それぞれの残高を、年利(APR)と最低返済額とともに入力してください。自分で選んだ戦略に沿ってエンジンが返済の順番を決め、それぞれの残高がゼロになる月を正確に示します。当てずっぽうをやめ、具体的なスケジュールに沿って返済を進められます。

アバランチ方式とスノーボール方式の比較

アバランチ方式は支払う利息が最も少なく、スノーボール方式は早い段階で達成感を得られます。この借金返済プランナーアプリは両方を計算し、金額と月数の差を並べて表示します。ワンクリックで戦略を切り替えると、数字が即座に更新されます。他人のアドバイスではなく、自分の性格に合った方法を選びましょう。

決める前に「もしも」のシナリオを試す

予算スライダーを月$700から$900にドラッグすると、完済日が1年以上早まるのがわかります。タイムラインチャート、利息の数値、返済順はすべてリアルタイムで再計算されます。漠然とした目標が、目に見えるトレードオフに変わります。毎月$200多く返済すれば、返済期間が13か月短くなるのです。

パートナーやアドバイザーとプランを共有

入力した内容はすべてURLにエンコードされます。「共有」をクリックしてリンクを送れば、受け取った相手には借入、戦略、予算、結果がそのまま表示されます。どちらの側もアカウントは不要です。ファイルをエクスポートしたり画面共有の予定を組んだりしなくても、ファイナンシャルアドバイザーにプランを確認してもらえます。

はじめ方

1. テンプレートをリミックス

テンプレートを開いて「リミックス」をクリックします。すぐに動く借金返済プランナーアプリが手に入り、3件のサンプル借入(年利22.9%のクレジットカード、6.9%の自動車ローン、5.4%の奨学金)が入力済みなので、何も変更しなくても結果表示までの流れをひと通り確認できます。このテンプレートが合わなければ、別のテンプレートをリミックスすればよいので、作業が無駄になることはありません。

2. ブランドに合わせてカスタマイズ

インディゴのアクセントカラーをブランドカラーに変更しましょう。テンプレートには6種類のカラーが用意されており、属性をひとつ変えるだけで切り替えられます。トップバーのロゴテキストを更新し、グラデーションを調整し、雰囲気を変えたい場合は雲の背景画像を差し替えてください。文字サイズはモバイルからデスクトップまで滑らかに調整され、追加の設定は必要ありません。

3. コンテンツを追加

src/data/seed.tsのサンプル借入を、対象ユーザーに合ったデフォルト値に置き換えます。ファイナンシャルコーチングの事業向けに作る場合は、典型的なクライアント像を反映した借入をあらかじめ入力しておきましょう。ユーザーが標準で含まれる6種類以外の借入を抱えている場合は、カテゴリーリストを更新してください。ラベルや補足テキストはすべて各ステップのコンポーネント内にあり、簡単に編集できます。

4. ツールを連携

このテンプレートはバックエンドなしで完全にクライアントサイドで動作しますが、拡張も可能です。ユーザーがプランをアカウントに保存できるようにしたい場合は、Supabaseプロジェクトを追加しましょう。メール連携を組み込めば、ユーザーがプランの概要を自分宛てに送信できます。アナリティクスを接続すれば、訪問者が「もしも」スライダーをどう使っているかを追跡できます。いずれの拡張も、データ層のフックをひとつ差し替えるだけで実現できます。

5. 公開

Lovableからワンクリックで公開できます。借金返済プランナーアプリにはすぐに公開URLが発行されます。コーチングサイトや金融教育プラットフォームに組み込む場合は、カスタムドメインを設定しましょう。印刷用スタイルシートも設定済みなので、紙で使いたいユーザーはブラウザからきれいなPDFを保存できます。

この借金返済プランナーアプリのテンプレートは、複数の借入を抱え、完済までの明確な道筋を求めるすべての人に役立ちます。スプレッドシートを作らなくても正確な返済計算ができ、アカウントを作らなくてもプランを共有でき、デザイナーを雇わなくても洗練されたインターフェースが手に入ります。

3件のサンプル借入がすでに読み込まれています。テンプレートをリミックスして自分の数字に置き換えれば、今日の午後には実際に使えるプランが手元に揃います。

機能・できること

  • 3ステップのガイド付きウィザード

    「借入一覧」「返済方式」「予算」の3ステップを一つずつ進められ、入力チェックで流れが途中で崩れないようにしています。

  • アニメーション付きの結果表示

    紙吹雪が舞い、完済予定日が画面上でカウントアップするので、味気ない計算が思わず祝いたくなる瞬間に変わります。

  • リアルタイムの予算シミュレーションスライダー

    月々の予算を上下にドラッグすると、完済予定日、推移グラフ、利息の数値が即座に再計算されます。

  • 返済方式の比較パネル

    アバランチ方式がスノーボール方式より(またはその逆に)何ドル、何か月節約できるかを正確に確認でき、ワンクリックで方式を切り替えられます。

  • 残高推移グラフ

    Rechartsのエリアグラフで、今日から残高ゼロになるまでの残高合計の推移を表示し、予算を調整するとリアルタイムで更新されます。

  • URLへの入力内容の保存

    すべての借入、選んだ返済方式、予算額がクエリパラメータにエンコードされるため、まったく同じプランをブックマークしたり共有したりできます。

  • 予算の実現可能性チェック

    月々の予算が最低返済額の合計を下回る場合は、わかりやすい警告で不足額を説明し、何を直せばよいかを具体的に示します。

  • 折りたたみ式の返済予定表

    展開すると、プラン内のすべての借入について、返済額・元金・利息・残高を月ごとに確認できます。

  • クライアントサイドでのCSV出力

    冒頭にサマリーをまとめたロング形式のCSVをダウンロードでき、どの表計算アプリでもそのまま開けるほか、アドバイザーにも渡せます。

関連テンプレート

AIムードボードキャンバス画像とテキストメモをドラッグ&ドロップで配置
Lovableスライドコードで動くプレゼンビルダー
Lovable InsightsGoverned metrics, self-serve dashboards