AI に物件詳細＋内見予約を作らせてみた — B2Bで育てたカレンダーが、消費者ページにそのまま刺さった（やってみた #62）
/property-listing375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に物件詳細＋内見予約を作らせてみた — B2Bで育てたカレンダーが、消費者ページにそのまま刺さった（やってみた #62）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。不動産3枚目——物件詳細 / 内見予約（写真ギャラリー × 間取り図 × 賃料・初期費用 × 物件概要 × 設備 × アクセス/地図 × 内見予約 × 問い合わせ）。
#60 運用・#61 契約 と全く別の、消費者向けの「見せる＋予約する」ページ。賃貸ポータルで入居希望者が見る物件詳細。写真・間取り・賃料・設備・内見予約——B2B 画面ばかり作ってきた連載で初めての、マーケティング寄りの画面。
結果 — 4/5
tsc/build 緑・console 0・375px スマホプライマリで横スクロール0・写真ギャラリーで間取り図に切替・初期費用合計 ¥495,300 が正しく合算・物件概要が th scope 付き・設備が icon+text+あり/なし・内見予約が日付＋時間枠（満枠は disabled）・h1 1個・8つの h2。
今回の主役 — B2B で育てたコンポーネントが、消費者ページにそのまま刺さった
これまで B2B（運用/契約/医療/物流）で育てたコンポーネントを、初めて消費者向けのマーケティングページに持ち込んだ。よく刺さった:
-
Calendar— 業界をまたいでよく合う。 react-day-picker v9 をラップ・disabledの条件で過去日＋満枠日を取り消し線・getDisabledReasonで日ごとのツールチップ（満枠の理由）・jaロケール＋祝日。B2B 育ちのカレンダーが消費者の内見予約にそのまま落ちた。-
Gallery— 物件写真＋間取り図に合った。value/onValueChangeで制御・role=radiogroupのサムネ・roving tabindex・矢印キー・aria-checked——間取り図への切替を、アクセシビリティ付きで手組みゼロ。-
formatCurrency— 完璧。 賃料/初期費用を全部 ¥・合計検証 OK。-
Table+th scope=row（物件概要21行）・Badge（空室あり/申込あり）・Input/Textareaの label/description（問い合わせフォーム）・CardTitle as（h1→h2 飛びなし）も。
事業者も消費者も、カレンダー/ギャラリー/金額の作法の骨格は同じ。業界どころか、事業者向け・消費者向けの別すら越えた。
src で直した不備 — Gallery のモバイル溢れ
消費者ページで露呈した、自分の出荷コンポーネントの実バグ:
- 🟠
Galleryのサムネ列がモバイルで溢れる——折り返さない固定幅のflex-rowで、物件写真6枚が 360px を32px はみ出し。横スクロール（overflow-x-auto）を追加（#262・PR #265）。物件は6〜20枚が普通なので、消費者ページで初めて見えた不備。
課題に記録だけした欠落（予約/比較で再出現待ち・1回目）
消費者ページ特有の新しい欠落:
- 🟠 TimeSlotPicker / 時間枠予約ピッカー（#263）。
Calendarは日付の半分を担うが、「選んだ日の空き時間枠（満枠は選べない）を radiogroup で単一選択」のコンポーネントが無く手組み。飲食/クリニック/サロン/内見で横断的に要る。 - 🟠 FeatureList / 設備の「あり/なし」グリッド（#264）。
Badge/Tagは色だけのチップで「あり/なし」を色だけに頼る。icon+text+あり/なし が要る。設備/スペック表/料金プラン比較で再利用。 - 🟠 地図のコンポーネントが無い（プレースホルダを手組み・優先度低）。
学び — 「骨格」は 事業者向け・消費者向け すら越える
B2B のカレンダー（予約管理） → 消費者の内見予約（Calendar・そのまま）
B2B のギャラリー（資産/メディア） → 物件写真＋間取り図（Gallery・モバイル修正のみ）
金融の金額 → 賃料/初期費用（formatCurrency・そのまま）
#60 で「コンポーネントは作法の骨格を捉えると業界を越える」と書いたが、#62 はそれが 事業者向け↔消費者向け すら越えることを示した。日付を選ぶ・写真を切り替える・金額を整える——使う人がプロでも一般消費者でも、作法の骨格は同じ。残った欠落（時間枠/設備グリッド）は予約系・比較系で再出現するので3回ルールで育てる。不動産3枚で、運用/契約/消費者の3レイヤーを踏破した。
次回予告（やってみた #63）
- 不動産は3枚（運用/契約/消費者）踏破。別業界へ移る（製造/教育/公共/旅行など）か、不動産もう1〜2枚（入居審査 で承認ワークフロー）。
試す
まだ alpha。事業者向けで育てたカレンダーが消費者の内見予約にそのまま刺さり、骨格が 事業者向け・消費者向け すら越えた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。