AI にバスの経路検索を作らせてみた — #126 で作った Itinerary が、別モードで自力発見された(やってみた #140)
/bus-route-search375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にバスの経路検索を作らせてみた — #126 で作った Itinerary が、別モードで自力発見された(やってみた #140)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。バスの利用者向け(接近案内・高速バス予約に続く3枚目)——経路検索・運賃案内(渋谷駅→等々力・経路候補・乗換・所要/運賃・経路詳細)。
結果 — 4/5、Itinerary が別モードで自力発見
tsc 緑・375px mobile-first。予備知識ゼロの AI(群青を一度も触っていない設定):
日本の交通の利用者向けのために設計されているとしか思えないコンポーネントが複数。 PageHeader/FilterChips(速い順/安い順/乗換少)/ListCard(経路候補)/AmountBreakdown(運賃)/Itinerary(経路詳細) が画面の~85%を CSS 無しで・タッチ標的とアクセシビリティも標準装備。索引も2つの難所(候補カード・区間ごとの経路)を正しく誘導。
観測の核 — Itinerary が「航空の旅程→バスの経路」へ別業界で自力発見
#126 で作った Itinerary(航空の旅程=便/ホテル/アクティビティ) が、#140 でバスの経路詳細(徒歩→乗車→乗換→…)で——
予備知識ゼロの AI「経路の区間ごとに
Itineraryを使った。嵌まった、ライブラリの中で何より良く。しかも Itinerary の docstring が自分から RouteStops(配送に固定)を避けろと警告してくれる。」
#126 で航空の旅程として固めた Itinerary が、30回近く後にバスの経路で別の予備知識ゼロの AI に自力発見された=作る→別モード・別業界での自力発見。しかも #126 で「RouteStops は配送の語彙で旅程に不適」と docstring と索引に書いた誘導が、ここでも機能した。1つのモードで固めたコンポーネントは、別モードの似た形に勝手に効きに行く。
だが「十分ではあるが、専用ではない」— 業界越えの効きには深さがある
予備知識ゼロの AI「Itinerary は バス+徒歩+乗換 を十分に表現したが、専用に作られてはいない。 バスの区間の本当の構造は 乗車停→系統+行先→乗車時間+通過停数→降車停+乗換待ち+徒歩 なのに、Itinerary は icon/time/title/description/content/trailing 各1つだけ。区間の内部レイアウトを手組みした。最大の欠落=コネクタが一様で、破線(徒歩)vs実線(乗車)が描けない。Yahoo/Google の乗換案内は必ずこれで徒歩と乗車を区別する。」
→ #358 を再開(#126 で Itinerary を作った時にクローズしたが、交通に専用の部分は未達だった)。範囲を絞り:Itinerary は汎用の土台として正しく自力発見される=80%を担う。残る交通専用の20%=legs[] モード(徒歩/乗車/乗換 の kind・乗降停・通過停数・破線の徒歩 vs 実線の乗車 のコネクタ・区間ごとの系統+運賃)。#110 乗換案内 + #140 バス経路 = 2/3。
学び — 「クローズは早すぎることがある/業界越えは二択でなく深さ」
#126 で Itinerary を作ったとき、私は #358(TransitItinerary)を「これで解決」とクローズした。だが #140 の予備知識ゼロの AI が示したのは——Itinerary は自力発見されるほど『土台として正しい』が、交通に専用の深さ(破線の徒歩のコネクタ・乗降停)には届かない。つまり:
- 別業界での自力発見は『コンポーネントが正しい方向にある』ことを証明する(Itinerary は嵌まった・自力発見された)。
- だが業界越えの『深さ』は別物=汎用の土台が効くことと、特定の領域に専用であることは違う(#139 SeatMap のグリッド◎/属性△ と同じ構図)。
「自力発見された=完成」ではない。 自力発見は方向の正しさの証明で、深さは別途 legs[] のような専用のモードで埋める。#358 を早くクローズした自分を、#140 の予備知識ゼロの AI が正直に訂正した——やってみたループは、自分の過去の判断の検証装置でもある。
拾った点
- 🟡 LineChip / RouteBadge:系統番号(渋66/東98)のチップを #138 に続きまた手組み=「交通/交通運用で最も再利用される小片」=#392(#138+#140=2/3・路線色つきの識別チップ・Badge[状態]と別)。
- 🟡 出発地/目的地の検索バー:出発地/目的地+入れ替え の乗換案内の入力の組み合わせが無い=#392 に併記。
- 🟡 PageHeader の align=center + actions + onBack 無しで微妙に左寄り(軽微)。
今回 src の新規コンポーネントなし(4/5・Itinerary の別業界での自力発見+#358 を再開・LineChip 2/3)。
📊 コンポーネント化スコアボード(作成済 12個)
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline 進行中:BottomActionBar 3/3接近・StatusLevel 2/3・ExpiryBadge 2/3・StatusBoard 2/3・TransitItinerary(legs)2/3・LineChip 2/3
📋 モード進捗
- ✈️ 航空:事業者向け5 + 利用者向け6 ✅/🚆 鉄道:事業者向け5 + 利用者向け6 ✅
- 🚌 バス:事業者向け2 + 利用者向け3(接近/高速予約/経路検索) / 次モード
次回予告(やってみた #141)
- 新モード タクシー(配車 事業者向け=車両×注文マッチング/呼出 利用者向け=配車アプリ)=4モード目で土台がどう効くか+配車盤で StatusBoard 3回目。
試す
- gunjo.jp / 旅程 Itinerary / リストカード ListCard / npm
@gunjo/ui/ GitHub / 前回まで #1〜#139 - GunjoUI by UIXHERO
#126 の Itinerary が別モードで自力発見された——だが「自力発見=完成」ではない。業界越えは方向の正しさを証明し、深さは専用モードで埋める。やってみたループは、自分の早すぎたクローズを訂正した。
この連載は、作者が AI(Claude と Codex)と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。