AI に欠航の振替画面を作らせてみた — 昨日作った2コンポーネントを翌日もう使い、アプリバーが3回目でコンポーネントになった（やってみた #125）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠航空の利用者向け 深掘り（利用者向けバックログ）⁠——⁠欠航・遅延時の振替・再予約⁠（欠航通知・代替便選択・再予約フロー）。

結果 — 4/5、そして「別業界での自力発見 ×2」＋「PageHeader 3回目」

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

⁠RadioCard — これのために作られた。⁠ value/title/description/tags/price/highlight/leading が代替便カードに1:1（便名+空席 / 時刻+所要 / tags / 差額 / 追加なし）。正しい role=radiogroup・矢印キー・≥44px・チェックが色に依存しない。⁠摩擦ゼロ。「既製の選択カードは嵌まったか？＝断然 yes。」⁠ ⁠FilterChips — 単一選択の絞り込み（いつ：すべて/当日/翌日）に 摩擦ゼロ。⁠ scroll-snap・矢印キー。

⁠#121 で作った RadioCard と #122 で作った FilterChips が、その数回後の #125 で別の予備知識ゼロの AI に2つとも自力発見された。⁠ 作る→翌画面で発掘、の法則が、⁠1画面で2コンポーネント同時に⁠起きた——全業種共通/利用者向けの土台への信頼が積み上がっている証拠。

観測の核 — PageHeader が3回目（3回目）

⁠モバイルのページヘッダー / アプリバー＝手組み。本当の欠落。⁠ Header（唯一の nav-header の export・索引が薦める）は⁠折り返すマーケティングのバー⁠で、戻る＋中央タイトル＋右アクションの アプリバー の構造を持たない。「⁠モバイルの AppBar/TopBar コンポーネントが無い。単一で最大の追加。⁠」

⁠3回連続⁠——駅構内ナビ #120・手荷物追跡 #124・欠航振替 #125、⁠別々3人の予備知識ゼロの AI が独立にモバイルのアプリバーを手組み⁠（ライブラリの Header はデスクトップの外枠）。3回ルール発火。⁠作った。⁠

作る — PageHeader（ページヘッダー）

<PageHeader
  title="手荷物追跡" subtitle="ヤマダ クロウ 様・ABC123"
  onBack={() => router.back()}        // ≥44px の戻るボタン
  actions={<Button size="icon" variant="ghost" aria-label="更新"><IconRefresh/></Button>} />

• 戻る＋タイトル/サブ＋アクション・<header> landmark・sticky・⁠safe-area-inset-top（ノッチ）⁠・左/中央寄せ。
• ⁠onBack が 44×44px の戻るボタン⁠＝Button size="icon"（36px）が届かないタッチ標的（#362）を、このコンポーネントで満たす。
• 索引に「モバイルのアプリバー → PageHeader」を追加・Header/AppRail（デスクトップの外枠）と区別＝#120/#124/#125 の誤誘導を是正。
• PR#374・実機375pxで <header> landmark・sticky・戻るボタンが計算値で 44×44px・アクション発火・中央寄せ・0 error。

⁠今回 src で作ったもの = PageHeader⁠（3回目・⁠9個目⁠のコンポーネント化）。追記: Banner の prop の罠（title/description を持たず children のみ・title は HTML 属性と衝突して TS2322・description は黙って div に落ちる＝#324）。

学び — 「別業界での自力発見」が複利で効き始めた

深掘りで作った利用者向けの土台（ListCard・SeatMap・LoyaltySummaryCard・RadioCard・FilterChips・PageHeader）が、⁠翌画面で次々と自力発見⁠されるようになった。#125 は1画面で RadioCard と FilterChips を同時に発掘——⁠「作れば翌画面で効く」が、利用者向けでも複利になっている。⁠ 事務方で StatGroup/AmountBreakdown/ActionQueue が業種をまたいで効いたのと同じことが、利用者向けの土台でも起きている。深掘りを潰すほど、⁠新しい画面が『手組みゼロに近い組み立て』になっていく⁠——それが目指すゴール。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / ⁠PageHeader⁠ 進行中：TicketStub 2/3・SegmentedControl・StatusScreen success・Gantt 時刻軸・TransitItinerary

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

• 利用者向けバックログ続行——航空（旅程管理＝TransitItinerary 観測 / ラウンジ）or 鉄道残り（駅ナカ提案＝TicketStub 3回目を会員証/乗車券で / 払戻し）。

試す

• ⁠gunjo.jp⁠ ／ ⁠ページヘッダー PageHeader⁠ ／ ⁠選択カード RadioCard⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#124
• ⁠GunjoUI by UIXHERO⁠

昨日作った2コンポーネントを翌日もう使い、アプリバーが3回目でコンポーネントに——別業界での自力発見が、利用者向けでも複利になってきた。