移行中の知識
不透明度
Opacity
定義
不透明度（opacity）とは、要素や色が背後の内容をどの程度透過させずに見せるかという合成上の属性です。日本語の制作会話では「透明度」が逆方向の値を指したり、opacityの意味で曖昧に使われたりするため、値を共有する時はopacity / alphaのどちらを指すか明示します。Webではopacity propertyとcolorのalpha componentの両方で透明性を扱えますが、element全体へopacityを適用する場合と、特定色だけへalphaを持たせる場合では合成結果や子要素への影響が異なります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
toolbarのsecondary iconやhint
disabledではない補助要素を薄くする
見るポイント
opacityだけを下げて視覚的優先度を落とす場合、背景との合成後に必要な識別性が残るかを見る。disabled表現と混同されないかも確認する。
modalやdrawerの背面抑制
overlayのscrim
見るポイント
半透明のscrimで背面を抑える時、modalとの層関係が伝わるか、背面情報が強く残りすぎないかを見る。scrim colorとopacityを別々に考えず、合成後の見えで判断する。
注意
誤解しやすい点
- elementのopacityとcolor alphaを同じ結果になる実装だと考える。
- 「透明度50%」のような表現だけを共有し、透過率50%なのかopacity 50%なのかを曖昧にする。
- 50% opacityなら、どの背景上でも見た目の明度やcontrastが半分になると考える。
- 重要情報や必須操作を薄くすればsecondaryに見えるとして、識別性やdisabled stateとの区別を確認しない。
関連
関連する概念
出典