この記事の要点
- Clarity（明瞭さ）は、UI検品で使う6つの観点のうちの1つです。「何の画面か」「いちばん大事な情報はどれか」「次に何をすればいいか」の3つが画面から読み取れるかを見ます
- 自分の画面のClarityは、作った本人には判定できません。見た人が受け取れるのは画面に書いてあることだけですが、作った人はそれ以外の情報を頭に持っているからです
- そこで、画面の中だけで確かめられることに置き換えます。その手順を3つ、AIが作った実際の画面を材料に見せます
Clarity（明瞭さ）とは何を見る観点か
UI検品では、1つの画面を6つの観点に分けて見ます。Clarity（明瞭さ）、Flow（導線）、Action（行動）、Trust（信頼）、Friction（摩擦）、Feasibility（実装性）の6つです。
このうち Clarity が見るのは、画面を開いた人が次の3つを読み取れるかどうかです。
- この画面は、何のための画面か
- この画面で、いちばん大事な情報はどれか
- 次に、何をすればいいか
3つとも「読み取れるか」だけを見ます。配色が好みかどうか、今風に見えるかどうかは、この観点では見ません。 きれいな画面でも3つが読み取れなければ Clarity は低くなり、素っ気ない画面でも3つが読み取れれば高くなります。
Clarity を6つのうち最初に置くのは、残りの5つがこれに乗っているからです。何の画面か分からない状態では、導線（Flow）が良いかどうかも、ボタンの表示（Action）が適切かどうかも判定できません。Clarity はその土台にあたります。
自分の画面のClarityは、自分では判定できない
ところが、この3つを自分の画面で確かめようとすると、最初の1歩でつまずきます。作った本人が「読める」と思っても、それは判定になりません。
理由は単純です。画面を見た人が受け取れるのは、画面に書いてあることだけです。 一方で、作った人はそれ以外の情報を頭に持っています。
- この画像は仮のもので、あとで差し替える
- このラベルの言葉は、社内で使っている呼び方の略
- この数字は、昨日の夜に集計した時点のもの
どれも画面には書かれていません。それでも作った人には見えています。自分が画面から読み取っているものの一部は、画面ではなく自分の記憶から来ています。 注意して見直しても、記憶は消えません。
そこで、「読めるかどうか」を自分に聞くのをやめて、画面の中だけで確かめられることに置き換えます。 どういうことか、次の章で実際の画面を見ながら説明します。
実例：AIが作った施工写真台帳のClarity
材料に使うのは、デザインシステム 群青（GUNJO） で作られた画面です。群青は UIXHERO が作っているものなので、自分たちの画面として、悪いところを全部出せます。
群青では、コールドテストという実験を続けています。群青を一度も見たことのないAIに、公開ドキュメントとnpmで配っている中身だけを渡し、実在の業種の画面を1枚組ませるものです。その175回目のお題が、建設業の施工写真台帳でした。現場監督が、撮影日・工種・撮影場所でひもづけた写真を一覧し、絞り込み、検査の是正を記録し、報告書用に選ぶ画面です。
出来上がったのが、この画面です。
タップして拡大表示クリックして拡大表示
コールドテスト#175「施工写真台帳」。原寸と、AIに渡した条件は記事の最後にリンクを置いてあります
この画面を6観点で検品しました。12体のレビュアー（AIと人間がまざっています）が、互いの指摘を見ない状態で、それぞれ独立に画面を検分しました。
結果です。
| 観点 | スコア |
|---|---|
| Clarity（明瞭さ） | 2/5 |
| Flow（導線） | 3/5 |
| Action（行動） | 3/5 |
| Trust（信頼） | 3/5 |
| Friction（摩擦） | 3/5 |
| Feasibility（実装性） | 静止画では非採点 |
Clarity だけが2点です。指摘には3段階の重さ（Critical、Major、Minor）が付きますが、この画面で Critical が立ったのは Clarity だけで、そこに12体全員が一致しました。
写真の中身がラベルと不一致（8枚すべてがストックフォト・12/12）
もう一度、上の画像を見てください。「根切り底 掘削状況」というラベルの下に、都市の空撮写真があります。「床付け完了」の下にはヤシの木。「基礎配筋 D19@200」の下は雲海。「スラブ上端筋 結束」の下はチューリップです。8枚すべてがこの調子です。
これは、AIが変なものを作ったという話ではありません。仮の画像を入れたまま、差し替えずに出しただけです。
ここが要点です。作った人は、その写真が差し替え前だと知っています。画面を見た人は知りません。 見た人が受け取るのは、「工事の記録だと名乗っている画面に、無関係な風景写真が並んでいる」という事実だけです。
そして、画面が名乗る内容と中身が食い違うと、その画面の他の表示まで疑われます。「総枚数 8」は本当に8枚なのか。「要是正 1」は本当に1件なのか。1か所の食い違いが、画面全体の確からしさを引き下げます。
自分の画面で確かめる3つの手順
ここからが本題です。最初に挙げた Clarity の3つを、自分の画面で確かめます。手順はその3つに1つずつ対応しています。
| 手順 | 確かめること |
|---|---|
| 手順1 | この画面は、何のための画面か |
| 手順2 | この画面で、いちばん大事な情報はどれか |
| 手順3 | 次に、何をすればいいか |
道具は要りません。いま作っている画面を開いて、順に試してください。
手順1 一番大きな文字と、一番大きな絵を、並べて書く
画面を見て、2つだけメモに書き出します。
- 一番大きな文字は、何と書いてあるか
- 一番大きな絵は、何を写しているか（写真、イラスト、図、グラフ）
この2つを並べて読みます。施工写真台帳なら、一番大きな文字は左上の「施工写真台帳」。一番大きな絵は、右のパネルに出ている夕暮れの雲海とリフトの支柱の写真です。別のことを言っています。ここが最初の直し先になります。
対象は写真だけではありません。中身がでたらめなグラフ、Lorem ipsum のままの説明文、テスト用の名前が並んだ一覧も同じです。画面がいちばん大きく見せている場所は、見た人がいちばん先に信じる場所です。 そこが食い違っていると、他が正しくても伝わりません。
2つが同じことを言っていれば、手順1は通過です。
手順2 文字が読めなくなるまで縮めて見る
「3秒だけ見て、何の画面か言えるか」を自分でやることはできません。知っているので、0秒で言えてしまいます。
代わりに、読めない状態を作ります。
- 画面のスクリーンショットを撮る
- ブラウザの表示倍率を25%くらいまで下げる（画像編集ソフトで縮小してもかまいません）
- 本文の文字が読めなくなった状態で、その画面を見る
文字が消えると、大きさ・濃さ・色・余白だけが残ります。そこで残ったものが、画面を開いた人が最初の1秒で受け取るものです。
施工写真台帳を縮めると、こうなります。
タップして拡大表示クリックして拡大表示
同じ画面を、文字が読めなくなるまで縮めたところ
残ったのは3つです。上に並んだ同じ形のカードが4枚。画面の上半分を占める白い塊。そして、カラフルな風景写真。 この3つから「工事の記録の画面だ」と読み取ることはできません。風景写真を絞り込んで並べる画面に見えます。
同じ形のカードが4枚並んでいることも、この見方だと分かります。原寸で読むと「総枚数 8」「本日の撮影 2」「要是正 1」「台帳 選択中 0」ですが、縮めると4つとも同じに見えます。 ところが「総枚数」は台帳全体の報告で、「台帳 選択中」はいま自分が選んでいる件数です。性質がまったく違うのに見た目が同じなので、見る人には同じ種類の情報として届きます。
自分の画面で試して何の画面か言えなかった場合、足りないのは説明文ではありません。効くのは視覚的階層（大きさ・濃さ・余白・位置で情報に順番を付けること）と、スキャンしやすさです。
手順3 次に押すものを、指で数える
最後に、その画面を初めて開いた人になったつもりで、次に押すものを指差します。
- 候補が1つなら通過です
- 2つまでは許容範囲です
- 3つ以上あるなら、決まっていないのは見る人ではなく、作り手のほうです
施工写真台帳では、画面の上半分を絞り込みが占めていて、この画面の主役である写真の一覧が下に押し出されていました（12体全員が指摘）。押してほしいものより、絞り込むための操作のほうが強く見えている状態です。
直し方は主要導線を先に決めるにまとめてあります。要点は、押してほしい1つを決めて、それ以外の強さを落とすことです。目立たせるものを増やすのではなく、周りを下げます。
押せないものの理由も、ついでに見てください。同じ画面では、「設備 0」と表示されているタブが、0件のまま押せる状態でした（12体中10体が指摘）。「いまは選べない」と分かる場合でも、なぜ選べないのかが書かれていないと、見る人はそこで止まります。ここはわかる言葉で書くの範囲で、一文足せば済むことがほとんどです。
3つ通っても、Clarityの入口です
ここまでは、道具なしで1人でできる範囲です。実際の検品では、Clarity だけでもう少し細かく見ます。一番大きな文字が具体的なことを言っているか、上から順に読んだとき大事な順に並んでいたか、色以外でも状態の違いが分かるか、といった設問です。
採点基準は全項目を公開しています。 6観点62項目で、Clarity の設問もそのまま読めます。
Review Framework（6観点62項目）を見る — design-qa.com/framework（design-qa.com を新しいタブで開く）
この記事で3つに絞ったのは、道具なしで、1人で、いま開いている画面にすぐ当てられるものを選んだためです。全項目のほうは、時間を取って1枚ずつ通すときに使ってください。
Clarityが1つ倒れると、他が無事でも総合が決まる
スコアの表に戻ります。施工写真台帳は、Clarity 以外の4観点がいずれも3/5でした。飛び抜けて悪い観点はありません。
それでも、総合判定は「要再構築」でした。判定は3段階（出してよし、要修正、要再構築）で、Clarity に立った Critical 1件が効いています。
観点ごとのスコアは、その観点に立った指摘の重さから機械的に決まります。平均では薄まりません。 他が全部そこそこでも、重い指摘が1つあれば結果はそちらに寄ります。
この画面には、もう1つ前提があります。組み立ての採点では4/5でした。 既存のコンポーネントだけで大半が組めていて、型チェックはエラー0、狭い画面でも崩れていません。「組めたか」で4点の画面が、「出せるか」で要再構築になっています。
6観点のうち Clarity を最初に書いたのは、この位置にあるからです。動くかどうかの確認をいくら足しても、Clarity は通過しません。
実物を見る
判定の材料と、実際の画面はどちらも公開しています。
- 画面の原寸、AIに渡した条件、コールドテストの採点：gunjo.jp/cold-tests/175（gunjo.jp のコールドテストの記録を新しいタブで開く）
- 6観点すべての指摘と、判定に至る筋道の全文：AIが作った施工写真台帳を、出す前に検品した
- 2つめの観点：Flow（導線）
- 3つめの観点：Action（行動）
- 4つめの観点：Trust（信頼）
- 5つめの観点：Friction（摩擦）
- 6つめの観点：Feasibility（実装性）
6つの観点は、この順に見ていくのが分かりやすい並びです。
この記事は、UIXHEROがAI（Claude）と協働で制作しています。検品の設計・判断・公開前の事実確認は人間が行い、実作業と下書き執筆はAIが担っています。
GunjoUI by UIXHERO
