ブレンドモード

定義

ブレンドモードは、重ねた2つのレイヤーの色をどんな方法で混ぜるかを決めるルールです。 ふつうは上のレイヤーが下のレイヤーをそのまま覆い隠しますが、ブレンドモードを指定すると、 2つの色が特定の計算式にしたがって混ざり、重なった部分の色が変わります。代表的なものとして、 乗算（multiply）は重なった部分をより暗くし、スクリーン（screen）は逆により明るくします。 オーバーレイ（overlay）は明るいところをより明るく、暗いところをより暗くしてコントラストを 強めます。CSSでは mix-blend-mode プロパティで指定でき、画像と色、テキストを自然になじませ たいときに使います。

なぜ重要か

ブレンドモードがないと、画像の上にのせた色や文字はいつも画像を覆ってしまい、ぎこちなく浮いて 見えがちです。ブレンドモードを使うと、上のレイヤーが下の画像の明暗や質感を含みながら混ざるので、 まるでもともと1枚だったかのように自然に溶け込みます。おかげで、画像の上の文字を背景になじませて のせたり、写真に色を重ねるカラーオーバーレイ、2つの色調で写真を染めるデュオトーンといった効果を、 数行のコードで作れます。画像編集ツールがなくても画面の中でリアルタイムにさまざまな雰囲気を 演出できる点が大きな魅力です。ただし結果は下のレイヤーの色によって変わるので、どんな背景の上でも 意図どおりに見えるかを自分の目で確かめる習慣が大切です。効果が強いぶん、背景を邪魔しないよう 控えめに使う感覚もあわせて身につけておきましょう。

よくある間違い

• ブレンドモードでのせた文字の読みやすさを確認しないことです。背景画像の明るさによって、混ざった 文字がある場所ではよく見え、別の場所では消えてしまうことがあるので、画像全体の上で文字が読める かを点検しましょう。
• 効果に夢中になって、いくつものブレンドモードを重ねて使いすぎることです。混ざりが過剰だと色が 濁ってつぶれ、画面がごちゃごちゃします。目的がはっきりした一箇所だけに、控えめに使うのがおすすめです。
• どのモードがどんな色を出すかを暗記しようとすることです。モードごとに結果が背景色によって変わるので、 値を実際に変えながら目で確かめるほうが、名前を覚えるよりずっと速くて正確です。

実務のヒント

• 効果の目的に合ったモードを選びましょう。影やインクがにじんだような暗い印象には乗算を、光が 広がる明るい印象にはスクリーンを、写真のコントラストを生かしたいときにはオーバーレイを使うと、 狙った雰囲気を正確に出せます。
• 画像の上の文字を自然にのせたり、カラーオーバーレイやデュオトーンを作るときは、CSSの mix-blend-mode で指定しましょう。わざわざ画像編集ツールを使わなくても、画面の中ですぐに適用して、 値を調整しながら確認できます。
• mix-blend-mode はサポートが十分に広いほうですが、重要な画面なら @supports で対応状況を確認し、 効果がなくてもコンテンツが正常に見えるよう備えておきましょう。文字やボタンのように必ず読ませたい 要素は、ブレンド効果だけに頼らないよう特に気をつけてください。

関連概念