🛤️

サイドバーデザインで考える奥行知覚

2026/05/26に公開

 サイドバーとメインエリア、どっちが手前？サイドバーのデザインとして、次の画像のように2カラムの横並びの場合を考えます。
サイドバーとメインエリア、どちらが手前に見えますでしょうか？

人によるかもしれませんが、色がはっきりしているサイドバーのほうが手前に見えるように思えます。

 メインエリアがサイドバーに入り込む少しだけデザインを変更して、サイドバー上の選択された項目に、メインエリアの背景色が入り込むようにします。
この場合、メインエリアが手前に見えてきませんでしょうか？

 サイドバーが浮くさらに変更して、サイドバーがメインエリアに浮いているデザインにしてみます。
この場合は、明確にサイドバーが手前に見えるかと思います。

 手前に見える対象が変わるのはなぜ？人間は3次元の世界を把握するため、網膜上に映る2次元の世界を脳で解釈しています。

このとき、2次元から3次元の奥行きを感じ取ることを、奥行知覚といいます。
奥行知覚を脳が感じ取るトリガーを手がかりといいます。

手がかりは、2次元の世界を3次元の知覚に調整します。ここでは手がかりと合わせて、上述の例において手前に見える対象が変わった理由を見ていきます。

奥行知覚には単眼でも作用するものと、両眼によって作用するものがありますが、ここで紹介するのはどちらも単眼でも作用するものです。
なお、もともとサイドバーのほうが手前に見えるのは、色の鮮やかさの違いによる進出効果だと考えられます。

本来青は奥にあるように見える後退色なのですが、白と比較したときに彩度が高い色合いのため、進出効果が出ているのではないかと推測します。

 見慣れた形が欠けていると、奥にあるので隠れているように見える手前にある物体によって、奥にある物体の一部が遮られ見えなくなるというシーンは、日常生活でもごく当然に見かける光景です。

このため、四角形・三角形・丸などの見慣れた形が欠けており、かつ欠けた部分に別の形が存在すると、まるで見慣れた形が奥にあり、一部が遮られているように見えます。
これにより、「メインエリアがサイドバーに入り込む」のパターンでは、メインエリアがサイドバーの一部を遮っており、手前にあるように見えました。
このように、「遮られている」「隠されている」と知覚して脳が補完することを、アモーダル補完と呼びます。

 下に影が付いていると、手前にあるように見える人間は、光によって3次元世界を見ることができます。

光は光源から出ており、物体に光が遮られた場所には影ができます。

上から光が当たると、物体の下に影ができます。逆に下から光が当たると、物体の上に影ができます。

2次元空間においても同様に、下に影がついているものは上から光が当たっている、つまり浮き出していて手前にあると知覚されます。
「サイドバーが浮く」のパターンでは、サイドバーに影を付けていました。このため、もともとのエリア背景色のコントラストに加え、奥行知覚を明確化する手がかりが追加になった状態といえます。

 UI独特の奥行知覚の手がかりはあるのか？ここまでは、一般的な視覚における奥行知覚について取り上げてきました。

では、UIデザインの文脈においてのみ有効となる奥行知覚の手がかりはあるのでしょうか？

 アニメーション日常生活で視界にある物体が動くのはごく当たり前のことであり、動きも奥行知覚の手がかりとなります。

ここではより狭義に、UI上のアニメーション有無が奥行知覚に影響するかを考えてみたいと思います。
サイドバーは、メインエリアの領域を確保するため開閉機能が設けられることがあります。

このとき、サイドバーが折りたたまれてメインエリアが広がるので、メインエリアの手前にサイドバーがあるように感じられる動きになりやすいのではないかと思われます。

アニメーションのない2カラムのUIを見たときにサイドバーが手前に感じられる事象には、現在普及しているUIにおける開閉アニメーションという前提が影響している可能性もありそうです。

 実装の理解UIはプログラミングによって実現されます。例えば、Web画面のUIであれば、実装はHTML/CSSとなります。

実装に関する知識があると、このレイアウトを実現するにはこのようなHTMLの構造が必要だろうということが推測できるようになります。
こちらも先程の2カラムのUIを例とします。この構造は、一般的には次のようなHTML/CSSで実現されます。

なお、構造を伝えるための最小限のコードを記載します。
<body>
  <nav>サイドバー</nav>
  <main>メインエリア</main>
</body>
body {
  display: flex;
}
この構造を理解していると、2カラムは実装上並列に定義されているという知識を持っている状態となります。

アニメーションのない2カラムのUIが並列に見えた場合、このような前提知識が影響した可能性もありそうです。

 奥行知覚をUIで活用するには最後に、奥行知覚がどのようにUIで活用できるのかを考えます。
奥行知覚を取り入れるメリットのひとつに、操作が直感的になることが挙げられます。

行動を取ることを可能だと知覚できる手がかりをアフォーダンスと呼びますが、現実世界に近いUIではこの効果を引き起こすことが可能になると考えます。

スマートフォンの黎明期に流行したスキューモーフィズムは現実におけるアフォーダンスをUIに反映した顕著な例ですが、現在はより簡略化されて用いられている場合が多いです。
奥行知覚をデザインシステムとして取り入れた例に、Googleが提唱するMaterial Designが挙げられます。

このデザインシステムは、仮想的な紙が3次元的に画面上に重なり合って配置されているという設計思想のもと、ElevationやShadowによってユーザーに知覚の手がかりを与えています。

これは、スキューモーフィズムのUIと比較して実装しやすいという観点でも利点があります。

他方、近年はグラスモーフィズムという半透明のデザインで奥行き表現をする場合も出てきています。
適切な箇所に奥行知覚を取り入れながら、ユーザビリティの高いUIがデザインできると有用そうです。

 参考https://maruhi-lab.com/chikakuninchi/?page_id=573