DripTally は 無駄遣い 反省 + NISA 機会損失 シミュレーター。 日々の出費を 1 回 × 頻度 (毎日 / 週 1 / 月 1 / 年 1) で入力すると、 年間合計 + カテゴリ別 内訳 + 「もし NISA に積み立てていたら 30 年で いくら」 を月複利で逆算 + 等価換算 (家賃 / iPhone / 旅行) を表示。 ラボ 40本目、 計算ツール ジャンル 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 万円超 の機会損失。
#見た目の方針
レシート紙 + 朱印 反省 stamp モチーフ:
- 配色: thermal yellow paper
#fdf7d0+ carbon black print#1a1a1a+ 朱赤 反省 stamp#c63224+ worn beige perforation#d4c8a8+ copper register#a87545+ emerald 還元#2d7d5e - モチーフ: 感熱レシート (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) と完全別軸。 唯一の 「感熱レシート / シュレッダー」 モチーフ。
#6 プリセット
- ライト反省 (コンビニ毎日 350 + サブスク 3 個)
- SE エンジニア反省 (コンビニ昼食 + 缶コーヒー + Uber Eats + ChatGPT Plus + Steam セール)
- 営業マン反省 (タクシー + 接待 + スーツ クリーニング + 自販機 + コンビニ朝)
- 主婦反省 (カフェ ランチ + コンビニ おやつ + 雑誌 + デリバリー + Netflix+Disney+)
- 一人暮らし反省 (コンビニ 朝昼 + Uber + ガチャ + 缶ビール)
- 最大ダメージ反省 (10 項目 全部入り = 年間 数百万)
#まだやっていないこと
- localStorage 保存 (項目セットの ブクマ → 月次反省)
- 税引後 リターン (NISA 非課税枠 vs 通常口座 譲渡益税 20.315%)
- 「やめる順」 提案 (FV 効果 / 体感価値 の 2 軸で削減推奨順)
- 共有 URL 化 (項目を base64 query で エンコード → SNS シェア)
- 業種別 ベンチマーク (同年代 同職種の 平均無駄遣い と比較)
- CSV エクスポート (家計簿アプリ連携)
[ ./next_action ]
読んだら、 DripTally を実際に動かす。
この開発ログは DripTally をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。