🛗

Material DesignにおけるElevation(標高)の考え方

2025/01/26に公開

この記事では

Material DesignにおけるElevationの考え方を公式サイトを参考にして、アウトプットする形でまとめました。UIデザインを学んでいる人の参考になれば幸いです。
Material Designとは⬇︎
https://m3.material.io/

Elevationとは

Elevationとは、要素(ボタン、カードなど)間の「Z軸上」の距離間を表す概念です。
密度非依存ピクセル(dp)で測定され、
「影や色使い、不透明度の度合い」によって視覚的に表現されます。

Elevationを使う理由

Elevationを使う主な理由は2つあります。

1. 階層構造を明確化する

例えばモバイルアプリでbuttom navigation barが、スクロールされないで背景より上にあることがパッと見でわかるように、要素同士の階層関係をわかりやすくさせます。⬇︎

またユーザに焦点を当てさせたい要素(ボタンなど)を敢えて最上位に配置して、操作性を良くすることもできます。⬇︎

2. 視覚的なインタラクションをもたらす

例えばリストの順番を動かす時に、長押ししているリストが最上位に配置されて「動かすことができる」ことが感覚的に理解できるように、ユーザの操作(タップ、ドラッグ)に応じて階層を変化させることで、視覚的に操作感を伝えます。

実際のデザイン方法

Elevationの作り方は、「影のサイズ、強弱」「表面の色や不透明度」「背景のスクリム」によって表現することができる。

  • 影のサイズ、強弱、
  • 表面の色や不透明度
  • 背景のスクリム

具体的な数値例

Material Designでは静止高度と動的高度のオフセットのデフォルト値が、以下のように設定されています。(一部掲載)

その他注意点

標高地は一貫性を持たせる

同じ要素に対しては同等の標高地を適用させることで、ユーザに同じ要素であることを認知させやすくします。

プラットフォームによって表現方法が異なる場合がある

モバイルでは、
カードやボタンを「押す」操作をする ➡︎ 影で表現(一例)

反対にデスクトップでは、
カードやボタンを「ホバーする」操作がある ➡︎ 線で表現(一例)

まとめ

この記事では、「Material DesignにおけるElevationの考え方」を公式サイトを参考にして紹介しました。

普段Figmaでデザインをするときに、ボタンやカードの影が不自然に見えたりしていたので、Elevationという概念を深めることができてよかったです。さらに深めるべく、シャドウの作り方もこれから勉強していきたいと思いました。

最後まで読んでいただきありがとうございました!!

参考文献

https://m2.material.io/design/environment/elevation.html

KA projects

Discussion