この記事の要点
- 動いたことは、出していい理由になりません。175画面のうちいちばん点が低かった2.5点の回も、型チェックは通り、コンソールエラーはゼロで、狭い画面でも崩れていませんでした
- 点が分かれたのは、その画面でいちばん大きく見せている部分が、すでにあるコンポーネントで作れたかどうかでした。満点の回と2.5点の回を、実際の画面で並べます
- だからレビューで最初に見る場所は、AIがその場で組んだところです。自分の画面で確かめる手順を3つ、最後にまとめます
動くかどうかでは、もう差がつかない
いまは、指示を出せば画面が出てきます。型は通り、コンソールは静かで、スマートフォンの幅でも崩れていません。ところが、そこから先に進めなくなります。動いていることは分かるのに、出していいかどうかが分からない。
ページネーションの出し方や、トグルの状態の見せ方を調べていたはずが、気づくと画面そのものを出していいかどうかの話になっています。
これを、実際に作らせた画面で確かめます。
材料：文脈ゼロのAIに175画面を組ませた記録
UIXHERO では、デザインシステム 群青（GUNJO）（gunjo.jp を新しいタブで開く） を使って、コールドテストという実験を続けています。群青を一度も見たことのないAIに、公開ドキュメントとnpmで配っている中身だけを渡し、実在の業種の画面を1枚組ませるものです。毎回、何も知らない状態から始めるので「コールド」と呼んでいます。渡さないものも決めています。
- 群青のソースコードは見せない。読めるのは公開ドキュメントとnpmの中身だけ
- 前の回で何があったかも伝えない。毎回、文脈ゼロのAIが1枚を担当する
- お題は実在する業種の、実際に使われている画面にする
これを続けると、同じデザインシステムに対して、条件をそろえた画面が何枚も溜まります。 群青は UIXHERO が作っているものなので、うまくいかなかった回も含めて全部出せます。
2026年8月11日時点で175画面あります。基盤になる汎用の画面が30枚、残りは金融・医療・物流・教育・保険・建設など20の業種に分かれています。採点が済んでいるのは174画面で、その平均は4.09点でした。5点満点が4回、いちばん低かったのが2.5点で1回です。4点以上が144画面なので、8割は「だいたい組めている」ところまで届いています。
この5点満点は、すでにあるコンポーネントでどれだけ組めたかの採点です。出していいかどうかの判定とは別の物差しなので、点が高いことは公開してよい理由になりません。
いちばん点が低かった回も、動作では落ちていない
2.5点だった回は、こういう状態でした。型チェックは通り、コンソールエラーはゼロ、狭い画面でも崩れていない。それでも2.5点です。
満点の回と2.5点の回で、動作の面には差がありませんでした。つまり「動く」「崩れない」は、いまのAIならほぼ通過します。通過するものを合格の基準に置くと、全部が合格になります。
満点の回と2.5点の回を、並べて見る
差がついたのは別のところです。実際の画面を2枚見てください。
満点だった回：タクシーの車両管理（5点）
お題は、タクシー会社の営業所で使う車両管理の画面です。保有車両の状態、車検と保険の期限、走行距離による整備の目安、入庫予定を1つの画面で見ます。
タップして拡大表示クリックして拡大表示
コールドテスト#144「車両管理・車検 / 整備コンソール」。この回で新しく作られたものは、ほとんどありません
この画面が必要としたものを並べます。
- 上部の指標カード5枚（保有台数、整備中、要整備、車検期限間近、走行距離オーバー）
- 左の「要対応キュー」13件。失効は赤、期限間近は黄で重さを分けている
- 右の「稼働状況盤」。車両ごとに号車・状態バッジ・車種・配置を出す
- 下の一覧表。並べ替え、絞り込み、ページネーション、タブつき
どれも、群青にすでにあったコンポーネントで組めています。 AIはほとんど作り足していません。
2.5点だった回：小売のポイントアプリ（2.5点）
お題は、ドラッグストアの会員向けマイページです。ポイント残高、会員ランク、使えるクーポン、ポイント履歴を見ます。
タップして拡大表示クリックして拡大表示
コールドテスト#118「ハッピーズ メンバーズ マイページ」。いちばん上の濃紺のカードだけが、その場で組まれています
下半分は満点の回と変わりません。クーポン一覧もポイント履歴もランク特典も、すでにあるコンポーネントで組めています。
問題は、画面のいちばん上にある濃紺の大きなカードです。会員名、ゴールド会員のバッジ、利用可能ポイント3,480P、会員証バーコードのボタン、次のランクまでの進捗バー、失効予告。この画面を開いた人がいちばん先に見るのはここで、この画面の主役です。
その主役を受け持つコンポーネントが、当時の群青にありませんでした。 だからAIはその場で組みました。
同じ主役が、3回続けて手作りされていた
決定的だったのは、これが1回きりではなかったことです。
| 回 | お題 | 点数 |
|---|---|---|
| #116 | 航空マイレージ | 3.5点 |
| #117 | 鉄道ポイント | 3点 |
| #118 | 小売のポイントアプリ | 2.5点 |
3回とも「残高とランクを見せる主役ブロック」が必要で、3回ともコンポーネントが無く、3回ともその場で組まれました。点は3.5、3、2.5と下がり続けています。 その後この主役はコンポーネントになりました。
端のほうの作り込みの差ではありません。その画面の主役が、すでにあるもので作れたかどうかで点が分かれています。
足りないものは、黙って作られる
もう1つ、レビューにそのまま効く事実があります。
この実験では、AIに「無かったので自分で組んだ」と申告するよう頼んでいます。だから跡が残ります。175回のうち 134回でその申告がありました（2026年8月11日に記録を数えたものです）。
あなたの手元には、その申告がありません。 出てきたコードでは、すでにあったコンポーネントと、今回のために組まれたものが、同じ顔で並んでいます。どちらも同じように動き、同じように見えます。見た目では区別がつきません。
さきほどの2枚も同じです。濃紺のカードは、画面を見ただけでは「その場で組まれたもの」だと分かりません。きれいに出来ているからです。AIが作った画面のレビューは、この2つを分けるところから始まります。
自分の画面で確かめる3つの手順
ここからは、いま作りかけの画面に当てられる形にします。道具は要りません。
| 手順 | 確かめること |
|---|---|
| 手順1 | この画面の主役は、すでにあるコンポーネントで出来ているか |
| 手順2 | その場で組まれた箇所は、キーボードと読み上げでも同じことができるか |
| 手順3 | 同じものを、別の画面でもう一度作っていないか |
手順1 いちばん大きく見せている部分を、指差す
画面を開いて、いちばん大きく、いちばん目立つ場所を1つ指差します。小売のポイントアプリなら、あの濃紺のカードです。
その1か所が、今回のためにその場で組まれたものなら、そこがいちばん壊れやすく、いちばん引き継ぎにくい場所です。画面の端にある小さな部品が自作でも影響は限られますが、主役が自作だと画面全体がそこに引きずられます。
すでにあるコンポーネントで出来ていれば、手順1は通過です。
手順2 自作の箇所を、マウスを使わずに操作してみる
すでにあるコンポーネントが内側に持っていた仕組みは、自前の実装には付いてきません。タブキーで順に移動できるか。矢印キーで選べるか。いま選ばれているものが読み上げで分かるか。 書かなければ、無いままです。
コールドテストの記録でも、その場で組まれた骨組みに対して、これらを1つずつ足し直す作業が繰り返し出てきます。判断の基準は キーボード操作の設計 と スクリーンリーダーのためのUX にまとめてあります。
手順3 同じものを2回作っていないか、数える
2回目が出た時点で、それはコンポーネントにする合図です。
#116から#118で起きたのは、まさにこれです。2回目（鉄道ポイント）で気づいていれば、3回目は無かった。 3つ目の画面まで放っておくと、直す場所が3か所になります。
この3つは、見た目の良し悪しの話ではありません。デザインシステムの考え方とコンポーネントの一貫性で扱ってきたことが、AIが書いたコードの上でそのまま問われています。
実物を見る
お題、点数、足りなかったもの、実際の画面が、175画面ぶん並んでいます。自分がいま作っている画面と近い業種から見ると早いです。
コールドテストの記録を見る（gunjo.jp）（gunjo.jp のコールドテストの記録を新しいタブで開く）
UIXHERO 側の対応表は 群青とUIコンポーネントの対応 にあります。どのコンポーネントについて「いつ・なぜ使うか」を書いてあるかは UIコンポーネント から辿れます。
判断を、自分の外に置く方法もある
ここまでは、自分ひとりで確かめる話でした。ただ、「出していいか」は作った本人にはいちばん見えにくい判断です。
175画面のうち1枚を、6つの観点で実際に検品した記録が AIが作った施工写真台帳を、出す前に検品した にあります。この画面はコールドテストの採点では4点でしたが、検品では「要再構築」でした。 組めたかと、出せるかは別の物差しだという例です。使っている6観点と判定は design-qa.com（design-qa.com を新しいタブで開く） で公開しています。
この記事は、UIXHEROがAI（Claude）と協働で制作しています。実験の設計・判断・公開前の事実確認は人間が行い、実作業と下書き執筆はAIが担っています。
GunjoUI by UIXHERO
