CSSのmix-blend-mode: exclusionとは？動画が文字の前を走るように見える仕組み

AIとひそひそ話カテゴリー記事のアイキャッチ画像

この記事は、私がAIと対話して「なるほど！」と思った内容を公開したものです。

近年、日常的にAIツールで相談することが多いですが、非常に有益に感じる回答も多くなってきました。そこで気になった話題の質問と回答をブログ上に記録します。必要に応じて関連リンクや画像、Xの投稿なども添付しています。

使用AI：ChatGPT
使用バージョン：GPT-5.5 Thinking

なお、AIの回答には未確認の情報や解釈が含まれる場合があります。

今回の質問

ネットサーフィンしてたら、とっても印象的なサイトに出会いました。

» B.LEAGUE × doda｜Bリーグ・クラブ採用プロジェクト

不思議だったのが、メインビジュアルで流れている動画とメインタイトルの白文字。動画内のバスケットコートの形をしたグレーの線などが文字に重なると、動画が前面にきているかのように白文字が動画より後ろにあるように見えます。

気になったので、検証ツールで調べてみました。

その結果、CSSプロパティ「mix-blend-mode」でexclusion（除外）を使っていることが分かりました。

気に入ったので、こんなポストもしました。

その上で、下記についてChatGPTに聞きました。

だにえるともや
だにえるともや

このサイトなんですが、メインビジュアルには動画が流れており、メインタイトルもあるんですが、とても気になったポイントがありまして、このメインタイトルより手前側に、この黒と白を使ったスピード感のある印象的な動画が前面に出てきている、文字の上に動画の線のような要素、動画の要素が乗っかっているように思い、大変不思議に感じました。

そして、検証ツールでたくさんほじくってみたところ、ミックスブレンドモードのエクスクルージョン、日本語で除外を適用して、これを文字が動画と重なったときの効果をつけているようなんですが、ミックスブレンドモードについては承知をしておりましたが、動画がまるで一番前面に来ているかのように見せられることを初めて知ったのですが、これは一体どういうわけなんでしょうか。

私がこのプロパティによってそう見えていると思っていますが、もし間違っている場合は、それも教えてください。

AIの回答

はい、見立てはほぼ正確です。
ただし厳密には、動画そのものがタイトルより前面のレイヤーへ移動しているのではありません。

このサイトでは、タイトル側に付けられた

mix-blend-mode: exclusion;

によって、タイトル文字と、その背後にある動画・画像の画素が演算されているため、動画内の選手やラインが文字を突き抜けて前景に出てきたように見えます。

いただいた検証画面を見る限り、少なくとも以下の要素に is-exclusion が付いています。

<h1 class="logo is-exclusion ...">
<p class="mv-ttl is-exclusion ...">
<div class="slide mv-txt-slide is-exclusion ...">

そして .is-exclusion に、

.is-exclusion { mix-blend-mode: exclusion;
}

が指定されています。したがって、この不思議な見え方の主因はまさに mix-blend-mode: exclusion です。

実際のレイヤー構造は、おそらくこうです

見た目の印象と、実際の描画順は別です。

手前
┌─────────────────────────────┐
│ タイトル文字 │ ← mix-blend-mode: exclusion
│ 「dodaSPORTS B.LEAGUE」等 │
├─────────────────────────────┤
│ 動画・選手・ライン・ノイズ │ ← 通常の映像レイヤー
├─────────────────────────────┤
│ 黒い背景 │
└─────────────────────────────┘
奥

普通なら、前面にある白いタイトルは、背後の動画を完全に覆います。

通常の描画
動画： ███ 選手 ███
タイトル： DODASPORTS
見た目： DODASPORTS ↑ 文字が動画を覆う

しかし exclusion を使うと、タイトルの白と、背後の動画の明るさが混ざります。

exclusion の描画
動画： ███ 明るい選手 ███
タイトル： DODASPORTS
見た目： DODA █選手の輪郭█ SPORTS ↑ 文字の内部だけ色が反転・変化する

そのため、選手やスピード線がタイトルの前を横切っているように感じるわけです。

exclusion は「前後関係を逆転」しているのではない

ここが一番重要です。

mix-blend-mode は z-index や DOM 上の前後関係を変えるプロパティではありません。
タイトルが前面に描画されていること自体は変わらず、そのタイトルの色を、背後にすでに描かれた映像と混ぜているだけです。

仕様上も mix-blend-mode は、要素の色と「backdrop（背後に描画済みの内容）」をどの数式で混ぜるかを指定するものです。 (W3C)

つまりこのサイトは、

動画を文字より手前に出している

というより、

動画が明るい場所を通ると、文字の色が反転・変化するため、結果的に動画が文字を切り裂いているように見せている

という仕組みです。

なぜ白黒の映像と相性がよいのか

