第10章　人間は、全部を同時には見られない

画面には、見出し、画像、ボタン、補足、告知、ナビゲーション、エラー、広告が同時に存在します。しかし、ビューポートに入っているものが、同じ強さで処理されるわけではありません。

本章では「目立たせる技法」を覚える前に、何をもって「見た」と言うのかを分けます。画面内に存在したこと、目がそこへ向いたこと、注意したこと、あとで報告できたこと、意味を理解したこと、正しく操作できたことは別です。

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

「見えた」を、存在、注意、報告、理解、行動へ分ける
視覚的顕著性と情報の重要度を同一視しない
「メリハリがない」を、比較可能な観察へ書き換える

10.1〜10.2 で一つ目、10.3〜10.5 で二つ目、10.6〜10.8 で三つ目を扱います。視線計測、50 ミリ秒提示、計算による顕著性マップは発展です。特別な装置がなくても、3 秒の短時間提示、探索タスク、一変数比較で必修を完了できます。

この章で見るもの

同時に表示されていても処理されない情報

短時間提示で測れることと測れないこと

大きさ、色、コントラスト、動き、顔

視覚的階層と優先順位

複数の主要操作

顕著性、探索、理解、タスク成功の違い

10.1 見えていても、注意しているとは限らない

申込ページの上部に「受付は本日 17 時まで」と表示されています。利用者は画面を開き、申込ボタンを押し、入力を始めました。その後で締切を尋ねると答えられませんでした。

このとき「締切を見ていない」と言いたくなります。しかし、少なくとも次を区別できます。

締切はビューポート内に存在した
目がその領域に向いた
その文字へ注意を向けた
文言を直後に報告できた
意味を理解した
締切を考慮して行動した

区分	記録の候補	言えること	まだ言えないこと
画面内の存在	DOM、スクリーンショット、ビューポート	対象が提示範囲にあった	目や注意が向いた
視線位置	条件を記録した視線計測	眼球が対象領域へ向いた	注意した、理解した
注意	手がかり、報告、成績等から限定的に推論	指定した理論とタスク内の仮説	真偽値として注意を確定する
直後報告	自由再生、再認、質問	指定した質問へ報告できた	最初に視線が向いた、深く理解した
理解	言い換え、適用問題、選択理由	指定内容をタスク上使えた	別の状況でも理解している
行動	探索時間、選択、完了、エラー	指定タスクで起きた行動	内的な理由、一般的能力

最初の一つはスクリーンショットで確認できます。二つ目には視線計測が必要です。注意そのものは単純な一層として直接読み取れず、課題と理論を定めて複数の手がかりから推論します。一つを測って、残りまで証明したことにはできません。

注意は能力不足の言い換えではない

人間がすべてを同時に処理しないことは、怠慢や能力不足ではありません。目的に関係するものを選ぶことで、行動に必要な処理を進めています。日時を探す人と、出演者を探す人では、同じ画面でも選ぶ情報が変わります。

Simons と Chabris の実験では、参加者が映像内のパスを数える課題に取り組むと、途中に現れる予期しない出来事を報告しない場合がありました。この現象は非注意性盲目を考える代表例です。ただし、Web 利用者も同じ割合でバナーを見落とす、という法則ではありません。刺激、課題、期待、質問方法が違います。

課題によって見落としが変わるを示す図。 — 図 10-2　課題によって見落としが変わる

10.2 3 秒で何が残るか

画面を 3 秒だけ提示し、隠したあとで尋ねます。

何のページだと思いましたか
最初に思い出したものは何ですか
申込方法は分かりましたか
どの文言を覚えていますか

これは、初期の理解や報告を比べるための有用なプローブです。しかし、3 秒は人間の認知能力を分ける普遍的な境界ではありません。2.9 秒では分からず、3.0 秒なら分かるわけではありません。

Lindgaard らの研究では、非常に短い提示後にも Web ページの視覚的魅力を評定でき、その評定に一貫性が見られました。ここから「50 ミリ秒で Web サイトを理解する」とは言えません。測られたのは限定された刺激に対する視覚的魅力の評定であり、内容理解、信頼、操作成功とは別です。

3 秒テストの記録

比較するなら、次を固定または記録します。

参加者へ伝えた課題
表示前の画面と開始位置
デバイス、ビューポート、ズーム
提示時間
アニメーションや画像読込の状態
隠した後の質問と順番
自由回答か選択式か
同じ画面を以前に見たか

自由再生で出なかった情報を、選択肢から再認できることがあります。「思い出せなかった」と「見れば分かる」も分けます。結果は診断名ではなく、次の比較を作る材料です。

質問も一つの得点へまとめません。「何のページか」は目的推定、「最初に思い出したもの」は自由再生、「申込方法は分かったか」は自己評価、「覚えた文言」は記憶報告です。50 ミリ秒条件をブラウザで試す場合は表示フレーム、リフレッシュレート、事前読込、マスク、実測時間が必要であり、元研究の再現とは呼びません。

10.3 大きさ、色、コントラスト、動き、顔

