第16章　人間は、同じ規則が続くと思う

同じ形の扉に同じ取っ手が続けば、次の扉も同じ方法で開くと予測します。Web でも、青い文字を何度か押して移動できれば、次の青い文字もリンクだと考えやすくなります。反復は、説明文がなくても画面の規則を示す手がかりになります。

ただし、違うものが一つあれば、必ず重要だとは限りません。状態を示す意図的な差かもしれず、別カテゴリーかもしれず、実装漏れかもしれません。本章では、反復から推測される規則と例外を観察し、例外を意図・状態・事故のどれかに早合点せず検討します。

この章の必修は三つです。

反復している属性と、そこから予測される規則を分けて記録する
視覚的顕著性、注意、記憶、理解、選択、行動を同じ効果にまとめない
例外の理由と意味を、見た目、実装、行動で確かめる

判断には共通の八段階を使います。反復の範囲と回数を記録し、予測した対応を書き、例外の物理差と出現条件を記録します。次に複数仮説を残し、データ、部品、状態、イベント、アクセシビリティ情報を監査します。何を改善し何を測るかを決め、一属性だけを変え、目的指標、副作用、反証条件を置きます。最後に通常／例外状態、入力方法、再訪時を確かめます。

本章では、視覚的顕著性を周囲との差、注意を処理資源が向いたこと、再認を以前見た項目だと判断すること、理解を意味や結果を説明できること、選択を候補を選ぶこと、と分けます。一つを測って他も証明したことにはしません。

16.1 反復から次を予想する

日常の系列から次を予想するを示す図。 — 図 16-1　日常の系列から次を予想する

駅の案内、棚のラベル、楽譜の拍、横断歩道の信号には反復があります。私たちは、色、形、間隔、位置、順序を手がかりに次を予測します。しかし、観察された反復と頭の中で推測した規則は同じではありません。

たとえば三つの案内板が同じ高さにあっても、「同じ高さは同じ階の情報」という規則なのか、「設置器具が共通」という事情なのかは、見ただけでは決まりません。まず「同じ高さが 3 回続く」と観察し、次に「同じ階を示す可能性がある」と解釈します。

16.2 UI の規則は、反復によって見える

UI では、タイポグラフィ、角丸、余白、色、アイコン表現、位置、挙動が反復します。同じ見出し階層に同じ文字スタイル、同じ操作に同じボタン、同じ区切りに同じ間隔が続くと、利用者は画面内の語彙と文法を推測できます。

ここで見るのはトークンの値だけではありません。「青なら操作できる」「右端なら行の操作」「太字なら現在地」のように、表現と役割の対応を見ます。同じ値でも役割が違えば規則ではなく偶然かもしれません。異なる値でも、状態差という上位の規則に従っている場合があります。

観察: 何が何回、どの文脈で同じか
推測された規則: その反復から次に何を予測するか
実装仕様: 部品、バリエーション、トークン、状態条件に何が定義されているか

三つを分けると、「一貫性がない」を調査可能な言葉へ変えられます。

16.3 一つだけ違うものが強く見える

孤立項効果と顕著性を分けるを示す図。 — 図 16-3　孤立項効果と顕著性を分ける

同質な項目群の中に異なる項目があると、その項目の記憶成績が変わる場合があります。この研究史に関連する言葉が**孤立項効果（Von Restorff effect）**です。

これは「一つだけ色を変えれば必ず最初に見られ、理解され、押される」という法則ではありません。視覚的に際立つこと、視線が向くこと、後で思い出すこと、意味を理解すること、選ぶことは別の現象です。課題、提示時間、項目間の関係、既有知識によって結果は変わります。

Web では、まず差を物理的に記録します。色相、明度、面積、位置、余白、動きのどれが違うのか。その後、注意、記憶、理解、選択のどれを問題にしているかを決めます。

16.4 CTA、Danger、Selected、Notification

例外に見える差には、優先行為、危険、状態、カテゴリー、実装事故など異なる理由があります。CTA、破壊的操作、選択中の項目、未読通知には差を設ける理由がありますが、四つは同じ「目立つボタン」ではありません。

CTA は、タスク内で優先する行為を示します。
危険表示は、結果の重大さと回復可能性を伝えます。
選択状態は、集合内の現在の選択状態を示します。
通知は、新しい出来事や未処理状態を知らせます。

色だけに意味を預けません。テキスト、アイコン、位置、形、ラベルを組み合わせ、実装上の状態も同期させます。現在地には文脈に応じて aria-current、選択可能なウィジェットの選択状態には対応する役割と aria-selected を使います。ネイティブ HTML で意味と振る舞いを満たせる場合は、それを優先します。見た目が違うことと、支援技術へ状態が伝わることは別々に点検します。

16.5 予測誤差が学習を更新する

青い文字をリンクだと予測して押したのに何も起きなければ、予測と結果に差が生じます。この差を手がかりに、利用者は「この青はリンクではない」「押せる範囲が文字ではなく行全体だ」など、規則を更新するかもしれません。

本章では予測誤差を、脳内機構の万能説明にしません。ここでは研究理論の実証ではなく、予測と結果の差を記録する本書の観察枠です。

操作前に何が起きると予測したか
実際に何が起きたか
直後にどこで止まり、戻り、別の操作をしたか
次の同型画面で行動が変わったか

予測を先に質問すると自然な初回行動を変える可能性があります。明示予測系列では、同じ参加者に予測を尋ね、その質問の影響を受けた初回と次試行を追います。自然行動系列では、別の参加者に事前質問をせず、初回と次試行を追います。この系列では事前予測を直接測っていません。二系列の結果をつないで一人の学習過程にしません。

