AI にタクシーの車両管理画面を作らせてみた — 連載で初めての満点（5/5）（やってみた #144）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に実際の画面で組ませていく連載。今回は⁠タクシー会社の車両管理画面⁠（保有車両の一覧・車検/保険の期限・走行距離・整備計画・整備記録）。事業者向けの4枚目です。

結果 — 連載で初めての満点（5/5）

型チェックも通り、デスクトップ向けの密度で一発完成。群青を一度も触っていない AI の感想：

⁠まるで、この画面のために用意されたライブラリのようだった。⁠ 実用的で密度の高い業務コンソールを、ほとんど手作りせずに組めた。⁠必要だった6つ——車両一覧の表／消費と上限のメーター／工程バー／要対応リスト／署名記録／日付と期限の表示——が、すべて最初からコンポーネントとして揃っていた。⁠

連載144回目にして初めての満点。保守・法令対応・資産管理という事務方の中核画面が、ほぼ何も作り足さずに完成しました。

見どころ — 昨日作ったばかりのコンポーネントが、別の用途で勝手に使われた

昨日 #142 で ExpiryBadge（有効期限を色つきで見せるコンポーネント）を作ったのは、⁠乗務員の資格の期限⁠のためでした。ところが今回、AI が同じコンポーネントを⁠車検や保険の期限⁠のために自分で見つけて使ったのです：

AI「ExpiryBadge はまさにこのために作られたコンポーネント。説明文にも車検・保険・点検と書いてある。表のセル・詳細カード・件数の集計の3か所で、追加のコードなしにそのまま使えた。」

⁠乗務員の資格のために作ったコンポーネントが、車検・保険にもそのまま効いた⁠——「日付と期限」という形は、人にも車にも保険にも共通だと証明できました。もう一つ、#141 で作った StatusBoard（状態を一覧するボード）も、今回の稼働状況のボードで再び使われています。作ったコンポーネントが別の用途で勝手に使い回される——それが2つ同時に起きた回でした。

学び — 共通するパターンに合わせて作ると、業界を越えて効く

「日付と期限」は、乗務員でも車両でも保険でも契約でも、やっていることは同じです。特定の業種向けではなく、こうした⁠共通のパターン⁠に合わせてコンポーネントを作ると、別の分野でも自然に使い回せます。今回それがはっきり出ました。

気づいた課題 — デスクトップ用の見出しバーが毎回足りない（4回目）

AI「一番ほしいのは、デスクトップの画面上部に置く軽い見出しバー。PageHeader はモバイル専用、Header はサイト全体のナビ用で重い。各画面の見出しは、どのコンソールでも毎回手作りになっている。」

#130・#134・#135・#144 と⁠4回目⁠の指摘。デスクトップ専用の見出しバー（DesktopPageHeader）が要りそうなので、課題として記録しました（#397）。

⁠今回、新しく作ったコンポーネントはゼロ⁠（満点・保守画面が全て摩擦なく組め、別用途での再利用2件、見出しバーの課題を1件記録）。

これまでに群青へ加わったコンポーネント（14個）

AmountBreakdown / ActionQueue / ListCard / Gantt / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge

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

• ⁠タクシーの配車アプリ（利用者向け）⁠（呼び出し・到着まで○分・料金見積・乗車・決済）でタクシー編を締めます。

試す

• ⁠gunjo.jp⁠ ／ ⁠ExpiryBadge⁠ ／ ⁠StatusBoard⁠ ／ ⁠Meter⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• ⁠GunjoUI by UIXHERO⁠

連載で初めての満点。「日付と期限」という共通のパターンで作ったコンポーネントが、資格でも車検でも勝手に使われた——共通のパターンに合わせて作ったコンポーネントほど、業界を越えて深く効く、という回でした。