画面の一部は、周囲との差によって目立ちます。大きい、明暗差が大きい、一つだけ色が違う、動いている、人物の顔がある、といった特徴は注意の候補になります。

顕著性の変数を一つずつ変えるを示す図。 — 図 10-4　顕著性の変数を一つずつ変える

重要なのは、「赤は目立つ」のように属性単体で覚えないことです。赤いボタンが赤い背景上にあれば差は小さくなります。大きな画像が並ぶ画面では、大きさだけで一つを区別できません。動きも、常時動く要素が複数あれば競合し、読み取りを妨げます。

顕著性は関係です。対象と周囲、同時に見える要素、時間変化、利用者の課題との関係で考えます。

顔や動きを万能な誘導装置にしない

顔は社会的に意味のある刺激であり、動きは変化を知らせます。しかし、顔が必ず最初に見られる、視線方向へ必ず誘導される、アニメーションなら必ず通知に気づくとは言えません。画像内容、切り抜き、課題、文化、予測、周辺の強さが関わります。

動きは注意以外の条件も持ちます。意味のない反復は読む作業を妨げ、前庭障害等の症状を引き起こす可能性があります。prefers-reduced-motion への対応や停止手段は、誘導効果とは別に確認します。

10.4 視覚的階層は重要度の翻訳である

視覚的階層とは、ただ見出しを大きくすることではありません。内容や操作の優先順位を、大きさ、位置、間隔、太さ、色、コントラスト、画像、動き等の差へ翻訳した関係です。

この語彙は Web だけの発明ではありません。絵画の構図、新聞や書籍の版面、ポスター、広告、標識などは、媒体ごとの目的と制約の中で読む順序や強弱を編集してきました。固定された紙面の手法をそのままレスポンシブな画面へ移すのではなく、ビューポート、状態、操作、読み順の変化を含めて借ります。階層は自然に発見される唯一の順序ではなく、制作者が内容を選び、関係づけた編集結果です。

翻訳の前に、誰にとって、どの時点で重要かを確認します。

事業者が知らせたい新商品
利用者が今探している配送状況
法的に必要な注意
入力エラーの回復
次へ進む主操作

これらは同時に重要でも、同じ強さにする必要はありません。エラーは通常時には存在せず、発生時だけ局所的に優先されます。配送状況は購入前より購入後に重要です。状態とタスクを含めて優先順位を組み立てます。

利用者・時点	内容	放置したリスク	必要な反応	画面上の候補	確認方法
初めて申込む人・入力前	締切	受付終了後に入力する	期限を理解する	フォームの前に締切を置く	締切確認タスク
入力中・送信後	エラー	修正箇所が分からない	エラーへ戻る	概要と項目を関連づける	回復完了と誤修正
購入済み・配送中	配送状況	問合せが増える	現在地を確認する	注文単位で状態を示す	注文探索タスク

図 F05-C では、この表を完成画面へ戻します。締切をフォーム直前に置き、締切と申込ボタンの間を 8px、次のセクションまでを 32px にします。これらの値は正解ではなく、優先順位を位置と距離へ翻訳した比較候補です。初期案と同じタスクで確かめます。

観察から確認までの判断手順

利用者、時点、主課題、エラー／回復条件を特定する
内容の優先順位を表にする
現在のサイズ、位置、間隔、コントラスト、動きを観察する
優先順位との不一致を仮説にする
一変数だけ変える
探索、理解、操作、回復のどれで確認するか決める
ページ全体と別状態へ戻り、副作用を見る

最初に見えるものは最重要か

ブランドイメージを最初に感じ、その後で申込ボタンを見つける設計はあり得ます。最初に見えるものと、最初に操作すべきものが同じとは限りません。問題は順番そのものではなく、目的に必要な情報へ到達できるか、誤解や見落としを生まないかです。

10.5 主要ボタンが三つある画面

同じビューポート内に、同じ強い色のボタンが三つあります。「主要ボタンは一つにする」というレビューだけでは足りません。

三つが「申込む」「資料請求」「相談する」という競合する次の一手なら、利用者は優先順位を読み取りにくい可能性があります。一方、商品カードごとに「詳細を見る」が一つずつある一覧なら、各カードの範囲で同じ操作を反復しているだけかもしれません。

ここでいう主操作、つまり primary action は、利用者がその作用範囲で次に行う中心的な操作です。デザインシステムの primary という見た目のバリエーションとは分けます。確認する観点は数より作用範囲です。

ページ全体の主タスクは何か
セクションごとの主タスクは何か
同時に見えるボタンは同じ決定を競うか
操作の結果と取り消しにくさは同程度か
カードやダイアログの境界は知覚できるか
キーボードフォーカスやスクリーンリーダーでも関係が伝わるか

必要なら、ラベル、まとまり、位置、段階的開示、ボタンスタイルを変えます。色を弱くするだけが解決ではありません。

10.6 「メリハリがない」を観察へ変える

「メリハリがない」は違和感の入口としては役立ちますが、変更箇所を決められません。

