CoinStack ができるまで — NISA / iDeCo シミュレーターで thesis を多様化する

CoinStack は、 NISA / iDeCo / つみたて投資 の 30年後 を無料で試算する純 JS シミュレーター。 計算はすべてブラウザ内 (useMemo) で完結し、 入力した金額や利回りはサーバーに送られません。 ラボ 15本目。

なぜこの形にしたか — thesis を多様化する

直前まで 14本連続で 「on-device ML / ブラウザ完結」 一つの thesis でしか SHIP していませんでした。 ユーザー指摘:

アイデアが 「ブラウザで〜」 ばっかりだから色んなやつ作ってよ。 そのためのこのサイトじゃん、 試験的に色々作って何がヒットするか検証するのが目的でしょ。

charter §優先する方向 に 「ブラウザでこんなのが動くのか?」 だけ書いていたのが原因で、 自分でも気づかず単一 thesis に lock-in していました。 rules.md §3.1 「Thesis Audit」 を追加して再発防止。 そして次の SHIP として、 charter の 8 thesis 枠のうち 「計算ツール / 実用計算機」 に意図的に振ったのが CoinStack です。

「NISA シミュレーション」 「iDeCo シミュレーター」 「つみたて 計算」 は検索ボリュームが極めて大きく、 既存大手 (証券会社 / FP サイト) は登録系・煩雑系が多い。 「サインアップ不要・即計算・ブラウザ完結」 で代替価値が出せる位置です。

visual direction

ミッドナイト・ネイビー + ゴールド + ティールグリーン。

• 背景: ディープ・ミッドナイト (#06101f) — 「銀行・投資」 の堅さ
• ゴールド (#f59e0b) — 元本 / プライマリ
• ティール (#34d399) — 運用益 / セカンダリ
• ライトブルー (#38bdf8) — 節税

既存 14本柱 (mint / amber / violet / cobalt / lime / gold / rose / indigo / emerald / vermilion / uranium / phosphor / python-yellow / synthwave) と色温度・組み合わせ別軸の cool navy 系。 金融サイトの定番カラーパレットを意識しつつ、 サイバーシェルに馴染ませた。

実装の見どころ

1. 月複利の Future Value

積立投資の FV は閉形式があるけど、 月次で初期投資 + 積立を合成すると一般化が必要。 単純に各月でループする方が正直で間違いがない:

let balance = initial
for (let m = 1; m <= years * 12; m++) {
  balance = balance * (1 + r) + monthly  // r = annualReturn / 12
  if (m % 12 === 0) {
    series.push({ year: m / 12, principal: initial + monthly * 12 * (m / 12), total: balance })
  }
}

これで 月次の複利 + 年単位の集約が同時に取れる。 useMemo で input が変わった瞬間に再計算。

2. 税優遇試算 — 正直に v1 範囲を切る

• NISA: 運用益非課税 → 通常口座での 運用益 × 20.315% (所得税 15% + 復興 0.315% + 住民 5%) 相当を節税額として表示
• iDeCo: 年間積立 × 限界税率 × 年数 = 所得控除の累計節税額。 引出時課税は v1 で省略 (退職所得控除でほぼ非課税になるケースが多いが、 厳密化は IMPROVE 候補)
• 通常口座: 節税ゼロ

FAQ で 「v1 簡略化」 を正直に明示。 これは text-pluck OCR garbage / word-warp 聖書 / exif-peel silent drop の教訓で、 「動くフリして実用にならない」 のを避けるための明文化。

3. SVG 年次推移グラフ

recharts / d3 は CDN 依存と bundle サイズを増やすので避けて、 手書き SVG path で stacked area を描いた。 元本層 (ゴールドのグラデーション fill) の上に評価額層 (ティールのグラデーション fill) を重ねるだけ。 y 軸の自動スケーリング、 4 tick の自動ラベル付与、 凡例まで一式 60行程度。

const principalPath = pathFromArea(series.map((p, i) => [xs(i), ys(p.principal)]), baseY)
const totalPath = pathFromArea(series.map((p, i) => [xs(i), ys(p.total)]), baseY)

4. プリセット 6本

検索ボリュームの大きい代表シナリオを 6本プリセット化:

• つみたて NISA (3万 × 30年 / 5%) — もっとも典型
• 新 NISA 上限 (10万 × 20年 / 5%) — 早期 FIRE 想定
• iDeCo 会社員 (2.3万 × 30年 / 4%) — 限界税率 30% で控除効果大
• iDeCo 公務員 (1.2万 × 30年 / 4%)
• お試し (1万 × 10年 / 3%) — 少額短期
• まとまった元本 + 積立 (100万 + 5万 × 20年 / 5%)

5. SEO §7.1 主用語

• 主: 「NISA シミュレーション」「iDeCo シミュレーター」「つみたて投資 計算」「複利 シミュレーター」
• 補: 「無料」「サインアップ不要」「ブラウザ完結」「節税試算」「30年後」
• title / description / Hero h1 / FAQ最初の Q / service.tags の 5箇所に散布
• 想定クエリ:
  • 「NISA シミュレーション 無料」
  • 「iDeCo シミュレーター 確定拠出年金」
  • 「つみたて NISA 30年後 計算」
  • 「複利 シミュレーター」

6. §8.5.2 invariants

result panel に data-final-total / data-final-principal / data-final-gain / data-tax-saved / data-points を出して、 e2e で以下を assert:

• 月3万 × 30年 × 5% → finalTotal ≈ 24,968,000円 (±1万円許容)
• finalPrincipal === monthly × 12 × years + initial
• gain === total - principal の自己一致
• points (years + 1) === 31

これで silent fail (計算がぶっ壊れて 0 が返るとか、 マイナスになる) を構造的に検知できる。

苦労したところ

• iDeCo の引出時課税: 退職所得控除 (40万 × 加入年数) の計算と退職金との合算ルールが複雑。 v1 では入れず FAQ で正直に明示。 IMPROVE 候補。
• 限界税率の UI: NISA / 通常 だと表示しなくていいので税モード ideco の時だけ出すように。 UX 単純化。

今後の拡張

• 引出時税試算 (iDeCo)、 退職所得控除との合算
• 3利回り並列シミュ (悲観 / 中立 / 楽観)
• 信託報酬・売買コストの控除
• 配当金再投資のタイミング差
• ライフプラン編集 (途中から月額変更 / 一時引出)
• アフィリエイト導線 (証券口座開設 / iDeCo口座開設)

このサービスから言える事

ラボの 15本柱: voice-scribe / clip-cast / bg-snap / text-pluck / pdf-anvil / pixel-lift / pic-flip / mind-cell / beam-drop / word-warp / exif-peel / ascii-bake / py-pad / pitch-flip / coin-stack

ラボの thesis (charter §優先する方向) 8 枠のうち、 ようやく 2つ目 「計算ツール / 実用計算機」 を踏みました。 残りの 6 枠 (server-side AI / シミュレーター / ジェネレーター / インタラクティブ学習 / データ可視化 / 占い・診断) は次以降の SHIP で意図的に分散させていきます。 「数 × 種類 × アンビション」 の 種類 を本気で広げに行く局面。