Elevationを定義しているデザインシステム4つを調べてみた

これはなに

最近業務でElevationについて調べる機会があったので、まとめておきたくて記事化しました。

この記事は私の解釈です。
しっかり理解したいという方は、調査対象のデザインシステムのリンクを貼ってあるので、直接確認いただくとよいかと思います。

Elevation（エレベーション）とは

直訳すると Elevation = 標高 です。
Webデザインにおいては、要素がZ軸に対しての高さの表現を指します。

デジタル庁 デザインシステムβ版 エレベーションでは下記のように定義してありました。

エレベーションは、ブラウザ上で表示されるコンポーネントの高さの度合いを示します。

ドロップダウンメニューなどで利用されることが多いと思います。

事例調査

今回は下記の4つのデザインシステムを調査しました。

• Material Design 3
• デジタル庁デザインシステム
• SmartHR Design System
• Atlassian Design System

忙しい人向けまとめ

• 影は1つ〜3つの値を指定して表現している
• Surface（面）の概念はShadow（影）を使わない場合でも高さを表現するため
  • ライトテーマでは、Elevationが高いほど濃い色（元の色がはっきりした色）になる
    • 例: 白なら奥の（Elevationが低い）要素のほうがグレーがかるし、緑なら奥のほうが彩度と明度が落ちた緑になる
  • ダークテーマでは、Elevationが高いほど明るい色になる
• ダークテーマの場合、Shadow（影）は見えづらくなる
  • ATLASSIANでは、Surface（面）と境界線で表現することを想定しているようだ

傾向

項目	Material Design	デジタル庁	SmartHR	ATLASSIAN
ダークテーマ対応	見本の切り替えはあるが、すべて同じ見た目で出力されている	言及はあるが未対応
Surface（面）		立体感については言及あり
Shadow（影）	Resting level 0~5	Style 1~8	LAYER 0~4	E0,100~500
z-index	?	?	?
トークン（コンポーネントの利用）

Material Design 3

Googleが提供しているデザインシステムです。
Material Design 3ではElevationをShadow（影）とSurface（面）で表現しています。

z軸の距離を表現するために density-independent pixels (dps) を定義しています。
Level0〜5 の6段階で設計されています。

Elevationを正しく表現するためには、Surface（面）で次の要素が表現されている必要があります。

• Surface（面）のエッジや、Surface（面）と周囲のコントラスト
• 静止または動いている他のSurface（面）と重ねる
• 他のSurface（面）との距離を作る

ここでいうエッジは、borderのような境界線を引くのではなくShadow（影）を活用することを想定しているようです。

Shadow（影）は、2つのSurface（面）の距離を表現します。

• 距離が近い = 小さく鮮明な影
• 距離が遠い = 大きくて柔らかい影

Shadow（影）の利用は少ないほど効果的であると記載がありました。
Shadow（影）の乱用は避け、Surface（面）で表現することを主として、ここぞという要素にShadow（影）を利用するのだと解釈しました。

参考ページ

UI

css

Resting level	css
0	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px
1	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
2	`box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
}`
3	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
4	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
5	box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;

デジタル庁デザインシステム

日本語で丁寧に解説をしてあるので、初心者がElevationについて理解するには非常にわかりやすい資料だと思います。

Elevationの表現には

• ドロップシャドウ
• オーバレイシェード

上記の２つを使うとありました。

ドロップシャドウは高さのレベルに応じて、Style1~8 の8段階あります。

立体感のあるコンポーネントや、Hover時の高さレベルが変わるときの解説、オーバーレイシェードによる高さレベルのリセットなど、UIのデザインをしていて「この場合どう表現するとよいのだろう」と詰まりやすい箇所の解説も丁寧にありますので、一読することをおすすめします。

参考ページ

Figma

UI

css

Style	css
1	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.30), 0px 2px 8px 1px rgba(0, 0, 0, 0.10);
2	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.30), 0px 2px 12px 2px rgba(0, 0, 0, 0.10);
3	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.30), 0px 4px 16px 3px rgba(0, 0, 0, 0.10);
4	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.30), 0px 6px 20px 4px rgba(0, 0, 0, 0.10);
5	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.30), 0px 8px 24px 5px rgba(0, 0, 0, 0.10);
6	box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.30), 0px 10px 30px 6px rgba(0, 0, 0, 0.10);
7	box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.30), 0px 12px 36px 7px rgba(0, 0, 0, 0.10);
8	box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.30), 0px 14px 40px 7px rgba(0, 0, 0, 0.10);

