レイヤー合成の基礎 - ブレンドモード完全解説と実践テクニック
レイヤー合成の基本概念 - ピクセル単位の演算を理解する
レイヤー合成 (ブレンディング) とは、2 枚以上の画像を重ね合わせる際に、各ピクセルの色値をどのような数式で混合するかを定義する処理です。Photoshop では 27 種類のブレンドモードが用意されていますが、その本質はすべて「上レイヤーのピクセル値」と「下レイヤーのピクセル値」を入力とする数学的な関数です。
基本用語: 上に重ねるレイヤーを「合成色 (Blend)」、下のレイヤーを「基本色 (Base)」、演算結果を「結果色 (Result)」と呼びます。計算は 0.0〜1.0 に正規化された値で行われます (8bit の場合、ピクセル値を 255 で割った値)。
通常モード (Normal): 最も基本的なモードで、上レイヤーが下レイヤーを完全に覆い隠します。不透明度 (Opacity) を下げると、Result = Blend × α + Base × (1 - α) の線形補間が適用されます。α=0.5 なら両レイヤーが 50% ずつ混合されます。
ブレンドモードのカテゴリ: Photoshop のブレンドモードは機能別に 6 グループに分類されます。
- 暗くするグループ (比較暗、乗算、焼き込みカラー、焼き込みリニア、カラー比較暗): 結果が基本色より暗くなる
- 明るくするグループ (比較明、スクリーン、覆い焼きカラー、覆い焼きリニア、カラー比較明): 結果が基本色より明るくなる
- コントラストグループ (オーバーレイ、ソフトライト、ハードライト、ビビッドライト、リニアライト、ピンライト、ハードミックス): 中間調を境に暗部と明部で異なる処理
- 反転グループ (差の絶対値、除外、減算、除算): 色の差分や反転を利用
乗算とスクリーン - 最も使用頻度の高い 2 つのモード
乗算 (Multiply) とスクリーン (Screen) は、ブレンドモードの中で最も頻繁に使用される基本モードです。両者は数学的に対称な関係にあり、乗算が「暗くする」操作、スクリーンが「明るくする」操作を担います。
乗算 (Multiply) の計算式: Result = Base × Blend
0.0〜1.0 の値同士を掛け算するため、結果は必ず入力値以下になります (暗くなる)。白 (1.0) を乗算すると結果は変わらず、黒 (0.0) を乗算すると結果は黒になります。この特性から、白背景のロゴやテキストを画像に合成する際に白が透明になる効果が得られます。
乗算の実用例:
- 白背景のスキャン画像 (手書きイラスト、署名) を写真に合成する
- 影を追加する (グレーのレイヤーを乗算で重ねる)
- テクスチャの暗部のみを適用する
- 2 枚の露出の異なる写真を合成して HDR 的な効果を得る
スクリーン (Screen) の計算式: Result = 1 - (1 - Base) × (1 - Blend)
乗算の「反転版」で、結果は必ず入力値以上になります (明るくなる)。黒 (0.0) をスクリーンすると結果は変わらず、白 (1.0) をスクリーンすると結果は白になります。黒背景の光エフェクト (レンズフレア、火花、光の粒子) を合成する際に黒が透明になります。
スクリーンの実用例:
- 黒背景のレンズフレアや光エフェクトを合成する
- 暗い画像を明るくする (画像を複製してスクリーンで重ねる)
- 霧や光の拡散効果を追加する
- 花火や稲妻の写真を夜景に合成する
乗算とスクリーンは CSS の mix-blend-mode プロパティでも使用可能で、Web デザインでのテキストオーバーレイやホバーエフェクトに活用されています。
オーバーレイとソフトライト - コントラスト調整の主力モード
オーバーレイ (Overlay) とソフトライト (Soft Light) は、画像のコントラストを調整する際に最も頻繁に使用されるモードです。中間調 (50% グレー) を境界として、暗い部分はより暗く、明るい部分はより明るくする「S 字カーブ」的な効果を生みます。
オーバーレイ (Overlay) の計算式:
Base ≤ 0.5 の場合: Result = 2 × Base × Blend
Base > 0.5 の場合: Result = 1 - 2 × (1 - Base) × (1 - Blend)
基本色が暗い部分 (0.5 以下) では乗算が適用され、明るい部分 (0.5 超) ではスクリーンが適用されます。50% グレーを合成すると結果は変化しません。この「ニュートラル」特性を利用して、50% グレーのレイヤーを作成し、白や黒でペイントすることで非破壊的なドッジ & バーン (部分的な明暗調整) が可能です。
オーバーレイの実用例:
- テクスチャの合成 (紙の質感、コンクリート、布地を写真に重ねる)
- ドッジ & バーン (50% グレーレイヤー + オーバーレイ)
- カラーグレーディング (色付きレイヤーをオーバーレイで重ねる)
- コントラスト強調 (画像を複製してオーバーレイ、不透明度で調整)
ソフトライト (Soft Light): オーバーレイより穏やかな効果を生みます。計算式はより複雑ですが、結果としてコントラスト変化がオーバーレイの約半分程度に抑えられます。ポートレートの肌レタッチや、繊細なカラーグレーディングに適しています。オーバーレイでは効果が強すぎる場合の代替として使用します。
ハードライト (Hard Light): オーバーレイの「逆」で、合成色を基準に判定します。合成色が暗ければ乗算、明るければスクリーンが適用されます。テクスチャの質感を強く出したい場合や、ドラマチックな光の効果を作る際に使用します。
差の絶対値と除外 - 位置合わせと特殊効果
差の絶対値 (Difference) と除外 (Exclusion) は、2 つの画像間の差分を可視化するモードです。クリエイティブな特殊効果だけでなく、画像の位置合わせやバージョン比較といった実務的な用途にも活用されます。
差の絶対値 (Difference) の計算式: Result = |Base - Blend|
2 つのピクセル値の差の絶対値を取ります。同じ画像同士を重ねると結果は完全な黒 (差がゼロ) になります。この特性を利用して、パノラマ合成時の画像位置合わせや、レタッチ前後の変更箇所の可視化に使用します。
位置合わせへの活用: 2 枚の画像を差の絶対値モードで重ね、上レイヤーを移動させて画面が最も暗く (黒く) なる位置を探します。完全に一致すれば真っ黒になるため、ピクセル単位の精密な位置合わせが可能です。Photoshop の「レイヤーを自動整列」機能の内部でもこの原理が使用されています。
バージョン比較: レタッチ前後の画像を差の絶対値で重ねると、変更された箇所だけが明るく表示されます。クライアントへの修正報告や、品質管理での変更箇所の確認に有効です。微細な変更 (色調補正、ノイズ除去) も差分として可視化されます。
除外 (Exclusion) の計算式: Result = Base + Blend - 2 × Base × Blend
差の絶対値に似ていますが、コントラストが低くなります。中間調同士を重ねると 50% グレーになる特性があり、差の絶対値よりも穏やかな反転効果を生みます。アート作品やポスターデザインでのカラーエフェクトに使用されます。
クリエイティブな活用: 差の絶対値モードでグラデーションレイヤーを重ねると、サイケデリックな色彩効果が得られます。音楽イベントのフライヤーやアルバムアートワークなど、インパクトのあるビジュアルを作成する際に効果的です。不透明度を 20-30% に下げれば、写真に微妙な色のずれを加えるカラーグレーディング効果としても使用できます。
CSS と Canvas API でのブレンドモード実装 - Web での活用
ブレンドモードは Photoshop だけでなく、CSS と HTML5 Canvas API でも利用可能です。Web デザインにおけるインタラクティブな視覚効果やリアルタイムの画像合成に活用できます。
CSS mix-blend-mode: 要素とその背後の要素をブレンドします。
.overlay-text { mix-blend-mode: multiply; color: #333; }
テキストを画像の上に配置し、乗算モードを適用すると、テキストが画像のテクスチャを透かして表示されます。ホバー時にブレンドモードを切り替えるインタラクションも CSS トランジションで実現可能です。
CSS background-blend-mode: 同一要素の複数背景画像同士をブレンドします。
.hero { background: url(texture.png), url(photo.jpg); background-blend-mode: overlay; }
テクスチャ画像と写真をオーバーレイで合成し、JavaScript なしでリッチなビジュアル効果を実現します。グラデーションと写真の合成によるデュオトーン効果も人気のテクニックです。
Canvas API での実装:
ctx.globalCompositeOperation = 'screen';
Canvas 2D コンテキストの globalCompositeOperation プロパティで描画時のブレンドモードを指定します。対応するモードは multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity の 15 種類です。
WebGL シェーダーでのカスタム実装: フラグメントシェーダー内でブレンドモードの数式を直接記述すれば、GPU アクセラレーションによるリアルタイム合成が可能です。Photoshop の全 27 モードを再現でき、さらに独自のブレンド関数を定義することもできます。画像編集 Web アプリケーションの実装に不可欠な技術です。
実践ワークフロー - ブレンドモードを組み合わせた非破壊編集
プロフェッショナルな画像編集では、複数のブレンドモードを組み合わせた非破壊的なワークフローが標準です。元画像を直接変更せず、調整レイヤーとブレンドモードの組み合わせで柔軟に効果を制御します。
ドッジ & バーン (部分的明暗調整): (1) 新規レイヤーを作成し 50% グレーで塗りつぶす。(2) ブレンドモードをオーバーレイに設定。(3) 白のブラシで明るくしたい部分を、黒のブラシで暗くしたい部分をペイント。不透明度 10-20% のブラシで少しずつ塗り重ねることで、自然なライティング調整が可能です。ポートレートの顔の立体感強調や、風景写真の光の演出に使用します。
カラーグレーディング: (1) べた塗りレイヤー (例: 暖色系のオレンジ #FF8C00) を作成。(2) ブレンドモードをソフトライトに設定。(3) 不透明度を 15-25% に調整。これだけで映画的な暖色トーンが画像全体に適用されます。複数の色レイヤーを重ねてシャドウとハイライトに異なる色を乗せる「スプリットトーニング」も実現できます。
テクスチャオーバーレイ: (1) テクスチャ画像 (紙、フィルムグレイン、光漏れ) を最上位レイヤーに配置。(2) ブレンドモードをオーバーレイまたはソフトライトに設定。(3) 不透明度で効果の強さを調整。フィルムグレインテクスチャを 10-15% の不透明度で重ねると、デジタル写真にアナログ的な質感が加わります。
周辺光量落ち (ビネット) の追加: (1) 新規レイヤーを作成。(2) 楕円形選択ツールで中央を選択し、選択範囲を反転。(3) 黒で塗りつぶし、ガウスぼかしを大きめに適用。(4) ブレンドモードを乗算に設定し、不透明度 30-50% で調整。レンズの周辺光量落ちを再現し、視線を中央に誘導する効果が得られます。