Web・UI・CSS
カードの影がぼやける。ぼかしと広がりを調整したい
使うツール
カードを背景から少し浮かせたくて影を付けたのに、周囲が灰色ににじんで見える。ぼかしを増やすほど柔らかくなるはずなのに、今度は何が選択されているか分かりにくい。影の調整では、大きい・小さいという一つの尺度ではなく、どこへずらすか、どれだけぼかすか、形を広げるか、どれだけ濃くするかを分けて考えます。Box Shadow生成で一つの値ずつ変えると、CSSの各数値の役割を目で追えます。
まずは、何もぼかさない影で位置を読む
box-shadow: 4px 8px 0px 0px rgb(15 23 42 / 0.18);色を#0F172A、xを4、yを8、ぼかしと広がりを0、alphaを0.18、insetをOFFにします。影の形が右へ4px、下へ8pxずれる例です。最初から大きくぼかすと位置の違いが分かりにくいので、まず輪郭を残して方向を見ます。xを負にすれば左、yを負にすれば上へ移ります。
影は要素そのものの幅や高さを増やす余白ではありません。隣のカードとの間隔を確保するなら、影の数値とは別にレイアウトのgapや余白を確認します。影を広げてカード同士が重なって見えても、要素の位置が動いたわけではない場合があります。実際の間隔と、影が描かれている範囲を分けて見ます。
ぼかしと広がりを、同じつまみとして扱わない
box-shadow: 0px 8px 24px 0px rgb(15 23 42 / 0.18);xを0に戻し、ぼかしだけを24へ増やすと、輪郭が柔らかくなります。次に広がりを正の値へ変えると、ぼかす前の形を外側へ広げる方向の変化になります。負の広がりなら小さくする方向です。『周囲に広く影が出る』という見た目だけで、ぼかしと広がりを同じものとして増減すると、意図と違う濃い縁ができることがあります。
このツールでは負のぼかしは入力エラーです。一方、位置や広がりには負の値が使えます。エラーになった数値を、単にマイナスを消せばよいと扱わず、どの項目へ入れたかを確認します。影を内側へ置きたい場合には、位置を無理に調整するより、insetという別の設定が意図に合うかを見ます。
濃さはalphaで、背景も含めて確かめる
形が決まったら、alphaを0.18から0.10や0.30へ変え、濃さだけを比較します。alphaは0が透明、1が不透明です。同じ値でも、白い背景と暗い背景では見え方が違います。薄い影が見えないからといって、どのテーマでも同じ大きなalphaへ上げると、ライト側では重すぎる見た目になる場合があります。
影の色に透明度を含める場合も、この画面ではalpha設定が出力に使われることを確認します。色コードだけを変えたつもりでも、別の透明度設定が残っていれば期待と違う濃さになります。生成CSSのrgb(... / 0.18)という部分を読み、どの値が最終的に出力されたかを確かめます。
暗いテーマでは、影以外の区切りも考える
黒に近い面の上へ黒に近い影を重ねても、差が見えにくいことがあります。境界線、面の明るさ、余白で区切る方が読みやすい場合もあります。選択中のカードや押せるボタンを、影だけで識別させないようにします。文字、アイコン、輪郭など他の手掛かりを残し、キーボードフォーカスとは別の状態として確認します。
利用先で親要素のoverflowが切取りを行っていると、影が途中で消える場合があります。数値を大きくする前に、影を描く領域が切られていないかを確認します。ツールのプレビューで見えた影が実画面で見えないとき、コピーに失敗したとは限りません。周辺のレイアウト条件が違う可能性があります。
一枚の見本から、実際の一覧へ戻って確認する
一枚だけでは控えめに見える影も、十枚のカードを並べると画面全体が濃く見えることがあります。実際のカード数、間隔、文字量で確認します。スクロール中の見え方や、小さい画面で影同士が重なる様子も見ます。影の存在感より、どこが押せてどこを読めばよいかが分かることを優先します。
現在の基本画面は一つの影の各値を調整する構成です。複数の影を重ねるCSSはカンマで層を分けますが、この画面に層を追加する専用操作があるとは扱いません。まず一層で必要な区切りを作り、複数層が必要なら利用先で各層の役割を決めて検証します。重ねるほど良くなると考えず、効果を説明できない層は追加しない方が調整しやすくなります。