住宅ローンを抱えながら資産運用もしたい。
手元の余剰資金は、繰り上げ返済に回すべきか、資産運用に回すべきか——この問いは、私自身が長く決めきれずにいたテーマです。
本やSNSを読み漁ると、信頼している書き手ほど「借金返済こそ最強の投資」と言う。
一方で数字を組んでみると、低金利で借りているうちは資産運用のほうが残るように見える。
どちらの主張も筋が通っていて、最後は自分の条件次第。だったら自分の条件で数字を見るのが一番早い。
そう思って、Claude Code に住宅ローンの繰り上げ返済 vs 資産運用シミュレーターを作ってもらいました。
本記事は、そのツールの紹介と、Claude AI(チャット)で仕様を詰めて Claude Code で実装する2段階ワークフローの実例記録です。
想定読者：
・Claude Code で実用的な計算ツール／UI付きアプリを作ってみたい人
・副次的に、住宅ローンの繰り上げ返済と資産運用のどちらに余剰資金を回すか迷っている人
収益層：この記事には広告・アフィリンクはありません。
この記事で扱うこと／扱わないこと
扱うこと：
- 実際にブラウザで動かせるシミュレーターの紹介(記事内に埋め込み)
- それを Claude Code でどう作ったかのプロセス記録(仕様詰め／実装／バグ気づき)
- 設計上の判断(なぜこの入力項目にしたか／なぜ両方の返済方式に対応させたか)
扱わないこと：
- 「繰り上げ返済すべきか、資産運用すべきか」の一律の正解
- 個別の金融商品の推奨や、税制の細かい解説
- 投資・運用そのもののハウツー(NISAの始め方等)
数字で見ても結論は条件によって変わります。
だからこそ「あなたの条件で数字を見る」ことを目的にしたツールであり、記事です。
なぜ作ったか
自分自身が長く迷っていた
私の手元には住宅ローンがあり、同時に積立投資も続けています。
何度も自問したのは「この余剰資金、繰り上げ返済に回したほうが得じゃないか？」という問いでした。
学びを進めるほど、繰り上げ返済を強く推す声の説得力も改めて感じます。
「確定でローン金利分のリターンが得られる」という理屈は明快で、反論しにくい。
一方で、自分のローン金利(変動0.8%前後)と、想定する長期運用リターン(年5%程度)を並べると、数字上は資産運用のほうが残るように見える。
どちらの主張も間違っていない。最後は自分の条件次第——頭ではわかっていても、納得しきれない時間が長く続きました。
数字で並べてみるまで、自分でも本当に納得できなかった
紙と電卓では難しい。
Excelで作ろうとしたこともありますが、変動金利の上昇シナリオや、期間短縮型／返済額軽減型の違いまで織り込もうとすると、一気にしんどくなる。
途中で投げ出して、結局「まあ、運用のほうが残るだろう」とぼんやり納得したまま続けてきました。
そのモヤモヤを、今度こそ自分の数字で確認したいと思ったのが今回の出発点です。
同じように悩む人の判断材料にもなれば、と。
Claude Code なら、計算もUIも一気に作れる
ここで決定的に背中を押したのが、Claude Code を使えば計算ロジックだけでなくUIまで一気に作れるという事実でした。
Excelで作るのは諦めても、Claude Code に頼めば数十分で動くものができる。
「自分で全部書く／全部丸投げする」の二択ではなく、仕様は自分で詰めて実装は任せる、という第三の選択肢が現実的に取れる時代になっています。
これが、本記事のもう一つのテーマである 「Claude AI で仕様 → Claude Code で実装」の2段階ワークフロー につながります。
2段階ワークフロー：Claude AI で仕様を詰めて Claude Code に渡す
なぜ「いきなり Claude Code」にしないのか
Claude Code に「住宅ローンのシミュレーターを作って」とだけ投げると、当然それなりのものは返ってきます。
ただ、何を入力できて／何を計算して／何を出力するかが曖昧なまま実装が走ると、後から「これも欲しい」「ここの計算違う」と差し戻しが続き、結果として時間も会話も長くなる。
非エンジニアの私が今回実感したのは、「いきなりコードを書かせる」前に、自然言語で要件をきっちり詰めるフェーズを分けたほうが速いということでした。
そこで使うのが、ブラウザで使える Claude AI(チャット) です。
Step 1：Claude AI に「足りない変数を聞いて」と頼む
最初の発射点として、自分が書いた既存のブログ記事と、頭の中にあるツールのラフ案を Claude AI に投げました。
「以下のブログ記事内に配置する、HTML形式のシミュレーターを Claude Code に作ってもらいたいので、プロンプト作成を手伝ってください。
UIで、ローン残高、年数、金利を入力。元利均等返済と元金均等返済のいずれかを選択。余剰資金を入力、繰上げ返済手数料を入力、ポートフォリオの期待リターンを入力。これで、余剰資金で繰上げ返済した場合と、投資に回した場合に最終的にどれくらい差が出るかをサマリーで表示する。足りない変数などあれば指摘し、僕に確認しておきたいことがあれば聞いてから、プロンプト作成してください。」
太字の一言、これがこの工程の効きどころです。
「足りないものがあれば聞いてから作って」と先に頼んでおくと、こちらが見落としている設計判断を Claude AI が質問返ししてくれます。
返ってきた3つの質問が、ツールの根っこを決めた
実際に Claude AI から返ってきた質問は3つでした：
- 余剰資金の投入タイミング → 毎月継続 / 一括初回のみ / 両方選べる
- 繰り上げ返済の方式 → 返済期間短縮型のみ / 返済額軽減型のみ / 両方選べる
- 投資リターンの計算 → 複利で単純計算 / 税引後(約80%)を考慮 / 税金は別途入力
私の回答はこうです：
- 一括で初回のみ投入
- 両方選べるようにする
- 複利で毎年再投資(シンプル)
「これくらい自分で気づけそう」と思うかもしれません。
でも自分で書きながら作っていたら、毎月積立で考えるのか一括で考えるのか曖昧なまま走り出していたはずです。ここで決まっていないと、計算ロジックの根っこが揺れます。
3つの質問それぞれが、後の実装の方向を決定づける分岐点でした。
Step 1の出力：Claude AI が「Claude Code 用プロンプト」を作ってくれる
3つの質問に答えると、Claude AI は Claude Code に貼り付けるためのプロンプトを一括で生成してくれました。
実際に生成されたプロンプトの全文がこちらです(そのままコピペで再利用できます)：
# 繰り上げ返済 vs 投資シミュレーター（単体HTML）
## 概要
住宅ローンの繰り上げ返済と投資を比較するシミュレーターを、
単体で動作するHTMLファイルとして作成してください。
外部CDN・フレームワーク不使用。HTML/CSS/JavaScriptのみ。
ConohaサーバーにアップロードしてWebページ内に埋め込むため、
<iframe>で使いやすいよう、スクロールなしで収まるレイアウトを意識してください。
---
## 入力項目
### ローン情報
- ローン残高(万円)
- 残り返済年数(年)
- 年利(%)
- 返済方式：元利均等 / 元金均等(ラジオボタン)
### 余剰資金・運用条件
- 余剰資金(万円) ※一括で今すぐ投入する想定
- 繰り上げ返済手数料(万円) ※繰り上げ返済を選んだ場合に差し引く
- 繰り上げ返済方式：返済期間短縮型 / 返済額軽減型(ラジオボタン)
- ポートフォリオの期待リターン(年率%) ※投資を選んだ場合に使用
---
## 計算ロジック
### 共通
- 月次で計算する
- 元利均等：毎月返済額 = P × r(1+r)^n / ((1+r)^n - 1)
(P=残高, r=月利, n=残り返済回数)
- 元金均等：毎月元金返済額 = P / n、毎月利息 = 残高 × 月利
### Aケース：繰り上げ返済
- 余剰資金から手数料を引いた金額を元本から一括控除
- 返済期間短縮型：毎月返済額を維持し、返済が終わる月を求める
- 返済額軽減型：残高・残年数を再計算し、新しい毎月返済額を求める
- 繰り上げ返済後に発生する「浮いたお金」は計算に含めない(シンプルに比較)
- 総支払利息 = 全月の利息合計
### Bケース：投資
- 余剰資金をそのまま投資に回す
- 期待リターン(年率)を複利で運用
- 運用期間 = 元のローン残り年数
- 最終資産 = 余剰資金 × (1 + 年率)^年数
- 総支払利息はローン完済までの通常返済の利息合計(繰り上げなし)
---
## サマリー表示(計算結果)
以下を2カラムで並べて比較表示：
| 項目 | 繰り上げ返済 | 投資 |
|---|---|---|
| 総支払利息 | XX万円 | XX万円(変化なし) |
| 返済期間 | XX年Xヶ月(短縮型) / 変わらず(軽減型) | XX年(変化なし) |
| 毎月返済額 | 変わらず(短縮型) / XX万円(軽減型) | XX万円(変化なし) |
| 最終的な手元資産 | 0円(繰り上げ返済に充当) | XX万円 |
| 節約できた利息 or 投資収益 | XX万円(利息節約額) | XX万円(投資収益) |
| **実質的なメリット** | **利息節約額 - 手数料** | **投資収益 - 通常利息との差分** |
最下部に1行で判定メッセージを表示：
- 例：「このケースでは、投資の方が XX万円 有利です」
- または「このケースでは、繰り上げ返済の方が XX万円 有利です」
---
## UI・デザイン要件
- フォントはシステムフォント(日本語対応)
- 背景白、アクセントカラーは青系(#2563eb など)
- 入力欄はグループごとにカード風にまとめる
- 「計算する」ボタンを押したらサマリーが下部にスムーズ表示
- モバイルでも崩れないレスポンシブ対応
- デフォルト値を入れておく(例：残高2500万、30年、1.0%、余剰100万など)
---
## 注意事項
- 外部ライブラリ・CDN不使用(完全オフライン動作)
- JavaScriptはすべてインラインで記述
- 計算結果は万円単位・小数第1位まで表示
- ファイル名は `simulator.html` とするここまで作るのに、Claude AI 側のやり取りは実時間で2〜3分。
タイムスタンプ上は 0:07 に最初のメッセージを送り、0:08 に質問返しが来て、回答後すぐに完成プロンプトが出てきました。
Step 2：Claude Code にそのまま貼って実装させる
仕上がったプロンプトを、Claude Code にほぼコピペでそのまま渡しました。
このときの体感は 「最初の1通で骨格は出る、あとは見えてきたものに対する追加注文」。
| 時刻(JST) | 何をしたか |
|---|---|
| 0:10 | 仕様プロンプトを投げて初稿が動く |
| 0:23 | 機能追加(運用期間の紐付け／金利上昇率／免責事項) |
| 0:31 | バグ発見・デバッグ依頼(詳細は後述) |
| 0:38 | UI追加(固定金利／変動金利の切替表示) |
| 0:43 | デフォルト値の最終調整 |
| 0:51〜0:53 | iframe 埋め込み用 postMessage の動作確認 → 完成 |
Step 1(仕様詰め)と Step 2(実装)を合わせても、深夜0:07〜0:53のトータル46分。
46分が速いか遅いかは、何と比べるか次第です。
自分でExcelで作ろうとして数時間さわって投げ出した身からすると、計算ロジックもUIもバグ取りも含めて46分でブラウザで動くツールが完成するのは、かなり驚きの数字でした。
ChatGPTのような対話AI以外に触れたことがないと「そんなにかかるの？」と感じるかもしれません。でも、対話型AIが返してくれるのは"答え"であって"動くツール"ではありません。動くツールを丸ごと組み上げるのが Claude Code の役割で、そこには手戻りやバグ修正の往復も込みです。
この2段階を分ける効果
整理すると、こうなります：
| フェーズ | ツール | 役割 |
|---|---|---|
| 仕様詰め | Claude AI(チャット) | 自然言語の往復で要件を固める／不明点を質問返しさせる／プロンプトをまとめさせる |
| 実装 | Claude Code | 出来上がったプロンプトを渡してコードを書かせる／バグを直させる |
「全部丸投げ」だと意図と違うものが出来上がる。
「全部自分で書く」は学習コストが高すぎて続かない。
その中間に、自分で考える部分(仕様)と任せる部分(実装)を分けるやり方が現実的に存在しています。
これが本記事で一番伝えたい部分です。
動かしてみる：シミュレーターを記事に埋め込みました
ここで実物を触ってもらうのが一番早いです。
下のシミュレーターは、本サイト内に埋め込んだ実物そのもの。
まずはデフォルト値で
そのまま「計算する」を押すと、こう出ます：
- ローン残高 3,000万円・残り30年・変動金利0.6%・年0.2%pt の上昇シナリオ
- 余剰資金 100万円・繰り上げ返済方式は期間短縮型・想定運用利回り 4.0%
- → 「数字上は、資産運用に回す方が 33.6 万円 多く残る計算です」
控えめな数値設定(金利は底値、利回りは保守的)でも、わずかながら資産運用が勝つ結果になります。
自分の数字に変えてみる
入力欄に条件を入れて「計算する」ボタンを押すと、下部に結果テーブルが表示されます。値を変えて何度でも計算し直せます。
- 自分のローン残高・残り年数・年利を入れる
- 金利タイプ(固定／変動)を選ぶ。変動を選ぶと「金利上昇率／年」の入力欄が出ます
- 返済方式は元利均等／元金均等。違いはフィールド下のメモ書き参照
- 余剰資金は実際に動かせる金額を入れる
- 想定運用利回りは控えめでも強気でも、自分の判断で
結論が逆転する条件を探す
このツールの面白さは、結論が条件次第で逆転することを実感できる点にあります。
たとえば「金利上昇率／年」をデフォルトの 0.2%pt から 0.3%pt に上げるだけで、結果は逆転します。
他の条件はまったく同じ。繰り上げ返済の方が約 102 万円多く残る計算に変わります。
上げ幅はわずか 0.1%pt。それで前後 130 万円以上の差が生じる。これくらい、結論は条件に敏感です。
「一律の正解はない、自分の条件を入れて初めて結論が出る」——この感覚が、ここで腑に落ちます。
Claude Code と作って驚いたこと
ここからは、ツール本体ではなく作る側の体験の話です。
非エンジニアの私が今回 Claude Code を触って、特に印象に残った2点を書きます。
計算ロジックは「頑張れば自分でもできる」
正直、住宅ローンの返済計算は、調べれば出てきます。
元利均等の月次返済額の式(P × r(1+r)^n / ((1+r)^n − 1))も、元金均等の単純な引き算も、Excelで頑張れば組めなくはない。
実際、過去に Excel で作ろうとした時期もあります。
でも、
- 変動金利を年単位でステップ上昇させながら再計算する
- 期間短縮型と返済額軽減型で計算ロジックを分岐させる
- 結果を比較できる形に整形して表示する
ここまで来ると、計算式を書ける／書けないの問題ではなく、関数同士をどう繋いで管理するかの問題になります。
シートが分かれ、参照が切れ、デバッグが追いつかなくなる——途中で投げ出した記憶があります。
一番驚いたのは UI(ユーザーインターフェース)
Claude Code を使って一番驚いたのは、計算ロジックではなく UI(ユーザーインターフェース／画面の見た目と操作感) でした。
最初の1通のプロンプトを投げて返ってきたものは、すでに：
- 入力フォームが2カラムでカード風にレイアウトされていて
- 「計算する」ボタンを押すと結果テーブルが下部にスムーズに表示され
- モバイル幅でも崩れない
ブラウザで動くツールとして手元に届きました。
Excelで作ろうとしていた頃、ずっと諦めていたのは「人に見せられる見た目」の部分です。
計算は何とかなっても、人前に出せるUIを自前で組む工数を考えると、個人で作る範囲に収まらなかった。
それが、Claude Code に渡す1通のプロンプトと、その後数回の追加注文だけで、ブラウザで動く完成品が手元に来る。
これは「速い／遅い」の話ではなく、個人にとっての"作れるもの"の射程が変わったという話でした。
実測値で見ると
参考までに、今回の制作の実測値です：
| 指標 | 数値 |
|---|---|
| 仕様詰め(Claude AI) | 約3分・質問返し1往復 |
| 実装(Claude Code) | 約43分・指示の往復6ターン |
| コード編集回数 | Write 2回・Edit 10回 |
| 合計 | 約46分 |
繰り返しになりますが、この数字が「速い」と感じるかは比較対象次第です。
ただ、Excelで作ろうとして数時間で挫折した過去の私から見ると、別世界の数字でした。
詰まったところ：途中で見つけたバグ
開発が始まって 21分後(深夜0:31)、初稿のロジックに違和感を感じて手が止まりました。
「これはあり得ない」と思った瞬間
実際にいくつかの条件で計算ボタンを押していると、おかしな結果が並び始めました。
繰り上げ返済をしたはずなのに返済期間が伸びている。資産運用に回したケースと比べて、繰り上げのほうが総支払利息が多い。当然ながら節約利息がマイナスになっている。
「これはあり得ないでしょ」と即時に分かるレベルでした。
そのまま Claude Code にメッセージを投げます。
「返済期間が伸びている。投資の方が(繰上げ返済しないほうが)総支払利息が少ない。節約利息がマイナス。これらの原因を調べてください。」
原因と修正
Claude Code にコードを読み返してもらった結果、原因は 元利均等返済 × 期間短縮型繰り上げ返済の組み合わせ にありました。
最初のロジックでは、繰り上げ返済をした後の残高に対して、その都度、新しい毎月返済額を計算し直していました。
ところが変動金利は「年に一度ステップ的に上がる」設計にしているため、再計算のタイミングが「繰り上げなしのケース」と微妙にズレて、結果的に支払利息の比較が崩れていた、という話です。
修正方針はシンプルで、「繰り上げ返済をしなかった場合の毎月返済額」を並行でずっと計算し続け、その同じ毎月返済額を「繰り上げ後の残高」にも適用する形に統一しました。
先に残高が0になった月を「完済日」として扱う、という素直なロジックに直してもらった結果、数字の挙動は腑に落ちる動きに戻りました。
ツッコむ側も、自分の前提を疑う
ちなみに、私から「これおかしいよね？」と立て続けに指摘した中には、実は自分の認識のほうが間違っていたものも混じっていました。
Claude Code に「いや、それは仕様通りで、こういう理由でこの結果になります」と返されて、「あ、そうだ」と納得した瞬間がいくつか。
AI に対するツッコミは大事です。でも、ツッコむ側も自分の前提を疑える状態でいる必要がある——これも今回の制作で実感したことです。
「AIだから間違っている」「自分は正しい」と決めつけて指摘し続けると、修正のラリーがいたずらに長引きます。
「自分が間違っているかもしれない」も同時に持っておく——AI と協働するときの一番地味で、一番効くスタンスかもしれません。
設計判断：このツールでこだわった点
変動金利の上昇シナリオを入れた
世の中にあるローンシミュレーターの多くは、金利が一定で動かない設計です。
でも実際の住宅ローン契約者の多くが変動金利を選んでいるのが日本の現実。そして今後は金利が上がる局面に入りつつあります。
借りた時点で「毎年少しずつ金利が上がっていくシナリオ」を想定できていた人は、おそらくそう多くないはずです(私自身もそうでした)。
だから、「もし金利が毎年 0.2%pt 上がっていったら？」「0.3%pt なら？」を試せる入力欄を必ず入れたかった。
このシミュレーターの主役級の機能になっています。
元利均等／元金均等、期間短縮型／返済額軽減型——両対応にした
もう一つの判断は、選択肢を絞らず両対応にしたことです。
| 軸 | 選べるもの |
|---|---|
| 返済方式 | 元利均等 ／ 元金均等 |
| 繰り上げ返済方式 | 期間短縮型 ／ 返済額軽減型 |
正直に書くと、自分でゼロから Excel で作ろうとしていたら、ここまでの両対応は絶対に完成させられなかったと思っています。
計算ロジックが4通りに枝分かれするうえに、変動金利の年次ステップが絡んでくる。シート参照が破綻して途中で投げ出す未来しか見えません。
ところが Claude Code 相手だと、「両対応にしてください」と一言追加するだけで、ロジックの分岐は AI が書く。
「両対応にしておこう」がほぼノーコストで実現する——この感覚は、Excel時代と決定的に違う部分でした。
計算結果は「ボタンを押したときだけ」表示する
入力欄の値を変えるたびに自動で再計算するのではなく、「計算する」ボタンを押したときだけ結果が表示される設計にしました。
理由は2つ：
- 入力項目が9つあるため、毎回再計算が走ると重く感じる
- 「自分で計算ボタンを押した」という意図が、結果への信頼感に効く
後者のほうが本質です。
シミュレーターは、結果を見る人が 「自分でこの条件で計算した」と納得できるかどうか で価値が決まる。
ボタンを押す動作は、そのための小さな儀式のようなものとして残しました。
単体HTMLファイル・外部ライブラリ不使用
最後に、ファイル構成は意図的にシンプルにしました。
- 1つの HTML ファイルに、CSS も JavaScript もすべて含める
- jQuery や Chart.js のような外部ライブラリ・外部CDN は使わない
- WordPress に iframe で埋め込んで使う
理由は管理コストです。
ライブラリを使うとバージョン管理が必要になり、メンテナンスの手間が増える。複数のサイトで同じツールを置きたいときも、ファイル1つで完結するほうが運用しやすい。
「外部CDN不使用」は最初の仕様プロンプトに入れていた一行ですが、これが効いたなと完成後に振り返って思いました。
このツールでわかること／わからないこと
数字を見るときに、忘れたくない限界があります。
わかること
- 自分のローン条件・想定運用利回りで、数字上どちらが多く残るか
- 金利上昇シナリオへの感度(変動金利選択者にとって特に重要)
- 期間短縮型と返済額軽減型の結果の違い
わからないこと
このシミュレーターは、以下の要素を意図的に簡略化しています。
- 税金：運用益には約 20% の課税がかかります。実質リターンは表示値より下がります
- インフレ：物価上昇は無視しています。実質的な購買力の変化は織り込まれません
- 運用リターンのブレ：年率 5% 前提でも、実際は年ごとに大きく上下します。一定値で計算した「概算」と理解してください
- 心理的な安心感：「借金が無い安心」「資産が積み上がる安心」のような数値化できない要素は出ません
- 積立投資のケース：今あるまとまった余剰資金を一度だけ投じる前提です。毎月積み立てる場合は別の計算になります
この5点を踏まえると、「数字の差は判断材料の一つ」という前提が見えてきます。
たとえば「資産運用が 30 万円多く残る」程度の差は、税金と運用ブレ次第で簡単にひっくり返ります。一方で「100 万円以上の差」が出ているなら、無視するには大きい数字です。
結論を一発で出すツールではなく、「自分が何を選ぶときに何を捨てているか」を可視化するツール——そう使ってもらえると、本来の意図に近いです。
同じやり方で自分用のツールを作りたい人へ
最後に、今回のステップを再掲します。同じ方法で自分用の何かを作りたい人向けです。
- 手元の素材を Claude AI に渡す：自分が書いた文章、解決したい課題のメモ、参考にしている記事など
- 「足りない変数があれば指摘してから、Claude Code 用プロンプトを作って」と頼む：これが本記事で何度も触れてきた一行です
- 質問返しに答える：自分の意図を素直に書く。決められない部分は「両方選べる形にしてほしい」でもOK
- 生成されたプロンプトを Claude Code に貼り付ける
- 動作確認しながら追加注文を投げる：違和感を感じたら遠慮なくツッコむ。ただし自分の認識違いの可能性も同時に持つ
注意点を一つだけ。
最初から完璧な仕様を狙う必要はありません。むしろ初稿を早く動かして、見えてきたものに対して足し算するほうが早く完成に向かいます。
私の場合、変動金利の上昇シナリオも、固定／変動の切替UIも、初稿の後で「足したい」と気づいて追加したものです。
「動くもの」を先に手元に持つ——これが Claude Code 時代の作り方の核だと、今回の制作で実感しました。
まとめ
- 「繰り上げ返済 vs 資産運用」に一律の正解はありません。自分の数字で見るほうが早い
- 数字を見るためのツールは、Claude AI で仕様詰め → Claude Code で実装 の2段階で作れる
- 非エンジニアでも、仕様を言語化する部分さえ自分でやれば、ブラウザで動くツールが手元に届く
- 完成したツールは、自分の条件を入れて何度でも戻ってくる場所になる
本記事のシミュレーターは、ページ内にそのまま埋め込んでいます。条件を変えると結論が逆転すること、ぜひご自身の数字で確かめてみてください。
姉妹サイト tobionoreal.com では、本記事と同じテーマを 「考え方」の側から整理した記事 を公開しています。
イールドギャップ、変動金利のリスクの正体、投資と並走できる人の条件——判断軸そのものを整理したい人は、合わせて読むと両輪が揃います。
コメント