第1章　人間は、見たものをそのまま見ていない

画面を開いた瞬間、目には色、明るさ、輪郭、文字、画像などが入ってきます。しかし、私たちが経験するのは、それらを一つずつ数えた結果ではありません。「上にナビゲーションがある」「中央に大きな告知がある」「ここまでが一つの内容に見える」といった、整理された画面です。

この違いは、Web デザインを見る出発点になります。

画面が読みにくいとき、HTML が間違っているとは限りません。CSS の値が一般的な値から外れているとも限りません。画面上の要素が、作り手の意図とは違うまとまりや強さで知覚されている可能性があります。

この章では、内容を詳しく読む前に、画面に見えるまとまり、密度、強さ、流れを観察します。読み終えたとき、画面をすぐに「よい」「悪い」と評価するのではなく、まず「何が、どのように見えているか」を説明できることを目指します。

ここでいう「読む前」は、文字や画像の意味を無視するという意味ではありません。最初の一巡では形と配置を見て、次の一巡で内容へ戻ります。二つの見方を往復するための、一時的な順序です。

最初に、短い観察を試します。次の無注釈画面を、ひとまず 10 秒ほど見てください。10 秒は観察を始めるための便宜的な目安であり、人の知覚を測る基準ではありません。時間を延ばしても構いません。

詳しく読まずに「分かれて見える領域」「周囲との差が大きい箇所」「繰り返される方向」を一つずつ記録します。この時点では、用語も原因も書かなくて構いません。章末で同じ記録へ戻ります。

この章で見るもの

• 画面はいくつのまとまりに見えるか
• どこに面積、明暗、太さ、孤立の大きな差があるか
• どの方向の揃い、反復、間隔が順序を示しているか
• 内容を隠しても残る構造は何か
• HTML の構造と、見た目の構造はどう違うか

1.1 画面にあるものと、見えている関係

目は画面を保存していない

カメラは、レンズを通った光を画像として記録します。このため、人間の目もカメラのように世界を写し取り、脳がその画像を見る、と説明されることがあります。

このたとえは、光が目へ入るところまでを考えるには便利です。しかし、人間が何を「見るか」を説明するには足りません。

私たちは画面の全画素を、同じ精度、同じ強さで経験しているわけではありません。注意を向ける場所は変わります。過去に見た画面の経験も持ち込みます。近いものをまとめ、境界を見つけ、前にあるものと後ろにあるものを分けます。読めないほど短い時間でも、大きな色面や密集した領域は見えます。

ここで区別したいのが、表示上の属性と、知覚や行動についての記述です。

• 画面には、色、明るさ、位置、大きさなどの表示上の属性がある
• 観察者には、目標、経験、言語、身体的な条件がある
• 道具と環境には、ビューポート、ズーム、入力方法、光、中断などの条件がある
• それらの条件のもとで、まとまりを報告したり、情報を探したり、操作したりする

この並びは、知覚が順番に処理されて頭の中へ画面の複製を作る、という生理学的なモデルではありません。この章では知覚の神経機構を扱いません。本書で大切なのは、「画面に置いたもの」と「人が条件のもとで報告・利用するもの」を同じだと決めつけないことです。

観察条件カード

画面について結論を述べる前に、結論を左右しそうな条件だけを書きます。

• 人：初見か、既知か、使用言語、必要なら視覚・運動上の条件
• 課題：概要を知る、日程を探す、申し込む、監視する
• 道具：ビューポート、ズーム、入力方法、ブラウザの状態
• 環境：光、騒音、移動、時間制約、中断

毎回すべてを埋める必要はありません。「この条件が変わると結論も変わる」と考えられる項目を残します。

見えているものは、画面の中だけで決まらない

同じ画面でも、何をしようとしているかによって見つけるものは変わります。

文化祭のサイトを開いた人を考えます。開催日を知りたい人は、日付らしい数字やカレンダーのアイコンを探すかもしれません。出演を申し込みたい人は、「参加」「募集」「申込」といった言葉や、ボタンらしい形を探すでしょう。会場へ向かっている人は、住所や地図へのリンクを優先します。

画面の視覚的な構成が同じでも、利用者の目標によって注意の向け方は変わります。屋外の眩しい場所、小さな画面、通信中で画像がまだ届いていない状態でも、経験される画面は変わります。

