AI にオンボーディング・ウィザードを作らせてみた — 専用部品が "本職" を外していた（やってみた #13）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 多段オンボーディング・ウィザード。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /onboarding に、5ステップ（Welcome → プロフィール入力 → 設定 → チーム招待 → 完了）、ステップインジケータ、Back/Next、各ステップが妥当になるまで Next を止める、完了サマリ。

結果 — 3.5/5

tsc クリーン・next build 緑（static prerender）・クリックスルーでコンソールエラー0・hydration mismatch なし。素材は本当に良い。が、「ウィザードの本職」をやる部品が、本職を外していた。

良かったところ:

• OnboardingTemplate（hero + children の responsive 2カラム）は素直に良い。
• フォーム部品はきれいに合成できる。FormMessage は destructive 既定、Select は本物の <select>（role/キーボード無料）。
• Switch/RadioGroup は controlled/uncontrolled 両対応。TypeScript 型は全部 entry から export 済み（StepperStep/OnboardingStep…）。

粗さ — 専用部品が核を満たせない＋「a11y 内蔵」がまた破れた

① OnboardingFlow が Next を validation で止められない。 onboarding の核中の核なのに、nextDisabled/canAdvance の類が一切無い。Next ボタンは無条件で次へ進む。実際、AI は途中で OnboardingFlow を諦め、Stepper＋自前ナビに置き換えた。「onboarding 専用」を名乗る部品が、onboarding に必須の1機能を持たない → #70。

② RadioGroup がキーボードで動かない。 role="radio" はあるが role="radiogroup"・矢印キー・roving tabindex が無い＝WAI-ARIA radiogroup 不成立。#57（CommandDialog）に続いて「a11y 内蔵」の主張が破れた2箇所目 → #71。

③ Alert が固定 w-[320px]。 462px のカードでも 320px の狭い箱に。固定幅ファミリー（#47/#58/#66）の続き → #72。 ほか: Stepper のアイテム固定幅でナロー幅だと横溢れ（#73）／OnboardingTemplate が docs に非掲載・import 行や実例が無い（#74）。

直した — その回のうちに、a11y は実ブラウザで証拠を取った

Major 2件をこの回で land（PR #75）:

• #70: OnboardingStep.nextDisabled / canAdvance(index) を追加。Next/Finish を妥当性で disabled＋ガード（Back と同じ tooltip で理由表示）。
• #71: role="radiogroup"＋矢印/Home/End で選択移動＋roving tabindex。実ブラウザで検証: ArrowDown で選択が index1→2 に動き focus も追随、ArrowUp で復帰、End で末尾。警告/エラー0。

Alert の固定幅（#72）も feedback.pen 起点で land（PR #76）。実ブラウザで「Alert が親幅と同幅」を実測。3件とも drift-exclusion ゼロ・design:verify 緑で一貫。

学び — "専用部品" ほど、本職で試さないと穴が見えない

OnboardingFlow という名前を信じて2ステップ組む
→ Next を止められないと気づく
→ 結局 Stepper + 自前で組み直す

名前が仕事を約束していても、実際にその仕事をさせるまで、核の欠落は見えない。 そして「a11y 内蔵」は #57 に続き #71 でまた破れた——主張は、毎回その画面で試して初めて証拠になる。 低い点（3.5）ほど誠実。盛らず、破れたら直して、ブラウザで証拠を取る。

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

• Editor / Pricing / Error 画面 ほか未テストテンプレ＋実需要（checkout/通知フィード）。loop-until-dry。

試す

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

まだ alpha。"専用部品" を本職で試して、核の穴を見つけて直す——それが、使い続けてテストする意味。

---

<!-- 公開前: #72 反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->