exclusion は、ざっくり言うと以下の性質があります。

  • 背景が黒で、文字が白
    → ほぼ白い文字のまま
  • 背景が白で、文字が白
    → 黒っぽく反転する
  • 背景がグレーで、文字が白
    → 中間グレーになる

数式としては、RGBの各チャンネルでおおむね次の演算です。

結果 = 背景 + 前景 - 2 × 背景 × 前景

白を 1、黒を 0 とすると、前面の文字が白の場合は、

結果 = 1 - 背景

となります。

つまり白い文字の下を、

  • 黒い背景が通れば白文字のまま
  • 白い選手や白いラインが通れば黒くなる
  • グレーのノイズが通ればグレーに変わる

という反応になります。W3Cの仕様でも exclusion はこの式で定義されています。 (W3C)

このサイトが黒・白・グレーを徹底しているのは偶然ではありません。
カラー映像で同じことをすると、文字の色が予測不能に濁りやすいです。一方、モノクロに近い世界なら、反転しても「黒・白・グレーの演出」として成立します。

スクリーンショットで起きていること

最初の画像では、巨大な dodaSPORTS の文字上を横方向の線が走っています。

これはおそらく、

  1. 白い巨大タイポグラフィを前面に置く
  2. 背後で白〜グレーのスピード線・ノイズ・選手映像を動かす
  3. 文字に exclusion を適用する
  4. 明るい線が文字と重なった瞬間、その部分だけ文字が暗く変化する
  5. 結果として「線が文字より前を走った」ように見える

という流れです。

特に、選手の身体がタイトルと重なった部分で文字が黒っぽく抜けると、人間の視覚はそれを「選手が前にいる」と判断しやすいです。これはCSSの立体的なレイヤー処理というより、かなり巧い視覚的な錯覚の設計です。

このサイトで mix-blend-mode 以外に効いているもの

ただし、exclusion だけでこの完成度にはなりません。印象を支えているのは、少なくとも次の組み合わせです。

  • 巨大で太い白文字
  • 黒い背景
  • 白〜グレーに制限した動画
  • 粒子・ノイズ・横線
  • バスケットコートの線やロゴの幾何学要素
  • 動画内の人物を白〜グレーのシルエット寄りに処理
  • タイトルと動画を意図的に重ねるレイアウト
  • 動画の切り替えとフェード
  • mix-blend-mode: exclusion

このサイトはB.LEAGUEとdodaの採用プロジェクトとして、黒白のスポーツ映像と大型タイポグラフィをヒーロー演出に使っています。 (dodaSPORTS)

exclusion は主役というより、**「前景と背景の境界を壊すための最後の一手」**です。
これがないと、単に「動画の上にタイトルを置いたスポーツサイト」になり、かなり平板になります。

自分で再現するなら、最小構成はこれです

<section class="hero"> <video class="hero__video" autoplay muted loop playsinline> <source src="movie.mp4" type="video/mp4"> </video> <h1 class="hero__title"> SPORTS<br> B.LEAGUE </h1>
</section>
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #000;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(1) contrast(1.3);
}
.hero__title { position: absolute; left: 4vw; bottom: 4vw; z-index: 1; margin: 0; color: #fff; font-size: clamp(64px, 14vw, 280px); font-weight: 800; line-height: 0.8; letter-spacing: -0.08em; mix-blend-mode: exclusion;
}

この場合も、動画は奥、タイトルは手前です。
しかし白い人物や光、白線がタイトルの背後を通るたび、文字の色が変化し、人物や線が文字の前を通過しているように見えます。

実装時の注意点

mix-blend-mode はかなり強い表現ですが、少し癖があります。

  • 背景色や映像の明るさによって、文字の可読性が大きく変わる
  • カラフルな映像では、意図しない色になりやすい
  • ヒーロー全体に適用すると、ヘッダーや他セクションまで混ざる場合がある
  • isolation: isolate; を親要素に付け、ブレンドの影響範囲をヒーロー内に閉じるのが安全
  • 動画、巨大文字、ブレンド、ノイズを同時に使うため、スマホでは描画負荷を必ず確認する
  • 読みやすさを捨てる演出なので、本文見出しやボタンに多用すると危険

このサイトでは、タイトル、ロゴ、背景テキスト、動画を「別々の前後レイヤー」として見せるのではなく、exclusion で互いを浸食させています。だからこそ、単なる動画背景ではなく、画面全体がひとつのスポーツグラフィックとして動いて見えるわけです。

前の記事

AIとひそひそ話カテゴリー記事のアイキャッチ画像
堂安律選手のCM出演から考える、本業の価値を別の収入へ育てる個…

次の記事

なぜ日本の米は不足し、今度は安くなったのか？価格高騰から値下が…
AIとひそひそ話カテゴリー記事のアイキャッチ画像