#147スコア 4/5運輸：タクシー

AI にタクシー配車アプリを作らせてみた — 4回貯めた「ボトムバー」がついに結晶化、タクシー toC 深掘り開始（やってみた #147）

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

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

解説記事

AI にタクシー配車アプリを作らせてみた — 4回貯めた「ボトムバー」がついに結晶化、タクシー toC 深掘り開始（やってみた #147）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。タクシー toC（配車・乗務員・営収・車両・苦情・需要予測の toB6枚に続く消費者側）——配車アプリ（呼出・到着まで○分・ドライバー/車両・料金・決済）。これでタクシー toC の深掘りを開始(toB6 に対し toC1 は非対称・継続)。

結果 — 4/5、そして連載で4回貯めた穴が build トリガーに

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

本物のモバイル B2C キット。 PageHeader/RadioCard/AmountBreakdown/ListCard/LoyaltySummaryCard/PersonCell が ≥44px・ja-JP/JPY 既定・色のみに非依存。だが取引/リアルタイム消費者画面が必ず要る『下部固定アクションバー』だけ無い。

観測の核 — BottomActionBar 4回目（#125→#129→#139→#147）＝build

配車アプリの「走行サマリ＋主要CTA」の sticky ボトムバーを、cold AI がまた手組みした：

「BottomBar/ActionBar/BottomActionBar が barrel にも docs にも無い・索引も『専用部品なし』と認める。StatusBar は名前が候補に見えるが w-[640px]/grid-cols-2/bg-primary でデスクトップ状態帯=罠。だから手組みした(sticky bottom-0・border-t・backdrop-blur・safe-area-inset・左に料金/ETA・右に大CTA)。追加すべき #1=BottomActionBar(sticky CTA+金額/ETAスロット+safe-area)・あらゆる checkout/ride/booking/food で必須。」

欠航振替#125 + 払戻し#129 + 高速バス予約#139 + 配車アプリ#147 ＝ 別々4人の cold AI が独立に手組み。 3/3 で既に閾値を超えていたが build を保留していた——4回目で迷いゼロ、その場で build。

build — BottomActionBar（ボトムアクションバー）＝15個目、PageHeader の対

<BottomActionBar actions={<Button size="lg" onClick={call}>この内容で呼ぶ</Button>}>
  <div className="flex flex-col">
    <span className="text-xs text-muted-foreground">見積もり料金</span>
    <span className="font-semibold tabular-nums">¥1,200〜・到着 4分</span>
  </div>
</BottomActionBar>
<BottomActionBar stack actions={<Button size="lg">支払う</Button>}>…</BottomActionBar>  // CTAを全幅で上に
  • children＝走行サマリ・actions＝CTA・stack(CTA全幅で上)・sticky(既定)・maxWidth(タブレット中央)。border-t＋bg-background/95 backdrop-blur＋pb-[env(safe-area-inset-bottom)](ホームインジケータ回避)。
  • RSC-safe(hooks/handler 無し・CTA の onClick は呼び出し側の Button に)。
  • PageHeader(上)の対＝下の sticky CTA dock。索引の「専用部品なし」を BottomActionBar に反転＋StatusBar(固定幅デスクトップ帯)との NOT 節。
  • PR#401・browser検証375px(CTA＋料金¥1,200〜＋到着4分 ETA・border-t・0 error)。

今回 src build = BottomActionBar（3-confirm・15個目の結晶化・#391 の BottomActionBar 半分を解決）。

学び — 「PageHeader を build したら、対の BottomActionBar も必ず来る」

#125 で PageHeader（上のapp-bar）を build したとき、同じ画面で「app-bar 手組み層」と「ボトムバー手組み層」が両方あった。PageHeader は3回で先に結晶化したが、ボトムバーは4回かけて後から結晶化。モバイル画面は上（ナビ）と下（CTA）の2つの sticky chrome で挟まれる——上を build したら、下も必ず3-confirm に達する。対になる部品は、片方が結晶化したら、もう片方も時間差で必ず来る。 PageHeader↔BottomActionBar、ScanInput↔TicketStub（読取↔提示）、RouteStops↔Itinerary（追跡↔計画）——群青の床は「対」で完成していく。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge / BottomActionBar 進行中：ApproachCard(単車ライブETA)・StatusLevel 2/3・TransitItinerary 2/3・LineChip 2/3・Leaderboard/CaseTable

📋 モード進捗 — タクシー toC 深掘り開始

  • ✈️🚆 航空/鉄道：各 toB5+toC6 ✅／🚌 バス：toB2+toC3
  • 🚕 タクシー：toB 6 + toC 1（配車アプリ・toC深掘り継続） ✅

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

  • ※勝手に進めず KeEem に確認。候補：バス toC を厚く（残り）／トラック（配送追跡 toC・運行 toB）／別案。

試す

4回貯めた「下部固定CTA」が結晶化し、タクシー toC の深掘りが始まった（toB6 に対し toC は1枚目・継続）——対になる部品は、片方が結晶化したら、もう片方も時間差で必ず来る。PageHeader の対は BottomActionBar だった。

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

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

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

AmountBreakdownAmountLineBadgeBannerButtonListCardLoyaltySummaryCardPageHeaderPersonCellRadioCardRadioCardGroupRatingRouteStopsSeparatorSpinnerStepperStepperStepTabsTabsContentTabsListTabsTrigger

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

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