AI に価格比較ページを作らせてみた — コンポーネントは強い、でも"看板"テンプレが役割を外す（やってみた #25）

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

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、月/年トグル（価格が実際に変わる）・3〜4プランのカード（1つを「おすすめ」強調）・⁠機能比較のマトリクス（行=機能・列=プラン・✓/✗/値）⁠・FAQ・最終 CTA。

PricingTemplate という⁠まさにこの用途の目玉コンポーネント⁠があります。だから「それで組めるか」が今回の核です。

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

tsc/build 緑・console 0・⁠h1 1個・見出しレベルの飛ばし無し⁠・マトリクスは本物の <table> で ⁠全 <th> に scope（col/row/colgroup）・✓/✗ に読み上げ専用の "Included/Not included"・トグルは aria-live で状態を通知⁠・375px でのはみ出し0・ダークモード完全。⁠フルにアクセシビリティ対応した価格比較が、コンポーネントだけで組めました。⁠

そして予備知識ゼロの AI が、⁠前ラウンドの修正を称賛しました⁠:

CardTitle の as prop が ⁠いちばんよく設計されたアクセシビリティの仕掛け⁠だ。見出しの階層を飛ばさずに組むのが、簡単だった。

これは #23 で入れた #116 です。⁠直した不備が、次の回で武器になっている。⁠ Table の scope の受け渡し、Tooltip が自分の内側に provider を持つ仕組み（#52）も活きていました。

でも 4/5 を阻んだ — "看板"が役割を外す

⁠① PricingTemplate がデータで動かない、中身の薄い見本（#80・重大）。⁠ 月/年トグル無し・md:grid-cols-3 固定で4プランだと崩れ・featured が⁠色の反転のみ⁠でバッジも「おすすめ」ラベルも読み上げ用テキストも無し・機能が <Check> 固定で ✗/値を出せず・⁠自前で <h1> を持つ⁠（ページの h1 と衝突）。予備知識ゼロの AI は使わず、Card+Badge+Button で手組みしました。⁠名前負けの本体です。⁠

⁠② Badge が <p> を壊す（#128・実バグ）。⁠ ブロック要素の <div> で as/asChild が無く、<p> の中に入れると ⁠「<div> cannot be a descendant of <p>」＋サーバーとブラウザの表示ずれ（hydration mismatch）⁠。Card は as を持つのに、Badge は無かった。

今ラウンドの修正 — コンポーネント側の小さな不備を3つ

• ⁠#128⁠: Badge に as?: "div" | "span" を追加（#116 と同じ形・as="span" でインラインに置ける）。
• ⁠#129⁠: ToggleGroup の variant/size を親で受けて、各 item に設定を引き継ぐように（<ToggleGroup variant="outline"> が TS エラーだった）。
• ⁠#130⁠: Switch に label/description を追加し、aria-labelledby/aria-describedby で関連付け（ラベル付けを呼び出す側任せにしない）。

全部ソース＋既存を壊さず反映。⁠PricingTemplate をデータで動く形にする（#80）のは .pen を含む再設計＝beta ゲート⁠。

学び — 「コンポーネント」と「看板テンプレ」は別の成熟度

コンポーネント層（Card/Table/ToggleGroup/Button/Badge/ダークモード）→ フルにアクセシビリティ対応した価格比較が組める
看板テンプレ（PricingTemplate）→ デモ止まり・役割を外す（名前負け）

⁠コンポーネントが良いほど、テンプレの薄さが際立ちます。⁠ 予備知識ゼロの AI は「テンプレを使わず、コンポーネントで組めば 4/5 出せる」と示した一方、「看板を信じると詰む」も示しました。直すべきはコンポーネントではなく、⁠テンプレをコンポーネントと同じ水準に引き上げる⁠こと（#80/#74/#90 の名前負けの種類）です。

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

• ⁠エラー画面 / カレンダー予定表 / 受信トレイ⁠ ほか。テンプレの名前負けと組み立てを引き続き。

試す

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

まだ alpha。コンポーネントは強い、看板テンプレはこれから。回すほど、成熟度の差が見えます。