#120スコア 3.5/5運輸：鉄道

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

ルート: /station-guide
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道 toC 深掘り（toC バックログ）の2枚目——駅構内ナビ・施設案内（出口/EV/トイレ/コインロッカー/店舗を探す）。予約/購入/ステータスとは別の「場所の中の施設を探す」新 archetype。

結果 — 3.5/5

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

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

ListCard が「予約/購入/ステータス」に続き 施設ファインダーという新しい archetype でも効いた——universal な床の越境がまた1つ固まった。

観測の核 — カテゴリの「横スクロール chip nav」が無い（FilterChips）

施設カテゴリ nav＝本当の戦い。category-pill-bar / スクロール chip-nav が存在しない。 ToggleGroup が一番近いが、root が flex items-center justify-center・item が w-fit＝8カテゴリを375pxに置くと中央寄せで折り返す（スクロールしない）。overflow-x-auto＋bleed＋root を justify-start w-max＋item shrink-0 whitespace-nowrap で手組みした。「横スクロールするカテゴリフィルタは、あらゆる B2C place-finder（Google Maps・食べログ・乗換系）の定義的ナビ。これが #1 の追加。」

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

その他の観測（追記）

  • 🟢 RouteStops の配送語彙が wayfinding に漏れる（行き方に使うと 未配/配送中/不在 が出て relabel 必須）＝transit経路 #110 に続き2回目＝中立な Steps/wayfinding 変種が要る（#358 追記）。
  • 🟢 構内図/POIマーカー・モバイル app-bar・施設アイコン（Tabler に toilet/atm/喫煙 が無く toilet-paper で代用）の穴——place-finder 特有・B2C 温かみ系。

今回 src build なし（3.5/5・FilterChips 2/3・ListCard 新archetype越境）。

学び — universal 床の「適用範囲」が広がり、未結晶の床の証拠が貯まる

ListCard は予約/購入/ステータス/会員/履歴に続き、施設ファインダーでも効いた——universal 床は archetype をまたいでも信頼できる。一方この回は FilterChips（消費者ナビ）の2つ目の証拠を出した。深掘りの効用がまた確認できた：universal 床（ListCard 等）の適用範囲が広がる ＋ 未結晶の床（FilterChips/RadioCard/TicketStub）の証拠が確実に貯まる。 鉄道 toC を潰し切るほど、3回ルールの分母が効率よく埋まっていく。

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

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

試す

ListCard は新しい型でも効いた。でもカテゴリの横スクロールは、まだ無い——深掘り2枚目で、未結晶の床がまた一歩。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AspectRatioBadgeButtonCardEmptyStateIconListCardMeterRouteStopItemRouteStopsSearchInputSelectSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleTagToggleGroupToggleGroupItem

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。