この記事の要点
- Flow（導線）は、UI検品で使う6つの観点のうちの2つめです。前の画面からの流れ、次の一歩、戻る手段の3つがつながっているかを見ます
- Clarityが1枚の画面の中を見るのに対し、Flowはその画面の前と後ろを見ます。順番があり、Clarityが通っていない画面のFlowは測れません
- AIが作った1画面では、12体のレビュアー全員が「戻る・閉じる・取り消しが無い」を指摘しました。それでも総合判定は動きませんでした。その理由まで書きます
Flow（導線）とは何を見る観点か
UI検品では、1つの画面を6つの観点に分けて見ます。Clarity（明瞭さ）、Flow（導線）、Action（行動）、Trust（信頼）、Friction（摩擦）、Feasibility（実装性）の6つです。
このうち Flow が見るのは、その画面が前後とつながっているかどうかです。確かめるのは3つ。
- 前の画面からの流れが、自然につながっているか
- 次の一歩への入口が、迷わず見つかるか
- 戻る・やり直す・離脱後の復帰が、いずれも成立しているか
1つめのClarity（明瞭さ）が1枚の画面の中だけを見るのに対し、Flow はその画面に来る前と、出ていった後を見ます。
この2つには順番があります。 何の画面か分からなければ、そこからどこへ進むべきかも判断できません。Clarityが通っていない画面のFlowは測れないので、先にClarityを見ます。
自分の画面のFlowは、自分では判定できない
Clarityと同じ壁が、別の形で出てきます。作った人は、その画面に来る道筋を全部知っています。
どのボタンから来たか。次にどこへ行くのか。この一覧の何番目を選んで、いまパネルが開いているのか。作りながら何十回も通っているので、迷いようがありません。
一方、初めて開いた人が持っているのは、いま画面に見えているものだけです。どこから来たかも、何を選んだ結果いまこうなっているかも、画面が教えてくれなければ分かりません。
だから Flow でも、覚えていることを使わずに済む確かめ方に置き換えます。次の章で、実際の画面を見ながら説明します。
実例：AIが作った施工写真台帳のFlow
材料は前回と同じ、デザインシステム 群青（GUNJO） で作られた画面です。群青を一度も見たことのないAIに、公開ドキュメントとnpmで配っている中身だけを渡して組ませた、建設業の施工写真台帳。撮影日・工種・撮影場所でひもづけた写真を一覧し、絞り込み、検査の是正を記録し、報告書用に選ぶ画面です。
6観点で検品した結果のうち、Flow は 3/5 でした。
| 観点 | スコア |
|---|---|
| Clarity（明瞭さ） | 2/5 |
| Flow（導線） | 3/5 |
| Action（行動） | 3/5 |
| Trust（信頼） | 3/5 |
| Friction（摩擦） | 3/5 |
| Feasibility（実装性） | 静止画では非採点 |
指摘は2つに集中しました。
戻る・閉じる・取り消しの導線が無く（12/12）、右パネルがどの選択の結果か分からない（10/12）
12体のレビュアー（AIと人間がまざっています）が、互いの指摘を見ない状態でそれぞれ独立に検分した結果です。 1つめは全員が、2つめは12体中10体が指摘しました。
何を選んだ結果、これが出ているのか
まず2つめから見ます。この画面には、写真の一覧と、右側に詳細のパネルがあります。
タップして拡大表示クリックして拡大表示
一覧と、右のパネル。パネルに出ている写真は、一覧の3枚目「基礎配筋 D19@200」と同じものです
右のパネルには、雲海とリフトの写真が出ています。同じ写真が一覧の3枚目にもあります。 つまりパネルは3枚目を選んだ結果なのですが、一覧側にはそれを示す印がありません。
枠も、色も、背景も、8枚とも同じです。見る人が「いま自分は3枚目を開いている」と分かる手がかりが、画面のどこにも無い状態です。
これは、作った人には見えません。3枚目を押したのは自分だからです。
戻る手段が、画面のどこにも無い
もう1つは、12体全員が指摘したものです。画面のいちばん上を見てください。
タップして拡大表示クリックして拡大表示
ヘッダの全体です。横に長いので、左半分（上）と右半分（下）に分けて並べています
左に画面の名前、右に「取り込み」と「台帳を作成」。それだけです。
戻るボタンがありません。閉じるボタンもありません。絞り込みを掛けたあとに元へ戻す手段も、選んだ写真を選び直す手段も、画面上にはありません。
「ブラウザの戻るがあるのでは」と思われたかもしれません。ブラウザの戻るは、画面の中で起きた変化には効かないことがあります。 パネルを開いた、絞り込みを掛けた、入力を途中まで進めた。こうした状態はブラウザの履歴に残らないので、戻るを押すと画面ごと前のページへ飛んで、やりかけのことが消えます。
取り消したいのが「ページ」ではなく「いましたこと」なら、その手段は画面の中に要ります（ユーザーコントロール・Undo Redo）。
自分の画面で確かめる3つの手順
最初に挙げた Flow の3つを、自分の画面で確かめます。手順はその3つに1つずつ対応しています。
| 手順 | 確かめること |
|---|---|
| 手順1 | 前の画面からの流れが、つながっているか |
| 手順2 | いま自分がどこにいるか、画面から分かるか |
| 手順3 | 戻る・やめる手段があるか |
道具は要りません。いま作っている画面を開いて、順に試してください。
手順1 押してきた言葉と、いまの見出しを、並べて読む
その画面に来る1つ前の画面を開きます。そして2つ書き出します。
- ここへ来るために押したボタンやリンクの文字
- たどり着いた画面のいちばん上の見出し
この2つを並べて読みます。「写真を登録」を押して「メディアアップロード」に着いたなら、言葉が変わっています。 押した人は、自分が押したものと違う場所に来たのではないかと一瞬考えます。
同じ言葉にするのが基本です。変えるなら、変えた理由が画面から読めるようにします。
1つ前の画面が複数ある場合は、いちばん多く使われる経路で確かめてください。全部の経路で言葉を揃えるのは、たいてい無理です。
手順2 いま選んでいるものを、一覧の中から指させるか
一覧と詳細が同じ画面にある構造なら、ここを見ます。
- 一覧から1つ選ぶ
- 詳細が出た状態で、一覧側のどれを選んだのかを指差す
- 指差した先に、選ばれていることを示す印があるかを見る
印というのは、枠が変わる、背景が付く、色が変わる、といったものです。何も変わらないなら、それは作った人だけが知っている状態です。
施工写真台帳では、パネルに写真が出ているのに一覧側は8枚とも同じ見た目でした。押した本人以外には、どれが開いているのか分かりません（状態の可視化）。
一覧と詳細が別の画面に分かれている場合は、代わりに「詳細から一覧へ戻ったとき、さっき見ていた場所に戻るか」を見てください。先頭までスクロールが飛ぶなら、そこが直し先です。
手順3 やめる・戻る・取り消すを、画面の中から探す
最後に、その画面をやめたくなった人になったつもりで探します。
- やめる手段はあるか（閉じる、キャンセル、一覧へ戻る）
- 戻る手段はあるか（1つ前の状態へ）
- 取り消す手段はあるか（さっきの操作をなかったことにする）
3つとも画面の中にあれば通過です。ブラウザの戻るは数えません。 上で書いたとおり、画面の中の変化には効かないことがあるからです。
見つからなかった場合、置き場所はナビゲーション設計にまとめてあります。要点は、やめる手段は目立たせなくてよいが、探せば見つかる場所に置くことです。主役を押しのける必要はありません。
3つ通っても、Flowの入口です
ここまでは、道具なしで1人でできる範囲です。実際の検品では、Flow だけでもう少し細かく見ます。いま全体のどのあたりにいるか分かるか、押せる場所と飾りが見分けられるか、進む入口が複数あるときどれがおすすめか分かるか、といった設問です。
採点基準は全項目を公開しています。 6観点62項目で、Flow の設問もそのまま読めます。
Review Framework（6観点62項目）を見る — design-qa.com/framework（design-qa.com を新しいタブで開く）
Flowは判定を変えない。でも、いちばん疲れるところに出る
ここが Clarity との違いです。
施工写真台帳では、12体全員が「戻る・閉じる・取り消しが無い」を指摘しました。 12体が独立に検分して全員が一致する指摘は、そう多くありません。それでも、総合判定は動きませんでした。
判定を決めたのは Clarity に立った Critical 1件のほうでした（前回の記事で書いたとおりです）。Flow の2件は、指摘としては全員一致でも、この画面の目的そのものを止めてはいなかったからです。
Flow の指摘は、判定をひっくり返しません。 その代わり、こう出ます。
- 押し間違えたときに、やり直せない
- いま何を選んでいるのか、毎回確かめ直す
- 途中でやめられないので、最後まで進んでから閉じる
使っていて疲れるのは、たいていここです。 1回あたりは数秒でも、1日に何十回も通る業務画面では積み上がります。
そして、Clarity より直すのが安いという特徴もあります。戻るボタンを1つ置く。選ばれている行に背景を付ける。画面の設計をやり直さずに済むことが多いので、見つけたその日に直せます。
6観点のうち Flow を2番目に置いたのは、この位置にあるからです。判定は変えないが、いちばん頻繁に効く。
実物を見る
判定の材料と、実際の画面はどちらも公開しています。
- 画面の原寸、AIに渡した条件、コールドテストの採点：gunjo.jp/cold-tests/175（gunjo.jp のコールドテストの記録を新しいタブで開く）
- 6観点すべての指摘と、判定に至る筋道の全文：AIが作った施工写真台帳を、出す前に検品した
- 1つめの観点：Clarity（明瞭さ）とは — 自分の画面が分かりにくいかを確かめる3つの手順
- 3つめの観点：Action（行動）
- 4つめの観点：Trust（信頼）
- 5つめの観点：Friction（摩擦）
- 6つめの観点：Feasibility（実装性）
この記事は、UIXHEROがAI（Claude）と協働で制作しています。検品の設計・判断・公開前の事実確認は人間が行い、実作業と下書き執筆はAIが担っています。
GunjoUI by UIXHERO
