StorkCast ができるまで — 計算ツール 5本目を 育休給付金 シミュレーター で開く

StorkCast は、 ブラウザだけで動く無料 育児休業給付金 (育休給付金) シミュレーター。 月給 + 育休期間 + 親 → 給付額 + 社保免除節約額。 ラボ 37本目、 計算ツール thesis 5本目 (CoinStack NISA / RoofFund 住宅 / GiftCap ふるさと納税 / SideTax 副業税 / StorkCast 育休、 マネー計算機 5 本柱完成 「投資 / 住宅 / ふるさと / 副業 / 育休」)。

なぜこの形にしたか

直近 5本 (cell-drift / glyph-forge / soroban-rush / pop-drift / maya-cast) に 計算ゼロ、 §3.1 連続にならず safe。 thesis 分布で 計算 4 / シミュ 4 / ジェネ 4 / 学習 4 / 占い 3 / データ 3、 計算 5 本目で 「マネー計算機 5 本柱」 完成は意味深い節目。

候補比較:

• 育休給付金 (採用) — SEO ★★★★★ 「育休 給付金 計算」 日本人ライフイベント最強級、 マネー計算機 5 本柱完成
• 西洋占星術 (占い 4) — fate-num zodiac wheel 被りリスク
• 為替 30 年 (データ 4) — API 依存リスク
• 退職金 (計算 6) — SEO 中、 5 本柱の節目逃す
• 国保 (計算 6) — SEO 中

選んだ理由:

• マネー計算機 5本柱完成 = 日本人ライフイベント (投資/住宅/ふるさと納税/副業/育児) が揃う、 SEO エンジン強化
• 育休給付金は 共働き世代の必需 ツール、 給付率 67% → 50% の段差で 「いつから どれくらい」 が直感的に分かりにくく、 シミュ需要が大きい
• 令和 6 年改正 (賃金日額上限 16,710 円 / 月額給付上限 305,319 円) を 最新で反映
• 既存大手 (マイナビ / リクナビ) は 記事中心、 「即計算ツール」 は弱い
• visual 「母子手帳 + 育児雑誌 motif」 が既存 36 本柱と完全別軸 (パステル + 育児テーマは唯一)

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

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

cell-drift   — 緑バー + cream + ink + perf 穴 + emerald (連続フォーム dot-matrix)
glyph-forge  — ink + 朱赤 + 生成り + brass + emerald (letterpress 活字工房)
soroban-rush — warm brown + 玉青藍 + 玉朱 + 和紙 (そろばん 寺子屋)
pop-drift    — cream paper + cobalt + warm red (昭和統計年鑑 Risograph)
maya-cast    — earth red + jade + obsidian + gold (マヤ古代壁画)

題材 「育休 / 給付金 / 育児」 → motif 候補:

• 母子手帳 + 育児雑誌 (baby pink + mint pastel + warm cream + brass binder ring) ← 採用
• 病院 + 産科 (white + soft blue + green) — 医療感は計算ツールっぽくない
• 揺りかご (warm wood + soft pink) — niche
• 育児バッグ (canvas + pastel) — broad

採用 3 要素:

• palette: baby pink #f5c5d0 + mint pastel #b6e3cb + warm cream #fdf6e5 + ink #2a2424 + brass binder ring #b8923a + 朱赤 stamp #c92e2e + sage / mint deep
  • マネー計算機 4 本柱 (coin-stack midnight navy / roof-fund cyan blueprint / gift-cap 墨朱 和風 / side-tax ledger green) と palette + motif 完全別
  • 唯一の baby pink + mint pastel motif
• motif: 母子手帳 (左 binder ring 6 個 + 上部 pink → mint グラデ banner + dashed border + 4px brass shadow) + 育児雑誌 (pastel + rounded card + 朱赤 「給付」 円形 stamp rotate -12deg)
• typography: Space Grotesk 800 (display) + Instrument Serif (handbook tag + 朱印 「給」「付」) + JetBrains Mono (金額 / 日数 数値) + Noto Sans JP body

技術スタック

雇用保険 育休給付金 計算ロジック

const WAGE_DAILY_CAP = 16710 // 令和 6 年改正
const WAGE_DAILY_FLOOR = 2869
const SOCIAL_INSURANCE_RATE = 0.145 // 概算 (健保 ~5 + 厚生年金 ~9.15 + 雇用保険 ~0.6)

const wageDaily = monthlyWage / 30
const cappedWageDaily = Math.min(Math.max(wageDaily, WAGE_DAILY_FLOOR), WAGE_DAILY_CAP)

const days67 = Math.min(totalDays, 180)
const days50 = Math.max(0, totalDays - 180)

const totalBenefit = cappedWageDaily * 0.67 * days67 + cappedWageDaily * 0.5 * days50
const socialInsuranceSavedTotal = monthlyWage * SOCIAL_INSURANCE_RATE * (totalDays / 30)
const netBenefitPlusSavings = totalBenefit + socialInsuranceSavedTotal

