背景に逃げてしまう——無地から脱却する背景デザイン

結論

一流が背景でやっているのは「色を塗る」ことではなく、①明度(value)でコントラストと焦点を設計し、②セクションごとに背景を意図的に切り替えてリズムと世界観を作り、③可読性のガードレール(WCAG比率＋スクリム)を死守する——この3点です。

「無地が無難で安全」なのではなく、ガードレールを持っていないから無地に逃げてしまう。逆に言えば、ガードレールさえ持てば攻めた背景でも崩れません。

01 — 色相ではなく「value(明度)」で考える

背景の良し悪しを決める主レバーは色相(hue)ではなく value＝色と独立した相対的な明暗。可読性・コントラスト・焦点はすべて明度差で生まれます。色は自由に冒険してよく、明度差さえ確保すれば安っぽくなりません。色弱ユーザー対応の観点でも色相依存はNGで、明度差が読みやすさを担保します。

明度差が無い

✗ 背景と前景のvalueが近い → 焦点が立たない

明度差で焦点

✓ 暗い地に白 → 色を問わず即座に焦点になる

判断基準：背景に色やテクスチャを足すとき、見るのは「前景テキスト/CTAとの明度差を残せているか」だけ。これが「攻めても崩れない」根拠になります。

blogowdt.com — Elements of Art & Principles of Design（Skillshare / WCAG・APCA輝度ベースが裏付け）

02 — リズムは「背景の切り替え」で作る

長尺LPで最も簡単かつ効果的なのは、セクション間で背景を交互に切り替えること。回遊性・現在地把握・視線誘導すべてに効きます。全部を塗らないのがコツで、目安は「5セクションに1つ」だけを明るい色でハイライトして単調さを破る。

セクションA（暗）

セクションB（やや明）

セクションC（暗）

セクションD ← 5つに1つだけアクセント

セクションE（暗）

→ 製品LPなら「白 → 薄グレー → ダーク+グロー(スペック訴求) → 白 → アクセント色(CTA)」のような明度のうねりを設計する。

coursetilda.education — Landing Page Design Principles

03 — 背景タイプの選定マップ

背景タイプは「いつ何を選ぶか」で決まります。代表的な6種を作例で。

ソリッド色面の交互

リズム付けの基本。長尺LP全般

注意 — 5つに1つだけアクセント

グラデーション

mood と movement を足したいとき

注意 — 2色塗りでなく質感を足す(§6)

ダーク+グロー

テック系・製品LP・プロモ

注意 — 奥行きと高コントラスト

写真背景

世界観・情緒。ヒーロー

注意 — 厳選必須＋スクリム

グラスモーフィズム/ブラー

浮遊カード・モーダル・ナビに限定

注意 — 全面背景には使わない

軽い幾何パターン

注意を奪わずモダンさを出す

注意 — 低コントラストに留める

写真を選ぶ基準：①ワイドアングルで一目で内容が分かる ②フェードさせやすい ③サイトのパレットを含む or 大きなネガティブスペースを持つ。オーバーレイは「前景を十分見せつつ画像を消しすぎない」量に。

blogclay.global ／ designshack.net

04 — ヒーロー背景のツールキット（5択）

「①ブランドカラーを決める → ②被写体/トーンを見る → ③この5択から1つ選ぶ」が現実的な導出フロー。

① Dark filter LET'S BRING
YOUR VISION 暗幕で白文字を最大可読に

ダークフィルター — ソリッド/グラデの暗いオーバーレイ。最も安全で万能

② Color filter YOUR BRAND
IN ONE HUE ブランド色で写真を染める

カラーフィルター — コーポレートカラーを被写体に重ね、認知を上げる

③ Duotone TWO-TONE
MOOD 2色マッピングで統一感

デュオトーン — 2〜3色の写真効果。バラバラ素材も一気にまとまる

④ White × Type 大きな文字で、
世界観を語る。背景を引き、タイポ主導

白地×タイポ主導 — 背景を引き、文字組だけで強さを出す

⑤ Gradient + Shape SHAPE THE
ATMOSPHERE グラデ＋幾何で抽象的に

グラデ＋抽象図形 — 幾何形・波・線を重ね、動きと奥行きを出す

→ 迷ったら

②カラーフィルターか ⑤グラデ＋抽象が、ブランド世界観を出しつつ外しにくい。

coursetilda.education

05 — 可読性ガードレール（これがあるから攻められる）

WCAG最低基準を物差しにする（背景craft全般の土台、一次標準）：

本文テキスト

4.5 : 1

大見出し（24px / 太字18.66px〜）

3 : 1

複雑背景の上にテキスト → スクリム

写真/グラデ/複雑背景の上では、テキスト背後に rgba(0,0,0,.6)→transparent の linear-gradient(スクリム)を重ねて一貫したコントラストを確保します。

