AI に空港ターミナル案内を作らせてみた — 駅と空港で同じ穴、3回目で「カテゴリチップ」が部品になった（やってみた #122）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘り（toC バックログ）——空港ターミナルマップ・施設案内（搭乗口/ラウンジ/免税店/トイレを探す）。駅構内ナビ #120 の空港版。

結果 — 3.5/5、そして FilterChips の 3-confirm 発火

tsc 緑・375px mobile-first。cold AI（群青を一度も触っていない設定）：

ListCard — これのために作られた。kit を採用する理由の1コンポーネント。 施設行に1:1（アイコン＋名称＋場所[○F・○ゲート付近・制限エリア内/外]＋営業中バッジ＋徒歩○分）。Sheet(bottom)/Badge/MetadataList/Meter（ラウンジ混雑）も zero。 だが施設カテゴリ nav が最大の穴。横スクロールのカテゴリチップバーが無い。

観測の核 — 駅と空港で「同じ穴」が3回目に

施設カテゴリ filter nav＝最大の穴。横スクロールのカテゴリチップバーが無い。 ToggleGroup は segmented control で8カテゴリは折り返す・FilterButton は popover ドロップダウン（モデルが違う）・Badge/Tag は選択グループ状態が無い。ToggleGroup を overflow-x-auto で無理やりチップバーにした。「横スクロール単一選択チップバーは、あらゆる消費者ファインダー（空港/駅/食べログ/小売/フードデリバリー）の普遍的ナビ。単一最大の追加。」

3回連続——駅構内ナビ #120・きっぷ購入 #121・空港 #122、別々3人の cold AI が独立にカテゴリチップバーを手組み（ToggleGroup＋overflow-x-auto）。3回ルール発火。build した。

build — FilterChips（フィルタチップ）

<FilterChips
  items={[{ value:"all", label:"すべて", count:24 }, { value:"gate", label:"搭乗口", count:8 }, ...]}
  value={category} onValueChange={setCategory} aria-label="施設カテゴリ" />

• 多カテゴリ・横スクロール（折り返さない）・塗りつぶし active・role="group"＋roving tabindex＋矢印キー・スクロールバー非表示・36px チップ。
• items[] {value,label,icon?,count?} の単一選択。
• 索引に「横スクロール単一選択カテゴリチップバー → FilterChips」追加・ToggleGroup（2-3等幅）/FilterButton（popover 多面）と区別。
• PR#372・実機375pxで8チップが1行でスクロール（折り返さない）・単一選択がクリック+ArrowRight で移動・リストが4→1に絞り込み・0 overflow・0 error。

今回 src build = FilterChips（3-confirm・8個目の結晶化）。追記: RouteStops の配送語彙が搭乗口案内にも漏れる（transit経路#110＋駅 wayfinding#120＋空港 wayfinding#122＝中立 Steps 変種要・#358）。

学び — 同じ archetype を別業種で回すと、穴が確実に3回そろう

駅構内ナビ #120 と空港ターミナル案内 #122 は同じ「場所の施設ファインダー」archetype。だから ListCard 越境（universal 床の信頼）と FilterChips 不在（未結晶の床）が、駅・きっぷ・空港で確実に3回そろった。「1業種3〜5枚」の深掘りは、同じ archetype を別文脈で繰り返すことで、3回ルールの証拠を意図的に集める装置でもある。FilterChips も RadioCard も、深掘りを「サボらず潰す」と決めたからこそ、3回目に到達して build できた。

📊 結晶化スコアボード（build 済8個）

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips 進行中：SegmentedControl(2-3項目)・TicketStub・StatusScreen success・Gantt hour-axis・Steps neutral

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

• toC バックログ続行——航空（国際線 eチケット＝TicketStub 2回目 / 手荷物追跡＝状態 timeline）or 鉄道残り（駅ナカ提案 / 払戻し）。

試す

• gunjo.jp ／ フィルタチップ FilterChips ／ リストカード ListCard ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#121
• GunjoUI by UIXHERO

駅と空港で同じ穴、3回目でカテゴリチップが部品に——深掘りは、3回ルールの証拠を確実に集める装置だった。

---

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