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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠航空の利用者向け 深掘り（利用者向けバックログ）⁠——⁠空港ターミナルマップ・施設案内⁠（搭乗口/ラウンジ/免税店/トイレを探す）。駅構内ナビ #120 の空港版。

結果 — 3.5/5、そして FilterChips の3回目が発火

tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：

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

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

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

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

作る — FilterChips（フィルタチップ）

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

• 多カテゴリ・⁠横スクロール（折り返さない）⁠・選択中を塗りつぶし・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・0 error。

⁠今回 src で作ったもの = FilterChips⁠（3回目・8個目のコンポーネント化）。追記: RouteStops の配送の語彙が搭乗口案内にも漏れる（交通経路#110＋駅の道案内#120＋空港の道案内#122＝中立な Steps の変種が要る・#358）。

学び — 同じパターンを別業種で回すと、欠落が確実に3回そろう

駅構内ナビ #120 と空港ターミナル案内 #122 は⁠同じ「場所の施設を探す」パターン⁠。だから ListCard の業界越え（全業種共通の土台への信頼）と FilterChips の不在（まだ固まっていない土台）が、駅・きっぷ・空港で確実に3回そろった。⁠「1業種3〜5枚」の深掘りは、同じパターンを別文脈で繰り返すことで、3回ルールの証拠を意図的に集める装置⁠でもある。FilterChips も RadioCard も、深掘りを「サボらず潰す」と決めたからこそ、3回目に到達して作れた。

📊 コンポーネント化スコアボード（作成済8個）

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / ⁠FilterChips⁠ 進行中：SegmentedControl(2-3項目)・TicketStub・StatusScreen success・Gantt 時刻軸・Steps（中立）

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

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

試す

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

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