カードUIのシャドウelevationとは?
マテリアル系のUIでは、要素が画面上でどれくらい浮いて見えるかをelevation値で表現し、その値に比例して影のオフセット・ブラー・不透明度を調整します。この計算機はelevationレベルを選ぶと、そのまま使えるbox-shadow値を計算します。
計算方法
elevationが高くなるほど影の縦方向オフセットとブラー半径が大きくなり、同時に影の不透明度(opacity)も濃くなります。値が濃すぎると重く見えるため、最大不透明度は0.28に制限しています。
実務での活用ポイント
通常のカードにはelevation 2〜4程度が自然で、モーダルやドロップダウンのように画面の最前面に浮くべき要素には8以上を使うのがおすすめです。ダークモードのように背景が暗い画面では、計算されたopacityを少し下げて影が強調されすぎないよう調整しましょう。
よくある質問
elevationの値はどのように決めればいいですか?
画面上でより重要な要素や浮いて見える要素ほど高いelevationを使用します。通常のカードは2〜4、モーダルやポップオーバーのように浮く要素は8〜16以上が推奨されます。
計算された影の値をそのままCSSに使ってもいいですか?
はい、計算されたbox-shadow値をそのままカードコンポーネントに適用できます。ただし背景が暗い場合はopacityを少し下げると自然に見えます。