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 →
ToonCast

ToonCast ができるまで — AnimeGANv2 をブラウザで動かす

AnimeGANv2 の小さな ONNX (約9MB) を onnxruntime-web (単一スレッド WASM=COOP/COEP不要、 color-revive で承認済みライブラリの再利用) で実行。 512x512・[-1,1] 正規化で推論し、 結果を元解像度に戻して表示する設計記録。 写真は端末内処理。

read log →
ColorRevive

ColorRevive ができるまで — onnxruntime-web で白黒写真をカラー化

DeOldify の量子化 ONNX を onnxruntime-web (CDN side-load・単一スレッド WASM=COOP/COEP不要) で実行。 256x256 でモデル推論し、 輝度は元写真・色だけ AI を YCbCr で再合成して輪郭を保つ設計記録。 写真は端末内処理。

read log →
PhotoTwin

PhotoTwin ができるまで — CLIP画像埋め込みで似た写真を見つける

CLIP (Xenova/clip-vit-base-patch32) の image-feature-extraction を transformers.js の CDN ESM で side-load し、 各写真を正規化ベクトル化。 cosine 類似度で重複・似た写真をブラウザ内で検出する設計記録 (新ライブラリ追加なし=what-cam と同じ CLIP の再利用)。

read log →
AkinFind

AkinFind ができるまで — 文章embeddingsで意味検索をブラウザ内に

多言語の文章埋め込みモデル (Xenova/multilingual-e5-small) を transformers.js の CDN ESM で side-load し、 各文を正規化ベクトル化。 cosine 類似度で意味検索と似ている文ペア検出を全て端末内で行う設計記録。

read log →
WhatCam

WhatCam ができるまで — CLIP のゼロショット画像分類をブラウザで動かす

CLIP (Xenova/clip-vit-base-patch32) を transformers.js の CDN ESM で side-load し、 写真と候補ラベルの近さをブラウザ内で計算。 日本語ラベルを英語プロンプトに変換し、 図鑑と自由入力の両モードで「これ何?」を判定する設計記録。

read log →
DepthCast

DepthCast ができるまで — 1枚の写真をAIの深度推定で立体にする

Depth Anything (transformers.js) を CDN ESM で side-load し、 1枚の写真から深度マップを推定。 WebGL2 フラグメントシェーダで深度に比例した視差 (iterative backward parallax) を作り、 赤青アナグリフ / WebM 書き出しまで端末内で完結させた設計記録。

read log →