AI Dev Lab
DripTally

DripTally ができるまで — 計算ツール 7本目を 無駄遣い × NISA 機会損失で開く

計算ツール thesis 7本目 (coin-stack / roof-fund / gift-cap / side-tax / stork-cast / grad-fund / drip-tally、 マネー計算機 7 本柱)。 頻度係数 (365/52/12/1) で 年額換算 + 月複利 FV (CoinStack 再利用) + 11 カテゴリ 色分け + 6 等価換算 + 感熱レシート (CSS mask zig-zag) + 朱印 反省 stamp motif で組んだ設計記録。

·decision改善·stage公開中

DripTally ができるまで — 計算ツール 7本目を 無駄遣い × NISA 機会損失で開く

DripTally は 無駄遣い 反省 + NISA 機会損失 シミュレーター。 日々の出費を 1 回 × 頻度 (毎日 / 週 1 / 月 1 / 年 1) で入力すると、 年間合計 + カテゴリ別 内訳 + 「もし NISA に積み立てていたら 30 年で いくら」 を月複利で逆算 + 等価換算 (家賃 / iPhone / 旅行) を表示。 ラボ 40本目、 計算ツール thesis 7本目 (CoinStack NISA / RoofFund 住宅 / GiftCap ふるさと納税 / SideTax 副業税 / StorkCast 育休 / GradFund 教育費 / DripTally 無駄遣い、 マネー計算機 7 本柱 で 投資 / 住宅 / ふるさと / 副業 / 育休 / 教育費 / 浪費の表裏)。

なぜこの形にしたか

外部 AI の 90 案リストから 「¥0 月コスト + PV 巨大」 候補の 3 本目として 案 47 「無駄遣い反省会」 を選定。 「サブスク 解約 / 無駄遣い シミュレーター / 出費 見直し / コンビニ 1 日 350 円 30 年」 系の検索意図は 「自分の浪費を 数字で見たい」 で、 純 JS + 月複利 FV で十分応えられる。 CoinStack の月複利 FV エンジンを そのまま流用、 「貯める」 (CoinStack) と 「漏らさない」 (DripTally) の表裏が揃った。

技術スタック

頻度係数で年額換算 + 月複利 FV

const FREQ_PER_YEAR = {
  daily: 365, weekly: 52, monthly: 12, yearly: 1,
} as const

function yearlyOf(item: SpendItem): number {
  return item.amount * FREQ_PER_YEAR[item.frequency]
}

// 月複利 FV: もし全項目の年額 ÷ 12 を毎月 NISA に積み立てていたら
function monthlyFV(monthlyPMT: number, annualRate: number, years: number): number {
  if (annualRate === 0) return monthlyPMT * years * 12  // 線形 fallback
  const r = annualRate / 12
  const n = years * 12
  return monthlyPMT * ((Math.pow(1 + r, n) - 1) / r)
}

年利 0 / 1 / 3 / 5 / 7% の 5 段階、 期間 10 / 20 / 30 年。 r=0 で 0 除算しないよう線形 fallback、 「貯金箱 シナリオ」 として残す。

11 カテゴリ自動色分け

const CATEGORY_COLOR = {
  convenience: "#c63224",   // コンビニ 朱
  subscription: "#a87545",  // サブスク copper
  impulse: "#7a2a2a",       // 衝動買い maroon
  dining: "#b8923a",        // 外食 brass
  transport: "#2d5a8b",     // タクシー cobalt
  cafe: "#6a3a28",          // カフェ コーヒー brown
  vending: "#4a6b3d",       // 自販機 sage
  fee: "#5a5a5a",           // 手数料 gray
  gacha: "#8a2a8a",         // 課金 purple
  vice: "#3a2a1a",          // 酒タバコ tar
  etc: "#8a8a8a",
}

カテゴリは Map で集計 → 全項目 年額の合計に対する pct で 横棒 segment を width: ${pct*100}% 直接付与、 横一本のバーで 比率が見える。

等価換算 6 種

