AI に空ダッシュボードを作らせてみた — 連続クリーンが、途切れた（やってみた #20）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠空（初回起動）のダッシュボード⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /dashboard-empty に、ようこそバナー、値がゼロの Statistic、データが空のチャート、オンボーディングのチェックリスト（Progress）、空のアクティビティ（EmptyState）、フルページの StatusScreen。

#18・#19 と⁠2回連続で、新しい種類の問題ゼロ⁠でした。今回はその3回目——⁠「もう本当に出尽くしたか」の詰めです。⁠

結果 — 4.5/5（だが連続記録は途切れた）

tsc/build 緑・コンソール 0・サーバーとブラウザの表示ずれ（hydration）なし・375px でのはみ出し0。機能は文句なし。⁠でも、新しい種類のアクセシビリティ問題が1つ出ました。⁠

いちばん良かった — チャートの空データが、本当に堅牢

初回起動のダッシュボードの核心は「データが無いときに壊れないか」。実機で測ったら:

• ⁠DOM 全体で NaN（非数）ゼロ。⁠ BarChart が全ゼロ→各バー height:0%・軸は残る（意図した空表示）。
• ⁠DonutChart が全ゼロ→ circular-chart-utils.ts に、はっきり if(every value<=0) return fallback⁠——ドーナツのゼロ除算クラッシュを⁠わざわざ潰してあります⁠。
• SparklineChart は data={[]}→空の線（NaN なし）。span = max-min || 1。

「空データでチャートが壊れる」は、多くのライブラリが踏む地雷です。群青は⁠はっきりとガードしてありました⁠。ここは大きな加点。

でも連続記録が途切れた — 新しい種類のアクセシビリティ問題

⁠EmptyState / StatusScreen の title が、見出しになっていない。⁠ ソースを確認:

• EmptyState.tsx:32 … <p className="text-sm font-semibold">{title}</p>
• StatusScreen.tsx:129 … <p className="text-2xl font-semibold">{resolvedTitle}</p>

＝⁠フルページの StatusScreen（"No projects yet" 等）に <h1> が一つも無い。⁠ スクリーンリーダーで見出しをたどると、内容のある画面なのに何も見つからない（WCAG 2.4.6/1.3.1）。headingLevel/as のような逃げ道も無い → #104。

⁠これは #57/#71/#83/#87/#93 に続く、アクセシビリティの6度目です。⁠ 空状態系のコンポーネントは初回起動の主役なのに、見出しの構造が抜けていた。プロフィール（#18）や設定（#19）は EmptyState を主役にしないので、⁠この画面で初めて踏みました。⁠

ほか軽微: Progress が max=0 のときにゼロ除算のガード無し（#105）／Badge に成功の色が無い（Statistic には在るのに・#106）／docs の import パスが複数ページで誤記（#50）。

学び — "出尽くした" を急がない

正直に言います。⁠#18/#19 の「2回連続クリーン」で "もう出尽くした" と思いかけました。でも #20 が否定した。⁠ #8 で「出尽くし始めた」と早とちりして #9 に否定されたのと、同じ構図です。

機能の面 ── 出尽くした（クラッシュ/NaN/型のズレなし。チャートの空データすら堅牢）
アクセシビリティ ── 種類ごとにまだ（画面の種類が変わると新しい例が出る・6度目）
docs ──── まだ（import 誤記・空データの例なし）

⁠機能は出尽くした。でも アクセシビリティの "完全網羅" は、まだ。⁠ 画面の種類を変えるたびに、その画面が主役にするコンポーネントのアクセシビリティの欠落が出ます。だから「出尽くすまで回す」は——⁠まだ回す。⁠ 盛らず、6度目のアクセシビリティを6度目として直します。

直すたびに次の回で消える。でも "次の種類の画面" が、まだ新しい欠落を見せる。それが、まだ出尽くしていない証拠です。

⁠#104（見出しの追加）/#105（Progress のガード）は PR #108 で反映⁠——EmptyState の全デモ→<h2>、StatusScreen の全6バリエーション→<h1> を実ブラウザで確認。並行して進めていた #100 Slider も PR #107 で反映。

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

• ⁠Blog / Docs 記事ページ / ランディング⁠ ほか。アクセシビリティの網羅をもう一段詰めます。

試す

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

まだ alpha。機能は出尽くし、アクセシビリティは詰めの途中——"出尽くした"と急がず、6度目を6度目として直します。