ビジュアル・アンカー (Visual Anchor)

ビジュアル・アンカー(Visual Anchor)とは、デザインやレイアウトの中で視覚的な目立ちやすさや強調を利用して、ユーザーの注意を特定の要素に引き付けるためのデザイン原則です。これにより、ユーザーが情報を効率的に理解し、インタラクションを容易に行えるようになります。主に色・サイズ・フォント・コントラスト・位置を利用した手法です。デザイナーはビジュアル・アンカーを使用して理想的な視覚的階層を形成していきます。

visual anchor ビジュアル・アンカー

ビジュアル・アンカーがなぜ効果があるのか

人間の脳は、視覚的な刺激に敏感であり、色、形、コントラストなどの要素に対して自然に反応します。ビジュアル・アンカーは、この特性を利用して、ユーザーの目を引くポイントを作成し、情報の優先順位を設定することができます。

ビジュアル・アンカーの参考例

上記のモーダル画像の例のように、ビジュアル・アンカーはほとんどのUIに複合的に使用されています。

例としてAirbnbのログイン後のトップページをビジュアル・アンカーの視点で見ると、ユーザーにどこに目を向けて欲しいかが推測できます。まずは大きくカラフルな物件の画像に目が行き、その後は付随する星レビュー・エリア・値段に気が引かれます。その後は"display total price"のコンポーネントと検索入力ボックスを見に行き、最後に大きくユニークなアイコンのリストに順番に目が行くでしょう。

airbnb ビジュアル・アンカー
Airbnb

参考:

Anchoring visual search in scenes: Assessing the role of anchor objects on eye movements during visual search (2018)

NEXT STEP
UXを通じたプロダクト成長/グロースハックを検討していますか?
松下村塾ではUX心理とデータを駆使したプロダクト成長をサポートいたします。グロースの課題をお持ちの方は、まずはご相談だけでも大歓迎です。
どうぞお気軽にお問い合わせください: www.shokasonjuku.com
記事の著者
松下村塾株式会社 代表 ウルフ松陰    Twitter
松下村塾株式会社の代表として、国内外の企業にデータドリブンなグロース戦略とUXデザインを提供。LIFULLやTinderなどの大手企業で成果を上げ、データ活用による成長支援に注力しています。2016年にグッドデザイン賞を受賞し、現在はデータ分析による成長に基づくビジネス書を執筆中。
関連単語

プロダクト成長・データ活用にお困りですか?

まずは松下村塾と無料30分ヒアリングを予約しましょう。
Zoomで日程調整
by  @shoin_shoka