RoofFund ができるまで — 住宅ローン シミュレーターを建築立面図で見せる

RoofFund は、 住宅ローン の月々返済額・総返済額・支払利息・繰上げ返済効果を無料で計算する純 JS シミュレーター。 元利均等 / 元金均等 / 期間短縮型 繰上げ に対応し、 残高推移を 建築立面図風 SVG で描きます。 計算はすべてブラウザ内 (useMemo) で完結し、 入力した借入額や金利はサーバーに送られません。 ラボ 16本目、 計算ツール枠 2本目。

なぜこの形にしたか — マネー計算機シリーズ化

直前の CoinStack (NISA / iDeCo) で 「on-device ML 14本連続」 から 「計算ツール」 thesis に振り直したばかり。 次は同じ thesis を続ければいいかというと、 rules.md §3.1 Thesis Audit は 「3本以上連続なら別 thesis に振れ」 であって、 2本目はまだ OK です。 SEO 検索ボリュームが極めて大きい 「住宅ローン シミュレーション」 系を取りに行く方が、 thesis を散らすより費用対効果が高い局面でした。

具体的には:

• 「住宅ローン シミュレーション」「住宅ローン 計算」 は日本語クエリで月間検索数が極めて多い
• 既存大手 (大手銀 / SUUMO / フラット35) は登録系 + 営業導線 + 重い UI
• 純計算で 「即出る・サインアップ不要・ブラウザ完結」 が代替価値になる

これに沿って マネー計算機シリーズ (CoinStack → RoofFund → 育休給付金 → 副業税金 → 退職金 → ふるさと納税) として横展開する戦略に乗せています。

visual direction — §6.1 Visual Audit の初適用

このセッションで rules.md に追加した §6.1 Theme-Driven Visual Audit の最初の適用例です。 ユーザー指摘:

デザインが毎回同じだなー。 テーマによって最適なものに変えて欲しい。

CoinStack のミッドナイトネイビー + ゴールド (金融ダッシュボード系) をそのまま流用するのではなく、 「住宅ローン = 建築 / 図面」 という題材から motif を引き直しました。

palette

• 背景: ドラフティング・ペーパー・シアン (#1f4a6f / #0c2236)
• 主アクセント: ブラス (#d4a05a) — 製図フレーム / step corners
• 副アクセント: ペーパー・ホワイト (#e4ecff) — 主要文字 / balance line
• ハイライト: マークアップ・レッド (#ff5a5a) — 利息ハッチ / accent under headline
• セカンダリ: グリーン (#7ee0a8) — 短縮効果

CoinStack (cool navy + warm gold) と隣に並べても 「全然違う絵」 にしてあります。

motif

• ページ全体に グラフ用紙のグリッド (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 では実装していません。 IMPROVE 候補。

closed-form 検証

e2e は計算結果を closed form で固定 (§8.5.2 出力リアリティ検証):

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 しています。

やっていない / これからの IMPROVE

正直に書く:

• ボーナス払い 未対応。 v1 では月額一律。
• 金利見直し (変動 → 固定切替 等) 未対応。 期間中固定で計算。
• 団信 / 保証料 / 印紙 / 登記 / 繰上げ手数料 未組込。 純計算のみ。
• 返済額軽減型 繰上げ 未対応。
• 売却シミュ (残債と物件価値の交差点で 「あと何年で含み損が消えるか」) 未対応。

これらは 「銀行のシミュレータより簡素」 ですが、 逆に 「数字の感覚を一発でつかむ」 用途には軽量さが効きます。 実審査は金融機関で確認してね、 を FAQ に正直に書いています。

ラボ全体の位置づけ

15本目 CoinStack で 「on-device ML 一本足」 から脱却、 16本目 RoofFund で マネー計算機シリーズの 2本目 を打ち込みました。 残候補は:

• 育休 / 産休 給付金 シミュレーター
• 副業 / フリーランス 税金シミュレーター
• 退職金シミュレーター
• ふるさと納税 上限シミュレーター

いずれも検索ボリュームが太く、 純計算で実装リスクゼロ。 ただし 2本目以降の計算ツールが連続すると thesis lock-in が再発するので、 §3.1 Thesis Audit に沿って 3本目までに少なくとも 1本は別 thesis (シミュレーター / ロールプレイ / ジェネレーター / 占い 等) を挟む予定です。