フォン・レストルフ効果（孤立効果）
似たものの並びの中で、1 つだけ違うものは記憶に残りやすく、真っ先に目に入る。強調は「それ以外を揃える」ことで生まれる。
Von Restorff Effect (Isolation Effect)
なぜ効くか
1933 年に Hedwig von Restorff が、同種の項目の列に 1 つだけ異質な項目を混ぜると、その項目の想起率が上がることを示した。効くのは差そのものではなく「周りが揃っていること」で、周囲がばらばらだと何を目立たせても埋もれる。Web UI では、3 つの料金プランのうち「おすすめ」だけ枠と影を変える、主 CTA を 1 つだけ色付きにして副 CTA を文字リンクにする、余白の中にボタンを孤立させる、色の見せ場を右のリボン 1 箇所に絞る、ベントグリッドで大タイルを 1 枚だけにする、比較表で 1 列だけ背景を変える、メニューの破壊的な項目だけ朱にする、ボトムナビの中央だけ浮かせる。どれも「1 画面に 1 つ」で成立し、2 つにした瞬間に効果が半減する。
UIでの当て方
- 011 画面で目立たせるのは 1 つに決める。主 CTA は色付き 1 個、他のボタンは線画か文字リンクに退かせる。
- 02比較の場面（プラン・商品・列）では、推す 1 つだけに枠・バッジ・背景の差を付け、残りは同じ見た目に揃える。
- 03強調は色だけに頼らず、形（浮き上がり・大きさ・余白）でも差を付ける。色覚や強制カラーで色差が消えても残るように。
- 04危険な項目（削除）は「目立たせる」のではなく「他と違うと分かる」程度に留め、位置も末尾に離す。
誤用・反例
- 強調したいものを増やし続け、色付きボタンが 1 画面に 3 つ以上並ぶ。
- 周囲を整えずに 1 つだけ派手にし、全体が騒がしくなる。
この原則を体現するパーツ
- 静的
料金テーブル解説あり
Pricing Table
3つのプランを横並びで比較する料金表。中央の「おすすめ」プランを藍のふちとバッジで強調し、各プランに機能リストとCTAを添えます。
- CSSのみ
- 静的
安心の一言つき CTA 帯実例あり
CTA Band with Reassurance
主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。
- CSSのみ
- ホバー
幾何学バランスのヒーロー実例あり
Three-Column Geometric Hero
左にコピー、中央に図形のコラージュ、右に CTA を置く3分割のヒーロー。CTA を余白の中に孤立させて、探さなくても見つかるようにします。
- CSSのみ
- 自動再生
生きた数字のヒーロー実例あり
Live Counter Hero
見出しの上に、小数点以下まで動き続けるカウンタ（今この瞬間の処理件数）。色の見せ場は右の斜めリボン1箇所に絞り、リードは本文級の大きさで読ませます。
- JS
- 自動再生
機能紹介のベントグリッド
Feature Bento with Micro Motion
大小のタイルで機能を紹介するベントグリッド。主役は大タイル1枚だけ、他4枚は脇役。各タイルに CSS だけの小さな動く図を置き、機能の中身を一目で伝えます。
- CSSのみ
- ホバー
商品比較テーブル解説あり
Product Comparison Table
3商品を仕様ごとに ○/× で比較し、おすすめ列をハイライト。狭い画面では横スワイプでき、行ホバーで横一列が強調される。
- CSSのみ
- クリック
アクションシート
Action Sheet
画面下からせり上がるiOS風のアクションシート。操作の一覧と、離れた位置の「キャンセル」を持ち、破壊的操作は朱色で示す。背景クリック・Escで閉じる。
- JS
- クリック
浮いた主アクションのボトムナビ実例あり
Bottom Navigation with Raised Action
5枠のボトムナビ。中央に浮いた「投稿」ボタンを置き、選んだタブの下でインジケータが滑る。通知タブには未読バッジ。タップで画面のタイトルが変わる。
- JS
関わるカテゴリ
出典
- Laws of UX別サイト ↗Von Restorff Effect の項。von Restorff（1933）の原典を参照している。
- Nielsen Norman Group別サイト ↗ヒューリスティック 8「美的で最小限のデザイン」。目立たせるために周囲を減らす根拠。