AI に不動産の物件管理を作らせてみた — 医療のアラートが、家賃滞納にそのまま効いた（やってみた #60）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。新業界・不動産1枚目——物件管理 / レントロール（ポートフォリオ × 物件別入居率 × 部屋別レントロール × 滞納 × 契約更新/退去予定 × 収支）。

医療を7枚やり切って、全く別の不動産へ。1枚目は賃貸管理会社のレントロール——管理物件の入居率、部屋ごとの賃料・契約者・状態、滞納、更新/退去予定を俯瞰する運用画面。医療とは真逆の、金額とテナントライフサイクルの世界。

結果 — 4.5/5

tsc/build 緑・console 0・375px でレントロールがカード内横スクロール・物件別/全体の入居率メーター・滞納2ヶ月+の blocking バナー・更新/退去予定リスト・KPI が summary/物件/部屋で整合・h1 1個。

今回の主役 — 医療/物流の primitive が、不動産の壁を越えてそのまま効いた

これまで複利は同じ業界内（医療→医療）で見てきた。今回はそれが業界を大きくまたいだ。商業/金融/物流/医療で作った primitive が、不動産のレントロールにほぼ無改造で効いた。中でも象徴的だったのが:

SafetyBanner(医療のアレルギー/禁忌/パニック値用に build) — REUSED for serious-arrears (滞納2ヶ月以上) and it's a semantically perfect cross-industry analogue: a loud, assertive (role="alert") top-of-page block for a condition you must not miss, with an actions slot (督促記録). Strong fit.

**「見逃してはいけない危険を、assertive に承認させる」**という SafetyBanner の抽象は、医療のアレルギー警告でも不動産の家賃滞納でも同じだった。ドメインは病棟と賃貸管理で正反対なのに、作法の骨格が一致した。他にも:

• formatCurrency(fintech 用) — PERFECT. 賃料/管理費/敷金を全部 ¥1,234,567、compact で ¥288.2万。
• Meter(倉庫充填/トラック積載用) — FIT building & portfolio 入居率 exactly. size="inline" がセルにそのまま、6つの入居率メーターに accessible name。
• Statistic/Table/Tabs/toCsv(BOM 付き日本語 CSV)/Badge も全部そのまま。

医療の安全 primitive・物流の容量メーター・金融の金額フォーマット——業界をまたいでも、作法の骨格が同じなら同じ部品が効く。これが「業界を散らして primitive を育てる」ことの最終的な価値だった。

src で直した穴 — TimelineDescription の <p> footgun

不動産特有ではない、合成時の実バグを1つ:

• 🟡 TimelineDescription が <p> 固定——更新/退去予定の Timeline 項目にアクションボタン群を入れたら <div> in <p> の実行時 hydration クラッシュ。as?: "p" | "div" escape hatch を追加（#253・PR #257・後方互換）。Badge(#233)・AlertTitle(#251) と同じ「要素ネストの footgun」クラス。

起票だけした穴（不動産/会計で再出現待ち・1回目）

不動産特有の新しい穴は全て1回目なので起票:

• 🟠 売掛金エイジング（1ヶ月/2ヶ月/3ヶ月以上 の件数+金額バケット・#254）。滞納も AR も同じ作法。DistributionBar は割合バーで、ラベル付き件数+金額バケットではない。
• 🟠 DataTable の合計/footer 行（#255）。レントロールは「部屋別→物件合計が footer で整合」が核。EditableDataTable は renderFooterCell を持つが DataTable には無く、<table>＋<tfoot> を手組み。
• 🟠 契約満了/更新の日付軸タイムライン（#256）。Timeline は縦のイベント列で、「満了まであと N 日」の横軸 runway ではない。
• 🟠 Meter の higher-is-better 方向（同 #256）。入居率は満室=good だが Meter は満杯=warning（容量方向）。tone 上書きで回避したが direction="higher-is-better" が欲しい。

学び — primitive は「作法の骨格」を捉えると業界を越える

医療の安全アラート → 不動産の滞納アラート（SafetyBanner・骨格同一）
倉庫の充填メーター → 不動産の入居率メーター（Meter・方向だけ違う）
金融の金額         → 不動産の賃料（formatCurrency・そのまま）

新業界の1枚目が 4.5/5——医療/物流/金融で育てた primitive が、不動産でほぼ無改造で効いたから。重要なのは、primitive が特定業界の見た目でなく作法の骨格（危険を承認させる/充填を測る/金額を整える）を捉えていたこと。骨格が同じなら、病棟だろうと賃貸管理だろうと同じ部品が刺さる。残った不動産特有の穴（エイジング/footer/日付軸）は、会計や他業界でも再出現するので3回ルールで育てる。

次回予告（やってみた #61）

• 不動産をもう1枚（賃貸借契約/重要事項説明 で SignedRecord が契約署名に効くか・または内見予約/物件募集）。1業界3〜5枚で不動産の判断を立体化。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#59
• GunjoUI by UIXHERO

まだ alpha。新業界の1枚目で、医療のアラートが家賃滞納にそのまま効いた回。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->