したがって、「人間はこの順番で見る」と画面だけから断定することはできません。本書で「最初に見えやすい」「まとまりとして知覚されやすい」と書くときは、傾向や仮説を述べています。誰にでも必ず同じことが起こる、という意味ではありません。

さらに、見慣れた形式も判断へ影響します。下線をリンクの手がかりとして読むことや、右向きの三角形を再生操作と結びつけることは、形だけから必然的に決まるわけではありません。印刷物、OS、Web サービスを使う中で学んだ慣習が加わっています。読み方向、文字体系、地域、世代、利用してきた道具が変われば、同じ配置の読み方も変わりえます。

1.2 読む前に、ページの骨格は見えている

観察に使う最小の語彙

この章では、感覚的な言葉を捨てるのではなく、比較できる属性へ一度ほどきます。

これらは厳密な測定用語ではありません。「強い」は初回注視や実際の閲覧順を意味しません。画面属性から立てる仮説と、観察者の主観報告と、行動や視線の測定結果は区別します。

どこまでを一要素、一領域と数えるかにも解釈が入ります。この表は、感覚を機械的に数値へ変換するものではありません。別の人が同じ箇所を指して話せるように、比較相手を探すための足場です。

文章を意味ではなく形として見る

Web ページを見ると、私たちはすぐに文章を読み始めます。内容を理解できることは重要ですが、デザインを観察するときには、それが邪魔になる場合もあります。

文章の意味を追っていると、次のような関係を見落としやすくなります。

• 見出しより補助情報の方が大きい
• 一つの説明だけ行長が極端に長い
• 関係する二つの情報の間に大きな空白がある
• ページの上半分だけ密度が高い
• 同じ役割の項目が異なる幅を持つ

そこで、文字をいったん読まず、灰色の矩形として見ます。文字の一行を一本の長方形へ置き換えるように想像してください。太い見出しは太い矩形、短いラベルは短い矩形、段落は細い矩形の集まりです。

すると、言葉の意味より先に、量と配置の関係が見えてきます。

矩形化して見えるもの

矩形化は、画面を分析するための一時的な観察法です。次のような問いに向いています。

• 文字量は、画面のどこへ集中しているか
• 見出しと本文の大きさには、識別できる差があるか
• 行長は、同じ種類の文章で揃っているか
• 情報の塊と塊の間には、どんな空間があるか
• 強い色面や画像は、文字の塊とどう釣り合っているか

一方、矩形化すると失われるものもあります。

書体の形、言葉の意味、文の難しさ、画像の主題、色の連想は観察できません。たとえば、同じ長さの二つの見出しでも、「本日中止」と「開催レポート」では、利用者にとっての重要度が違います。矩形化した画面だけを根拠に、情報の優先順位が正しいかどうかは決められません。

情報を減らす観察法は、画面の真実を見せるフィルターではありません。普段とは違う関係を見つけるために、観察条件を変える道具です。

矩形化の後は、必ず文字へ戻ります。字種、Weight、行間、改行位置、言葉の意味が、先ほど見た骨格へ何を加えたかをもう一度記録します。文字を形と声として観察する方法は、第7章で詳しく扱います。

1.3 ばらばらの刺激が、まとまりとして見える

知覚的組織化という問題

夜空の星は、一つひとつ離れています。それでも、いくつかの星を線で結んだ形として見ることがあります。途切れた輪郭から円を見たり、並んだ点から列を見たりすることもあります。

視覚系が、個々の刺激をまとまりや対象として構成することを、知覚的組織化と呼びます。

この問題を考えるうえで大きな影響を与えたのが、20 世紀初頭の欧州で展開し、その後の視知覚研究で検討・更新されてきたゲシュタルト心理学です。知覚経験を独立した感覚要素の寄せ集めとしてだけ説明せず、全体として成立する構造を研究しました。研究者名と原著は章末の参考資料に示します。

Web デザインの記事では、「ゲシュタルトの法則」として近接、類同、閉合などが一覧にされることがあります。本書でも、これらを後の章で扱います。ここでは、画面が要素の一覧ではなく、関係を持つ構造として見えることだけを押さえます。原則の競合と限界は 1.7 で確かめます。

知覚的なまとまりは、複数の手がかり、画面の内容、過去の経験、利用者の目標が関わって生まれます。「近接の法則に従ったから正しい」という使い方は、理論の説明としても、デザインの判断としても粗すぎます。

