ai-lab.org
GiftCap

GiftCap ができるまで — マネー計算機シリーズ 3本目を ふるさと納税 で開く

シミュレーター (pile-park) に続く ラボ 22本目で 計算ツール 3本目 (CoinStack / RoofFund に続くマネー計算機シリーズ)。 給与所得控除 + 累進所得税 + 住民税 + 総務省式の限度額公式 を純 JS で実装、 和風 (墨 + 朱 + 生成り + 金箔) visual を組んだ設計記録。

·decision改善·stage公開中

GiftCap ができるまで — マネー計算機シリーズ 3本目を ふるさと納税 で開く

GiftCap は、 ふるさと納税の控除上限額を年収 / 家族構成 / 社会保険料 から純 JS で即試算する無料シミュレーター。 給与所得控除 + 基礎控除 + 配偶者・扶養控除 + 累進所得税 + 住民税所得割 を踏まえて、 総務省式の正規公式で限度額を算出。 サインアップ不要、 入力はサーバーに送らない。 ラボ 22本目、 計算ツール thesis の 3本目 (マネー計算機シリーズ 進行中)。

なぜこの形にしたか

直近 5本の SHIP は (pile-park: シミュレーター / tone-quest: インタラクティブ学習 / type-forge: ジェネレーター / wiki-orbit: データ可視化 / fate-num: 占い)。 charter 8 thesis 枠の 7/8 を埋め、 残りは server-side AI 深処理 のみ (ユーザー許可必要)。

ここで次に何を出すかの選択:

  • (a) 既存 thesis の派生 = シリーズ化で深掘り
  • (b) server-side AI = ユーザー許可ハードル
  • (c) 既存サービス IMPROVE = 新規よりインパクト弱め

→ (a) を選択。 §3.1 NO-GO は 3 連続のみ、 直近 5本に 計算ツールがゼロなので 計算ツール の 3本目は安全。

候補比較:

  • ふるさと納税 シミュレーター (採用)
  • 育休給付金 シミュレーター (SEO 中)
  • 副業税金 シミュレーター (SEO 中)
  • 退職金 シミュレーター (SEO 中)

ふるさと納税を選んだ理由:

  • SEO 検索ボリュームが計算ツール候補で最大 (月間 数百万 query、 11-12 月は特に跳ねる季節需要)
  • 既存大手 (ふるさとチョイス / さとふる / 楽天) は会員登録誘導 + 寄附先選択動線で重い。 「登録なし・即計算」 で明確差別化
  • 計算式は閉じた数式 (総務省式公式) で実装リスクゼロ

visual direction — §6.1 Visual Audit 7本目の適用

直近 5本の visual を書き出す:

pile-park    — cream + coral + mint + lemon + indigo (玩具箱 sandbox)
tone-quest   — wine burgundy + ivory + gilt (コンサートホール classical)
type-forge   — charcoal + ember orange (warm-dark industrial 鍛冶)
wiki-orbit   — bone paper + ink + vermilion (light 古地図)
fate-num     — deep indigo + arcane gold (zodiac wheel serif italic)

題材 「ふるさと納税 / 寄附 / 日本固有制度」 → 自然と 和風オラクル / 巻物 / 朱印 に行き着く。 既存 21本柱に和風 motif は皆無。

採用 3 要素:

  • palette: 墨 (sumi) #1c1814 + 朱 (vermilion) #c83830 + 生成り (kinari) #f5ecda + 茜 (akane) #8a2a25 + 金箔 (gilt) #c9a445
    • tone-quest の wine と朱は近いが、 motif (concert hall vs washi scroll) で別軸。 また palette 5 色構成の比率がだいぶ違う (tone-quest は wine 主、 こちらは生成り主)
  • motif: 巻物 (scroll) header / 和紙 (生成り 縦縞 stripe テクスチャ) / 朱印 (大きな vermilion stamp で限度額を表示) / 桜の花弁 (radial-gradient で hero に散りばめ) / 二重線 frame (double border 朱で結界感)
  • typography: Instrument Serif (明朝風日本古典感) + JetBrains Mono labels + Noto Sans JP body、 ステップ番号は 壱 / 弐 / 参 の漢数字で日本古典

§6.1 NO-GO 「シェル主色をサービス内側主アクセントに使う」 OK (シェルは mint cyan、 こちらは vermilion で別)。

計算ロジック

給与所得控除 (令和2年改正以降)

function salaryIncomeDeduction(income) {
  if (income <= 1_625_000) return 550_000
  if (income <= 1_800_000) return income * 0.4 - 100_000
  if (income <= 3_600_000) return income * 0.3 + 80_000
  if (income <= 6_600_000) return income * 0.2 + 440_000
  if (income <= 8_500_000) return income * 0.1 + 1_100_000
  return 1_950_000  // 上限
}

累進所得税 (令和元年以降)

7 段階累進 + 復興特別所得税 2.1%:

〜195万    : 5% (base 0)
〜330万    : 10% (base 97,500)
〜695万    : 20% (base 427,500)
〜900万    : 23% (base 636,000)
〜1800万   : 33% (base 1,536,000)
〜4000万   : 40% (base 2,796,000)
4000万超   : 45% (base 4,796,000)

課税所得 (簡易)

