影・ドロップシャドウ
読み: かげ・どろっぷしゃどう
画像やテキストの背後に影を付けて立体感や奥行きを演出する視覚効果。
ドロップシャドウとは、画像やテキスト、UI 要素の背後に影を描画し、あたかも要素が浮き上がっているかのような立体感を演出する視覚効果である。Web デザインではカードコンポーネントやボタンに奥行きを持たせるために多用され、CSS の box-shadow や text-shadow で実装する。
影のパラメータは主に 4 つある。水平方向のオフセット (X)、垂直方向のオフセット (Y)、ぼかし半径 (blur)、色 (通常は半透明の黒) である。例えば box-shadow: 2px 4px 8px rgba(0,0,0,0.2) は右に 2px、下に 4px ずれた、ぼかし 8px の薄い影を生成する。
画像編集においては、切り抜いた被写体に影を付けることで背景との一体感を出す手法がよく使われる。背景除去ツールで被写体を切り抜いた後、影を追加すると自然な仕上がりになる。枠線や角丸と組み合わせることで、洗練されたカードデザインを実現できる。