const EQUIVALENCES = [
  { label: "家賃 (都内 1K 7 万)", unitYen: 70000, suffix: "ヶ月分" },
  { label: "iPhone 15 Pro (15 万)", unitYen: 150000, suffix: "台分" },
  { label: "海外旅行 5 日 (15 万)", unitYen: 150000, suffix: "回分" },
  { label: "温泉 1 泊 (3 万)", unitYen: 30000, suffix: "回分" },
  // ...
]
const count = totalYearly / unitYen

「年 30 万円 = iPhone 2.0 台分」 のような直感的換算を 6 種同時表示。

コンビニ 350 円 × 30 年 = 886 万円 の実数

350 × 365 = 127,750 円/年 → 月額 10,646 円 → NISA 5% 月複利 30 年 (360 ヶ月):

FV = 10646 × ((1.00417^360 - 1) / 0.00417)
   ≈ 10646 × 832.26
   ≈ 8,860,000 円

単純合計 (127,750 × 30 = 383 万円) の 2.3 倍 に膨らむのが月複利の威力。 「コンビニ 1 日 600 円」 だと 30 年で 1,500 万円超 の機会損失。

visual direction

レシート紙 + 朱印 反省 stamp motif:

  • palette: thermal yellow paper #fdf7d0 + carbon black print #1a1a1a + 朱赤 反省 stamp #c63224 + worn beige perforation #d4c8a8 + copper register #a87545 + emerald 還元 #2d7d5e
  • motif: 感熱レシート (CSS mask の zig-zag radial-gradient で上下にミシン目) + cash register top bar (黒地 + cream stripe) + 朱赤 円形 「反省」 stamp (rotate -12deg) + バーコード風 repeating-linear-gradient + ボトム DT--AI-LAB ID
  • typography: JetBrains Mono (receipt mono-print) + Space Grotesk 800 (display + 反省 タイトル) + Instrument Serif italic (朱印 + 反省 stamp + 等価換算 タイトル)

既存 マネー計算機 6 本柱 (coin-stack midnight navy / roof-fund cyan blueprint / gift-cap 墨朱和風 / side-tax ledger green / stork-cast baby pink mint 母子手帳 / grad-fund cream parchment maroon) と完全別軸。 唯一の 「感熱レシート / シュレッダー」 motif。

6 プリセット

  • ライト反省 (コンビニ毎日 350 + サブスク 3 個)
  • SE エンジニア反省 (コンビニ昼食 + 缶コーヒー + Uber Eats + ChatGPT Plus + Steam セール)
  • 営業マン反省 (タクシー + 接待 + スーツ クリーニング + 自販機 + コンビニ朝)
  • 主婦反省 (カフェ ランチ + コンビニ おやつ + 雑誌 + デリバリー + Netflix+Disney+)
  • 一人暮らし反省 (コンビニ 朝昼 + Uber + ガチャ + 缶ビール)
  • 最大ダメージ反省 (10 項目 全部入り = 年間 数百万)

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

  • localStorage 保存 (項目セットの ブクマ → 月次反省)
  • 税引後 リターン (NISA 非課税枠 vs 通常口座 譲渡益税 20.315%)
  • 「やめる順」 提案 (FV 効果 / 体感価値 の 2 軸で削減推奨順)
  • 共有 URL 化 (項目を base64 query で エンコード → SNS シェア)
  • 業種別 ベンチマーク (同年代 同職種の 平均無駄遣い と比較)
  • CSV エクスポート (家計簿アプリ連携)

次の SHIP は何 thesis に振るか

無料運営 (¥0/月) 候補の次 (4 本目以降):

  • 89 一人暮らし 逆算購入 (計算 8本目)
  • 48 家賃 値下げ 交渉メール (ジェネレーター 6本目)
  • 54 自治体補助金 洗い出し (データ可視化系)
  • 30 請求書 催促代行 (ジェネレーター 7本目)

[ ./next_action ]

読んだら、 DripTally を実際に動かす。

この開発ログは DripTally をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。