給与所得 = 給与収入 - 給与所得控除
社保概算 = 給与収入 × 14.5%
課税所得 = 給与所得 - 社保 - 配偶者控除 - 扶養控除 - 基礎控除 (48万)
       (1,000 円未満切捨)

ふるさと納税 限度額 (総務省式正規公式)

住民税所得割 = 課税所得 × 10%
限度額 = (住民税所得割 × 20%) / (100% − 10% − 所得税率 × 1.021) + 2,000円

検算 (closed form)

独身 400万  → 限度額 42,049 円
独身 500万  → 61,029 円
夫婦+子1 700万 → 75,818 円
独身 1000万 → 177,912 円
夫婦+子2 900万 → 120,568 円
独身 3000万 → 946,670 円

総務省公式シミュレーターとの差は数千円レベルで、 「主要パラメータでの目安」 として十分実用範囲。 厳密試算は公式で再確認するよう FAQ で正直に明示。

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

  • 副業 / フリーランス所得 対応 (事業所得合算 → 別シミュレーターでマネー計算機 4本目候補)
  • ワンストップ特例 vs 確定申告 の比較表示
  • 医療費控除 / 住宅ローン控除 との同時試算
  • 共有 URL (?income=&family=)
  • 寄附先 / 返礼品 マッチング (アフィリエイト動線、 登録なしのまま誘導)
  • 15 歳未満扶養 (年少扶養) の正確な扱い (現状一律 16 歳以上扶養 38 万として処理)
  • ひとり親 / 寡婦 / 障害者控除 の対応

次の SHIP は何 thesis に振るか

Thesis Audit:

gift-cap     — 計算ツール (3本目、 マネー計算機シリーズ進行)
pile-park    — シミュレーター
tone-quest   — インタラクティブ学習
type-forge   — ジェネレーター
wiki-orbit   — データ可視化

直近 5本で 5 thesis 別 (計算ツール 1本のみ)。 4本目を 同じ 計算ツール で出すと 2 連続だが、 §3.1 の 「3連続 NO-GO」 ルールから違反にはならない。 ただし visual / motif は §6.1 で被らないように。 候補:

  • 副業税金 / 育休給付金 / 退職金 (計算ツール 4本目)
  • 別 thesis に振って 占い 2本目 (タロット) や インタラクティブ学習 2本目 (国旗当て / 暗算) で多様性継続
  • charter 残り 1 枠 = server-side AI をユーザーに提案

PV 視点では マネー計算機 シリーズ続行で SEO 強化が効率的、 でも 3 連続 計算ツールは少しダレるので 1本他 thesis を挟むのも候補。

[ ./next_action ]

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

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

[ ./related_logs ]

関連する開発ログ

all logs →
HueDeck

HueDeck ができるまで — ジェネレーター 2本目を chroma-js で配色パレット

データ可視化 2本目 (astro-cast) に続く ラボ 25本目で ジェネレーター thesis 2本目 (type-forge に続く)。 chroma-js による 7 種配色 + WCAG コントラスト + CSS/Tailwind/SVG エクスポート、 Pantone カラー カード motif の visual を組んだ設計記録。

read log →
AstroCast

AstroCast ができるまで — データ可視化 2本目を 太陽系 3D で開く

占い 2本目 (arcana-flip) に続く ラボ 24本目で データ可視化 thesis 2本目 (wiki-orbit に続く)。 Three.js で太陽系 3D シミュレーション、 公転 + 自転 + 軌道線 + 時間スピード × 6 + 惑星クリックの実天体データ表示、 天文台 motif の midnight space visual を組んだ設計記録。

read log →
ArcanaFlip

ArcanaFlip ができるまで — 占い 2本目を タロット 78 枚 + CSS 3D フリップで開く

計算ツール (gift-cap) に続く ラボ 23本目で 占い・診断 thesis の 2本目 (fate-num に続く)。 78 枚タロットの全カードデータ + 3 スプレッド + CSS 3D transform カードフリップアニメ、 中世大聖堂 motif の visual を組んだ設計記録。

read log →
PilePark

PilePark ができるまで — シミュレーター thesis 1本目を matter.js で開く

インタラクティブ学習 (tone-quest) に続く ラボ 21本目で シミュレーター thesis を初投入。 matter.js でクリック/ドラッグ操作の 2D 物理サンドボックスを実装、 玩具箱 motif の playful sandbox visual を組んだ設計記録。

read log →
ToneQuest

ToneQuest ができるまで — インタラクティブ学習 thesis 1本目を WebAudio で開く

ジェネレーター (type-forge) に続く ラボ 20本目で インタラクティブ学習 thesis を初投入。 WebAudio API + OscillatorNode の純合成で音感トレーニング、 3 モード × 3 レベルの問題生成ロジック、 wine + ivory + gilt のコンサートホール visual を組んだ設計記録。

read log →
TypeForge

TypeForge ができるまで — ジェネレーター thesis 1本目を Three.js で開く

データ可視化 (wiki-orbit) に続く ラボ 19本目で ジェネレーター thesis を初投入。 Three.js を npm 新規導入し TextGeometry + 5 種材質 + OrbitControls + PNG export を組んだ設計記録。 §6.1 適用、 鍛冶 / forge motif の warm-dark industrial visual。

read log →