プレグナンツは「よいデザイン」の法則ではない

正確に知る――ここは後から読んでも構いません

次の説明は理論の射程を確かめるための発展部分です。章末の観察は、この用語を暗記しなくても行えます。

ゲシュタルト心理学に関係する用語として、プレグナンツの原理があります。

簡単に言えば、私たちの知覚経験は、与えられた条件のもとで、できるだけ安定した、まとまりのある構造として成立する傾向がある、という考え方です。

ただし、「単純なデザインほど優れている」「左右対称なら美しい」といったデザイン上の正解を示す原理ではありません。

ここで使われる「よい形」「よい組織」という表現の「よい」は、道徳的によい、使いやすい、美しいという意味ではありません。知覚上どのような組織が成立するかを論じるための歴史的な表現です。また、プレグナンツを精密に定義し、具体的な条件ごとに予測することの難しさも、後の研究で指摘されてきました。

この章では、プレグナンツを「画面を単純にするための法則」として使いません。画面にある刺激を私たちが受動的に写し取っているのではなく、構造を持つ経験として知覚している、という入口として扱います。

1.4 情報を減らすと、別の関係が見える

Web ページは多くの種類の情報を同時に伝えます。文章の意味、色、画像、形、位置、動きが重なるため、どの手がかりが画面の見え方へ影響しているかを分けにくくなります。

情報の一部を一時的に減らすと、観察しやすくなる関係があります。ここでは、グレースケール、ぼかし、シルエットという三つの方法を比べます。

グレースケールで明度の関係を見る

色相と彩度を取り除き、明るさの差を中心に見る方法です。

たとえば、鮮やかな青と鮮やかな赤は、色としては明確に違って見えます。しかし、グレースケールにすると近い灰色になる場合があります。色の違いを取り除くことで、文字と背景の明度差や、色へ依存していた分類に気づけます。

ただし、グレースケールで区別しにくいからといって、元の画面でも必ず区別できないとは限りません。反対に、グレースケールで明度差があっても、文字サイズ、細さ、周辺の光、視覚特性などによって読みやすさは変わります。アクセシビリティの適合性を、この加工だけで判定することはできません。

ぼかして大きな強弱を見る

細部が読めない程度に画面をぼかすと、文字の意味や細い線が弱まり、大きな色面、画像、明暗、密集した領域が残ります。

これは、どの領域に大きな面積や明暗差が残るかを考える手がかりになります。主題より大きな告知面がある、行動を促す要素と背景の明暗差が小さい、といった観察から仮説を作れます。

ぼかした画面を、人の「実際の見え方」と呼ぶことはできません。ぼかしの量によって結果は変わりますし、低視力の状態を再現するものでもありません。あくまで細部を一時的に弱める観察法です。

シルエットで領域の形を見る

文字や画像の細部を取り除き、主な領域を少数の明度面へ置き換えます。すると、画面のどこが埋まり、どこが空いているか、要素の外形がどの方向へ連続しているかを見やすくなります。

シルエットでは、文章の意味も画像の主題も失われます。画像が画面の半分を占めていることは分かっても、その画像が人物なのか商品なのか、どちらを向いているのかは分かりません。

加工前の画面へ必ず戻る

どの方法にも、見えやすくなる関係と見えなくなる情報があります。

1. 通常の画面で違和感を記録する
2. 情報を一種類だけ減らす
3. 何が見えやすくなり、何が失われたかを書く
4. 通常の画面へ戻り、最初の違和感を説明できるか考える

加工結果だけでデザインを評価せず、通常の画面へ戻るところまでが一つの観察です。

加工条件も記録します。縮尺、グレースケールの変換方法、ぼかし半径、シルエットへ変換する規則が変われば、見える結果も変わります。これは人の見え方を測る検査ではなく、説明候補を見つけるための教育的な比較です。

1.5 DOM の木と、目に見える構造は一致しない

ブラウザは HTML を解析して Document を構築します。現在の DOM は、読み込み後もスクリプトなどによって変化しえます。CSS によるスタイル計算、レイアウト、描画を経て見えている表示は、DOM そのものではありません。

この木構造は、文書と実装を考えるために重要です。しかし、利用者が画面上で知覚するまとまりと同じものではありません。

