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

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

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /onboarding に、5ステップ（Welcome → プロフィール入力 → 設定 → チーム招待 → 完了）、ステップの進み具合の表示、Back/Next、⁠各ステップの入力が妥当になるまで Next を止める⁠、完了のまとめ。

結果 — 3.5/5

tsc クリーン・next build 緑（ビルド時に静的生成）・クリックして辿っても⁠コンソールエラー0・サーバーとブラウザの表示ずれ（hydration mismatch）もなし⁠。素材は本当に良い。でも、⁠「ウィザードの本業」を担うはずのコンポーネントが、その本業を外していました。⁠

⁠良かったところ:⁠

• OnboardingTemplate（主役ブロック＋中身の、画面幅に応じた2カラム）は素直に良い。
• フォーム系のコンポーネントはきれいに組み合わせられる。FormMessage はエラー色が既定、Select は本物の <select>（役割やキーボード操作が最初から付いてくる）。
• Switch/RadioGroup は、状態を外から制御しても・任せても両方 OK。⁠TypeScript の型は全部、入口から公開済み⁠（StepperStep/OnboardingStep…）。

粗さ — 専用コンポーネントが核心を満たせない＋「アクセシビリティ内蔵」がまた破れた

⁠① OnboardingFlow が、入力チェックで Next を止められない。⁠ オンボーディングの核心中の核心なのに、nextDisabled/canAdvance の類が⁠一切ありません⁠。Next ボタンは無条件で次へ進んでしまう。実際、AI は途中で OnboardingFlow を諦め、Stepper＋自前のナビに置き換えました。⁠「オンボーディング専用」を名乗るコンポーネントが、オンボーディングに必須の1機能を持っていない⁠ → #70。

⁠② RadioGroup がキーボードで動かない。⁠ role="radio" はあるのに role="radiogroup"・矢印キー・フォーカスの持ち回り（roving tabindex）が無い＝ラジオグループとして成立していません。⁠#57（CommandDialog）に続いて、「アクセシビリティ内蔵」の主張が破れた2箇所目です⁠ → #71。

⁠③ Alert が固定幅 w-[320px]。⁠ 462px のカードの中でも、320px の狭い箱になってしまう。⁠固定幅の一族（#47/#58/#66）の続きです⁠ → #72。 ほかにも: Stepper の各項目が固定幅で、幅の狭い画面だと横にはみ出す（#73）／OnboardingTemplate が docs に載っておらず、import の書き方や実例が無い（#74）。

直した — その回のうちに、アクセシビリティは実ブラウザで証拠を取った

重要な2件を、この回のうちに反映（PR #75）:

• ⁠#70⁠: OnboardingStep.nextDisabled / canAdvance(index) を追加。入力の妥当性で Next/Finish を disabled にし、進めないようガード（Back と同じツールチップで理由を表示）。
• ⁠#71⁠: role="radiogroup"＋矢印/Home/End での選択移動＋フォーカスの持ち回り。⁠実ブラウザで検証⁠: ArrowDown で選択が 1→2 に動きフォーカスも追随、ArrowUp で戻り、End で末尾へ。警告/エラー0。

Alert の固定幅（#72）も feedback.pen を起点に反映（PR #76）。実ブラウザで「Alert が親と同じ幅」を実測しました。3件とも ⁠ドリフト検査の除外ゼロ・design:verify（自動チェック）緑⁠で一貫しています。

学び — "専用コンポーネント" ほど、本業でやらせてみないと核心の欠落が見えない

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

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

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

• ⁠Editor / Pricing / エラー画面⁠ ほか、まだ試していないテンプレ＋実需要（決済/通知フィード）。出尽くすまで回します。

試す

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

まだ alpha。"専用コンポーネント" を本業で試して、核心の欠落を見つけて直す——それが、使い続けてテストする意味です。