ダーク・シネマティックヒーロー（CSS 疑似映像）

様式名: ダーク・シネマティック / ヒーロー

ヒーローダーク映画的オーバーレイ没入

⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

黒〜濃紺の単色に近い地を起点に、明暗の階調と光源で『物語を感じる』トーンを出す
本来は全画面写真・動画が主役で、UIはそれを邪魔しない最小限。ここでは写真の代わりに CSS の多層グラデ＋光＋霧＋ビネットで映像的な地を作った
『暗いテーマを後付け』ではなく、余白・色・トーンを最初から黒基調で設計するのが成立条件
単に背景を黒にしただけ・写真がフルブリードでないと、ただの『ダークモード』で没入感は出ない
07 特大タイポ・ダークが『文字が主役』なのに対し、こちらは『映像的な地が主役でUIは最小』という違い

実装メモ — 踏んだ罠

写真が無い前提の疑似映像：radial-gradient で光源（明）→中間→暗の階調を作り、`#0b0f14` を下地に敷く。単一グラデより奥行きが出る
霧・塵は mix-blend-mode:screen の淡い radial、粒状感は feTurbulence の data URI（04 の応用）。ビネットは inset box-shadow で四隅を落とす
【最重要・写真でも同じ】文字と地の間に必ずオーバーレイ（scrim）を1枚挟む。linear-gradient(to top, rgba(8,11,15,.92), transparent) のように、文字が乗る側を濃くして実効背景を固定する
【自分で実測した数値】オーバーレイ後の実効背景 #14181e の上で、淡い白 #e8ecf0 は 15.00:1、サブ #9fb0c0 は 8.01:1、琥珀アクセント #f0b429 は 9.55:1。オーバーレイを外すと、地の最も明るい霧（#6b7a86）の上で白文字は 4.42:1 まで落ちる
写真は均一な暗さではない。同じオーバーレイでも撮影内容で実効コントラストが変わるので、必ず『最も明るい／最も文字に近い箇所』で測る。1か所だけ見て通すと別の写真で落ちる
【和文の罠】細い明朝を暗い地に置くと線が飛ぶ。太めのウェイトか半透明パネルで下支えする（07 の手法）

使いどころ / 使ってはいけない場面

使う: 映像・写真・音楽・高級プロダクトなど、没入と余韻で見せたいヒーロー
使う: 1つの強いビジュアルに最小の言葉を添えて世界観を作りたいとき
避ける: 情報量が多い画面・長文。暗い地に大量のテキストは読む負荷が高い
避ける: 明るい・清潔・親しみを出したいブランド。ダークは重厚・排他的に働く
避ける: 写真の質（陰影・構図）を用意できないとき。凡庸な暗い写真だと『暗いだけ』になる

壊れる条件

文字と写真の間のオーバーレイを省く → 地の明るい部分で白文字が落ちる。#6b7a86 の上で 4.42:1、実写ならさらに明るい箇所で消える（demo_bad.html）
『暗いテーマだから白文字で大丈夫』と思い込む → 暗いのは全体の平均で、局所は明るい。実効背景を固定して測る
背景を単に黒にするだけで写真をフルブリードにしない → ただのダークモードで、シネマティックな没入は出ない
濃紺の上に黒に近い装飾文字を置く → 明度差が乏しく、低視力の人にほぼ見えない
パララックスを reduced-motion 無視で多用する → 動きに敏感な人に負担（WCAG 2.3.3）
細い明朝の和文をオーバーレイ無しの暗い地に置く → 線が飛んで読めない

コントラスト実測

対象	文字色	背景	実効背景	比	判定
見出し・淡い白（オーバーレイ後の実効地）	`#e8ecf0`	`#0b0f14`	`#14181e`	15.00:1	AA 合格
サブテキスト（オーバーレイ後の実効地）	`#9fb0c0`	`#0b0f14`	`#14181e`	8.01:1	AA 合格
琥珀アクセント（オーバーレイ後の実効地）	`#f0b429`	`#0b0f14`	`#14181e`	9.55:1	AA 合格
壊れた例：白文字（オーバーレイ無し・地の最明部）	`#ffffff`	`#6b7a86`	`#6b7a86`	4.42:1	AA 合格だが写真では落ちる

