#02 マテリアルデザインの『NG』と『OK』デザイン | Elevation編

はじめに
この記事はマテリアルデザインガイドラインの『Elevation』についてのNGデザインとOKデザインをまとめたものです。

なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、難しいなと思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。

正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design
URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

Elevation(高さ)とは？

マテリアルデザインにおけるElevationとは、『サーフェスの高さ』です。
すべてのサーフェスとコンポーネントには、Elevationが定められています。

Surface edges

Surface edgesとは『オブジェクトの輪郭』のことです。
基本的には、オブジェクトは影を使用して輪郭を表現しますが、
次のような方法でも輪郭を示すことができます。

・表面に異なる色を与える
・オブジェクトに異なる不透明度を与える

Surface overlap

Surface overlapとは『オブジェクトの重なり』のことです。
2つのオブジェクトが重なっている場合、高さの高いオブジェクトが前に表示されますが、オブジェクトの不透明度や、コントラストが適切でないと、どちらのオブジェクトが前にあるか分かりづらくなってしまいます。
その際、オブジェクトの輪郭が明確に定義されているかを確認して、曖昧なoverlapを回避することが必要です。

Scrimmed backgrounds

Scrimmed backgroundsは『暗い処理がされた背景』のことです。
この処理をすることで、ElevationのEdgeを表現することもできます。

Shadows

Shadows(影)は、サーフェスのedges・overlap・Elevationを示すことができます。
(Elevationを示すことができる唯一の方法です。)

Elevationの初期値

まとめ

今回は、ElevationのNGデザインとOKデザインをまとめてみました。
UIデザインの勉強の参考になればうれしいです。

※ガイドラインでは、動画等を使用してさらに詳しく解説がありますので、是非ご覧ください。
次回は『layout』のNG/OKデザインについてまとめていきます。