UIデザインの質を高める！Material Designにおける『Elevation(標高）』
現在、UI/UXデザインの勉強を進めている中で、シャドウ（影）を使った奥行き表現について学んでいます。
その中でも、GoogleのMaterial Designが提唱する「Elevation」は特に興味深いテーマでした。今回、Elevationについて詳しく解説されている公式サイトを参考にし、学びをアウトプットする形でまとめてみました。UIデザインの質を高めたい方や、シャドウの使い方に迷っている方の参考になれば嬉しいです！
1. はじめに：Elevationとは？
Material Design はGoogleが提唱するデザインシステムで、現実世界の物理的な法則（影、奥行き、動き）をデジタル上に適用することで直感的なUIを目指しています。
Elevation は、その中で「Z軸の高さ」を視覚的に表現する重要な概念です。
平面上に配置された要素（2D）に 影（シャドウ） を加えることで、あたかも物体が浮いているように見せ、
奥行き や 階層構造 を伝えます。
ユーザーにとって「どの要素が強調されているか」「どの要素が押せるか」などを直感的に理解する手助けになります。
2. Elevationの目的：なぜ必要なのか？
ElevationがUIデザインで果たす役割は次のとおりです。
階層構造を明確にする
背景、カード、ボタンなど、異なる要素に標高を設定することで、
画面上の 優先順位 と 階層 を明確にします。
視覚的なインタラクションを示す
ユーザー操作（タップ、ドラッグなど）に応じてElevationを動的に変化させることで、操作フィードバック を視覚的に伝えます。
リアルな質感と自然なデザイン
影を使って現実世界における「光」と「物体の高さ」の関係を表現するため、デジタルUIでも自然でリアルな体験を提供します。
3. Elevationの基本ルール：高さとシャドウの関係
Material Designでは、標高の高さに応じてシャドウの見え方が変わります。
標高レベル特徴具体例
0dp 影なし。完全にフラットな状態背景要素やベース要素
1dp 小さな影でわずかに浮いている状態カード、入力フィールド
2-4dp シャドウがやや広がる小さなボタンやカード
6-8dp. 目立つ要素、アクション要素に最適浮いているアクションボタン(FAB)
12-24dp. 最も高い標高。重要度が高い、重なり要素ダイアログ、メニュー、ドロップダウン
4. シャドウの見え方：光源と影の仕組み
Material Designでは、画面上の光源を「上部」に配置し、その光により要素が落とす影をデザインします。
影の特徴:
標高が高いほど、影は「大きく、広がり、ぼやける」。
標高が低いと、影は「小さく、くっきり」と見える。
シャドウの2要素
アンビエントシャドウ (Ambient Shadow)
周囲から拡散する光による、柔らかく広がる影。
ディレクショナルシャドウ (Directional Shadow)
光源の方向に沿った、くっきりとした影。
これら2つを組み合わせる ことで、リアルな奥行き感を実現します。
5. Elevationの使い方と実装例
静的なElevation（UI要素に固定の高さ）
カード（Card）:
標高: 1dp
画面からわずかに浮かせて、背景から要素を分離する。
浮いているアクションボタン（FAB）:
標高: 6dp または 8dp
ユーザーの目を引き、主要なアクションを強調。
動的なElevation（操作時の変化）
ボタンの押下:
標高: 2dp → 0dp（押されたときに沈む）
ダイアログやメニュー:
標高: 12dp → 24dp（表示されると最前面に浮かぶ）
6. ベストプラクティス：Elevationをうまく使うためのポイント
一貫性のある標高設計
同じ役割の要素には 同じ標高 を設定し、ユーザーが自然に理解できるようにする。
影の使いすぎを避ける
シャドウが多いと画面がごちゃごちゃし、デザインが不自然になる。
必要最小限の標高だけを設定する。
状態変化を標高で表現する
ユーザー操作に応じてElevationを動的に変化させることで、フィードバックをわかりやすくする。
7. まとめ：ElevationでUIデザインを進化させよう！
Material Designにおける「Elevation」は、デザインに奥行きと階層構造を与え、ユーザーに直感的なUI体験を提供します。
静的な高さ で階層を明確にし、
動的な変化 で操作フィードバックを視覚的に伝えます。
Elevationを正しく活用し、自然で使いやすいデザインを目指しましょう！
参考リンク
Material Design公式ページ: Elevationガイド