「メリハリがない」を書き換えるを示す図。 — 図 10-7　「メリハリがない」を書き換える

次のように書き換えます。

ページタイトル 32px、セクション見出し 28px で、大きさの差が小さい
本文、補足、更新日が同じ色と太さで、役割差が見えにくい
三つの操作が同じ塗りボタンで、同時に競合して見える
ヒーロー画像の明暗差が申込ボタンより大きい
セクション間と項目内の gap がともに 24px で、まとまりの階層が距離に現れていない
エラー文が補足文と同じ位置、色、アイコンで、状態変化を区別しにくい

これで初めて「Title を 40px にする」「補足を薄くする」などの候補を作れます。ただし、値の変更は仮説です。一つだけ変え、同じ条件で比べます。

10.7 顕著なら見つかるとは限らない

画面中央で動く赤いバナーは目立ちます。しかし、利用者が探しているのは右上の「領収書を発行」です。バナーが先に注意を引けば、目的の対象はむしろ見つけにくくなるかもしれません。

視覚探索では、対象と紛らわしい候補の類似、要素数、配置、探索戦略、事前に知っている形が関わります。「一つだけ赤い」は色を手がかりに探す課題では有効でも、「請求」という意味を探す課題を必ず助けるわけではありません。

Itti と Koch らの計算モデルは、画像内の局所的な差から、刺激の特徴だけで生じるボトムアップな顕著性を予測する考え方を示します。顕著性マップは有用な仮説道具ですが、利用者の課題、知識、意味理解をすべて含む地図ではありません。ヒートマップ風の画像を作って、実際の視線データと呼んではいけません。

調べ方を選ぶ

知りたいことに対応して方法を選びます。

知りたいこと	手がかりになる方法
何が画面内に存在したか	DOM、スクリーンショット、ビューポート記録
最初に何を報告したか	短時間提示後の自由回答
どこへ眼球が向いたか	条件を記録した視線計測
対象を見つけたか	探索タスク、時間、誤選択
内容を理解したか	説明、適用問題、行動
目的を達成したか	タスク完了、エラー、時間、観察

どの方法にも取りこぼしがあります。複数の結果が一致しないことも、設計を考える材料です。

10.8 問い――最初に見えるものは、最重要か

イベント申込ページを 3 秒見たあと、次を記録します。

問い

最初に報告した要素は何ですか。
このタスクで最も重要な情報は何ですか。
両者は同じですか。違うなら、それは問題ですか。
画面上のどの差が報告へ関係した可能性がありますか。
別のタスクなら、どの要素が重要になりますか。
仮説を確かめるため、何を一つだけ変えますか。

答えの例

最初に報告されたのは出演者の顔写真でした。申込タスクで必要な締切とボタンは、写真より面積と明暗差が小さく、写真の直下に埋もれて見えます。写真の切り抜きまたはコントラストを抑え、締切とボタンを近接させると、申込に必要な情報を見つける時間が短くなる可能性があります。同じ内容、タスク、ビューポートで比較します。

これは実測結果ではなく、回答文の形式例です。自分の記録へ置き換えるときは、六問を次の観点で確認します。

最初の報告: 誰が、どの提示条件で、どの質問へ答えたか。視線とは呼ばない。
最重要: 利用者、時点、タスク、リスクを明記する。
一致の評価: 違いが探索、理解、操作、回復を妨げる条件を書く。
画面上の差: サイズ、位置、間隔、コントラスト等を比較対象つきで記す。
別タスク: 同じ画面でも優先順位が変わる反例を一つ挙げる。
確認: 固定条件、変更する一軸、指標、仮説を反証する結果を書く。

「見た」を、存在、視線、注意、報告、理解、行動へ分けられる
顕著性と情報の重要度を別に説明できる
曖昧な「メリハリ」を観察文と検証可能な仮説へ書き換えられる

参考

Simons & Chabris (1999), “Gorillas in our midst,” DOI: 10.1068/p281059 — 入口〜専門。方法とタスク条件を読み、Web 上の見落とし率へ一般化しません。
Itti & Koch (2001), “Computational modelling of visual attention,” DOI: 10.1038/35058500 — 専門。ボトムアップな計算モデルのレビューです。モデル出力を実測視線にしません。
Folk, Remington & Johnston (1992), “Involuntary covert orienting is contingent on attentional control settings,” DOI: 10.1037/0096-1523.18.4.1030 — 専門。タスク構えと注意捕捉を考える入口です。
Lindgaard et al. (2006), “Attention web designers: You have 50 milliseconds to make a good first impression!,” DOI: 10.1080/01449290500330448 — 入口〜専門。視覚的魅力評定の実験であり、内容理解の研究として引用しません。
W3C, WCAG 2.2 Understanding SC 2.2.2／2.3.3 — 入口。動きの停止と安全性を確認する公式資料であり、注意誘導効果の証明ではありません。
検索キーワード: selective attention、inattentional blindness、visual salience、attentional capture、visual search、first impression、task set

Webデザインを見る目