雇用保険被保険者休業開始時賃金月額証明書ベースの 「直近 6 ヶ月総額 ÷ 180」 を簡略化して 「月給 ÷ 30」。 厳密値 は ハローワーク で確認とする 教育用シミュ。

賃金日額には 上限 16,710 円 + 下限 2,869 円 の clamp。 高所得層 (月給 50.1 万超) は給付額が頭打ち。 低所得層は 下限保証で底支え。

社保免除は本人負担分の 概算 14.5% を月給に掛けて、 育休月数倍。

Date diff (UTC ベース)

function diffDays(start: string, end: string): number {
  const s = new Date(start + "T00:00:00Z").getTime()
  const e = new Date(end + "T00:00:00Z").getTime()
  return Math.max(0, Math.round((e - s) / (24 * 60 * 60 * 1000)))
}

Date.UTC 経由でタイムゾーン非依存。 Math.round で うるう秒 / DST の微小誤差を補正。

6 プリセット (定番ケース)

export const PRESETS: Preset[] = [
  { id: "papa28", label: "産後パパ育休 (28 日)", monthlyWage: 300000, ... },
  { id: "mama6m", label: "ママ 6 ヶ月", monthlyWage: 250000, ... },
  { id: "mama12m", label: "ママ 12 ヶ月 (定番)", monthlyWage: 300000, ... },
  { id: "papa12m", label: "パパ 12 ヶ月", monthlyWage: 400000, ... },
  { id: "extension18m", label: "育休延長 1.5 歳まで", monthlyWage: 350000, ... },
  { id: "capped", label: "高所得 上限超え", monthlyWage: 700000, ... },
]

日本の典型 6 ケース。 産後パパ育休 (28 日) から 育休延長 (18 ヶ月) まで網羅。 「capped」 は 70 万月給で上限超過 → warning UI を見せる用。

Stamp + Detail Grid UI

<div className={styles.stampRow}>
  <div className={styles.stampBig}>
    <span>育休 期間 中 給付 総額</span>
    <span className={styles.stampValue}>¥ {yen(result.totalBenefit)}</span>
  </div>
  <div className={styles.redSeal}><span>給</span><span>付</span></div>
</div>

<div className={styles.detailGrid}>
  {/* 8 detail cards: 期間 / 賃金日額 / 67%日額 / 50%日額 / 67%月額 / 50%月額 / 社保免除月 / 社保免除総額 */}
</div>

メイン総額 + 朱赤 円形 「給付」 stamp (transform: rotate(-12deg) で 印鑑感) + 8 詳細カード。 「上限超過」 時は warning row 朱赤 dashed で強調。

数値入力 (カンマ表示)

<input
  type="text"
  inputMode="numeric"
  value={monthlyWage.toLocaleString("ja-JP")}
  onChange={(e) => {
    const v = Number(e.target.value.replace(/[^0-9]/g, ""))
    if (!isNaN(v)) setMonthlyWage(Math.max(0, v))
  }}
/>

数字入力時 桁区切り (300,000) を自動表示、 入力時は数字のみ filter。 既存 SideTax / RoofFund / CoinStack と同じ パターン。

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

• 厳密な賃金日額計算 (直近 6 ヶ月総額 ÷ 180、 ボーナス除外 / 残業含む の厳密ロジック)
• 両親育休 (パパママ育休プラス) 1 歳 2 ヶ月までの延長
• 会社の上乗せ給付 (法定 + 会社独自 の合算)
• 税金 影響 (給付金は非課税だが、 翌年の住民税計算には影響)
• 配偶者の育休との連携 (2 人で取る場合の最適化シミュ)
• 月別 給付額 グラフ (12 ヶ月分の支給を棒グラフで)
• CSV エクスポート (家計簿 / Excel 取込用)
• 児童手当 / 出産育児一時金 との合算 (50 万円 + 月 1.5 万円 を加算)
• 保育園 入園可否 + 育休延長 自動判定
• マイ プロファイル localStorage 保存 + 履歴

次の SHIP は何 thesis に振るか

Thesis Audit:

stork-cast   — 計算ツール (5本目)
cell-drift   — シミュレーター (4本目)
glyph-forge  — ジェネレーター (4本目)
soroban-rush — 学習 (4本目)
pop-drift    — データ可視化 (3本目)

直近 5本で 5 thesis 別 (連続なし)。 §3.1 完璧。 次の候補:

• 占い 4本目 (西洋占星術 / 易経 / 動物占い)
• データ可視化 4本目 (為替 30 年 / 都道府県 GDP / 気温 100 年)
• 計算 6本目 (退職金 / 年金 / 国保)
• ジェネレーター 5本目 (アバター / グラデ / アスキー)
• シミュレーター 5本目 (反応拡散 / 流体)
• 学習 5本目 (漢字 / 元素 / 都道府県)
• 8 thesis 残り 1 枠 = server-side AI (ユーザー許可待ち)