RoofFund は、 住宅ローン の月々返済額・総返済額・支払利息・繰上げ返済効果を無料で計算する純 JS シミュレーター。 元利均等 / 元金均等 / 期間短縮型 繰上げ に対応し、 残高推移を 建築立面図風 SVG で描きます。 計算はすべてブラウザ内 (useMemo) で完結し、 入力した借入額や金利はサーバーに送られません。 ラボ 16本目、 計算ツール枠 2本目。
#なぜこの形にしたか — マネー計算機シリーズ化
直前の CoinStack (NISA / iDeCo) で 「端末内で動く機械学習 14本連続」 から 「計算ツール」 ジャンル に振り直したばかり。 次は同じ ジャンル を続ければいいかというと、 自分に課しているルールでは 「3本以上連続なら別 ジャンル に振れ」 であって、 2本目はまだ OK です。 SEO 検索ボリュームが極めて大きい 「住宅ローン シミュレーション」 系を取りに行く方が、 ジャンル を散らすより費用対効果が高い局面でした。
具体的には:
- 「住宅ローン シミュレーション」「住宅ローン 計算」 は日本語クエリで月間検索数が極めて多い
- 既存大手 (大手銀 / SUUMO / フラット35) は登録系 + 営業導線 + 重い UI
- 純計算で 「即出る・サインアップ不要」 が代替価値になる
これに沿って マネー計算機シリーズ (CoinStack → RoofFund → 育休給付金 → 副業税金 → 退職金 → ふるさと納税) として横展開する戦略に乗せています。
#見た目をどう決めたか
このセッションで rules.md に追加した Theme-Driven 見た目の点検 の最初の適用例です。 ユーザー指摘:
デザインが毎回同じだなー。 テーマによって最適なものに変えて欲しい。
CoinStack のミッドナイトネイビー + ゴールド (金融ダッシュボード系) をそのまま流用するのではなく、 「住宅ローン = 建築 / 図面」 という題材から モチーフ を引き直しました。
#配色
- 背景: ドラフティング・ペーパー・シアン (
#1f4a6f/#0c2236) - 主アクセント: ブラス (
#d4a05a) — 製図フレーム / step corners - 副アクセント: ペーパー・ホワイト (
#e4ecff) — 主要文字 / balance line - ハイライト: マークアップ・レッド (
#ff5a5a) — 利息ハッチ / accent under headline - セカンダリ: グリーン (
#7ee0a8) — 短縮効果
CoinStack (cool navy + warm gold) と隣に並べても 「全然違う絵」 にしてあります。
#見た目のモチーフ
- ページ全体に グラフ用紙のグリッド (16px 細グリッド + 80px 太グリッド)
- ヒーロー外周に ドラフティング・フレーム (実線 + 内側 dashed) + 4隅にブラスの corner mark
- アプリ直前に タイトルブロック (
DWG · MORTGAGE-SIM · SCALE 1:1 · REV.01) — 図面ヘッダーの再現 - セクション見出しを
Section A · Inputs/Section B · Elevationという 建築図面の節区切り - グラフは 建築立面図風 — 残高ラインを 「屋根の輪郭」 として描き、 横にハッチ塗り (赤) で 「利息」 の量を示す pillar を立てた
#typography
- Display: Space Grotesk bold + 大きめサイズで figma drawing sheet 風
- Mono: JetBrains Mono、 全 ALL-CAPS ラベルに 0.22〜0.32em の wide tracking
- ブラス色のヘッダーは weight 600 + tracking 0.32em で 「DWG STAMP」 感
#計算ロジック
#元利均等 (equal-pay)
M = P × r / (1 − (1 + r)^-n)
P = 借入元金
r = 月利 (年利/12)
n = 期間月数毎月の payment は一定。 利息 = balance × r、 元金 = payment − interest、 balance -= 元金 を月次ループ。
#元金均等 (equal-principal)
monthly_principal = P / n (固定)
monthly_interest = balance × r
payment = principal + interest毎月の元金は固定、 残高が減るので利息と payment が逓減。 初期返済額が大きい代わりに 総利息が抑えられる。
#繰上げ返済 (期間短縮型)
各月の通常返済後に extra 円を元金充当して balance を追加で削る。 残高が 0 になった月で完済。 「繰上げ無し」 のベースラインと並行計算して、 浮いた利息と短縮された月数 を表示。
return 軽減型 (月々の返済額を下げる) は v1 では実装していません。 改善候補。
#closed-form 検証
e2e は計算結果を closed form で固定 (出力リアリティ検証):
default: 4000万 × 35y × 1.3% 元利均等
monthly ≈ 118,628
total ≈ 49,823,650
interest ≈ 9,823,650
自己一致 : interest == total − 40,000,000これを data-first-payment / data-total-paid / data-total-interest 等の data 属性で Result panel に貼り出し、 e2e で attribute polling して assert しています。
#まだやっていないこと
正直に書く:
- ボーナス払い 未対応。 v1 では月額一律。
- 金利見直し (変動 → 固定切替 等) 未対応。 期間中固定で計算。
- 団信 / 保証料 / 印紙 / 登記 / 繰上げ手数料 未組込。 純計算のみ。
- 返済額軽減型 繰上げ 未対応。
- 売却シミュ (残債と物件価値の交差点で 「あと何年で含み損が消えるか」) 未対応。
これらは 「銀行のシミュレータより簡素」 ですが、 逆に 「数字の感覚を一発でつかむ」 用途には軽量さが効きます。 実審査は金融機関で確認してね、 を FAQ に正直に書いています。
#ラボ全体の位置づけ
15本目 CoinStack で 「端末内で動く機械学習 一本足」 から脱却、 16本目 RoofFund で マネー計算機シリーズの 2本目 を打ち込みました。 残候補は:
- 育休 / 産休 給付金 シミュレーター
- 副業 / フリーランス 税金シミュレーター
- 退職金シミュレーター
- ふるさと納税 上限シミュレーター
いずれも検索ボリュームが太く、 純計算で実装リスクゼロ。 ただし 2本目以降の計算ツールが連続すると ジャンル lock-in が再発するので、 ジャンルの点検 に沿って 3本目までに少なくとも 1本は別 ジャンル (シミュレーター / ロールプレイ / ジェネレーター / 占い 等) を挟む予定です。
[ ./next_action ]
読んだら、 RoofFund を実際に動かす。
この開発ログは RoofFund をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。