この記事の要点
- Friction（摩擦）は、UI検品で使う6つの観点のうちの5つめです。目的まで詰まらずに進めるかを見ます
- AIが作った1画面では、写真が8枚しかないのに絞り込みの操作が5つ並び、画面の上半分を占めていました。12体のレビュアー全員が指摘しています
- 0件と表示されているタブが、0件のまま押せる状態でもありました。空の状態は事故ではなく、必ず起きる状態です
Friction（摩擦）とは何を見る観点か
UI検品では、1つの画面を6つの観点に分けて見ます。Clarity（明瞭さ）、Flow（導線）、Action（行動）、Trust（信頼）、Friction（摩擦）、Feasibility（実装性）の6つです。
このうち Friction が見るのは、目的まで詰まらずに進めるかです。確かめるのは3つ。
- 目的までのステップが、必要なものだけに絞られているか
- 一度に受け止められる量・選べる数に、収まっているか
- エラー・空の状態・待ち時間に、次へ進める手当てがあるか
Action（行動）との違いは範囲です。Action は1つの操作が実行できるかを見ます。Friction は目的に着くまでの道全体を見ます。
1つずつのボタンが正しくても、通る数が多ければ Friction は低くなります。 一つひとつは数秒でも、積み上がると人はそこで止まるからです。
自分の画面のFrictionは、自分では判定できない
ここでの壁は、これまでと少し違います。作った人は、その画面に慣れています。
どの絞り込みを使えば目的の1件に着けるか、手が覚えています。5つ並んだ操作のうち実際に使うのは1つだと知っているので、残りの4つは目に入りません。慣れた人にとって、多すぎる選択肢は「無いのと同じ」です。
初めて開いた人はそうなりません。並んでいるものは全部、読んで、判断して、選ばないといけない候補に見えます。
しかも Friction は、足したときには気づきにくいという性質があります。機能を1つ足すのは親切に見えます。それが5つ集まったときに初めて重くなりますが、そのころには足した本人も慣れています。
実例：AIが作った施工写真台帳のFriction
材料は前回までと同じ、デザインシステム 群青（GUNJO） で作られた画面です。群青を一度も見たことのないAIに、公開ドキュメントとnpmで配っている中身だけを渡して組ませた、建設業の施工写真台帳です。
6観点で検品した結果のうち、Friction は 3/5 でした。
| 観点 | スコア |
|---|---|
| Clarity（明瞭さ） | 2/5 |
| Flow（導線） | 3/5 |
| Action（行動） | 3/5 |
| Trust（信頼） | 3/5 |
| Friction（摩擦） | 3/5 |
| Feasibility（実装性） | 静止画では非採点 |
指摘はこうでした。
絞り込みが主役の一覧を押し下げ（12/12）、0件の「設備 0」も押せてしまう（10/12）
8枚の写真に、5つの絞り込み
この画面が扱う写真は、全部で 8枚です。その8枚を絞り込むために、こうなっています。
タップして拡大表示クリックして拡大表示
絞り込みの全体。キーワード検索、工種、工程、階、撮影日の5つが並びます
上から、キーワード検索、工種（6つのチップ）、工程（5つのタブ）、階のセレクト、撮影日の範囲。5種類の操作です。
8枚に対して5つの絞り込みは、多すぎます。 8枚なら、目で見て探すほうが速い。絞り込みを使う場面は、写真が数百枚に増えてからです。
そして、これが画面の上半分を占めています。 この画面の主役である写真の一覧は、その下に押し出されます。12体のレビュアー（AIと人間がまざっています）が、互いの指摘を見ない状態で検分し、全員がここを指しました。
直し方は難しくありません。絞り込みを畳んでおいて、必要な人だけが開く形にすれば、主役が上に戻ります（段階的開示）。件数が増えたら開いた状態を既定にすればよく、作り直しは要りません。
0件と書いてあるのに、押せる
もう1つは、工種のチップの並びです。
タップして拡大表示クリックして拡大表示
工種のチップ。いちばん右の「設備」だけ、件数が0です
「すべて 8」「掘削 2」「配筋 2」「型枠 2」「コンクリート 2」、そして「設備 0」。
いちばん右だけ0件です。それでも、他と同じ見た目で押せます。 押すと、写真が1枚も無い画面に着きます。
件数が書いてあるので、注意深い人は押しません。しかしチップは横に並んでいて、件数の数字は小さい。 一覧を絞りたい人は、工種の名前を読んで押します。
これは10体が指摘しました。
自分の画面で確かめる3つの手順
最初に挙げた Friction の3つを、自分の画面で確かめます。手順はその3つに1つずつ対応しています。
| 手順 | 確かめること |
|---|---|
| 手順1 | 目的までのステップが、必要なものだけか |
| 手順2 | 一度に選ばせる数が、収まっているか |
| 手順3 | 空・エラー・待ちに、手当てがあるか |
道具は要りません。いま作っている画面を開いて、順に試してください。
手順1 目的を1つ決めて、そこまでの操作を数える
その画面でいちばんよくやることを1つだけ決めます。「今日撮った写真を台帳に入れる」のように、具体的に決めてください。
そのうえで、目的に着くまでに触る操作の数を数えます。 押す、選ぶ、入力する、スクロールする。全部1つとして数えます。
数えたら、1つずつ「これを飛ばしたらどうなるか」と聞きます。 飛ばしても目的に着けるものは、飛ばせます。
施工写真台帳なら、8枚しか無いので絞り込みは全部飛ばせます。 飛ばせる操作が画面の上半分を占めているなら、そこが直し先です。
手順2 一度に見せている選択肢を数える
同じ種類の選択肢が横や縦に並んでいる場所を探して、数を数えます。
- 5つまでなら、たいてい読めます
- それ以上が並んでいるなら、まとめられないかを考えます
施工写真台帳では、工種が6つ、工程が5つ、それに階と日付が加わります。1つずつは少なくても、同じ画面に4つの並びがあるので、合計では読む量が多くなります（選択肢の最適化）。
減らし方は3つです。よく使うものだけ出して残りは畳む。似たものをまとめる。並びを1つにして中で切り替える（検索とフィルタ）。
手順3 中身が0件のときの画面を、実際に開く
最後は、0件の状態を自分で作って見ます。
- 絞り込みを、結果が0件になる組み合わせにする
- その状態の画面を見る
- 次に何をすればいいかが書いてあるかを確かめる
「該当なし」とだけ出て終わっているなら、足りません。絞り込みを外す、条件を広げる、新しく登録する。次の一手が書いてあるのが手当てです（空状態）。
そのうえで、0件と分かっている入口をどうするかを決めます。選べるのは3つです。
- 消す（その選択肢自体を出さない）
- 押せなくする（グレーにして、理由を書く）
- 押せるままにして、押した先で次の手を示す
どれでもかまいません。いちばん避けたいのは、0件と表示されているのに押せて、押すと何も無い画面に着くことです。施工写真台帳はその状態でした。
空の状態は事故ではありません。必ず起きる状態なので、最初から用意しておきます。
3つ通っても、Frictionの入口です
ここまでは、道具なしで1人でできる範囲です。実際の検品では、Friction だけでもう少し細かく見ます。待ち時間の表示があるか、エラーのときに入力した内容が残るか、といった設問です。
採点基準は全項目を公開しています。 6観点62項目で、Friction の設問もそのまま読めます。
Review Framework（6観点62項目）を見る — design-qa.com/framework（design-qa.com を新しいタブで開く）
Frictionは、足すときに生まれる
5つめまで見てきて、Friction には他と違う起き方があります。削り忘れではなく、足したことで生まれます。
絞り込みを5つ付けたのは、丁寧に作ろうとした結果です。工種でも、工程でも、階でも、日付でも探せる。機能としては、どれも間違っていません。
問題は、その画面が扱う件数に対して過剰だったことです。8枚の写真に5つの絞り込みは、探すより読むほうが時間がかかります。
だから Friction を見るときは、機能の良し悪しではなく、こう聞きます。
この画面は、いくつのものを扱うのか。
件数が決まると、必要な操作の数も決まります。8枚なら絞り込みは要らない。800枚なら要る。 同じ機能が、件数によって親切にも邪魔にもなります。
AIに作らせた画面でこれが起きやすいのは、AIが「写真を絞り込む画面」の一般的な形を持ってくるからです。その形は数百枚を前提にしています。手元のデータが8枚だという事実は、画面の形からは出てきません。
実物を見る
判定の材料と、実際の画面はどちらも公開しています。
- 画面の原寸、AIに渡した条件、コールドテストの採点：gunjo.jp/cold-tests/175（gunjo.jp のコールドテストの記録を新しいタブで開く）
- 6観点すべての指摘と、判定に至る筋道の全文：AIが作った施工写真台帳を、出す前に検品した
- 1つめの観点：Clarity（明瞭さ）
- 2つめの観点：Flow（導線）
- 3つめの観点：Action（行動）
- 4つめの観点：Trust（信頼）
- 6つめの観点：Feasibility（実装性）
この記事は、UIXHEROがAI（Claude）と協働で制作しています。検品の設計・判断・公開前の事実確認は人間が行い、実作業と下書き執筆はAIが担っています。
GunjoUI by UIXHERO