スクリム無し

✗ グラデは端で合格・反対端で不合格になりやすい

スクリム有り

✓ 下から黒グラデを重ねて文字を底上げ

worst-caseで検証：グラデ/写真背景は「最悪条件のピクセル」でコントラストを測る。(※「scrimが最も堅牢」は一部ソースのみの順位付け＝2-1判定。並列手法の一つとして扱う)

primaryNN/g — Text Over Images ／ Smashing Magazine ／ W3C WCAG 1.4.3

06 — トレンドと使いどころ（2024–2026）

いまのグラデは「色」ではなく「質感」で差がつく。 グラデの価値は色そのものより mood と movement を足す点にある。

Grain

グレイン/ノイズ注入 → のっぺり感を消し未来的に

Mesh

メッシュ(多放射グロー) → アーティスティックな地

Dark + Glow

テック製品LPの定番。奥行きと高コントラスト

OKLCHグラデ

中点が濁らない滑らかな色遷移(§8)

グラデ4タイプ： linear(直線遷移) / radial(スポットライト・グロー) / conic(中心回転) / mesh(複雑ブレンド)。Figmaなら「Gradient Grain」プラグインがメッシュ＋グレインをそのまま生成。

blogkittl.com ／ Figma: Gradient Grain

07 — バナー広告特有の背景設計

面積が限られるので原則がシビア。背景は「世界観の地」、文字とCTAは「図」。背景がfigureを食ったら負け。

Anker · Power 世界観は背景で、
訴求はCTA1つで。

今すぐ見る →

✓ 背景＝世界観の「地」（ダーク＋グロー）、文字は最小、CTAは朱赤で1つ。高コントラストで視認性◎。

セール開催中あれもこれも全部お得！詳しくはこちら今すぐクリック

詳細

✗ 低コントラストの無地グレー地＋文字過多＋弱いCTA。背景が「図」を食い、訴求が埋もれる典型。

高コントラスト色

主要要素に。ただしアクセシブル比率は維持(黄×黒・橙×青が優位)

テキスト最小化

余白を賢く使う

CTAは1つだけ

焦点を保つ

blognextmillennium.com（designrush CTRテスト / Google Display が裏付け）

08 — そのまま使える実装スニペット

① グラデの「グレーバンド(中点の濁り)」を消す

sRGB直線補間はオレンジ→青などで中点が灰色に濁る。OKLCH補間で回避（下のデモ左右を比較）。

✗ in srgb — 中点が濁る

✓ in oklch — 中点も高彩度で滑らか

/* Chrome 111 / Safari 16.4 / Firefox 113+ */
background: linear-gradient(in oklch, #ff6a00, #0066ff);
/* 古いブラウザ向けに sRGB フォールバックを別途用意 */

② テキスト用スクリム（写真/グラデ上の可読性確保）

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
}

③ グレインを足してのっぺり防止

SVGの feTurbulence ノイズを薄く重ねるだけで安物感が消える（このサイト全体にも適用済み）。

<div class="bg"></div>
<style>
.bg::after{
  content:""; position:absolute; inset:0;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
</style>

blogcolorarchive.org（MDN が in srgb vs in oklch を実証）／ CSS-Tricks「Grainy Gradients」

09 — 脱・無地チェックリスト

背景を仕上げる前に、これだけ見る。

前景テキスト/CTAとの明度差は残っているか（色より先に明度）
長尺ならセクションの背景を交互に振ったか／5つに1つだけアクセント
グラデはin oklchで中点の濁りを消したか
のっぺり感をグレイン/ノイズで消したか
写真/複雑背景の文字にスクリムを入れたか（worst-caseで検証）
本文 4.5:1 / 大見出し 3:1 を満たすか
グラスブラーを全面背景に使っていないか（カード/モーダル限定）
バナーはCTA1つ・テキスト最小・高コントラストか

限界 / 次の問い

実名スタジオ(Pentagram, Locomotive, Active Theory 等)の一次インタビュー/思考プロセスは確認できず、原則論に留まった。
ブランド/被写体/業界を入力に背景を機械的に導く完全な手順書は、5択ツールキット以上の粒度では未確認。
背景の違いがCTR/滞在時間にどれだけ寄与するかの定量A/Bデータ(高コントラスト以外)は裏付けなし。
トレンド系は18–24ヶ月で再確認が必要。OKLCH対応の古いブラウザ要件があれば sRGB フォールバック併記。

却下された主張（参考）：「hue-arcは30-90度が最適」(0-3)／「グラスブラーはグラデ背景上で最も有効」(0-3)／「グラデは2-3色・linearで誘導/radialでスポット」(1-2) はいずれも検証で棄却。

結論