こんにちは。UIデザインのプロフェッショナルとして、長年マテリアルデザインを研究してきた私が、今回はエレベーション（奥行き）の重要性と活用方法について、詳しく解説したいと思います。
マテリアルデザインは、Googleが提唱するUIデザインの体系であり、現実世界の物理法則を取り入れることで直感的で美しいデザインを実現しています。その中でも特に重要な概念が「エレベーション（奥行き）」です。エレベーション（奥行き）を適切に活用することで、ユーザーの直感的な理解を助け、UIの構造や階層を明確に伝えることができます。
本記事では、エレベーション（奥行き）の基本的な考え方から、実践的な使い方まで幅広く解説していきます。デザイナーの方はもちろん、クライアントの方やディレクターの方にも、エレベーション（奥行き）の重要性を理解していただき、より洗練されたUIデザインを目指すための知識を提供できればと思います。
参照）マテリアルデザイン3 エレベーションhttps://m3.material.io/styles/elevation/overview
目次
- 1.基本原則-影や色の明暗の効果で立体感と視覚的優先順位を表現
- 2.エレベーション（奥行き）の留意点と効果的な使い方
- 3.重要度や関連性を視覚的に伝えるテクニック
- 4.まとめ-UIデザインの質を高めるために
1.エレベーション（奥行き）の基本原則 – 影や色の明暗の効果で立体感と視覚的優先順位を表現
エレベーションとは、UIの各要素に影を付けることや色の明暗をつけることで、立体感と重なり順を表現する手法のことを指します。現実世界では、物体は光を遮ることで影を落とし、その影の濃さや大きさによって物体の高さや前後関係が分かります。マテリアルデザインでは、その現実世界の物理法則を取り入れ、UIの各要素に影を付けることで立体的な表現を可能にしています。
エレベーションの値が大きいほど、要素に濃くて大きな影が付き、画面から浮き上がって見えます。逆にエレベーションの値が小さいほど、影は薄くて小さくなり、要素は画面に沿ったような平面的な見た目になります。色の明暗では基本的に明るいものが前に、暗いものは奥に見えます。このようにエレベーションを調整することで、UIの各要素に奥行きを持たせ、立体的な構成を表現できるのです。
エレベーションによる立体表現は、ユーザーの直感的な理解を助けます。人間の脳は、現実世界の物理法則に基づいた視覚情報を処理することに長けています。そのため、エレベーションを適切に使用することで、UIの構造や階層を直感的に把握しやすくなります。
1. デスクトップ上のアプリバー (A)、フローティングアクションボタン (B)、カード (C) の静止立面図 (正面から見た図)
2. 同じコンポーネントを横から見た図
参照）https://m2.material.io/design/environment/elevation.html#elevation-in-material-design
このように各要素の奥行きが定義されていることで直感的に理解しやすくなっている。
2.重要度や関連性を視覚的に伝えるテクニック
エレベーションの値を戦略的に使い分けることで、UIの各要素の重要度や関連性を視覚的に表現することができます。以下に、代表的なエレベーションの使い分け方を紹介します。
2.1エレベーション（奥行き）で重要な要素を目立たせる – 図と地の法則を応用
重要で優先順位の高いボタンやアクションには、奥行きを前にもってくるように視覚的に目立たせるのが効果的です。一番手前にくるように見える持つ要素は、UIの中で最も重要な情報やアクションであることを示唆するため、ユーザーは自然とそれらに注目するようになります。
この原則は、ゲシュタルト心理学の「図と地の法則」に基づいています。図と地の法則とは、人間の知覚において、対象物（図）とその背景（地）が区別されるという原則です。エレベーションの高い要素は図として知覚され、低い要素は地として知覚されます。このように、エレベーションを戦略的に使い分けることで、ユーザーの注意を適切な要素に引き付けることができるのです。
一方で、重要度の低い要素にはエレベーションの値を小さく（暗くすることで奥にあるように見せることができます）することで、メインコンテンツの邪魔にならないようにできます。このように、エレベーションの高低を使い分けることで、UIの情報の優先順位を視覚的に表現し、ユーザーを適切な要素へと導くことができます。
参照）暗くすることで奥にあるように見せ、視覚的に現在のアクティブなエリアが理解できるようにしている。https://m3.material.io/styles/elevation/applying-elevation#c0e51706-92a6-4f43-a4b5-cda6897e09fc
2.2関連要素をエレベーション（奥行き）でグループ化 – 近接の法則で直感的に理解
エレベーションは、関連性のある要素をグループ化する際にも役立ちます。同じエレベーションの値を持つ要素は、視覚的に同じグループに属しているように見えるため、ユーザーはそれらが関連していると認識しやすくなります。
また、エレベーションの値を段階的に変化させることで、要素間の階層構造を表現することもできます。このような階層的なエレベーションの使用は、UIの構造を直感的に理解する助けになります。
1.コンテンツエリア。2.ナビのエリア。3ボタン。
このように高低差によってグループ化されていることが視覚的にわかるようになっている
参照）https://m3.material.io/styles/elevation/applying-elevation
2.3ナビゲーションのエレベーション（奥行き）設定
アプリやWebサイトのナビゲーションメニューやタブバーには、比較的大きめのエレベーションの値を設定するのが一般的です。これらのナビゲーション要素は、画面上で常に表示されているため、適度に目立たせることでアクセスしやすくなります。ただし、メインコンテンツの邪魔にならない程度に留めることが大切です。
ナビゲーションは奥行きが最も上にきているように見せると注目が集まります
参照）https://m3.material.io/styles/elevation/applying-elevation#b44629e9-5492-4e7d-a01b-cf5b5abdda89
3.エレベーション（奥行き）の留意点と効果的な使い方 – 認知負荷を減らし、ユーザビリティを高める
エレベーションは非常に強力な表現方法である一方、使い方を誤るとUIが煩雑で使いづらくなってしまう恐れもあります。以下のような点に注意しながら、適切にエレベーションを活用しましょう。
3.1エレベーション（奥行き）の影は最小限に
エレベーションの値が大きすぎると、UIが立体的すぎて窮屈な印象を与えてしまいます。影の濃さや大きさはあくまで必要最小限に留め、本当に重要なコンテンツが目立つようにデザインするのがポイントです。
3.2一貫性のあるエレベーション（奥行き）
アプリやWebサイト内では、同じ種類の要素には同じエレベーションの値を設定し、一貫性を保つことが大切です。一貫性のあるエレベーションの使用は、UIの統一感を高め、ユーザーの学習コストを減らすことにつながります。
上記のように一定のルールを定義することが一貫性を保つために重要です
参照）https://m3.material.io/styles/elevation/applying-elevation#9a207ae5-0633-4c0a-8810-a41013beb053
3.3影をつける以外にも奥行きを出す方法を検討する
下記のように影以外にも重なり合う要素や色によっても、奥行きや重なる順番を表現可能です。すべてに影をつけると情報としてノイズになるので表現方法は検討しましょう。
参照）https://m3.material.io/styles/elevation/applying-elevation#a86f5d33-8d08-44a4-b5bd-b89bf6cdadb3
3.4コントラスト比が低いと同化して見えてしまう
重なり合うコントラスト比が低いと視覚的に重なり合うことを表現できません。
たとてばグレーのオブジェクトに薄くドロップシャドウをつけると、エッジがぼやけてしまいシャドウには見えにくいです。
境目が同化してしまって、視覚的に重なりが表現できていない例。←良い例 →悪い例
参照）https://m3.material.io/styles/elevation/applying-elevation#bc437936-c337-41b3-9869-4c5c70ea6217
4.まとめ-UIデザインの質を高めるために
マテリアルデザインにおけるエレベーションは、UIに立体感を与え、情報の優先度や関連性を直感的に伝える重要な表現方法です。エレベーションを戦略的に使い分けることで、ユーザーの注意を適切な要素に引き付け、UIの構造を分かりやすく示すことができます。
エレベーションの効果は、ゲシュタルト心理学やフィッツの法則、ヒックの法則といった様々な原則に基づいています。また、認知科学の観点から見ても、エレベーションは人間の視覚情報処理のメカニズムに合わせて設計されていることが分かります。
ただし、エレベーションの使い方には注意が必要です。影の濃さや大きさを最小限に留め、一貫性を保ちながら、デバイスの特性に合わせて最適なエレベーションを表現することが大切です。
