AI に面談予約を作らせてみた — ScheduleGrid が「予約グリッド」でも一発で見つかった（やってみた #74）
/conference-booking375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に面談予約を作らせてみた — ScheduleGrid が「予約グリッド」でも一発で見つかった（やってみた #74）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。教育5枚目＝教育の締め——三者面談予約（時間枠×日の予約グリッド × 空き/予約済/受付不可 × 予約率 × 未予約フォロー × 面談一覧）。
教育の5枚目で締め。保護者面談の時間枠を開き、家庭が予約する画面。そして #71 で広げた ScheduleGrid の説明が、3回連続で別マトリクスに刺さった——今回は「予約グリッド」。
結果 — 4.25/5
tsc/build 緑・console 0・375px横溢れ0・予約枠グリッド・予約/変更/キャンセル（重複防止＋ライブ再計算）・予約率メーター・未予約リスト＋一斉連絡・面談一覧。重要なコンポーネントの手組みゼロ。
今回の主役 — ScheduleGrid が「予約グリッド」でも一発で見つかった（3回連続）
予備知識ゼロの AI が予約枠グリッド（時間枠×日）に何を使ったか:
ScheduleGridがいちばんの見どころ。 JSDoc と docs は、これを汎用の「行×列マトリクス」として位置づけ——「空き枠や部屋/リソースの予約グリッド」を明記している。 面談予約に手こずらず曲がった…。[contain:paint]まで備えていて、モバイルの横スクロールが閉じ込められる——まさにスマホの要件だ。index.ts の最初の走査で見つけた。
#71 で「時間割用」と狭く書いて見つからなかった ScheduleGrid を、「汎用の2次元マトリクス（…予約グリッド含む）」に広げた。その効果が #72 出欠 → #73 課題提出 → #74 予約 と3回連続で実証された。説明の枠を広げた1回の修正が、その後ずっと"発見される"配当を生み続けている。
他の業界越えも継続: Badge icon → 空き/予約済/受付不可 の色に頼らないピル（JSDoc が「ステータスのグリッド/凡例で繰り返し要る」と明記＝狙い通り）・Meter higher-is-better+target → 予約率（「10家庭/12家庭（83%）目標12家庭」）・Statistic → 未予約フォロー状態。
src 変更ゼロ（コンポーネントを作らず）— 教育を締める
今回 src の新規コンポーネントなし。 観測点（TimeSlotPicker#263 の2回目・連続時間軸#142残り）は、予備知識ゼロの AI が「セル自体が予約ピッカー（クリック→Sheet）」と判断したため出ず、ScheduleGrid＋Sheet の合成で過不足なく組めた。ライブラリが面談予約をまるごと既存コンポーネントで賄った＝教育5枚を綺麗に締めた。
課題に記録だけ（全1回目・軽微）
- 🟡 ScheduleGrid にセルの選択状態/cellClassName が無い（開いているセルをハイライトできない・#299）。
- 🟡 Badge と Tag の API が不整合（Badge は icon あり size 無し・Tag は size あり icon 無し・#300）。
- 🟡 Toast が文字列のみ（title/description・action ボタン・JSX 不可・#301）。
- 🟢 誤検知1件: 予備知識ゼロの AI が「Textarea/Input に label 無し」と報告→実際は #245/#249 で実装済（型に label/description あり）。見つけられず手組みした＝コンポーネントはあるのに使われない現象が、今度は Textarea で（軽微・既に動く）。
学び — 「広げた説明」は1回の修正が配当を生み続ける
#71 で ScheduleGrid の説明を広げた。その後 #72/#73/#74 と3回連続で、別々のマトリクス（出欠・課題提出・予約）に一発で見つかって採用された。 説明の拡張は「その場しのぎ」ではなく、以後の全利用者（人でも AI でも）に効き続ける資産。一方 #74 では Textarea で逆の現象（実装済なのに見つけられず手組み）も出た——「在る」と「見つかる」のギャップは、コンポーネントごとに説明を磨き続けないと再発する。教育5枚で、ライブラリは教育の領域をほぼ完全に賄うことを確認した。
教育シリーズ総括（#70〜#74）
| # | 画面 | 点 | ハイライト |
|---|---|---|---|
| 70 | 時間割 | 3→ | ScheduleGrid を作る（3回出たタイムグリッド） |
| 71 | 成績管理 | 4 | ScheduleGrid 見つからず→説明を拡張 |
| 72 | 出欠 | 4.5 | 拡張が効いて一発発見＋Badge icon を作る |
| 73 | 学習進捗LMS | 4.5 | 直近に作ったものが全再利用＝複利ピーク＋Grid 列を作る |
| 74 | 面談予約 | 4.25 | ScheduleGrid が予約グリッドにも（3回連続）・新規コンポーネントなし |
次回予告（やってみた #75）
- 別業界へ移る（公共/自治体・メディア/出版 など）。連続時間軸スケジューラ#142残り・系譜#281 の大型コンポーネントも観測継続。旅行は後で腰を据えて作り込む枠。
試す
まだ alpha。広げた ScheduleGrid が3回連続で別マトリクスに刺さり、教育5枚を新規コンポーネントなしで締めた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。