同じ親を持っていても、別々に見える

一つの section の中に、見出し、説明、申込ボタンが入っているとします。現在の DOM 上では、同じ親要素の子です。

ところが、見出しと説明の間が広く、説明と次のセクションの画像が近ければ、見出しだけが孤立し、説明は次の内容へ属して見えるかもしれません。同じ親に置かれていても、視覚上のまとまりは意図と異なります。

別の親を持っていても、一組に見える

反対に、コード上では別のコンポーネントに属する「残り 3 席」という表示と「申し込む」というボタンが、同じ色面の中で近く並んでいれば、一つの行動領域として見えるでしょう。

ここで、HTML と見た目のどちらかが常に正しい、という話ではありません。Web 画面には、少なくとも次の異なる層があります。

これらの層は関係しますが、同じではありません。視覚的に整っていても、意味、名前、状態、操作順が適切とは限りません。反対に、意味上の構造があっても、見た人へ関係が伝わるとは限りません。

実装と接続する――ここは後から読んでも構いません

DOM 順、Accessibility Tree、読み上げ順、キーボードのフォーカス順は同じ概念ではありません。この章では、それらの挙動を一括して説明しません。Semantic HTML、CSS のレイアウト、支援技術との接続は、後の章で資料と実例を伴って扱います。

この章で覚えておきたいのは、DevTools で木構造を確認しても、人がどうまとめて見るかの答えにはならないことです。コードは重要な証拠ですが、画面を観察する仕事を代行しません。

1.6 観察と解釈と評価を書き分ける

「この画面は分かりにくい」という言葉には、複数の段階が混ざっています。

何が見えているのか。なぜそう見えると考えたのか。目的に照らして、どのように判断したのか。この三つを分けると、他の人と検討しやすくなります。

観察

画面上で比較できる属性を、証拠源とともに記述します。利用者の操作を記録する場合は、表示の記述とは別にします。

表示上の字面を比べると、告知バナーの文字はページ見出しより高い。告知だけが色面を持ち、見出しの背景には色面がない。

第三者が同じ条件で画面を見たとき、どこを指しているか確認できる書き方です。数値を測っていなくても、比較相手を示せます。

解釈

観察した差が、どのような意味を持つかの候補を書きます。

告知バナーがページの主題より先に注意を引き、何のサイトかを理解する前に告知を読ませる可能性がある。

解釈には不確実性があります。利用者が告知を探しているなら、先に注意を向けるかもしれません。色より言葉の意味が強く働く場合もあります。このため、「可能性がある」「別の説明も考えられる」と書きます。

評価

目的や条件に照らし、望ましいかどうかを判断します。

初めて来た人にイベントの内容を理解してもらうことがこのページの第一目的なら、告知が主題より強く見える構成は、その目的に合っていない。

評価には基準が必要です。告知を最優先で伝えるページなら、同じ構成を適切と評価する可能性があります。祝祭感を先に作るという表現意図に対しては、大きな色面が期待を作ると評価するかもしれません。「強く見える」という観察だけでは、よいか悪いかは決まりません。

表現意図は、評価を免れるための説明ではありません。意図した経験が受け手にも生じるか、情報到達や操作を不必要に妨げないかを検討する仮説になります。

三つは完全に切り離せない

観察は、何の解釈も含まない純粋な記録ではありません。「告知バナー」と名付ける時点で、画面の役割を解釈しています。どこを観察するかも、知識や関心に影響されます。

それでも書き分ける価値はあります。事実のように述べた部分が推測だった、目的を共有しないまま評価だけが衝突していた、といった問題を見つけやすくなるからです。

この区別は、第19章でデザインレビューの方法として詳しく扱います。第1章では、まず文章の形を変えるだけで十分です。

• 「分かりにくい」ではなく、画面上の差を書く
• 原因を述べるときは、仮説であることを示す
• よしあしを述べるときは、目的と利用状況を書く

1.7 ゲシュタルト原則だけで画面を説明できるか

知覚の原則を知ると、画面を見る言葉が増えます。一方で、見つけた用語だけですべてを説明したくなる危険もあります。

複数の手がかりは競合する

四つのカードが並んでいる画面を考えます。