16.6 例外は強いので節約する

主要、セール、新着、警告、選択中がすべて異なる強い色で並ぶと、どの差がどの意味か学びにくくなります。問題は単なる色数ではありません。差と意味の対応が競合しています。

また、通常状態の規則が十分に反復される前に例外を置くと、何から外れたのか分かりません。例外を減らすときは、数だけでなく、役割の重複、同時に見える範囲、出現頻度、失敗時の影響を調べます。「一画面に例外は一つ」のような固定数にはしません。

ここでいう「節約」は固定の予算ではなく、同時に見える差と意味の競合を調べる比喩です。F06-C も実証済みの正解ではなく、比較する設計案の一つです。

16.7 一貫性のために例外を消さない

意図、状態、別カテゴリー、事故を示す図。 — 図 16-7　意図、状態、別カテゴリー、事故

一貫性は、すべてを同じ見た目にすることではありません。同じ条件には同じ規則を適用し、条件が違うなら、その差を説明できることです。

危険な削除と安全な保存、選択中と未選択、エラーと通常、ブランド上の焦点は、同じにすると意味を失います。反対に、同じ部品の一つだけ角丸が違うなら、実装漏れかもしれません。例外を見つけたら、少なくとも四つの仮説を残します。

意図された強調
状態を示す差
別カテゴリーを示す差
設計または実装上の事故

16.8 問い――この違いには説明可能な理由があるか

問い

商品カードが 12 件並び、一つだけボタンの色、角丸、ラベルが違います。

何が反復し、何が違いますか。
反復からどんな規則を予測しますか。
意図、状態、別カテゴリー、事故を最低限の候補として、ほかにどんな仮説がありますか。複数が同時に成立しますか。
何を改善したいですか。そのために顕著性、注意、記憶、理解、選択、完了のどれを確かめますか。
DOM、部品、トークン、状態データの何を確認しますか。
利用者の行動でどう確かめますか。

答えの例

11 件では「青、角丸 8px、『カートに入れる』」が反復し、一件だけ「赤、角丸 16px、『今すぐ購入』」です。私は、商品カードの末尾は同じボタンで同じ操作を提供するという規則を予測しました。しかし差は期間限定 CTA という意図、在庫警告という状態、予約商品という別カテゴリー、旧部品の残存という事故のどれでも説明できます。

まず商品種別と在庫状態を確認し、部品名、バリエーション、トークン、イベントを比較します。権限、地域要件、実験条件、移行途中という仮説も残し、各仮説を支持／反証するデータを書きます。強調意図なら、何を増やしたいのかを購入完了率のように定め、誤購入率、取消率、他商品発見率を各対象機会数で割って併記します。視線が向いたことだけを成功にしません。

別の答え方

予約商品なら通常商品と操作の結果が異なるため、差には理由があります。ただし色と角丸とラベルを同時に変えると、どの差が何を伝えるか分かりにくいかもしれません。カテゴリーラベルを加え、ボタンの基本文法は共有する案も比較できます。

よくある考え方

Von Restorff effect で赤いボタンが目立つので、売上が上がります。

注意点

孤立項の記憶研究から、注意、意味理解、クリック、購入を直接予測しています。目的指標と副作用を定め、実際の行動で確かめる必要があります。

リンクと補助テキストが同じ青: 反復は青いテキスト 8 件、例外は操作できない補助テキスト 2 件です。「青はリンク」を予測します。ブランド色の共有、実装漏れ、無効状態、下線による別規則を仮説にし、DOM 要素、フォーカス可能性、下線、ポインター／キーボード操作を監査します。18 歳以上の Web 利用者を対象とするリンク探索タスクで、まず補助テキストの色だけを変えます。最初に正しいリンクを選んだ人数／タスク開始人数と、補助テキストへの誤操作数／操作機会数を記録します。下線の有無だけで発見差を説明できれば、青の共有が主要因という仮説は弱まります。

選択と通知が同じバッジ: 六つのタブ中、選択中の一件と未読の二件が同じ丸印です。「丸印は選択中」を予測します。共通の注意喚起、状態設計の衝突、旧部品、未読と選択の同時成立を仮説にします。選択は tab の aria-selected とタブパネル、未読は状態データと読了条件を監査します。まず未読バッジへ「未読 3 件」というテキストだけを加えます。対象タブを説明できた人数／質問人数、未読タブを説明できた人数／質問人数、誤選択数を別に記録します。テキスト追加後も二タスクの差がなければ、丸印の競合が主要因という仮説は弱まります。

観察された反復と、推測した規則を分けて記述できる
孤立項効果を「目立たせる法則」として使っていない
例外について複数仮説を残し、見た目・実装・行動の確認方法を示せる
一属性だけの変更、目的指標、副作用、反証条件を示せる

参考

von Restorff (1933), Über die Wirkung von Bereichsbildungen im Spurenfeld — 孤立項研究の原典です。独語で難度は高く、研究条件の確認に使います。
Hunt (1995), “The subtlety of distinctiveness: What von Restorff really did” — 原研究が単純な「目立つものは覚える」という話ではないことを整理したレビューです。
ISO 9241-110:2020 — 利用者の期待への適合を、利用文脈とともに読む規格です。
WAI-ARIA 1.2 — aria-current、aria-selected 等の状態と適用される役割を確認する規範的仕様です。
WCAG 2.2, 1.4.1 / 4.1.2 — 色だけに依存しないこと、名前・役割・値を伝えることを確認します。

Webデザインを見る目