AI にタクシー配車アプリを作らせてみた — 4回貯めた「ボトムバー」がついにコンポーネント化、タクシーの利用者向け 深掘り開始（やってみた #147）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠タクシーの利用者向け⁠（配車・乗務員・営収・車両・苦情・需要予測の 事業者向け6枚に続く消費者側）——⁠配車アプリ⁠（呼出・到着まで○分・ドライバー/車両・料金・決済）。これでタクシーの利用者向けの深掘りを開始(事業者向け6 に対し利用者向け1 は非対称・継続)。

結果 — 4/5、そして連載で4回貯めた欠落が作る合図に

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

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

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

配車アプリの「⁠走行サマリ＋主要ボタン⁠」の固定ボトムバーを、予備知識ゼロの AI がまた手組みした：

「⁠BottomBar/ActionBar/BottomActionBar が、まとめて呼び出す入口（@gunjo/ui）にも docs にも無い・索引も『専用コンポーネントなし』と認める。StatusBar は名前が候補に見えるが w-[640px]/grid-cols-2/bg-primary でデスクトップの状態帯＝罠。だから手組みした(固定 bottom-0・border-t・backdrop-blur・safe-area-inset・左に料金/ETA・右に大きなボタン)。追加すべき筆頭＝BottomActionBar(固定のボタン+金額/ETA の差込口+safe-area)・あらゆる 決済/配車/予約/フード で必須。⁠」

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

作る — 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＝ボタン・stack(ボタンを全幅で上に)・sticky(既定)・maxWidth(タブレット中央)。border-t＋bg-background/95 backdrop-blur＋pb-[env(safe-area-inset-bottom)](ホームインジケータを避ける)。
• ⁠サーバー描画で安全⁠(hooks/ハンドラ 無し・ボタンの onClick は呼び出し側の Button に)。
• ⁠PageHeader(上)の対＝下の固定ボタンドック⁠。索引の「専用コンポーネントなし」を BottomActionBar に反転＋StatusBar(固定幅のデスクトップ帯)との『これではない』の一節。
• PR#401・ブラウザ検証375px(ボタン＋料金¥1,200〜＋到着4分 ETA・border-t・0 error)。

⁠今回 src で作ったもの = BottomActionBar⁠（3回目・⁠15個目⁠のコンポーネント化・#391 の BottomActionBar の半分を解決）。

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

#125 で PageHeader（上のアプリバー）を作ったとき、同じ画面で「アプリバーの手組み層」と「ボトムバーの手組み層」が両方あった。PageHeader は3回で先に固まったが、⁠ボトムバーは4回かけて後から固まった⁠。モバイル画面は⁠上（ナビ）と下（主要ボタン）の2つの固定の枠で挟まれる⁠——上を作ったら、下も必ず3回ルールに達する。⁠対になるコンポーネントは、片方が固まったら、もう片方も時間差で必ず来る。⁠ PageHeader↔BottomActionBar、ScanInput↔TicketStub（読取↔提示）、RouteStops↔Itinerary（追跡↔計画）——群青の土台は「対」で完成していく。

📊 コンポーネント化スコアボード（作成済 ⁠15個⁠）

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

📋 モード進捗 — タクシーの利用者向け 深掘り開始

• ✈️🚆 航空/鉄道：各 事業者向け5+利用者向け6 ✅／🚌 バス：事業者向け2+利用者向け3
• 🚕 ⁠タクシー：事業者向け6 + 利用者向け1（配車アプリ・利用者向け深掘り継続）⁠ ✅

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

• ※どれに進むかは、次回までに決める。候補：バスの利用者向けを厚く（残り）／トラック（配送追跡=利用者向け・運行=事業者向け）／別案。

試す

• ⁠gunjo.jp⁠ ／ ⁠ボトムアクションバー BottomActionBar⁠ ／ ⁠ページヘッダー PageHeader⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#146
• ⁠GunjoUI by UIXHERO⁠

4回貯めた「下部固定のボタン」が固まり、タクシーの利用者向けの深掘りが始まった（事業者向け6 に対し利用者向けは1枚目・継続）——対になるコンポーネントは、片方が固まったら、もう片方も時間差で必ず来る。PageHeader の対は BottomActionBar だった。