ビジュアル・アンカー(Visual Anchor)とは、デザインやレイアウトの中で視覚的な目立ちやすさや強調を利用して、ユーザーの注意を特定の要素に引き付けるためのデザイン原則です。これにより、ユーザーが情報を効率的に理解し、インタラクションを容易に行えるようになります。主に色・サイズ・フォント・コントラスト・位置を利用した手法です。デザイナーはビジュアル・アンカーを使用して理想的な視覚的階層を形成していきます。
![visual anchor ビジュアル・アンカー](https://cdn.prod.website-files.com/601f8660434e9ca9c04a6144/6423cc3c6b4579a6ebd634c0_visual-anchor-imgs.png)
ビジュアル・アンカー(Visual Anchor)とは、デザインやレイアウトの中で視覚的な目立ちやすさや強調を利用して、ユーザーの注意を特定の要素に引き付けるためのデザイン原則です。これにより、ユーザーが情報を効率的に理解し、インタラクションを容易に行えるようになります。主に色・サイズ・フォント・コントラスト・位置を利用した手法です。デザイナーはビジュアル・アンカーを使用して理想的な視覚的階層を形成していきます。
人間の脳は、視覚的な刺激に敏感であり、色、形、コントラストなどの要素に対して自然に反応します。ビジュアル・アンカーは、この特性を利用して、ユーザーの目を引くポイントを作成し、情報の優先順位を設定することができます。
上記のモーダル画像の例のように、ビジュアル・アンカーはほとんどのUIに複合的に使用されています。
例としてAirbnbのログイン後のトップページをビジュアル・アンカーの視点で見ると、ユーザーにどこに目を向けて欲しいかが推測できます。まずは大きくカラフルな物件の画像に目が行き、その後は付随する星レビュー・エリア・値段に気が引かれます。その後は"display total price"のコンポーネントと検索入力ボックスを見に行き、最後に大きくユニークなアイコンのリストに順番に目が行くでしょう。
参考: