#461
心理学・認知バイアス
#461視覚的アンカー
視覚的アンカー
別名・表記:Visual Anchor
UIXHERO Definition
スキャン(流し読み)しているユーザーの視線を繋ぎ止め、次の情報を読むための足がかりとなる目立つ要素。
概要
ユーザーがページを流し読み(スキャン)する際、視線を引きつけ、繋ぎ止める役割を果たす視覚的に目立つ要素。 人間の視覚は連続的に読むのではなく、サッカード(跳躍的視線移動) を繰り返しながら情報を探索する。そのため、画像、太字の見出し、引用ボックスなどの顕著な要素が「視線の停留点(Fixation)」となり、次の情報へと導く足場(アンカー)として機能する。 これにより、テキストの壁(Wall of Text)による認知負荷を軽減し、離脱を防ぐ。
視覚的階層が「情報全体の優先順位構造」を設計するのに対し、視覚的アンカーは「スキャン中の視線の停留点」を作る局所的な装置である。
UXでの活用
- アイキャッチ画像: 記事の冒頭に魅力的な画像を配置することで、ユーザーの興味を惹きつけ、本文へと誘導する(エントリーポイント)。
- リストとアイコン: 箇条書きのリストには、先頭にチェックマークやアイコンを置くことで、視覚的なリズムを作り、読みやすくする。
- 引用デザイン: 重要なメッセージを大きな文字サイズや装飾付きのボックス(Blockquote)で囲むことで、スキャンしているユーザーの目を止め、要点だけでも伝えられるようにする。
💡 使いどころ
記事のデザイン。文字ばかりのページで、読者の目が滑らないように、「見出し」「引用ブロック」「画像」を配置してリズムを作る。
⚠️ 注意点・誤用
アンカーが多すぎると、逆に視線がばらついて集中できない(カオスな状態)。あくまで「休憩地点」として使う。
具体例
- ブログ記事の途中に挿入される関連画像
- Webサイトの「特徴3選」のようなアイコン付きリスト
出典・参考文献:
- Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124(3), 372–422.
- Nielsen, J. (2006). F-Shaped Pattern for Reading Web Content. Nielsen Norman Group.
- Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when you're surfing? Using eye tracking to predict salient regions of web pages. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 21–30.