Material DesignにおけるElevation(標高)の考え方
この記事では
Material DesignにおけるElevationの考え方を公式サイトを参考にして、アウトプットする形でまとめました。UIデザインを学んでいる人の参考になれば幸いです。
Material Designとは⬇︎
Elevationとは
Elevationとは、要素(ボタン、カードなど)間の「Z軸上」の距離間を表す概念です。
密度非依存ピクセル(dp)で測定され、
「影や色使い、不透明度の度合い」によって視覚的に表現されます。
Elevationを使う理由
Elevationを使う主な理由は2つあります。
1. 階層構造を明確化する
例えばモバイルアプリでbuttom navigation barが、スクロールされないで背景より上にあることがパッと見でわかるように、要素同士の階層関係をわかりやすくさせます。⬇︎
またユーザに焦点を当てさせたい要素(ボタンなど)を敢えて最上位に配置して、操作性を良くすることもできます。⬇︎
2. 視覚的なインタラクションをもたらす
例えばリストの順番を動かす時に、長押ししているリストが最上位に配置されて「動かすことができる」ことが感覚的に理解できるように、ユーザの操作(タップ、ドラッグ)に応じて階層を変化させることで、視覚的に操作感を伝えます。
実際のデザイン方法
Elevationの作り方は、「影のサイズ、強弱」「表面の色や不透明度」「背景のスクリム」によって表現することができる。
- 影のサイズ、強弱、
- 表面の色や不透明度
- 背景のスクリム
具体的な数値例
Material Designでは静止高度と動的高度のオフセットのデフォルト値が、以下のように設定されています。(一部掲載)
- ダイアログ: 24dp
- ナビゲーションドロワー: 16dp
- フローティングアクションボタン: 6dp
- カード: 1〜8dp
詳しくは⬇︎
https://m2.material.io/design/environment/elevation.html#default-elevations
その他注意点
標高地は一貫性を持たせる
同じ要素に対しては同等の標高地を適用させることで、ユーザに同じ要素であることを認知させやすくします。
プラットフォームによって表現方法が異なる場合がある
モバイルでは、
カードやボタンを「押す」操作をする ➡︎ 影で表現(一例)
反対にデスクトップでは、
カードやボタンを「ホバーする」操作がある ➡︎ 線で表現(一例)
まとめ
この記事では、「Material DesignにおけるElevationの考え方」を公式サイトを参考にして紹介しました。
普段Figmaでデザインをするときに、ボタンやカードの影が不自然に見えたりしていたので、Elevationという概念を深めることができてよかったです。さらに深めるべく、シャドウの作り方もこれから勉強していきたいと思いました。
最後まで読んでいただきありがとうございました!!
参考文献
Discussion