AI に駅構内ナビを作らせてみた — ListCard は新しい型でも効いた、でも「カテゴリの横スクロール」が無い（やってみた #120）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠鉄道の利用者向け 深掘り（利用者向けバックログ）の2枚目⁠——⁠駅構内ナビ・施設案内⁠（出口/EV/トイレ/コインロッカー/店舗を探す）。予約/購入/ステータスとは別の「⁠場所の中の施設を探す⁠」という新しいパターン。

結果 — 3.5/5

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

⁠ListCard — これのために作られた。この画面が成立する理由。⁠ 施設一覧の行に1:1（アイコン＋名称＋場所[○階・○改札内/外]＋空き/営業 バッジ＋徒歩○分）。docstring が「検索結果・物件・状態 一覧」を名指し。Meter の direction="fill-is-good" が⁠ロッカーの空き（多いほど良い）にぴったり⁠＝閾値の配線なしで緑/黄/赤。Sheet(bottom)/Badge/Tag も 摩擦ゼロ。

ListCard が「予約/購入/ステータス」に続き ⁠施設を探すという新しいパターンでも効いた⁠——全業種共通の土台の業界越えがまた1つ固まった。

観測の核 — カテゴリの「横スクロールするチップのナビ」が無い（FilterChips）

⁠施設カテゴリのナビ＝本当の難所。カテゴリのピルの帯 / 横スクロールするチップのナビ が存在しない。⁠ ToggleGroup が一番近いが、root が flex items-center justify-center・item が w-fit＝⁠8カテゴリを375pxに置くと中央寄せで折り返す⁠（スクロールしない）。overflow-x-auto＋端まで広げ＋root を justify-start w-max＋item shrink-0 whitespace-nowrap で手組みした。「⁠横スクロールするカテゴリフィルタは、あらゆる利用者向けの場所探し（Google Maps・食べログ・乗換系）を定義するナビ。これが筆頭の追加。⁠」

これは #115 の SegmentedControl（出発/到着の2項目）と同じ根＝⁠ToggleGroup が消費者向けのナビになっていない⁠。2つの変種が要る：segmented（少数・等幅・active を塗る）＋ filter-chips（多数・⁠横スクロール⁠・単一選択・アイコン＋ラベル）。→ #365 に2回目を追記（segmented #115＋filter-chips #120＝⁠2/3⁠）。

その他の観測（追記）

• 🟢 ⁠RouteStops の配送の語彙が道案内に漏れる⁠（行き方に使うと 未配/配送中/不在 が出てラベルの貼り替えが必須）＝交通経路 #110 に続き2回目＝中立な Steps/道案内の変種が要る（#358 追記）。
• 🟢 構内図/地点マーカー・モバイルのアプリバー・施設アイコン（Tabler に トイレ/ATM/喫煙 が無く toilet-paper で代用）の欠落——場所探し特有・利用者向けの温かみ系。

⁠今回 src の新規コンポーネントなし⁠（3.5/5・FilterChips 2/3・ListCard が新しいパターンで業界越え）。

学び — 全業種共通の土台の「適用範囲」が広がり、まだ固まっていない土台の証拠が貯まる

ListCard は予約/購入/ステータス/会員/履歴に続き、⁠施設を探す画面⁠でも効いた——全業種共通の土台はパターンをまたいでも信頼できる。一方この回は ⁠FilterChips（消費者向けナビ）の2つ目の証拠⁠を出した。深掘りの効用がまた確認できた：⁠全業種共通の土台（ListCard 等）の適用範囲が広がる ＋ まだ固まっていない土台（FilterChips/RadioCard/TicketStub）の証拠が確実に貯まる。⁠ 鉄道の利用者向けを潰し切るほど、3回ルールの分母が効率よく埋まっていく。

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

• 利用者向けバックログ続行——鉄道（きっぷ購入＝RadioCard 3回目狙い / 駅ナカ・おでかけ提案 / 払戻し）or 航空（国際線 eチケット＝TicketStub 2回目 / 手荷物追跡 / ターミナルマップ＝FilterChips 3回目狙い）。

試す

• ⁠gunjo.jp⁠ ／ ⁠リストカード ListCard⁠ ／ 逆引き索引 ⁠/docs/by-use-case⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#119
• ⁠GunjoUI by UIXHERO⁠

ListCard は新しい型でも効いた。でもカテゴリの横スクロールは、まだ無い——深掘り2枚目で、まだ固まっていない土台がまた一歩。