見出し画像

Stacking ContextとElevationを活用して視覚と構造の階層をデザインをする

sakito

デジタルプロダクトのデザインをにとって、Stacking Contextは重要な概念です。本記事ではStacking Contextを理解し、Elevationという概念を用いて視覚と構造の階層化をデザインするということについて説明します。


Stacking Contextとは何か？

Stacking Contextは、Webページ上の要素が積み重なる順序を決定する概念です。CSSのz-indexプロパティと密接に関連しています。Stacking Contexは、ページ上での要素の表示順序を管理する上で非常に重要です。また、Stacking Contextの理解と活用は、デジタルプロダクトに携わるデザイナーにとって重要なスキルであり、壊れにくいデザインを生み出すために必要な知識になります。

Stacking Contextを知るためにはMDNに目を通すことをオススメします。

Stacking Contextは、要素の重なり順を決定するための階層的なシステムです。特定のCSSプロパティ（例えば、positionとz-index）の組み合わせによって形成されます。z-indexの値が大きい要素は、値が小さい要素よりも上に表示されます。しかし、新しいStacking Contextが形成されると、その中のz-indexは親のcontextとは独立して扱われます。これは、複雑なレイアウトを作成する際にはとても重要となる知識になります。

Stacking Contextの構造を表した画像
引用元：The Z-Index CSS Property: A Comprehensive Look

Stacking Contextをデザインに結びつける

Stacking Contextは、デザイナーが要素を配置する際に役立ちます。例えば、重要な要素を他の要素の上に表示したい場合、その要素に高いz-index値を設定することで実現できます。また、Stacking Contextは、要素の透明度や背景の設定にも影響を与えます。デザイナーは、要素のStacking Contextを意識して、レイアウトや視覚効果をデザインします。

一方で、Stacking Contextには注意が必要です。要素ごとにStacking Contextが作成されるため、予期しない結果が生じることがあります。例えば、親要素のStacking Contextに影響を与える子要素のz-index値を設定すると、意図しない要素の表示順が変わる可能性があります。実装の後に意図せずデザインが壊れてしまうの防ぐためにデザイナーは、要素のStacking Contextの関係を理解し、デザインの段階で適切なz-index値を設定することで、予期せぬ問題を回避することが重要です。

要素のStacking Contextの関係については、下記の記事がとても分かりやすいものでした。

DaialogとMenu Popupを使用した例

以下の画像がDaialogとMenu Popupを使用した例になります。Stacking contextを適切に把握していない場合にMenu Popup表示とDaialog表示が被った場合に不都合が生じます。この場合、DaialogはStacking contextとしてどの要素よりも常に優先されるといった理解が必要になります。Stacking contextではDaialogとMenu Popupは同列の優先順位ではないということです。

Daialogが表示されている例
簡単な例としてDaialogを用いたデザインにもStacking contextが活用されている例
DaialogとMenu Popupが表示されている例
簡単な例としてDaialogを用いたデザインにもStacking contextが活用されている例(失敗例)

Elevation

「Elevation」という概念があります。要素の高さを視覚的に定義したものです。ElevationとStacking Contextは共にUI上の要素の階層と重なりを表すものです。
Elevationを整理することで、どの要素が他の要素の上にあるか、どの要素が対話可能であるかがユーザーに直感的に理解されます。

さまざまなデザインシステムにElevationの項がドキュメントとしてあります。

上記に挙げた例ではElevationドキュメントの中でz-indexに触れています。

DELLのデザインシステムの例ではとてもElevationとStacking Contextの概念が可視化されています。

elevationの可視化
引用元：https://www.delldesignsystem.com/foundations/elevation/

ElevationとStacking Contextの適切な組み合わせは、より直感的で理解しやすいユーザーインターフェースを作成するのに役立ちます。Elevationによる視覚的な定義は、Stacking Contextによって定義された実際の重なり順序を補完し、より明確なデザインの指針を提供します。

SmartHRさんではレイヤー順序のガイドラインとしてStacking Contextの構造を明文化しているようです。

Elevationの概念はモバイルでも活用できます。Material Design 3のドキュメントなどが参考になります。

Stacking ContextとElevationの相互作用

デザインにおいて、二つの概念は相互作用します。例えば、Menu PopupやDaialogは、Stacking Contextを使用して他の要素の上に配置される一方で、Elevationを使用して視覚的に「浮き上がっている」ように見せることができます。

ElevationとStacking Contextの両方を適切に理解し活用することで、より機能的で魅力的なデザインを生み出すことが可能になります。これにより、ユーザーにとって直感的で使いやすいインターフェースを実現することができます。

まとめ

Stacking Context

  1. 定義: Stacking contextは、HTML要素の重なり順序（z軸上の位置）を決定するための環境です。これは主にCSSのz-indexプロパティとpositionプロパティによって制御されます。

  2. 重要性: Stacking contextは要素の表示順序を決定します。例えば、Popup、Daialog、Toastなど、他の要素の上に重ねて表示する必要があるコンテンツに不可欠です。

  3. 使用方法: 要素にz-indexを設定すると、新しいStacking Contextが作成されることがあります。これにより、そのcontext内の要素は他のStacking Contextと独立して重なります。

Elevation

  1. 定義: Elevationは、要素がどの程度「浮き上がっている」かを示します。これは光と影を使って要素の「高さ」を視覚的に表現します。

  2. 重要性: Elevationはユーザーインターフェースの深度感と階層を作り出すために使用されます。これにより、どの要素が他の要素の上にあるか、どの要素が対話可能であるかがユーザーに直感的に理解されます。

  3. 使用方法: 主に影（シャドウ）を使ってElevationを表現します。要素の「高さ」が高いほど、影はより大きく、よりぼんやりとしたものになります。

Web上で要素の重なりと視覚の情報設計を行うために必要なStacking ContextとElevationの概念について解説しました。これらの概念を用いてデザインのルールを作ることで、実装後に予期せぬ表示崩れが起きていることを防ぐことができます。

この記事が気に入ったらサポートをしてみませんか？