オーバーレイ / スクリム
Overlay / Scrim
別名: 背景オーバーレイ / Background Overlay
ライブデモ
説明
一言で説明
モーダルやドロワーの背面に覆いかぶさる半透明の暗い背景。背面コンテンツとの視覚的な分離を作る。
いつ使う？
モーダル、ドロワー、ボトムシートなどのオーバーレイ表示時に、背面を暗くして前面コンテンツに注目させたいとき。
💡 日常の言い方
「モーダルの後ろが暗くなる半透明の黒いやつ」
似ている用語との違い
オーバーレイ / スクリム vs バックドロップ
ほぼ同義。スクリムはMaterial Design用語。バックドロップはCSS/Web標準の用語。
AIへの指示例
モーダルの背面にスクリムを追加して。半透明の黒（opacity 0.5）で、クリックするとモーダルが閉じるようにして。フェードインアニメーション付き。