アクセシビリティ

文字は必ずオーバーレイの上に置き、実効背景を固定してから測る。地の最も明るい箇所を基準にする
暗い地に暗い装飾文字を置かない。明度差が乏しいと低視力の人に見えない
パララックス・スクロール演出は prefers-reduced-motion で止める（WCAG 2.3.3）
和文は太めのウェイトか半透明パネルで下支えする。細い明朝は暗所で線が飛ぶ
ビネット・霧は装飾。pointer-events:none にし、読み上げ対象にしない

スマホへの落とし方

グラデの光源は % 配置。SPでも明暗の階調が画面内に残るようにする
オーバーレイ（scrim）は幅に関係なく維持。狭い画面ほど文字が地に近づくので必須
見出しは clamp() で流体化。text-shadow を少し足すと、地の明部に文字が乗っても輪郭が保てる

ブラウザ対応

radial-gradient／mix-blend-mode／inset box-shadow／feTurbulence は主要ブラウザで使える。※2026-07-22 時点、一次情報での再確認は未実施

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>ダーク・シネマティック ヒーロー デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --fg:#e8ecf0;      /* 淡い白。オーバーレイ後の暗い地で 15.00:1 */
  --sub:#9fb0c0;     /* サブ。8.01:1 */
  --amber:#f0b429;   /* 映画的アクセント。9.55:1 */
}
/* 写真の代わりに CSS で「映像的な地」を作る：奥行きのある濃紺グラデ＋光の差し込み＋霧。
   単に黒にするのではなく、明暗の階調と光源で物語のトーンを出すのが成立条件 */
body{min-height:340px;position:relative;overflow:hidden;color:var(--fg);
  font-family:"Georgia","Times New Roman",serif;
  background:
    radial-gradient(120% 90% at 78% 8%, #6b7a86 0%, #3a4650 26%, #1c2530 52%, #0d131a 100%),
    #0b0f14;}
/* 霧・塵の層。低コントラストの装飾。写真の粒状感の代わり */
.fog{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(60% 40% at 70% 18%, rgba(180,200,220,.25), transparent 60%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ビネット：四隅を落として視線を中央へ。映画的な締まり */
.vignette{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.75)}
/* 【最重要】文字とグラデ地の間に必ずオーバーレイを挟み、実効背景を暗く固定してから測る。
   写真は均一な暗さではないので、これが無いと明るい箇所で白文字が消える */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(8,11,15,.92) 0%, rgba(8,11,15,.6) 38%, transparent 72%)}

.inner{position:absolute;left:0;right:0;bottom:0;padding:30px 32px;z-index:2}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:system-ui,sans-serif;
  font-size:10px;letter-spacing:.22em;color:var(--amber);font-weight:700;margin-bottom:14px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 8px var(--amber)}
h1{font-size:clamp(30px,7vw,58px);line-height:1.04;letter-spacing:.01em;font-weight:400;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
.ja{margin-top:12px;font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
  font-weight:600;font-size:13px;color:var(--sub);max-width:26em;line-height:1.9}
.play{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-family:system-ui,sans-serif;font-size:13px;font-weight:700;color:#0b0f14;
  background:var(--fg);padding:11px 20px;border-radius:999px;text-decoration:none}
.play:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
</style></head><body>
<div class="fog"></div>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scrim"></div>
<div class="inner">
  <span class="badge">A FILM BY STUDIO NOX</span>
  <h1>Into the<br>Quiet Dark</h1>
  <p class="ja">光がほとんど無い場所で、はじめて見えるものがある。全編ロケーション撮影のドキュメンタリー。</p>
  <a class="play" href="#">▶ 予告を見る</a>
</div>
</body></html>

出典・参考: 自作の再現実装（写真の代わりに CSS で疑似映像を構成）。成立条件（黒基調の設計・フルブリード・オーバーレイ必須）は https://www.theedigital.com/blog/web-design-trends および WCAG 1.4.3、動きは WCAG 2.3.3。ダーク需要の増加は https://www.barchart.com/story/news/32413913/dark-mode-design-becomes-a-gen-z-expectation-in-2025-reports-digital-silk （いずれも2026-07-21閲覧）。コントラスト値は当方で実測。