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

AI に駅ナカ・おでかけ提案を作らせてみた — 3画面さまよった「券面」が、ついに結晶化（やってみた #128）

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

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

解説記事

AI に駅ナカ・おでかけ提案を作らせてみた — 3画面さまよった「券面」が、ついに結晶化（やってみた #128）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道 toC 深掘り（toC バックログ）——駅ナカ・おでかけ提案（おすすめスポット・店舗・使えるクーポン・デジタル会員証）。

結果 — 3.5/5、そして「券面」がついに結晶化

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

4つの主役級が「これのために作られた」フィット：PageHeader（app-bar）・LoyaltySummaryCard（JRE POINT 残高/ランク hero）・FilterChips（グルメ/おみやげ/カフェ）・ListCard（店舗もクーポンも・カード全体が ≥44px ボタン）。フレームはほぼゼロ工数。 だがコイン裏の主役＝レジで掲げる券面が無い。

4つの toC 床が #128 で一斉に自力発見された（越境発掘がまた）。だが本丸は別にあった。

観測の核 — 3画面さまよった末の TicketStub 結晶化

デジタル会員証 / クーポン提示券面＝完全手組み。これが頭の穴。 TicketStub/PassCard/BarcodeCard/CouponStub/QrCode どれも無い。唯一バーコード隣接の ScanInput/ScanGate は事業者/レジ側——コードを読み取る側で、旅行者が要る表示の真逆。「BarcodeCard/PassStub が要る——value・format(code128/qr)・可読ラベル・ミシン目・role=img。これが追加すべき唯一のもの。今は誰もが自前でバーコードを再発明し、多くは <img> をサーバに投げる。」

連載で券面は3画面さまよった：搭乗券 #114・国際線 eチケット #123・駅ナカ クーポン/会員証 #128＝3回独立に手組み。3-confirm 発火、その場で build。

build — TicketStub（チケット券面）

// クーポン（code128 バーコード）:
<TicketStub value="CPN-NEWDAYS-3X-887412" codeLabel="887412">
  <div className="flex items-center justify-between">
    <span className="font-semibold">NewDays ポイント3倍</span>
    <Badge variant="warning">期間限定</Badge>
  </div>
  <p className="mt-1 text-xs text-muted-foreground">対象：駅ナカ NewDays 全店・〜2026/06/30</p>
</TicketStub>

// 搭乗券（QR ＋ OD/座席/搭乗口）:
<TicketStub value="NH106-X7K2QM-18K" format="qr" codeLabel="X7K2QM">{/* … */}</TicketStub>
  • value＋format(code128/qr)＋可読ラベル＋ミシン目ノッチ＋上の内容スロット（便のOD/座席・クーポン割引・会員ランク）。
  • 組み込みコードは決定論的(FNV seed PRNG)な視覚プレースホルダ＝SSR-safe・hydration mismatch 無し・実値は role=img の aria-label に。実スキャンは code で差替。RSC-safe。
  • ScanInput/ScanGate の消費者側ミラー（読み取る vs 提示する）。索引も「コードを出す→TicketStub・読み取る→ScanInput」に割った。
  • PR#377・実機375pxで QR 327セル＋code128 69バー・role=img が実値保持・ミシン目・format トグル・0 overflow。

今回 src build = TicketStub（3-confirm・11個目の結晶化）。

学び — 「コインの裏側」は別部品

群青には ScanInput/ScanGate（コードを読み取る事業者側）が最初からあった。だが消費者が要るのは提示する側＝コインの裏。1つの概念（バーコード）に対し、toB（読取）と toC（提示）は別々の部品になる。 これは「定義域が割れる」(#126 RouteStops/Itinerary) の双子——同じドメイン語彙でも、向き(toB/toC)が違えば別 primitive。toC 深掘りが、最初からあった toB 部品の「裏面」を炙り出した。連載の最初から「全モード toB+toC 両面」と決めていたのは、まさにこの非対称を掘るためだった。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub 進行中：StatusLevel・SegmentedControl・StatusScreen success・Gantt hour-axis・AmenityRow

📋 toC バックログ

  • ✈️ 航空：全6枚 完了 ✅
  • 🚆 鉄道：定期券✅駅ナビ✅きっぷ✅駅ナカ提案✅ ／ 残り：払戻し・遅延証明書

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

  • 鉄道 払戻し・遅延証明書（AmountBreakdown 手数料・申請フロー）で鉄道 toC を締め、その後 次モード（バス/タクシー/トラック toB+toC）へ。

試す

3画面さまよった券面が、最初からあった toB 部品の「裏面」として結晶化——同じバーコードでも、読み取ると提示するは別の部品。

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

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

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

BadgeButtonCardCardContentCardHeaderCardTitleEmptyStateFilterChipFilterChipsListListCardListItemLoyaltySummaryCardPageHeaderSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitle

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

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