AI に物件詳細＋内見予約を作らせてみた — B2Bで育てたカレンダーが、消費者ページにそのまま刺さった（やってみた #62）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。不動産3枚目——物件詳細 / 内見予約（写真ギャラリー × 間取り図 × 賃料・初期費用 × 物件概要 × 設備 × アクセス/地図 × 内見予約 × 問い合わせ）。

#60 運用・#61 契約 と全く別の、消費者向けの visual＋予約ページ。賃貸ポータルで入居希望者が見る物件詳細。写真・間取り・賃料・設備・内見予約——B2B 画面ばかり作ってきた連載で初めての、マーケティング寄りの画面。

結果 — 4/5

tsc/build 緑・console 0・375px スマホプライマリで横スクロール0・写真ギャラリーで間取り図に切替・初期費用合計 ¥495,300 が正しく合算・物件概要が th scope 付き・設備が icon+text+あり/なし・内見予約が日付＋時間枠（満枠は disabled）・h1 1個・8つの h2。

今回の主役 — B2B で育てた部品が、消費者ページにそのまま刺さった

これまで B2B（運用/契約/医療/物流）で育てた部品を、初めて消費者向けマーケページに持ち込んだ。よく刺さった:

• Calendar — strong cross-industry fit. react-day-picker v9 ラップ・disabled matcher で過去日＋満枠日を striked・getDisabledReason で日別ツールチップ（満枠理由）・ja locale＋祝日。B2B 育ちのカレンダーが消費者の内見予約にそのまま落ちた。
• Gallery — fit 物件写真＋間取り図. value/onValueChange 制御・role=radiogroup サムネ・roving tabindex・矢印キー・aria-checked——間取り図への切替を a11y 付きで手組みゼロ。
• formatCurrency — perfect. 賃料/初期費用を全部 ¥・合計検証 OK。
• Table+th scope=row（物件概要21行）・Badge（空室あり/申込あり）・Input/Textarea の label/description（問い合わせフォーム）・CardTitle as（h1→h2 飛びなし）も。

B2B も消費者も、カレンダー/ギャラリー/金額の作法の骨格は同じ。業界どころか B2B/B2C すら越えた。

src で直した穴 — Gallery のモバイル溢れ

消費者ページで露呈した、自分の出荷部品の実バグ:

• 🟠 Gallery のサムネ列がモバイルで溢れる——非 wrap の固定幅 flex-row で、物件写真6枚が 360px を32px はみ出し。横スクロール（overflow-x-auto）を追加（#262・PR #265）。物件は6〜20枚が普通なので、消費者ページで初めて見えた穴。

起票だけした穴（予約/比較で再出現待ち・1回目）

消費者ページ特有の新しい穴:

• 🟠 TimeSlotPicker / 時間枠予約ピッカー（#263）。Calendar は日付半分を担うが、「選んだ日の空き時間枠（満枠は disabled）を radiogroup で単一選択」の部品が無く手組み。飲食/クリニック/サロン/内見の横断ニーズ。
• 🟠 FeatureList / 設備の present-absent グリッド（#264）。Badge/Tag は色だけのチップで「あり/なし」を色だけに頼る。icon+text+あり/なし が要る。設備/スペック表/料金プラン比較で再利用。
• 🟠 地図 primitive 不在（プレースホルダ手組み・低優先）。

学び — 「骨格」は B2B/B2C すら越える

B2B のカレンダー（予約管理） → 消費者の内見予約（Calendar・そのまま）
B2B のギャラリー（資産/メディア） → 物件写真＋間取り図（Gallery・モバイル fix のみ）
fintech の金額 → 賃料/初期費用（formatCurrency・そのまま）

#60 で「primitive は作法の骨格を捉えると業界を越える」と書いたが、#62 はそれが B2B↔B2C すら越えることを示した。日付を選ぶ・写真を切り替える・金額を整える——使う人がプロでも一般消費者でも、作法の骨格は同じ。残った穴（時間枠/設備グリッド）は予約系・比較系で再出現するので3回ルールで育てる。不動産3枚で、運用/契約/消費者の3レイヤーを踏破した。

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

• 不動産は3枚（運用/契約/消費者）踏破。別業界へ pivot（製造/教育/公共/旅行など）か、不動産もう1〜2枚（入居審査 で承認ワークフロー）。

試す

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

まだ alpha。B2B で育てたカレンダーが消費者の内見予約にそのまま刺さり、骨格が B2B/B2C すら越えた回。

---

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