#UI検品
AIを使いこなすとは、プロンプトの話ではなかった|1つの会話に全部やらせるのをやめて、5つの役に分ける
AIに仕事を頼むとき、指示も生成も確認も直しも、1つの会話の中でやっていませんか。私たちは記事や翻訳や図を作る13種類の仕事の流れを、人・司令AI・生成AI・照合プログラム・文脈ゼロのAI(事情を何も知らないAI)の5つの役に分けて回しています。いちばん効いているのは、その文脈ゼロのAIに検品させる段でした。この記事自身を例に、5役の流れと、明日から1つの会話を分ける手順をまとめます。
AIを「忖度しない検査役」にする方法論 — 手組みの跡は、足りないコンポーネントの地図
AIにUIを作らせるのではなく、AIに「何が作れなかったか」を書かせる方法論です。予備知識ゼロのAIの「無い」が強い証拠になる理由、手組みの跡を次に作るコンポーネントの仕様として読む手順、AIが正直に書ける環境の作り方をまとめます。
AIが作った画面で、実際に起きた29の失敗
自分たちがAIに作らせた業務画面175枚を検品し、実際に起きた失敗を29個並べました。すべて画面の番号つきです。動く画面が出てくることと、出してよいことは別です。各項目に、手元の画面で確かめるための目安を1行添えています。
UI検品の観点「Action(行動)」とは — 押す前に結果が分かるかを確かめる3つの手順
Actionは、UI検品で使う6つの観点のうちの3つめです。主な行動が1つに定まっているか、入力が最小限で済むか、押した結果が予測できるかを見ます。AIが作った1画面を材料に、Actionが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
UI検品の観点「Feasibility(実装性)」とは — 型が通っても画面が出ないことを確かめる3つの手順
Feasibilityは、UI検品で使う6つの観点のうちの6つめです。文字量が増えても崩れないか、狭い画面でも成立するか、運用しても一貫性が保てるかを見ます。静止画では判定しきれないため点を付けません。AIが作った1画面では、型チェックが緑でコンソールも静かなのに画面が出ませんでした。
UI検品の観点「Flow(導線)」とは — 自分の画面で迷わないかを確かめる3つの手順
Flowは、UI検品で使う6つの観点のうちの2つめです。前の画面からの流れがつながっているか、次の一歩が見つかるか、戻る・やり直すができるかを見ます。AIが作った1画面を材料に、Flowが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
UI検品の観点「Friction(摩擦)」とは — 詰まらずに最後まで進めるかを確かめる3つの手順
Frictionは、UI検品で使う6つの観点のうちの5つめです。目的までのステップが必要なものだけか、一度に受け止められる量に収まっているか、エラーや空の状態に手当てがあるかを見ます。AIが作った1画面を材料に、Frictionが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
UI検品の観点「Trust(信頼)」とは — 画面の数字が信じられるかを確かめる3つの手順
Trustは、UI検品で使う6つの観点のうちの4つめです。主張に根拠が添えてあるか、お金や個人情報に安心材料があるか、表記が事実と釣り合って一貫しているかを見ます。AIが作った1画面を材料に、Trustが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
AIが作った画面は、出していいのか|文脈ゼロのAIに175画面つくらせて分かったこと
生成AIにUIを作らせると、動く画面はかなりの確率で出てきます。では出していいかどうかは何で判断するのか。文脈ゼロのAIにデザインシステムだけで175画面を組ませた記録から、満点の回と最低点の回で何が違ったのかを、実際の画面を並べて確かめます。
UI検品の観点「Clarity(明瞭さ)」とは — 自分の画面が分かりにくいかを確かめる3つの手順
Clarityは、UI検品で使う6つの観点のうちの1つです。「何の画面か」「いちばん大事な情報はどれか」「次に何をすればいいか」が画面から読み取れるかを見ます。AIが作った1画面を材料に、Clarityが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
AIが作った施工写真台帳を、出す前に検品した — UI裁判 第1回
AI生成UIの検品を、公開された物差しで1画面ずつ行う連載「UI裁判」の第1回。デザインシステム群青のコールドテスト#175「施工写真台帳」を6観点で測り、要再構築の判定に至るまでの筋道をそのまま公開します。