UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供するN’s Creates (エヌズクリエイツ) 株式会社の高田です。

今回は、MaterialDesign3の『Elevation』について考える機会があったので、
要点をまとめて書き記していきたいと思います。
※個人的な解釈を含みますので、公式のガイドラインも合わせてご確認ください！

【 Material Design 3｜Elevation 】

Elevation（高度）とは？

“Z軸上の2つのサーフェス間の距離” のとこと、

パッとイメージが湧きにくいので自分なりに噛み砕いて言葉にしてみると、
「平面だけど、重なっているオブジェクトの間に距離（高さ）の概念を持たせる」
というイメージでしょうか。

正確な意味合いとしては違っているかもしれませんが、
自分の中で理解しやすい言葉にすることも大切だと思います。
とはいうものの、頭の中では理解できていても、
実際に言葉でわかりやすく説明するのは難しいですね。

Elevationを活用・意識するシーン

早速ですが、実際にElevationがよく使われているシーンをまとめてみました。

• ヘッダーとコンテンツの重なりを明確にしたい時
• カートや決済ボタンなど重要度が高く、スクロールしても表示画面上に固定しておきたい時
• モーダル表示の際に、見せたい情報をより明確にしたい時

などなど…

上記はごく一部のシーンではありますが、
主にページ内での優先度や重要度を上げたい時に使用していますね。
紙のデザインをしていた頃に似たようなことを無意識的にやっていたなと思いましたが、
UIデザインではWeb上での動きもあるため、より明確に言語化してからの使用を求められているなと感じました。
紙とWebの大きな違いをここにきて痛感しています…

Elevation使用時のポイント

Elevationを使う際にいくつか押さえておくポイントがありますので、
まずは、よく使いそうな項目をピックアップしました。

• 高さはすべてのオブジェクトとコンポーネントに適用できる
• 高さのレベルは作りすぎず、シンプルであること
  • 0〜5の6段階のレベルで設計推奨
• シャドウは一時的に表示される重要なオブジェクトなどに特に有効
• シャドウ以外にもオブジェクトの色を変更して高さに変化つけることも
• 色の濃淡の違いで重要度を変化させることができる
• 背景を薄暗くするスクリム効果は不透明度34%での使用を推奨

などなど…

M2からの変更点

自分はM3から入ったので詳しく触れていないのですが、厳密なルールが定められていました。
基本は同じですが、M3からはルールがすこし緩和されたことで、使いやすくなったようです。

1. シャドウ
• すべてのレベルにシャドウを適用する必要がなくなった
• より強調したい時など、必要性がある場合など自由に使用できる

2. カラー
• 色の違いや変化、濃淡などで高さを表現することが追加された

3. 色のレベル
• 以前はシャドウでの高さを表すdp数値だけでしたが、カラーの追加でレベルが追加された

まとめ

今回はMaterial　Design　3の『　Elevation　』について要点をまとめてご紹介していきました。
他にも書ききれなかった細かいルールなどもありますので、ぜひ一度公式サイトを覗いてみることをお勧めします！
今後もアップデート毎にルールやトレンドが変化していくと思うので、
日々情報収集することを心がけて、最適なUIデザインを提案できるようにしていきたいですね。

この記事を読んでいただいた方に得られるものがあれば幸いです。
それでは、また役立ちそうな情報がありましたら発信していきます。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！

高田 和弥