同じ大きさや同じ色でも、周囲の配置や明るさが変わると違って見えます。錯覚は目の故障ではなく、脳が限られた視覚情報を文脈から素早く解釈した結果です。UIでは、影でボタンの押しやすさを伝えられる一方、カードの余白や背景色によって価格・サイズ・重要度を誤認させることもあります。設計で大切なのは「正しい数値を置いたか」だけでなく、「周囲を含めてどう見えるか」を確かめることです。
この記事の要点
- 知覚は、対象だけでなく周囲の文脈にも左右される
- 影や重なりは、押せる場所や前後関係を伝える手がかりになる
- 色だけ、形だけに意味を任せず、ラベルや状態表示を併用する
- 錯覚の強さは条件で変わるため、実際の画面と利用環境で検証する
なぜ「見えているのに間違える」のか
網膜に届く情報だけでは、物体の実際の大きさ、色、奥行きを一意に決められません。同じ灰色でも、明るい背景では暗く、暗い背景では明るく見えます。脳は周囲の明るさ、影、配置、過去の経験を手がかりにして、もっともありそうな見え方を組み立てます。通常は素早い認識を助けますが、手がかりと現実が食い違うと錯覚になります。
代表例がエビングハウス錯視です。同じ大きさの円でも、小さな円に囲まれると大きく、大きな円に囲まれると小さく見えます。Knolら（2015）は、錯視の大きさが対象と周囲の円のサイズや距離で変わり、条件の33％では錯視効果が見られなかったと報告しています。つまり「この配置なら必ずこう見える」という単純な法則ではなく、文脈の組み合わせで知覚が変わります。
UIで起こる錯覚の具体例
同じ価格でもカードの大きさで印象が変わる
料金表で中央のプランだけカードを大きくし、強い色と影を付けると、そのプランは重要で選ばれているように見えます。選択を助ける場合もありますが、価格や条件より視覚的な強さで判断を誘導する危険もあります。「おすすめ」の理由を明記し、他プランとの機能差を同じ尺度で比較できるようにします。
余白がグループの境界を変える
ラベルと入力欄の間より、次の項目との間を広くすると、どの説明がどの入力欄に属するか分かりやすくなります。逆に、注文ボタンが別商品のカードに近いと、ユーザーは対応関係を取り違えるかもしれません。枠線を増やす前に、近接と余白でまとまりが伝わるかを確認します。
影と重なりが操作可能性を伝える
ボタンの影や押下時の沈み込みは、「押せる」「反応した」という手がかりになります。ただし、クリックできない装飾にも同じ影を使うと、ユーザーは操作できると誤解します。リンク、ボタン、カードで見た目の規則を揃え、同じ見た目には同じ動作を割り当てます。
色は周囲とセットで見える
同じブランドカラーでも、白背景と濃色背景では明るさや鮮やかさの印象が変わります。エラーを赤、成功を緑だけで示すと、色覚特性や表示環境によって区別しにくくなります。アイコン、見出し、説明文を併用し、色が分からなくても状態を判断できるようにします。
錯覚を味方にする設計と、避けるべき設計
錯覚そのものが良い・悪いのではありません。利用者の理解と実際の動作が一致するなら、影、遠近、重なりなどの知覚手がかりは役立ちます。見た目だけで有利な選択肢に誘導したり、広告を通常のコンテンツに見せたりすると、短期的にクリックが増えても信頼を損ないます。
実装後は、デザインツール上だけで判断せず、実機で確認します。画面の明るさ、スマートフォンのサイズ、屋外での見え方、視力や色覚の違いによって知覚は変わります。次の観点でレビューすると見落としを減らせます。
- クリックできる要素と装飾を見分けられるか
- 見出し、本文、補足の優先順位が一目で分かるか
- 料金や数量の比較が同じ単位・同じ尺度になっているか
- 色を取り除いても、エラーや選択状態が分かるか
- 拡大表示や小さな画面でも、要素の対応関係が崩れないか
また、錯覚とは別に、表示されている情報へ注意が向かず見落とすこともあります。詳しくは「選択的注意とは？見えているのに見落とす脳の仕組みとUX設計」をご覧ください。
参考文献
この記事の作成に参照した資料
まとめ
人は画面上の要素を一つずつ正確に測っているのではなく、周囲との関係から意味を読み取ります。だからUIの検証単位は、色やボタン単体ではなく画面全体です。視覚的な手がかりで操作を分かりやすくしながら、重要な判断は文字、形、状態表示でも確かめられるようにする。その積み重ねが誤認の少ないUIにつながります。
こうしたデザインの考え方に共感いただける方へ。サンアンドムーンでは、AI×クリエイティブで新しい価値をつくるWEBデザイナー（業務委託）を募集しています。詳しくはWEBデザイナー募集をご覧ください。
執筆・監修
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI／UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