SmartHR Design System

高低差を影（シャドウ）で表現しているため、「影」のデザイントークンで指定してありました。
他のデザインシステムとは違い、box-shadow は１つの値で表現されています。

参考ページ

UI

css

SmartHRの「セマンティックトークン」という値の見本では、SmartHRのカラーシステムの名前で表記されています。
ここでは、TRANSPARENCY_30 = rgba(3,3,2,0.30) と指定されているため、rgba表記に変更して記載しました。

LAYER1の値が、セマンティックトークンと、DevToolsで拾ったときの spread の値が違ったので、コードに反映されている方が現在の使用されているものではないかと考え、DevToolsで拾った値を記載しています。

LAYER	css
0	none
1	box-shadow: rgba(3, 3, 2, 0.3) 0px 1px 2px 0.5px;
2	box-shadow: rgba(3, 3, 2, 0.3) 0px 2px 4px 1px;
3	box-shadow: rgba(3, 3, 2, 0.3) 0px 4px 8px 2px;
4	box-shadow: rgba(3, 3, 2, 0.3) 0px 8px 16px 4px;

Atlassian Design System

他のデザインシステムと大きく違うと感じた点は、ダークテーマに対応していたことです。
縛りが強いなと感じるほど、しっかりと設計されていると感じました。

自然界の影と同様に、ダークテーマでは影が見えにくくなると受け入れているようです。
そのため、Elevationを表現するには、Surface（面）の色で表現が重要になってきます。
Elevationが高いほど、Surfece（面）は明るく見えてきます。

ライトテーマでも、ダークテーマでも同じElevationを表現するために、Surface（面）とShadow（影）をペアで使うように、Tokenが設計されていました。

基本的なレベルとして4つあるとのことです。

• Sunken
  • Defaultよりも下の高さを表現します
• Default
  • 基準値です
• Raised
  • ダークテーマでの表現にも影響するため、 elevation.surface.raised と elevation.shadow.raised をセットで使うそうです
• Overlay
  • 最も高い高さを表現します
  • elevation.surface.overlay と elevation.shadow.overlay をセットで使います
  • オーバーレは他のオーバレイの上に踏み重ねることができます

他にもユーザーの操作に対してのElevationの表現についても記載がありました。

もう１つ他のデザインシステムと違うと感じた点が、影の色がモノトーンではなく、ATLASSIANのカラートークンで指定してある Neutral colors を基準に使っているので、少し青みがかっていました。

非常に背景とのなじみが良いと感じました。

参考ページ

Figma

UI

css

2つの値でShadow（影）を表現していますが、 0px 0px 1px 0px rgba(9, 30, 66, 0.31) は常に一緒でまるでborderのように扱っていると感じました。
前提として、Surface（面）で高さを表現をしますが、この値がダークテーマでShadowが見えづらくなっても、要素の境界を保持しているのではないかと思いました。

下記は配布されていたFigmaからピックアップしてきました。
ライトテーマ用だと思います。

Elevation	css
0	none
100	box-shadow: 0px 1px 1px 0px rgba(9, 30, 66, 0.25), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);
200	box-shadow: 0px 3px 5px 0px rgba(9, 30, 66, 0.20), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);
300	box-shadow: 0px 8px 12px 0px rgba(9, 30, 66, 0.15), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);
400	box-shadow: 0px 10px 18px 0px rgba(9, 30, 66, 0.15), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);
500	box-shadow: 0px 18px 28px 0px rgba(9, 30, 66, 0.15), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);

まとめ

• 影は1つ〜3つの値を指定して表現している
• Surface（面）の概念はShadow（影）を使わない場合でも高さを表現するため
  • ライトテーマでは、Elevationが高いほど濃い色（元の色がはっきりした色）になる
    • 例: 白なら奥の（Elevationが低い）要素のほうがグレーがかるし、緑なら奥のほうが彩度と明度が落ちた緑になる
  • ダークテーマでは、Elevationが高いほど明るい色になる
• ダークテーマの場合、Shadow（影）は見えづらくなる
  • ATLASSIANでは、Surface（面）と境界線で表現することを想定しているようだ

私の備忘録ですが、誰かのお役に立てると幸いです。

参考

• Elevation – Material Design 3
• エレベーション（概要）｜デジタル庁デザインシステム
  • デジタル庁デザインシステム v1.4.2 – Figma
• 影 | デザイントークン | SmartHR Design System
• Elevation - Foundations - Atlassian Design System
  • ADS Foundations | Figma