UIデザインをしていると、背景画像の上に配置した要素の色を「いい感じ」に 馴染ませたい 、というシーンに出くわすことがあります。
例えば
こちらの2つの画像（背景＋ロゴ）を重ね合わせ、以下のような表示にしたい場合です。
上の画像はよく見ると、ロゴが背景の青空の色に影響されて少し暗くなっているのがお分かりになりますでしょうか。
これは単に画像を半透明にして重ねているのではなくロゴの色を背景の色と 「乗算」 という計算式で掛け合わせて合成しているためです。
色同士を計算することで 馴染ませる 合成方法はデザインの現場でも広く活用されており専用のグラフィックツールで事前に合成してしまうのが簡単なのですがこの方法が通用するのは「背景が固定されている」場合に限定されます。
例えばユーザーが壁紙を自由に変えられるような動的なUIであったりコンテンツ内容によって背景が変わるようなケースでは当然ですが事前に合成することはできません。
こんな時簡単にページ上で画像を合成できるのが、CSSの mix-blend-mode プロパティです。
どう使う？
mix-blend-mode を使うと重なり合った要素同士の色を特定のルールで計算してから決めることができ、画像の合成が実現できます。
グラフィックツールでおなじみの「乗算」「スクリーン」「オーバーレイ」といった 画像の合成モードを、CSSだけで実現できるイメージです。
具体的には下記のようなモードが指定可能です。
| モード | 説明 |
|---|---|
normal |
通常の描画。合成なし（デフォルト） |
multiply |
乗算。背景と掛け合わせて暗くなる |
screen |
乗算と逆の処理で明るくなる |
overlay |
背景の明暗に応じて multiply もしくは screen が適用される |
darken |
より暗いほうの色が採用される |
lighten |
より明るいほうの色が採用される |
difference |
背景と要素の色の差を取り反転するような効果 |
exclusion |
difference に似るがすこしマイルドな効果 |
color-dodge |
覆い焼き操作。背景を明るくして差を小さくする |
color-burn |
焼き込み操作。背景を暗くして差を大きくする |
hard-light |
overlay の演算対象が逆になる |
soft-light |
hard-light より柔らかく合成される |
hue |
色相のみを合成する |
saturation |
彩度のみを合成する |
color |
色相と彩度を合成する |
luminosity |
輝度のみを合成する |
たとえば、先ほどの例のように画像を multiply（乗算）で合成するCSSは次のようになります：
.image { mix-blend-mode: multiply;}
このCSSを重ねる方の画像に適用すると、その下にある背景と乗算合成されて表示されます。
以下はそれぞれのモードにおける見え方の違いのサンプルです。
各モードの詳細は MDN Web Docs のリファレンス が参考になりますが、まずはサンプルコードや開発者ツールで値をいろいろ変えながら試してみるのがおすすめです。
変化のある背景に対する視認性の確保への応用
mix-blend-mode の活用シーンの一つが、背景が動的に変わるUIにおける 視認性の確保 です。
たとえば、次のようなケースを考えてみてください：
- ダッシュボードの壁紙がユーザー設定で変わる
- 時期によってテーマとなる背景写真が変わりその上にUIを配置する必要がある
- グラフの色が動的に決まり、その上に文字や線を描画する
こういった状況では「背景によって文字やアイコンが見えづらくなる」という問題が起きがちです。
背景が明るすぎると白いアイコンが溶け込んでしまったり、暗すぎると黒いテキストが読めなくなったり…。
こういう時例えば、mix-blend-mode: difference を活用すると、背景の明暗に応じて要素の色が自動的に反転するような効果を得られます。
.logo { mix-blend-mode: difference;}
上記の例では白いロゴが背景色に応じて自動的に変化し、背景が明るければ暗く、背景が暗ければ明るく表示されます。
これによりどんな背景でも一定の視認性を保つことができます（デザイン性は議論があると思いますが…）。
もちろん万能ではありませんが、アイコンや装飾的な要素・小さめのテキストなどには効果的です。
使う際の注意点
mix-blend-mode は便利なプロパティですが、いくつか押さえておきたい点もあります：
- 背景に依存する
背景が複雑なグラデーションや写真の場合、意図しない色になってかえって視認性が落ちることもあります。想定される背景パターンで可能な限り結果を確認しておくようにしたいです。 - パフォーマンス
現代のブラウザでは基本的に問題なく動作しますが、広範囲にわたる画像を使用する場合・アニメーションと組み合わせる場合・多数の要素に同時に適用する場合など描画負荷が高まりやすいシナリオでは、旧世代のスマートフォンなどパフォーマンスに制約のある環境も考慮し描画負荷への影響を確認しておくと安心です。
このような懸念もあるため、背景が固定されるような場合のデザインとしての利用であれば CSSではなくデザインツールで合成しておく のがやはり筋だと思います。
mix-blend-mode はUIデザインにおいていざという時意外と頼りになるプロパティです。
特にユーザーが配置した画像の上にUIや文字列を表示するようなケースでは背景画像への影響を最小限に抑えながら視認性を確保できるため、私たちが提供するサービスにおいても利用を検討したことがありました。
「こんな方法もあるんだ」と頭の片隅に置いていただけるとここぞという時役に立つかもしれません。
この記事が皆さんの一助となれば幸いです。
