AI に検索結果ページを作らせてみた — "コンポーネントのフリをした、ただの見た目"（やってみた #17）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠検索結果ページ⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /search に、検索バー＋結果件数、フィルタ（カテゴリのチェックボックス・種別の Combobox・タグ）、選択中フィルタのチップ、並べ替え、結果カード、ページネーション、読み込み中→結果→空状態。

結果 — 4/5（最近で最高点）

tsc/build 緑・ビルド時に静的生成・コンソールエラー0・サーバーとブラウザの表示ずれ（hydration）なし・375px でのはみ出し0。予備知識ゼロの AI:

⁠基本コンポーネントは新規バグ0⁠。Combobox（role=combobox+listbox/option）・Checkbox（role+aria-checked）・SearchInput は全部、型どおり・支援技術向けの属性（ARIA）も正しい。⁠この層が安定しているのは維持されている⁠。

検索フィルタ一式がきれいに組めて、点も上がりました。

でも 4 止まりの理由 — "コンポーネントのフリをした、ただの見た目"

今回は⁠名前負けではありませんでした⁠（名前と実体は一致）。出たのは別の種類——⁠「基本コンポーネントが、組み立て済みのコンポーネントのフリをして出荷されている」⁠という問題です。

⁠① Pagination が完全に機能しない（アクセシビリティの5度目）。⁠ PaginationLink が ⁠href 無しの <a>⁠＝フォーカスもキーボード操作もできない。前へ/次へ/ページ番号、全部マウス専用でした。page/onPageChange も無く、表示するページ範囲や「…」の計算は使う側に丸投げ。⁠コンポーネントに見えて、実は見た目のマークアップだけ⁠ → #93。

⁠② Badge に「×で消す」機能が無い。⁠ フィルタチップ（個別に×で削除）は Badge の本命の用途なのに、×ボタンを自前で入れ子にする羽目に → #95。

⁠③ SearchInput の消去（×）ボタンが tabIndex={-1}⁠ で、キーボードで辿り着けない → #94。

直した — 今回は全部その場で（Codex 送りも beta ゲート送りもゼロ）

• ⁠#93 Pagination⁠ → 状況で形が変わるように。href があれば <a href>（SEO/SSR 向き）、無ければ ⁠<button>⁠（キーボード操作できる）。docs の href の例は <a href> のままになることを実ブラウザで確認。
• ⁠#95 Badge⁠ → onRemove を追加し、×ボタンを内蔵。フィルタチップがそのまま作れるように。
• ⁠#94 SearchInput⁠ → 消去ボタンの tabIndex={-1} を除去＋フォーカスリング。

3件とも⁠本物の <button> を有効化/生成⁠＝キーボードで操作できる。⁠PR #96 で反映⁠。design:verify 緑・除外ゼロ。

学び — "出尽くし" の輪郭が、さらに細かく見えた

基本コンポーネント ── 出尽くした（#15/#16/#17 で新規バグ0 が続く）
中間層 ── 「組み立てが未完」（コンポーネントに見えて中身は見た目だけ・配線を使う側に押し付け）
アクセシビリティ ── 種類ごとにまだ（#57/#71/#83/#87/#93）

#16 までは上位＝「名前負け」でしたが、#17 は ⁠「名前は合っているのに、中身が見た目のマークアップ止まり」⁠ という別の粗さでした。⁠"出尽くしていない" の中身が、回を追うごとに具体化していきます。⁠ 今回は全部ソース内で完結して反映＝⁠直せる不備は直しきれる段階⁠に入ってきた。4/5＝過去最高ですが、誠実に粗さも出します。

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

• ⁠エラー画面 / プロフィール / 通知設定⁠ ほか。中間層の組み立ての完成度を中心に。

試す

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

まだ alpha。基本コンポーネントは出尽くし、中間層は「見た目だけから、ちゃんと動くコンポーネントへ」磨いている最中——層ごとの "出尽くし" を1枚ずつ確かめています。