DialogやDrawerをModal展開した時に背面に敷く板のお話。

丁寧に書くとモーダルやダイアログ、ドロワー展開時に背面UIを視覚的に減弱させつつ、操作遮断してユーザーの注意を前面UIに集中させる半透明レイヤーのこと（最近はボカシタイプもある）

こいつの名前がプロジェクト毎に「下敷き」「グレー板」などバラバラ、かつイマイチで20年ぐらいモヤモヤしている🤔

個人的にはMaterial Designで使われているScrimという呼称を使っている。

しかし実装チームにスムーズに伝わらないことが多く、あまり普及してないのかしらと思ったりする。ということで世の中どーなってるのかチャッピーと一緒に調べてみた。

🤪 よく使われる名称

名称	主な使用デザインシステム	意味・用途	備考
Scrim	Material Design / JPMorgan Salt など	一時的な半透明レイヤーで背景の強調度を下げる	UX設計・視線誘導の観点で強い意味を持つ。Materialガイドライン用語として明確。
Backdrop	CSS仕様 / Material Backdropコンポーネント / Fluent UI	背面レイヤー。ダイアログの背景として技術的に広く使われる	`::backdrop` という CSS 疑似要素もあり、実装寄りの用語として浸透。
Overlay	Carbon / Fluent UI / Adobe Spectrum（部分的）	上に重なるレイヤー全般。ダイアログ、トースト、ポップオーバー含む	抽象度が高く、背面レイヤー限定ではないため命名として曖昧になりやすい。
Underlay	Adobe Spectrum	Overlay の下に敷く視覚的背景レイヤー	技術実装の観点から整理されているが、認知度は高くない。
Blanket	Atlassian Design System	UI全体を覆うインタラクションブロック＋視線誘導レイヤー	名前の感覚的わかりやすさがあり、命名に向いているがややマイナー。
Dimmer	Semantic UI など一部	画面を暗くする効果レイヤー	ニッチでフレームワーク依存が強い。
Mask	一部の UI フレームワーク	領域の可視・不可視制御の意味が強い	背景遮断ではなく、視覚的な切り抜き用途が主。

“Scrim” の本来の意味は薄いカーテンみたいな感じ。ただそれ以外にeスポーツで練習試合の “Scrimmage” をスクリムと言っているらしい。（スクリメージはアメフトでも使う言葉だけどスクリムとは略してはいなかった・・・）

“Backdrop” はMaterial Design v2で違うUI名だったのでちょと混乱するので嫌。（今は “Bottom Sheet” という名称になってAppleと揃えられた状態）個人的にはジャンボ鶴田しか思い浮かばない・・・

“Overlay” は抽象度高すぎ。Dialog、Drawerなどの状態説明とバッティングしてミスリードしそうで嫌。

“Underlay” は下敷きという意味でいい感じ。しかし仮想ネットワーク基盤の “Underlay network”とカブるので避けたい気持ち。

“Blanket” は直感的にわかりやすくていい感じ。誤認しそうな懸念もあまりない。ただSheet、Drawer、Blanketとかジャンルが入り乱れている印象あり😅

“Dimmer” は調光器という意味。ちょと微妙にニュアンスが違う感じなのと語感が嫌だ😅

“Mask” は画像クリッピングに使う印象が強い。CSSの同様効果のプロパティもあるしバッティング対象多いので嫌。

🤩 有名どころデザインシステムでの名称

続いて有名どころのデザインシステムでの名称を整理ー

デザインシステム	用語	備考
Material Design	Scrim, Backdrop	ガイドラインとコンポーネントで明確に区別あり。Scrim = UX効果、Backdrop = コンポーネント構造
Carbon (IBM)	Overlay	モーダルの背景に対して Overlay を使用
Fluent UI (Microsoft)	Overlay / Layer	コンポーネント構造としては Overlay が使われるが、明示的な UX用語は不明
Spectrum (Adobe)	Underlay, Overlay	背景操作遮断用に Underlay を提供、Overlay コンポーネントとセットで使用
Atlassian	Blanket	明確に UI背面を遮断＋クリック無効化＋視線集中の目的で使われている
SAP Fiori	なし（明示なし）	「遮断レイヤー」に対する専用名称は見当たらず。レイヤー構造・色調は定義あり
Apple HIG	（Material, Blur）	Materialという概念でレイヤー表現されるが、遮断用背景レイヤーの専用名はなし
CSS仕様	::backdrop	`<dialog>` 等に対する標準の背景レイヤー擬似要素。技術的な名称として広く使用

CSSの疑似要素backdropは、Appleの “Liquid Glass” 効果で再注目されていることもあり結構インパクトある。（昔iOSではbackdrop-filterが効かない問題あった記憶だけど・・・😅）

個人的にはBackdropが今後主流になりそうな予感を感じつつも、バックドロップはやはりジャンボ鶴田の代名詞として温存し、Blanketを採用しようかなーと思った次第。（と言っても今作ってるデザインシステムではすでにScrimという名前になっているのだけど・・・🤮）

なんか他に良い名称があれば知りたい気持ち