AI Dev Lab
SoloRoost

SoloRoost ができるまで — 計算ツール 8 本目を 一人暮らし 逆算で開く

計算ツール thesis 8 本目 (coin-stack / roof-fund / gift-cap / side-tax / stork-cast / grad-fund / drip-tally / solo-roost、 マネー計算機 8 本柱)。 4 エリア × 3 プラン 家賃 base + 10 項目初期費用 + 9 項目 黄金比 配分 + 初月準備金 + 段ボール kraft + マステ + 引越しチェックリスト motif (kraft #d5b894 + 段ボール #6a4828 + マステ pastel + emerald ✓) で組んだ設計記録。

·decision改善·stage公開中

SoloRoost ができるまで — 計算ツール 8 本目を 一人暮らし 逆算で開く

SoloRoost は 一人暮らし 逆算 セットアップ 計算機。 月手取り + 居住エリア + 部屋プラン + 引越し元 + 家具家電持参度 から、 引越し 初期費用 10 項目内訳 + 月次 黄金比 予算配分 9 項目 + 初月準備しておきたい現金 を試算。 ラボ 41 本目、 計算ツール thesis 8 本目 (CoinStack NISA / RoofFund 住宅 / GiftCap ふるさと納税 / SideTax 副業税 / StorkCast 育休 / GradFund 教育費 / DripTally 無駄遣い / SoloRoost 一人暮らし)。

なぜこの形にしたか

外部 AI の 90 案リストから 「¥0 月コスト + PV 巨大」 候補の 4 本目として 案 89 「一人暮らし 逆算購入」 を選定。 「一人暮らし 初期費用 / 引越し費用 計算 / 月予算 黄金比」 系の検索意図は 「就職 / 進学 / 上京で 一人暮らしを始めるが、 トータルでいくら必要か」 で、 純 JS + 静的データ で 十分応えられる。 既存大手 (SUUMO / アットホーム) は 「物件 1 軒分の見積」 が主目的で 「ライフプラン 逆算」 は弱い。

技術スタック

家賃 base 表 (4 エリア × 3 プラン)

const RENT_BASE = {
  tokyo23:        { studio: 78_000, "1k":  95_000, "1ldk": 138_000 },
  "tokyo-suburb": { studio: 62_000, "1k":  75_000, "1ldk": 105_000 },
  ordinance:      { studio: 52_000, "1k":  62_000, "1ldk":  82_000 },
  regional:       { studio: 42_000, "1k":  50_000, "1ldk":  65_000 },
} as const

SUUMO / HOME'S / 国交省 住宅市場動向調査 ベースの 中央値帯。

初期費用 = 家賃 × 4.6 + 固定費 + 引越し + 家具家電

const initialRows = [
  { label: "敷金 (家賃 1 ヶ月)",     amount: rent },
  { label: "礼金 (家賃 1 ヶ月)",     amount: rent },
  { label: "前家賃 (入居月分)",       amount: rent },
  { label: "仲介手数料 (1.1 ヶ月)",   amount: rent * 1.1 },
  { label: "火災保険 2 年",          amount: 18_000 },
  { label: "鍵交換",                amount: 13_000 },
  { label: "保証会社 (0.5 ヶ月)",   amount: rent * 0.5 },
  { label: "引越し代",               amount: MOVING_COST[origin] },
  { label: "家具家電 一式",          amount: FURNITURE_COST[furniture] },
  { label: "雑費",                  amount: 15_000 },
]
const initialTotal = initialRows.reduce((acc, r) => acc + r.amount, 0)

家賃 8 万 + 上京 (16.5 万) + 家具家電 標準 (25 万) = 初期費用 ~78 万

引越し代 4 段階

const MOVING_COST = {
  samecity:        30_000,   // 同市内 単身パック
  sameregion:      55_000,   // 同地方圏
  interregion:     95_000,   // 地方跨ぎ
  longdistance:   165_000,   // 上京 / 北海道沖縄
}

家具家電 4 段階

const FURNITURE_COST = {
  owned:        0,           // 全部持参 (実家家電を運ぶ)
  minimum: 120_000,          // 冷蔵 + 洗濯 + 電子レンジ + 寝具 + 食器 + 物干し
  standard: 250_000,         // + TV + ベッド + ソファ + デスク + チェア
  full:    500_000,          // + ドラム式 + 4K TV + ロボ掃除機
}

月次 黄金比 9 配分

const ALLOCATION = [
  { key: "rent",    pct: 0.27, label: "家賃 + 共益費" },
  { key: "food",    pct: 0.15, label: "食費" },
  { key: "utility", pct: 0.06, label: "光熱" },
  { key: "comm",    pct: 0.04, label: "通信" },
  { key: "trans",   pct: 0.05, label: "交通" },
  { key: "social",  pct: 0.10, label: "交際 / 外食" },
  { key: "hobby",   pct: 0.07, label: "趣味" },
  { key: "saving",  pct: 0.20, label: "貯蓄 / 投資" },
  { key: "buffer",  pct: 0.06, label: "予備費" },
]  // 合計 1.00

「貯蓄 20% を確保しつつ 家賃 27% に抑える」 設計から逆算。 横棒 segment + 凡例 で 9 色 比率可視化。

初月準備金 = 初期費用 + 当月生活費 + 1 ヶ月余裕

const monthlyLivingExFood = monthlyAllocation
  .filter((a) => a.key !== "rent")
  .reduce((acc, a) => acc + a.amount, 0)
const firstMonthCash = initialTotal + monthlyLivingExFood + takehome  // 余裕 = 1 か月分手取り

朱赤 「初月準備」 円形 stamp で 大型表示。 失職リスクと 引越し直後のブレを考えて 「これくらいは口座に」 という安心ライン。

visual direction

段ボール kraft paper + 黒マジック + マスキングテープ + 引越しチェックリスト motif:

  • palette: kraft paper #d5b894 + 段ボール深 #6a4828 + 黒マジック #1a1a1a + マステ pastel #f4d49f + emerald ✓ #2d7d5e + 朱赤 警告 #c63224 + cream sticky note #fff5d6
  • motif: 段ボール風 cross-stripe 罫線 (repeating-linear-gradient で 36px loop) + 上端に マスキング テープ 2 枚 (rotate -4deg/3deg、 ::before/::after) + 黒マジック太字 タイトル ribbon + 緑 ✓ チェックボックス 10 項目 + sticky note (cream + 2px black border + box-shadow) で 「推奨家賃 上限」 + 朱赤 「初月準備」 stamp (rotate -10deg) + 4 隅の dashed 罫線
  • typography: Space Grotesk 800 (marker display) + JetBrains Mono (numerics + readout) + Instrument Serif italic (見積書 / アクセント + sticky note タイトル) + Noto Sans JP body + 漢数字ステップ (壱/弐/参)

既存 マネー計算機 7 本柱 (coin-stack midnight navy / roof-fund cyan blueprint / gift-cap 墨朱和風 / side-tax ledger green / stork-cast baby pink mint / grad-fund cream parchment maroon / drip-tally thermal yellow receipt) と完全別軸。 唯一の 「段ボール kraft + 引越しチェックリスト」 motif。

6 プリセット

  • 上京 新卒 22 歳 (都内 23 区 1K / 標準持参 / 手取り 20 万)
  • U ターン 28 歳 (政令市 1LDK / 全部持参 / 手取り 26 万)
  • 地元就職 24 歳 (地方 ワンルーム / 最低限 / 手取り 18 万)
  • 実家から 26 歳 (首都圏 1K / 標準 / 手取り 23 万)
  • ハイスペ 30 歳 (都内 1LDK / フル / 手取り 38 万)
  • 最小コース 23 歳 (地方 ワンルーム / 全部持参 / 手取り 16 万)

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

  • 物件URL 自動取得 (SUUMO API / スクレイピング で 実物件で再計算)
  • 敷礼ゼロ オプション トグル (関西式 / フリーレント)
  • 会社家賃補助 控除入力 (天引き or 補助で 実質負担減)
  • 学生向け (奨学金 + 親仕送り 前提の予算配分テンプレ)
  • 共同生活/同棲 (2 人手取り合算 + 家賃 50/50)
  • CSV エクスポート (引越しチェックリスト 印刷用)

次の SHIP は何 thesis に振るか

無料運営 (¥0/月) 候補の次 (5 本目以降):

  • 48 家賃 値下げ 交渉メール (ジェネレーター 6 本目)
  • 54 自治体補助金 洗い出し (データ可視化系)
  • 30 請求書 催促代行 (ジェネレーター 7 本目)
  • 85 占い 的中率 トラッキング (占い 4 本目)

[ ./next_action ]

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

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

[ ./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 →