第21章 比べる
二つの画面を見比べると、単独では気づかなかった 1px のずれや色の差が見えます。しかし、比較は真実をそのまま見せる窓ではありません。並べ方、順序、基準、変更数によって、見える差も判断も変わります。
本章では、横並び比較、重ね合わせ、点滅比較を使い分け、条件を固定した比較と方向性の異なる案の批評を分けます。差異閾と JND も扱いますが、デザイン値を決める万能公式にはしません。
21.1 絶対値より、並んだ差が見つけやすい
一つのグレーを見て「#777 か#7A7A7A か」と答えるのは難しくても、二つを隣接させれば境界が見えることがあります。人は常に絶対値を読んでいるわけではなく、周囲との関係も手掛かりにします。
ただし、同時比較で見つけた差が、単独利用時にも気づかれ、タスクへ影響するとは限りません。「差がある」「差に気づく」「差が意味を持つ」を分けます。
21.2 Before／After が隠してしまうもの
変更前と変更後でビューポート、データ、スクロール、状態、フォント読込が違えば、意図した変更以外の差が混ざります。変更後が右側にあり「改善版」とラベル付けされるだけでも期待が生まれます。
記録 ID、元データのハッシュ、ブラウザ、ビューポート、画面条件、状態、スクロール、フォーカス、時刻を保存し、変更台帳と視覚差分を照合します。比較順を入れ替えた版も用意し、順序の影響を疑います。
21.3 横並び、重ね合わせ、点滅比較
- 横並び: 全体の方向性、階層、ブランド印象を並べやすい。視線移動と記憶が必要になる。
- 重ね合わせ: 位置、サイズ、形のずれを重ねて見つけやすい。透明度や合成色が新しい見えを作る。
- 点滅: 同じ位置を交互表示し、動いた領域を見つけやすい。ただし光感受性発作、片頭痛、めまいなどのリスクがあり、主経路にはしない。
既定の主経路は横並びと静止した重ね合わせにします。点滅は明示的な利用者操作がある場合だけ一往復を表示し、連続反復を既定にしません。実装する場合も WCAG 2.2 SC 2.3.1 の点滅頻度、輝度差、赤、面積の条件を監査し、中止、静止した代替比較を用意します。利用者起動であっても安全になるとは限りません。色だけで差を示さず、輪郭、パターン、ラベルも使います。
21.4 記憶で比較しない
別ページを行き来して「たぶん前より広い」と判断すると、スクロール位置、内容、時間経過が混ざります。スクリーンショットを同じ寸法で固定し、対応点を揃え、差分を同時に見られるようにします。
それでも、記憶を使う比較が無意味なわけではありません。ブランドの想起や、再訪時の印象を問うなら、時間を空けた単独提示自体が調べたい条件になります。何を比較したいかで方法を選びます。
21.5 一度に一つの差を作る
説明用図版では、一枚につき一つの差だけを作ります。row-gap を 16px から 24px へ変えるなら、内容、フォント、幅、状態を固定します。
これは案全体を作るルールではありません。実務案ではタイポグラフィ、間隔、色が関係し合います。一変数の診断図と、複合案の総合比較を別に残します。
21.6 差異閾と Just Noticeable Difference
簡単に言えば、差異閾は「どれくらい違えば弁別できるか」を扱います。より正確には、基準刺激、刺激次元、提示方法、課題、回答基準、観察者、環境を定め、刺激差と弁別回答の確率関係から推定します。
閾は人の中にある一本の硬い境界とは限りません。F05 の模式図では、二つの刺激のどちらが基準より大きいかを答える 2 択課題を用い、偶然水準である 50% より上の、事前に定めた正答率となる点を手続き上の閾として示します。何%を採るか、2 択か、同時か、時間をおいて示すかで値は変わります。
21.7 JND をデザイントークンの公式にしない
「フォントサイズは 2px 違えば見える」「不透明度は 10% 刻みなら安全」のようなルールは作れません。刺激次元、基準量、コントラスト、周辺文脈、表示装置、観察時間、個人差が違うからです。
Weber の法則は、条件によって弁別に必要な差が基準量に比例するという近似を記述します。全範囲で成立する普遍法則でも、Web のトークン計算式でもありません。トークンは製品内の役割、一貫性、アクセシビリティ、実装・運用と合わせて決めます。
21.8 比較が判断を歪める場合
極端に悪い案の隣へ本命案を置けば、本命は良く見えます。最初に見せた案が基準になり、後の差をその基準から評価することもあります。案名を「改善版」「旧版」とすれば期待が入ります。
案 ID を中立にし、提示順と左右位置を別々に記録して釣り合わせ、比較対象を選んだ理由を記録します。順序反転だけで誘導が消えたとはみなしません。評価者へ何を隠すかは倫理と実務文脈を考え、欺瞞を無条件に勧めません。
21.9 一変数比較のあとで、全体へ戻る
間隔、色、タイポグラフィを別々に改善しても、統合すると静けさが失われたり、階層が過剰になったりします。部分比較の結果を機械的に足しません。
完成案では、タスク、表現意図、ブランド、内容、レスポンシブ、状態、アクセシビリティ、運用をもう一度見ます。一変数比較は診断のレンズで、全体の答えではありません。
21.10 方向性の異なる案を比べる
同じ目的資料から、密度を保つ業務案、安心感を重視する案、強い編集的表現の案が生まれます。差が一つでないため、因果比較には向きません。しかしデザイン批評には重要です。
目的、対象者、感情、ブランド、運用、リスク、捨てる価値を並べます。「A が優勝」で終えず、どの文脈で何を選ぶ案かを言葉にします。
21.11 問い――何を固定し、何だけを変えたか
問い
二つの購入手続き画面を比較すると、変更後はエラーを見つけやすく見えます。何を確認しますか。
答えの例
ビューポートは 1280×800 で同じですが、変更前はエラー 1 件、変更後は 3 件、スクロール位置も 64px 違います。境界線の色だけでなく、エラー文言、アイコン、概要、フォーカスも変わっています。このままでは色変更の効果を帰属できません。
一軸図では同じエラー条件、スクロール、フォーカス、DOM、文言を固定し、境界線の色だけを変えます。色差だけで伝えないためアイコンとテキストは両条件に同じ状態で置きます。視覚差分で変更範囲を確認します。ただし、弁別できたか、修正成功が増えたかは未測定です。
別の答え方
完成案としては、境界線だけを孤立評価せず、概要から項目への移動、読み上げ、修正後の回復まで比較します。
別題――方向性の異なる案
同じ文化施設の目的資料から、情報密度を保つ案、静かな余白を重視する案、展示画像が画面を覆う案が出ました。どれを選びますか。
答えの例
一つの数値で順位を付けません。初回来館者の経路確認、作品への期待、施設のアイデンティティ、更新担当者の運用、短いビューポートでの文字アクセスを別軸にします。展示画像案は没入を得る代わりに予定情報を遅らせ、密度案は探索を助ける代わりに余韻を減らす可能性があります。目的資料の優先順位と、捨ててもよい価値を関係者と記録して選びます。
別の答え方
一案へ収束せず、展覧会 Landing と来館案内で役割を分ける構成も考えられます。ただし運用負荷と一貫性を追加で評価します。
よくある考え方
最も評価点の高い案を採用します。
注意点
異なる尺度を一つの点数へ合算すると、誰の価値を優先し、何を捨てたかが隠れます。未合意の軸と影響を受ける当事者も残します。
よくある考え方
赤をもっと濃くすれば JND を超えるので見つかります。
注意点
どの刺激次元、基準、観察条件、判断基準で推定した JND かがありません。色の弁別とエラー理解、タスク成功も同じではありません。
セルフチェック
- 記録条件と変更台帳を残した
- 比較法が見せる差と隠す差を説明できる
- 一変数の診断比較と複合案の批評を分けた
- JND を硬い境界やトークン公式として使っていない
- 一変数比較の後に目的と全体へ戻った
参考
- Kalloniatis & Luu, “Psychophysics of Vision,” Webvision, NCBI Bookshelf — 閾、調整法、極限法、恒常法などの入口です。
- Firestone et al. (2023), “A Shared Intuitive (Mis)understanding of Psychophysical Law…” — JND を誰にでも共通する硬い境界とみなす誤解を検討します。
- W3C WAI, WCAG 2.2 SC 1.4.1 Use of Color — 色を唯一の伝達手段にしないための公式資料です。
- W3C WAI, WCAG 2.2 SC 2.3.1 Three Flashes or Below Threshold — Blink を含む急速な表示変化の頻度、輝度差、赤、面積を監査する公式資料です。