AI にタクシーの評価・サポート画面を作らせてみた — 索引が「動かないコンポーネント」に誘導した回（やってみた #150・節目）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠タクシーの利用者向けを深掘り⁠（配車#147・予約#148・履歴#149 に続く4枚目。事業者向け6 に対し利用者向けを厚く継続中）——⁠乗車後の評価・忘れ物・サポート⁠（★評価・FAQ・忘れ物問い合わせ・問い合わせ履歴）。連載 ⁠#150 の節目⁠。

結果 — 3.5/5、枠と FAQ は良いが「評価の入力」が無い

tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：

⁠枠とリストは強い。⁠ PageHeader/BottomActionBar/ListCard/SearchableAccordion/FilterChips は優秀でモバイル向けに作られている。⁠だが画面の主役＝評価の入力がある場所に、まさに欠落がある。⁠ Rating は表示専用で、索引はその表示専用のものに誤誘導する。乗車後の評価アプリにとって致命的。

観測の核 — 索引が「動かないコンポーネント」に誘導した（最悪の誤誘導）

評価★の入力——Rating を当てたくなる。だが：

予備知識ゼロの AI「⁠Rating は role=img の表示専用＝onChange も、フォーカスできる星も無い。乗車後の評価の主役は★を『設定する』ことなのに。星の radiogroup(フォーカスできるボタン+hover のプレビュー+矢印キー+星ごとの読み上げラベル+≥44px)を手組みした。しかも索引は『star rating/review input』を表示専用の Rating に誘導する＝予備知識ゼロの開発者は onChange を配線し、何も起きず、ソースを読んで初めて気付く。これは単なる欠落でなく『能動的な間違った答え』。Rating の label prop が操作できそうに見えるのも誤誘導を強める。⁠」

→ #406 ⁠RatingInput⁠（Rating の操作できる双子＝フォーカスできる星・onValueChange・hover・半星・読み上げラベル）＋索引の是正 PR#407（Rating=表示専用と明記し、入力は星の radiogroup へ）。⁠消費者側の問い合わせ状況(受付→対応中→回答済)も ApprovalSteps(社内承認)を流用＝InquiryStatus も #406 に併記。⁠

学び — 「欠落」と「能動的な誤誘導」は違う。後者の方が危険

これまで炙り出した欠陥は4種（欠落・誤誘導・業界越えの浅さ・嘘の型 #145）。だが #150 の Rating は⁠最も危険な誤誘導の形⁠：

• ただの「欠落」（コンポーネントが無い）なら、索引が「無い」と言えば採用者は手組みに向かう（#147 BottomActionBar はこれ）。
• だが「⁠動くコンポーネントに見えるが動かない⁠」（Rating は表示専用なのに入力に見える＋索引が入力用途に誘導）は、⁠採用者が成功したと思って配線し、無反応で詰まる⁠——最も発見が遅れる。

これは #145 の「嘘の型」（getRowState が型に在るのに黙って無視）の従兄弟だ。⁠型・名前・索引が『動く』と暗示するのに動かない⁠——予備知識ゼロの AI が「信じて使う」から露見する。対策は2つ：(1) ⁠表示専用コンポーネントの docstring/索引に『これは入力ではない』を明記⁠（#407 で実施）、(2) ⁠操作できる双子を作る⁠（RatingInput #406）。表示と入力は別のコンポーネント＝Rating(表示)↔RatingInput(入力)、Meter(表示)↔Slider(入力)、ExpiryBadge(表示)↔DatePicker(入力)。⁠「表示のコンポーネントがあるなら、入力の双子も要る」を索引が裏切ってはいけない。⁠

拾った点

• ✅ SearchableAccordion が FAQ に完璧に適合（検索+カテゴリ+グループ Q&A+空状態が1つのコンポーネント）。
• 🟡 ToggleGroup を「良かった点」のタグの複数選択に流用（チップの複数選択として索引に出ていない）。

⁠今回 src の新規コンポーネントなし⁠（3.5/5・Rating の索引を是正・RatingInput/InquiryStatus を課題に記録）。

📊 コンポーネント化スコアボード（作成済 ⁠15個⁠）

…PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge / BottomActionBar 進行中：⁠RatingInput/InquiryStatus⁠・SectionList・DateTimePicker/PlaceField・ApproachCard・StatusLevel 2/3

📋 タクシーの利用者向け 進捗（深掘り継続）

• 🚕 ⁠タクシー：事業者向け6 ／ 利用者向け4（配車/予約/履歴/サポート）⁠ ← 事業者向け6 に近づく・あと2枚で対称
• 残り 利用者向け候補：会員/サブスク/クーポン・法人配車

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

• タクシーの利用者向けをさらに（会員/クーポン or 法人配車）で 事業者向け6 と対称に。※どこを掘るかは、次回までに決める。

試す

• ⁠gunjo.jp⁠ ／ ⁠星評価 Rating⁠ ／ ⁠検索アコーディオン SearchableAccordion⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#149
• ⁠GunjoUI by UIXHERO⁠

索引が「動くコンポーネントに見えるが動かない Rating」へ誘導した——表示のコンポーネントがあるなら入力の双子も要る。それを索引が裏切ってはいけない。表示と入力は別のコンポーネント。