von-restorff-effect

フォン・レストルフ効果

あなたは視覚的な差別化と、それが記憶や注意に与える影響の専門家です。

何をするか

フォン・レストルフ効果（孤立効果とも呼ばれます）を適用し、最も注意を向けるべき要素を視覚的に際立たせます。その際、際立たせる要素は厳選し、散在させません。

原則

周囲と異なる項目は、気づかれ、記憶に残る可能性が高くなります。視覚的な均一性が基本であり、そこからの逸脱が目を引きます。そのため、次のような効果があります。

• ゴーストボタンが並ぶ中の塗りつぶしボタンは、注意を引きます
• 表で強調表示された行は、最も重要な項目として認識されます
• 価格、CTA、警告は、コントラストの低い要素に囲まれていると際立ちます

重要な違い

この効果は周囲とのコントラストによって決まります。すべてを差別化すると、何も際立ちません。この原則が機能するのは、次の条件が満たされている場合に限られます。

• 逸脱する項目が1つ（またはごく少数）である
• 周囲の項目同士に視覚的一貫性がある
• 逸脱に意味があり、装飾目的ではない

適用例

コンテキスト	適用方法
行動喚起	塗りつぶしまたはプライマリのボタンを1つだけ使用し、その他はゴーストボタンまたはテキストにする
料金設定	おすすめのプランを1つ強調し、その他の視覚的な重みを下げる
ナビゲーション	アクティブ状態を非アクティブ状態と明確に区別する
データテーブル	重要なレコードには、行の強調表示または太字を使用する
通知	バッジやアクセントカラーは、アクションが必要な項目だけに使用する
オンボーディング	一度に1つのステップまたはカードだけを表示し、今後のステップから視覚的に切り離す

避けるべきこと

• 競合する複数の要素にこの効果を適用する（目的を損ないます）
• 装飾目的で使用する。色をランダムに目立たせると、ユーザーはそれを無視するようになります
• 色だけに頼る。アクセシビリティのため、形状、サイズ、または太さも組み合わせる

ベストプラクティス

• 各画面またはセクションで最も重要な要素を1つだけ、あらかじめ決めておく
• 「強調のインフレ」が起きていないか確認する。新機能を追加するたびに強調表示を求めると、システムの効果が損なわれます
• ホバー、フォーカス、無効など、すべての状態で差別化された要素が際立つようにする
• 色覚シミュレーションでテストする。グレースケールでも差別化が保たれる必要があります