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 をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。

[ ./related_logs ]

関連する開発ログ

all logs →
BioWave

BioWave ができるまで — バイオリズムを正弦波で描く

生年月日からの経過日数を使い、 身体23/感情28/知性33日の sin 波で調子を計算。 ゼロ交差を要注意日として抽出し、 2人の誕生日差から cos で位相一致度=相性を算出。 占い手帳 motif で 組んだ サービス設計記録。

read log →
GanttPad

GanttPad ができるまで — 日付軸タイムラインのレイアウト計算

タスクの開始/終了日から全体期間を求め、 各バーの offset(日数) と duration を算出して SVG に配置。 期間に応じて日/週/月の目盛りを自動切替し、 今日ライン・週末シェード・進捗塗りを描く。 プランニングボード motif で 組んだ サービス設計記録。

read log →
HeirShare

HeirShare ができるまで — 相続税の早見表ロジックを実装する

家族構成から法定相続人と法定相続分を判定し、 基礎控除 → 課税遺産総額 → 法定相続分按分 → 速算表 → 相続税の総額 → 配偶者の税額軽減 (法定相続分 or 1.6億) という早見表と同じ流れを純 JS で実装。 相続関係図 motif で 組んだ サービス設計記録。

read log →
ChromaLens

ChromaLens ができるまで — 色覚シミュレーションとダルトナイズ補正

色覚特性 (1型/2型/3型) を 3×3 色変換行列でシミュレートし、 ダルトナイズ法 (失われる色差を別チャンネルへ再配分) で 区別しやすく補正。 画像処理は全て Canvas で端末内。 検眼/カラーチャート motif で 組んだ サービス設計記録。

read log →
GridNine

GridNine ができるまで — 唯一解の数独をブラウザで生成する

MRV バックトラッキングで完成盤を作り、 セルを抜くたびに解の個数を 2 で打ち切り数えて『唯一解』を保ったまま穴掘り。 候補メモ・重複ハイライト・ヒント・タイマーを 文庫パズル誌 motif で 組んだ サービス設計記録。

read log →
PlotPad

PlotPad ができるまで — ブラウザで動く関数グラフ電卓

式の解析・評価・記号微分は mathjs に委譲し、 canvas に 1 ピクセル刻みでサンプリング描画 (発散点で線を切る) + ドラッグ平行移動 + カーソル基準ズーム + 導関数の重ね描き を 自前実装。 グラフ用紙 motif で 組んだ サービス設計記録。

read log →