• 左の二つと右の二つの間だけ距離が広い
• 一つ目と三つ目が青く、二つ目と四つ目が白い
• 上の二つだけ同じ背景面に入っている
• 一つ目と二つ目は「参加者向け」、三つ目と四つ目は「来場者向け」と書かれている

距離、色、背景、意味が、それぞれ異なるまとまりを示しています。「近いものを仲間と思う」という説明だけでは、どのまとまりが成立するか決められません。

ここから、一つの予測を作れます。色、背景、文言を固定したまま、左の二枚と右の二枚の間隔だけを広げると、左右の組として報告する人が増えるのではないか。これはまだ結果ではありません。F06 では、この変更前後を一差で比べ、距離以外の説明を残します。

実際の Web 画面では、手がかりはもっと多くなります。位置、形、文字、画像、動き、操作後の反応、過去に使ったサイトの経験が重なります。

原則は目的を決めない

近接によって三つの項目が一組に見えるとしても、それが望ましいかどうかは、三つを一組として理解してほしいかによって変わります。

知覚心理学は、何が重要か、ブランドをどう表現したいか、誰へ何を伝えるべきかを決めてくれません。デザイン上の目的を決めた後で、その意図が画面上の手がかりへ翻訳されているかを考える助けになります。

原則は人間を直接見た結果ではない

画面を見て「近接の原則が原因だ」と説明しても、それだけで利用者が実際に取り違えると証明したことにはなりません。

まず、距離の関係を観察します。次に、取り違えが起こるかもしれないという仮説を作ります。比較画面を作り、必要なら実際の利用者の行動を見ます。

本書の中心にあるのは、この往復です。

1. 画面を見る
2. 違いを記述する
3. 名前を手がかりに説明候補を作る
4. 別の説明を残す
5. 画面を変えて比べる
6. 人間の行動で確かめる

名前を知ると、次から見つけられます。そして、名前を知ると、次から疑えます。

1.8 問い――内容を読まずに、何が見えるか

次の画面を二巡して観察します。最初の一巡では文章の内容を詳しく読まず、二巡目で内容と短いブリーフへ戻ります。

問い

1. 画面はいくつのまとまりに見えますか。
2. 周囲より面積、明暗差、太さ、孤立が大きい領域はどこですか。
3. どの方向の揃い、反復、間隔が順序を示していますか。
4. その判断には、距離、面積、明度、境界、文字の大きさのうち、何が関わっていますか。
5. デスクトップ表示 と モバイル表示 で、まとまり方は変わりますか。
6. まだ画面だけでは判断できないことは何ですか。
7. 「最初に見つける」という仮説を確かめるなら、どんな課題と記録が必要ですか。
8. この画面で残したい、目的にかなった関係は何ですか。

一度、用語を使わずに書いてみてください。画面上の差を指せたら、それだけでも十分です。説明に使えそうな概念名があれば、後から候補として加えます。

答えの例――記録を三段階で育てる

1. 場所を指す

画面上部と、その下の大きな写真の領域が分かれて見える。写真の上には、周囲で唯一色面を持つ告知がある。

まず、どこを見ているかを第三者が指せるようにします。

2. 比較相手を足す

画面上部には、ロゴとナビゲーションからなる細長い領域があります。その下には大きな写真と見出しがあり、一つの主題領域に見えます。ただし、写真の上に置かれた告知だけが色面を持ち、主題から独立した領域にも見えます。

開催日と会場は文字サイズが近く、横に並んでいます。しかし、開催日と会場の間より、会場と申込ボタンの間が近いため、会場と申込が一組に見える可能性があります。

モバイル表示 では写真と見出しの間に告知が入るため、デスクトップ表示 より主題が分断されて見えます。一方、縦一列になることで、出演者カードの順序は追いやすくなっています。

ここでは、面積、間隔、色面、揃いという比較を足しています。実際の最終図では「デスクトップ表示」「モバイル表示」と表記し、同じ縮尺で見る全体比較と、同倍率で見る局所比較を分けます。

3. 仮説と条件を足す

この観察は、知覚的組織化という考え方から説明候補を作れます。ただし、どの領域を最初に見るかは、利用者の目的や文章の意味によっても変わります。

ここで述べた順序は視線計測の結果ではありません。表示上の手がかりから作った閲覧順の仮説です。確かめるなら、たとえば「初見の参加者が開催日を探す」という課題を定め、最初の選択、発見までの時間、迷い、発話など、何を記録するかを決めます。

