不透明度

定義

不透明度は、要素がどれくらい透けて見えるかを表す値です。完全に不透明なら後ろにあるものは まったく見えず、完全に透明なら要素そのものが消えたかのように背景がそのまま透けて見えます。 その中間の半透明の状態では、手前の要素と後ろの背景の色が互いに重なって混ざって見えます。 よくアルファ（alpha）とも呼ばれ、この値を調整すると、要素を消したり描き直したりしなくても、 重なりやオーバーレイ、無効状態といったさまざまな状態を自然に表現できます。色そのものを 変えるのではなく「どれくらい存在しているか」を調整する点が、ほかの色の属性と区別される特徴です。

なぜ重要か

不透明度が大切なのは、要素どうしの「層（レイヤー）」を表現するいちばん手軽な方法だからです。 モーダルを開くときに後ろの背景を半透明の黒い膜で覆うと、ユーザーは今まで見ていた画面が いったん後ろに下がり、手前のウィンドウに集中すればよいのだとすぐに理解できます。無効な ボタンを薄く見せれば、今は押せないという意味が、色をわざわざ説明しなくても伝わります。 このように不透明度は、要素の状態や優先度をそっと知らせる合図になります。さらに、画像の上に 半透明の膜を一枚かぶせれば、その上に載せた文字が写真の複雑な模様に埋もれず、くっきり 読めるように助けることもできます。ただし便利なぶん使いすぎやすいので、何のために透けさせるのか、 目的をはっきりさせて使う姿勢が必要です。

よくある間違い

• 本文のテキストに強すぎる不透明度をかけてしまうことです。黒い文字を半透明にすると、 ぼんやりして上品に見えますが、そのぶん背景とのコントラストが下がり、読みにくくなります。 とくに色のついた背景の上では、コントラストが思った以上に大きく崩れます。
• 要素全体の不透明度を下げて、一部分だけを薄くしようとすることです。opacity を要素にかけると、 その中の文字や影、子要素までまとめて透けてしまいます。背景だけを半透明にしたいなら、 色そのものにアルファ値を入れるほうが向いています。
• スクリム（背景を覆う膜）を濃くかけすぎることです。後ろの背景を暗く隠しすぎると、今どこの上で 作業しているのかという文脈が完全に消えてしまい、ユーザーは方向を見失って窮屈さを感じることが あります。背景がうっすら透ける程度に覆うだけでも、焦点を手前のウィンドウに移すという目的は 十分に果たせます。

実務のヒント

• モーダルの後ろの背景を暗く覆うスクリムや、無効なボタンを薄く見せる用途に不透明度を使いましょう。 ただしテキストには強い不透明度をかけず、薄い文字が必要なときは、最初からコントラストを確保した グレー系を選んで使うほうが安全です。
• 半透明の色を使うときは、その上に載る実際の背景の上で最終的な色を確認しましょう。白い背景では よく見えた半透明のグレーが、暗い背景ではまったく別の色に見えることがあります。
• 不透明度で層を分けるときは、重なり順もあわせて管理しましょう。どの要素が上に来るかが決まって はじめて、半透明の効果が意図したとおりに積み重なります。

関連概念