ビジュアル・アンカー (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)

記事の著者
松下村塾 代表 : ウルフ松陰    Twitter
グロース戦略、グロースデザイン、データ分析の専門家。松下村塾株式会社の代表として、国内外の企業にグロース戦略、施策設計、UXデザイン、アナリティクス活用、データドリブン育成をサポート。2016年にグッドデザイン賞受賞。
関連単語

プロダクトのグロースやアナリティクスにお困りですか?

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