テスト・評価
デザインQAの確認項目｜画面を出す前に見る8分野のチェックリスト
画面を公開する前に見るデザインQAの確認項目を、8分野のチェックリストにして、合格ラインの数字の出典つきで示します。分野は余白・文字・押せるもの・色とコントラスト・配置と揃え・状態の表示・入力・画像です。デザインQA（Design QA）は、実装された画面が設計どおりに見えるか、使う人が迷わず操作できるかを公開前に確かめる工程で、動くかを見るQAテストとは別に行います。
AIにUIを作らせると、既存のコンポーネントが作り直される
AIに画面を作らせると、すでに手元にあるものが見つけてもらえず、作り直されることがあります。予備知識ゼロのAIに175画面を組ませた記録では、それが起きるかどうかは、AIの能力よりも「説明がどこに書いてあるか」に強く出ていました。同じコンポーネントの説明文を直す前と後を、実際の文面と語数で並べます。自分のコードベースで確かめる手順も付けました。
AIを使いこなすとは、プロンプトの話ではなかった｜1つの会話に全部やらせるのをやめて、5つの役に分ける
AIに仕事を頼むとき、指示も生成も確認も直しも、1つの会話の中でやっていませんか。私たちは記事や翻訳や図を作る13種類の仕事の流れを、人・司令AI・生成AI・照合プログラム・文脈ゼロのAI（事情を何も知らないAI）の5つの役に分けて回しています。いちばん効いているのは、その文脈ゼロのAIに検品させる段でした。この記事自身を例に、5役の流れと、明日から1つの会話を分ける手順をまとめます。
予備知識ゼロのAIに170画面組ませたら、デザインシステムに26個のコンポーネントが加わった
群青を一度も見たことのない予備知識ゼロのAIに、公開ドキュメントとnpmだけを渡して実業種の画面を170枚組ませた記録の総集編です。3回手組みされたものだけを作るという運用で26のコンポーネントが加わるまでと、その過程で見えた5つの法則をまとめます。
AIを「忖度しない検査役」にする方法論 — 手組みの跡は、足りないコンポーネントの地図
AIにUIを作らせるのではなく、AIに「何が作れなかったか」を書かせる方法論です。予備知識ゼロのAIの「無い」が強い証拠になる理由、手組みの跡を次に作るコンポーネントの仕様として読む手順、AIが正直に書ける環境の作り方をまとめます。
「作るべき理由」には強さの段階がある — なぜ『HTML構造上つくれない』が最強か
そのコンポーネントを作るべきかの判断根拠は、弱・中・強の3段に分かれます。最も強いのは「既存のコンポーネントではHTML構造上つくれない」です。書類ダウンロード行を例に、拡張で足りる場合と新設しかない場合の線を引きます。
「ユースケース別の対応表」の落とし穴 — 予備知識ゼロのAIが誤誘導された6パターン
やりたいことからコンポーネントを引く一覧は、間違った先へ誘導すると、載せないより危険です。予備知識ゼロのAIに170画面を組ませて見つかった誤誘導を6つのパターンに整理し、対応表の質を測る4つの軸（型・アクセシビリティ・形・扱う対象）を示します。
3回確認で生まれたコンポーネントたち — 26の新コンポーネントはどう群青に加わったか
3つの別々の画面で独立に手組みされたら初めて作る、という運用を170画面続けて群青に加わった26のコンポーネントを、8つのグループに束ねて紹介します。どの3画面が根拠になったかを、画面の番号つきで辿れます。
作ってから再発見までの距離が縮む — コンポーネントの蓄積が育つとはこういうことだった
デザインシステムが育ったかどうかは、作ったコンポーネントが次に自力で見つかるまでのラウンド数で測れます。170画面のコールドテストで、この距離は初期の17から終盤の1〜2まで縮みました。距離を縮める3つの仕組みも並べます。
「完走」の定義が変わった — 運輸5モードを、事業者向けと利用者向けの両面で走り切った記録
鉄道・航空・バス・タクシー・トラックの5モードを、事業者向けと利用者向けの両面で60画面以上走り切った記録です。利用者向けを1枚で締めかけた失敗から、完走の定義を「両面が同じ厚みになったとき」に引き直すまでを書きます。
AIが作った画面で、実際に起きた29の失敗
自分たちがAIに作らせた業務画面175枚を検品し、実際に起きた失敗を29個並べました。すべて画面の番号つきです。動く画面が出てくることと、出してよいことは別です。各項目に、手元の画面で確かめるための目安を1行添えています。
ユーザビリティテストはどこに依頼すればいいか — 依頼先5種類の向き不向きと、頼む前に決めておくこと
ユーザビリティテストの依頼先には、UXリサーチの専門会社、作った制作会社、フリーランス、セルフサービスのツール、人を呼ばない専門家レビューの5つがあります。それぞれが向く場面と向かない場面、頼む前に用意しておくもの、見積もりが何で動くか、外注では買えないものをまとめます。