移行中の知識
影
Shadow
定義
影（shadow）とは、要素の周囲に明暗のずれやぼかしを加え、重なり・距離・境界などの空間的な手がかりを作る表現です。UIではfloating surfaceやoverlayのdepth cueとして使えますが、影そのものがelevationや重要度と一対一対応するわけではありません。offset、blur、spread、opacity、背景とのcontrast、他のdepth cueを合わせて判断します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
canvas上のtoolbar
floating panelの分離
見るポイント
panelがcontentより手前にあることを示すためにshadowを使う場合、境界やoverlapだけでも層関係が伝わるか確認する。影を濃くするほど手前という単純なscaleにしない。
dialogとbackground
dark modeのsurface
見るポイント
暗い背景でshadowが見えにくい場合、同じshadow tokenを反転せず、surface lightness・border・overlayなど別のcueと組み合わせる。
注意
誤解しやすい点
- shadowを付ければ、必ず手前・clickable・重要という意味が伝わると考える。
- blurやopacityを大きくすれば、より自然なdepthになると一般化する。
- light mode用shadowをdark modeへそのまま移し、背景との関係を確認しない。
関連
関連する概念
出典