Material Design 3 要点まとめ #9 Elevation
Material Design 3 ガイドラインの要点をまとめたものです。
第9回はElevationの章。Elevation（高度）とは、z軸に沿った2つの表示面の間の相対的な距離のことです。M2での厳密さと比べると、かなり簡略化されました。シャドウが減って見た目の印象もだいぶ変わりました。
Overview
・M2からの更新ポイント
・すべての表示面とコンポーネントは高度を持つ
M2からの更新ポイント
M2では高度を表現するために必ず「シャドウ」を使っていたが、M3からはその制約がなくなった。
シャドウの代わりに表示面の色の変化で高度を表現する。
シャドウは境界を強調したいときなど任意のタイミングで使えるものになった。
分類がレベル0〜5の6段階になった（シンプルになった）。
すべての画面要素は高度を持つ
UI上に存在する要素（表示面、コンポーネント）は、常にレベル0〜5のいずれかの高度を持っている。
高度の異なる要素同士は前後に重なることができる。
特定の高度にフォーカスして他の高度の要素の操作をブロックすることができる。
インタラクションや状態の変化に応じて高度は変化する。それに合わせて要素の背景色やシャドウなどの見た目も変化する。
Applying elevation
・高度の設計
・高度を表現する
・シャドウ
・サーフェスカラーのトーン差
・スクリム
高度の設計
意図的に少ないレベル（0〜5の6段階）に制限されている。UI全体の高度のストーリーを熟考した上で設計する必要がある。
通常時の高度はレベル0からレベル3までの4種類。レベル4、レベル5はホバーやドラッグなどのインタラクションのために予約されている。
高度を表現する
高度を表現するには、シャドウ・サーフェスカラーのトーン差・スクリムなどの視覚的な手がかりを用いることができる。
シャドウ
従来的な手法。M2では高度の表現はシャドウだけだった。
シャドウがついている面と背後の面の距離が近いと、シャドウは小さくてシャープ。距離が離れるにつれてシャドウは大きく、ぼかしが強くなる。
シャドウをつける場所は少ないほうが良い。
シャドウが推奨されるケース (1)：背景がパターン化されていたり視覚的に複雑な場合。
シャドウが推奨されるケース (2)：インタラクションを促したい場合。インタラクションによって、要素が一時的に持ち上がるときにシャドウで表現すると効果的な場合がある。
推奨されるケース (2) について、ホバー時だけシャドウがつくカードやボタンなど見覚えがあると思います。ここぞというときに絞ってあの表現を使うと効果的だということ。
サーフェスカラーのトーン差
背景色の色調に差をつけることで高度の差を表現する。
高度が高ければ高いほど色調が強くなる。サーフェスカラーの上にプライマリカラーの半透明の覆いが重なっていて、高度が高くなるほど覆いが不透明になっていく。
詳細は以下の別記事にも記載。
スクリム
ダイアログやドロワーなどの表示時に後ろのUIの上に被さる半透明の覆いのこと。
高度差のある面の間にスクリムを挟むことで視覚的に分離する。
特定の要素にフォーカスを集めることができる。
高度の表現がずいぶん多様になりました。M2までは、高度差はとにかく全部シャドウで表現する必要がありました。それはそれでわかりやすくはあったものの、複数のシャドウが接近しすぎて装飾過剰に感じることも多かったので、表現方法が柔軟になったのは個人的にも賛成です。
むしろシャドウについてはわざわざ「最小限に」と書いてありますね。ここぞというところで印象的に使うことで単なるユーザビリティ以上の効果が得られる場合もありそうです。工夫のしがいがあって面白いですね。
この記事が気に入ったらサポートをしてみませんか？