AI に受信トレイ（メール一覧＋詳細）を作らせてみた — 枠組みは強い、でも"選べるリスト"が無い（やってみた #26）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠受信トレイ（webmail 風の一覧＋詳細）⁠。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、フォルダのサイドバー（未読数つき）・メッセージ一覧（送信者・件名・抜粋・未読・スター・選択・一括操作）・詳細ペイン（本文＋返信ツールバー）・⁠デスクトップは分割／モバイルは一覧↔詳細を戻るボタンで切替⁠・空状態・スケルトン。#15 通知センターや #16 エディタとは別の「一覧＋詳細」の組み立てです。

結果 — 4/5

tsc/build 緑・console 0・⁠h1 1個・listbox で aria-selected・未読は太字＋アクセントバー＋読み上げ専用の "Unread"（色だけに頼らない）⁠・375px でのはみ出し0・一覧↔詳細の戻るボタン・ダークモード完全。

枠組みは強い: ⁠Sidebar/SidebarItem（count＝未読バッジ）・Resizable（キーボード操作できる仕切り・role=separator・矢印キーでリサイズ）・ScrollArea・Sheet（モバイルのドロワー）・Checkbox/Toggle（スターは aria-pressed）・TooltipButton⁠。

そして⁠前ラウンドの修正が、また即効きました⁠:

⁠Badge as="span"⁠（#128・前回）でラベルをインラインに、⁠EmptyState headingLevel⁠（#104）で見出し階層を維持、⁠Tooltip が自分の内側に provider を持つ仕組み⁠（#52）で provider 不要。

直した不備が、毎回 次の画面で武器になっています。

でも 4/5 を阻んだ — "選べるリスト"が無い

⁠① 選択できるリストのコンポーネントが無い（#135・重大）。⁠ List/ListItem は見た目だけの印（dot/check/number）のみ——selected/onSelect/役割/キーボード無し、しかも ListItem が中身を text-sm text-muted-foreground で⁠強制的に包む⁠ので、中身の濃い行が入らない（docs も「操作は Checkbox/Toggle で組め」と明記）。⁠受信トレイの核⁠（listbox/option/aria-selected/フォーカスの持ち回り/矢印キー）を全部手組みしました。

⁠② Resizable の size が既定で px（#133・ほぼ致命的）。⁠ maxSize={55} がペインを ⁠55px に潰す⁠（react-resizable-panels@4 は素の数値＝px）。docs は number とだけ書いて px か % か無記載＝⁠エラーも出ずに黙って崩れる⁠。"38%" の文字列で回避しました。

今ラウンドの修正

• ⁠#133⁠: ResizablePanel が素の数値を % として解釈するように（数値＝％という直感に合わせる・px は "200px" の文字列で）。
• ⁠#134⁠: SidebarItem の未読数を、ボタンの読み上げ名に関連付け（"Inbox 4"→"Inbox, 4"）＋countLabel prop（"4 unread"）。見えている数字は aria-hidden に。

選べるリスト(#135)・一覧＋詳細の組み立て(#136)は beta ゲート（新しいコンポーネント）です。

学び — 「枠組み」と「中身のリスト」は別

枠組み（Sidebar/Resizable/ScrollArea/Sheet/Toolbar）→ 揃っている・強い
中身（選択できるリスト行＋一覧＋詳細）→ 無い。一覧＋詳細の画面の核はこっち

受信トレイ・検索結果・ファイル一覧・管理テーブル——⁠「選べるリスト」は、一覧＋詳細の画面すべての核⁠です。枠組みが強いほど、このコンポーネントの不在が際立ちます。アクセシビリティは手組みで完璧に組めましたが、それはデザインシステムが持つべきものです。

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

• ⁠エラー画面 / カレンダー予定表 / 設定ウィザード⁠ ほか。選べるリストと組み立てを引き続き。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#25
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。枠組みは強い、次は"選べるリスト"。回すほど、核になるコンポーネントが見えます。