残したい関係も書きます。出演者カードの左端と間隔の反復は、一覧を縦に追う手がかりになっています。告知を弱める変更を試す場合も、この反復まで崩す必要はありません。

別の答え方

この画面は、三つのまとまりではなく、上下に連続する一本の流れとして見ることもできます。各領域の左端が揃い、背景色の切替よりも垂直方向の整列が強い手がかりになっているからです。

また、告知を探してサイトを開いた人にとっては、告知が強いことは問題ではありません。画面の目的を「初見者へイベントを説明すること」と置くか、「変更情報を素早く伝えること」と置くかで、評価は変わります。

よくある考え方

情報が多すぎて、ごちゃごちゃしています。

この考え方の注意点

何を「情報」と数え、どの関係を「ごちゃごちゃ」と感じたのかが分かりません。

情報の数が同じでも、まとまり、階層、利用者の知識によって見え方は変わります。次のように書き換えると、検討できる観察になります。

告知、開催情報、申込の三つが近い距離にあり、それぞれが異なる強い色を持つため、どこまでが一つのまとまりか判断しにくい。

この文にも解釈は含まれています。しかし、どの要素とどの差を見ているか、他の人が確認できます。

必須セルフチェック

• 内容の感想だけでなく、位置、距離、形、強さを記述したか
• 「何となく」感じたことを捨てず、画面上の手がかりへ結びつけたか
• 観察と原因の推測を分けたか
• 評価するときに、ページの目的と利用状況を置いたか

発展セルフチェック

• 一つの用語で説明を終えず、別のまとまり方を考えたか
• 加工した画面だけでなく、通常の画面へ戻ったか
• 文字と画像の意味へ戻したとき、最初の評価が変わらないか確かめたか
• 自分とは違う見え方がありうることを残したか

次章へ

この章では、画面がまとまりを持つ構造として知覚されることを見ました。次章では、その手がかりの一つである距離に焦点を絞ります。

「余白が足りない」という評価を、どの要素とどの要素の距離が、どの関係を表せていないのかという観察へ変えていきます。

参考資料

• 入口: ISO, “ISO 9241-11:2018.” Usability を利用の結果として捉え、利用状況を含めて考える規格の公式紹介です。本章では概要の箇条書きだけを読み、人・課題・道具・環境を考える入口にしてください。
• 入口: W3C Web Accessibility Initiative, “Images Tutorial.” 図版の目的に応じた代替テキストと、複雑な図の説明方法を確認する公式資料です。最初に冒頭の画像分類を読むと、本書の図版仕様と接続できます。
• 発展: Johan Wagemans et al., “A Century of Gestalt Psychology in Visual Perception I: Perceptual Grouping and Figure–Ground Organization,” 2012. 知覚的グルーピングと図と地を、後続研究を含めて整理した長いレビュー論文です。最初は “Introduction” と原則を図示した箇所を確認してください。
• 発展: Jeremy M. Wolfe and Todd S. Horowitz, “Five Factors that Guide Attention in Visual Search,” 2017. 視覚探索で注意を導く要因を整理したレビューです。画面属性だけで実際の探索順を決められないことを考えるために使います。
• 発展: Johan Wagemans et al., “A Century of Gestalt Psychology in Visual Perception II: Conceptual and Theoretical Foundations,” 2012. 理論的背景と限界を確認する論文です。プレグナンツの操作化の難しさを扱う箇所が本章に対応します。
• 発展: Baingio Pinna and Katia Deiana, “Prägnanz in visual perception,” 2024. プレグナンツの説明と知覚研究での扱いを確認する論文です。
• 原典: Max Wertheimer, “Untersuchungen zur Lehre von der Gestalt. II,” 1923. 古典的原著です。ドイツ語で難度が高いため、現代のレビューを読んだ後に図と例を中心に確認してください。
• 公式仕様: WHATWG, “HTML Standard.” HTML parsing と Document の構築を確認する仕様です。
• 公式仕様: WHATWG, “DOM Standard.” Node、Tree、Document の関係を定義する仕様です。「1.1 Trees」と「4.1 Introduction to ‘The DOM’」が本章に対応します。

検索キーワード：知覚的組織化、ゲシュタルト心理学、perceptual organization、Gestalt grouping、Prägnanz、visual search task guidance