静的マーケティングサイトは二〇二六年も「映画のような」ヒーローを好みます。全幅の<video>、濃淡のグラデーション・スクリム、そして見出し文字が映像へ乗算で食い込む演出は、ブランドの勢いを一瞬で伝えます。しかしmix-blend-modeを足した瞬間から、あなたのチームは積み重ねコンテキスト、プロモートされたレイヤ、そしてSafariのWebKit合成経路という三つの物理学を同時に扱うことになります。Chromeだけのスクリーンショットでは再現しない灰色帯や、意図しない背景ブレンド、動画の背後へ文字が届かない現象は、本番のmacOSで初めて顔を出します。この記事では意思決定表、具体的な上限値、Appleシリコン実機でのリハーサル手順までを日本語で整理し、静的HTMLのまま安全に船出できるようにします。
関連して、カスケードの隔離や@scope周りの設計は@scopeとスタイル隔離の実務を、サードパーティの<script>やCSPが積み重ねを増やすケースはSRI・CDN・CSPの衛生管理と合わせて読むと、ブレンドしたヒーローの隣で埋め込みが静かにDOMを汚染する事故を避けられます。
積み重ねコンテキストが壊すブレンド
ブレンドは背面の画素集合に対してグループを合成します。祖先のどこかが新しい積み重ねコンテキストを作ると、その内側のブレンドは意図した動画ではなくソリッドなカードへ接続されます。まず祖先を列挙し、WebKitのレイヤツリーで裏面ストアを確認してください。
実務メモ（詳述）
静的マーケティングのヒーロー演出では、全幅動画と半透明スクリム、そして見出しの乗算ブレンドがブランドの勢いを伝えますが、祖先のtransformやopacityやfilterが積み重ねを切り替えると意図した背面へ届かず灰色帯が出ます。
Chromeのスクショだけで安心せず、Safariのレイヤタブで裏面ストアを確認し、WebKitの昇格ヒューリスティクスを疑って動画を一時的に背景画像へ差し替える切り分けが有効です。
isolationはisolateで子孫同士を先に合成してから上位へ送るため、マーケのバッジ追加でも背景へ漏れにくくなりますが、外側の動画へ直接ブレンドしたい要件では逆効果です。
z-indexの帯設計を十から三十をヒーロー内部、百以上をナビ、二百以上をモーダルへ割り当てる表へ落とし、デザイントークンで共有しないと夜間のカウントダウンステッカーが静かに割り込みます。
multiplyは白文字と明るい映像に強い一方、黒つぶれ素材ではハロが強く、screenはネイビー基調に効くがHDRのP3ハイライトでにじみが増えるため、参照静止画とヒストグラムを毎回突き合わせます。
plus-lighterなど新しめのモードはsupports検出が真のSafariでのみ段階的強化に回し、IntelとAppleシリコンのGPUフォールバック差をリリースノートへ残します。
filterのblurとmix-blend-modeを同一サブツリーへ重ねるとGPUコストが乗算されるので、どちらか一方に絞るか背景動画を720pへ下げてファンレス端末を守ります。
透明感を減らす設定ではマテリアルが不透明ティントへ置換されるため、メディアクエリでブレンドを外しスクリムを不透明化して本文コントラストを四・五対一以上へ戻します。
第三者のチャットやCMPはbackdrop-filterの積み重ねを持ち込み、ベンダーのA/Bテストでビルド間に結果が揺れるので、埋め込みをヒーローより下へ固定する方針を契約へ明記します。
リリース前には既定外観とコントラスト強化の二種類のSafari録画とリーダーモードPDFとCPU四倍遅延のLighthouseとレイヤダンプのSHA付き保管をチェックリスト化し、自動化は安全な範囲に留めます。
印刷や法務PDFではヒーローをJPEGか単色へ潰し動画とブレンド宣言を外し、未読のブレンドが契約リスクになるのを避けます。
ブレンドの退行はGPUファミリーとディスプレイP3プロファイルとNight Shiftの暖色化へ敏感で、環境差分はログと録画のセットで証跡化します。
クラウドのAppleシリコンMac miniを約十六・九米ドル毎日で借り、SSHやVNCでTechnology Previewと安定版を並べて検証すれば、床下常設機より柔軟にローンチ週の需要へ合わせられます。
READMEへ祖先の積み重ね一覧と禁止パターンを書き、パララックスのtranslateZハックがヒーローを動画から切り離すリスクをデザイナへ可視化します。
スクロール連動の変形が毎フレーム走るとき、will-changeの付け外しをアニメーション終了で徹底し、同時プロモートを四要素以内へ抑えます。
canvas粒子は毎フレーム面がCSSブレンドと噛み合わないことがあり、透明感低減ではPNGへ焼き込むフォールバックが堅実です。
WCAGのAAを任意クライアント映像で満たすならスクリムと通常文字を主にし乗算は強化へ回し、三百二十と千二百八十ピクセル幅で測定します。
ユーザー生成アップロードではdifferenceやexclusion依存を避け、ヒストグラムが読めないときの可読性を最優先します。
Webインスペクタの合成境界表示で予期せぬ緑枠を炙り、1080p三十フレームでM2ならGPU六ミリ秒以内を目安にタイムラインを記録します。
HDRでマスターされた映像はディスプレイごとにクリップが変わり、乗算で肌色がオレンジ寄りへ寄るので三パーセント超えたらスクリム不透明度を先に調整します。
ナビがstickyかつblurのとき、ナビの積み重ねが文字と動画の間に入っていないか塗り順を点検し、会議室のMacBook Air相当へCPU四倍遅延のLighthouseで体感を模します。
デザイン責任者が使う実機に近い検証はファン音の静かなminiが向き、リモートレビューでスクリム不透明度をリアルタイム調整しやすいです。
SRIやCSPの衛生管理と@scopeの隔離設計を合わせ読みすると、埋め込みが積み重ねを増やしてブレンドを壊す経路を早めに塞げます。
Technology Previewと安定版の差分は小さく見えても合成経路で顔を出すため、両方の録画をアーカイブへ残します。
静的パイプラインでは整形コミットで宣言順が崩れないよう、supportsブロックの位置を固定し、古典モードのフォールバックを先に置きます。
リーダーモードはブレンド剥がしの抜けを炙り出す簡易テストになり、法務レビュー前の最終確認に向きます。
GPUメモリ圧迫は体感で先に遅延が出るため、圧縮が始まったらすでに危険圏だとチームで共有します。
最後に、ヒーロー級の同時ブレンドは三枚以下を目安にし、増やすなら別ページへ分割するか、動画解像度とモーション量の両方を下げる設計判断が必要です。
ミックスブレンドモードの選び方
| モード | 向く場面 | Safariでの注意 |
|---|---|---|
multiply | 明るい映像へ白文字 | 黒つぶれ映像ではハロが強い |
screen | 濃色グラデ上の逆色ロゴ | HDRのP3ハイライトでにじみ |
overlay | バランスの取れたスクリム | 中間灰の背面依存が強い |
difference | 実験的モーション | コントラスト強化設定で可読性が落ちる |
plus-lighterなど新しめのキーワードは、出荷Safariで@supports (mix-blend-mode: plus-lighter)が真になることを確認してから段階的強化に回してください。
isolation: isolate の是非
isolation: isolateは子孫同士を先に合成してから上位へ送ります。外側の動画へ直接ブレンドしたい要件では逆効果なので、DOM凍結前に判断してください。
.hero-visual { position: relative; isolation: isolate; }
.hero-visual h1 { mix-blend-mode: multiply; color: #fff; }Safari・動画レイヤ・canvas
ハードウェアデコードの動画は別コンポジット面に乗りやすく、一時的に背景画像へ差し替えて挙動が直るなら昇格の問題です。
canvasの粒子はPNGフォールバックが堅実な場合があります。
スクリム対乗算の判断
- 任意クライアント映像でWCAG AA：スクリム＋通常文字を主にし、乗算は強化。
- 管理下のブランドグラデ：乗算かスクリーンが安全。
- ユーザー生成：
difference依存を避ける。
z-index と昇格の罠
translate3d(0,0,0)多用はVRAM圧迫の元です。同時昇格を四要素以内に抑えます。
Webインスペクタのレイヤ手順
- レイヤタブで裏面ストアを確認。
- 合成境界の緑枠でラッパを炙り出す。
- 録画でGPUコストを確認。
フィルタ併用時の性能予算
filter: blur()とmix-blend-modeの併用はコストが乗算されます。
透明感を減らす設定
prefers-reduced-transparencyでブレンドを外し、スクリムを不透明化します。
第三者埋め込みと同意UI
チャットやCMPはbackdrop-filterを持ち込み、z帯設計がないと事故ります。
リリース前チェックリスト
- Safari二種の録画。
- リーダーモードPDF。
- CPU四倍遅延Lighthouse。
HDR・P3・グレーディング
HDR素材はディスプレイ差で肌色が寄ります。静止画で比較してください。
印刷とPDF
@media printでヒーローを平坦化します。
FAQ
隔離は万能？
いいえ。塗り順は別問題です。
ChromeとSafariの差
動画・canvas昇格が異なります。
Mac miniをクラウドで借り、およそ十六・九米ドル／日からSSHやVNCでSafari検証を揃えられます。