Styledex

デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。

ソフト・グラデーション ヒーロー（メッシュ）

様式名: ソフト・グラデーション / ヒーロー

ヒーローグラデーションパステルメッシュ背景
⧉ 別タブで開く

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

特徴 — なぜ効くか

  • 淡い色を面で溶け合わせて、圧の無いやわらかい空気をつくる。派手さではなく居心地で信頼を得る様式
  • 複数の radial-gradient を重ねる『メッシュ』で作る。角度一発の linear より色が面で混ざり、ソフトに見える
  • 淡い色だけで作るのが成立条件。1色でも彩度が高いと、とたんに『元気なグラデ』に転んで空気が変わる
  • 最大の弱点は文字。地が明るいので、白抜きも薄い文字も乗らない。文字は必ず暗くするしかない
  • 淡い色ゆえに 8bit では縞（バンディング）が出やすい。面が広いほど目立つ

実装メモ — 踏んだ罠

  • メッシュは radial-gradient を4枚前後重ねる。各 radial は『色 0% → transparent 60%』で、中心位置を四隅にばらけさせると自然に混ざる
  • ベタ塗りの背景色を1枚敷いておく。radial の透明部分から下地が透けて、全体のトーンが決まる
  • 【04から流用した技】淡いグラデは縞が出る。feTurbulence のノイズを opacity .03〜.04 で重ねて散らす。コンクリート地と同じ data URI をそのまま使える。ここでは彩度を落とさなくてよい（極薄なので色被りは出ない）
  • 【自分で実測した数値】地の最も明るい部分 #f2ecfb と最も暗い部分（淡ピンク #f6dfe8）で挟んで測る。本文 #3a3352 は最明部 10.23:1 / 最暗部 9.37:1、見出し #241d38 は最明部 13.89:1 / 最暗部 12.72:1。どちらも余裕を持って AA を通る
  • 【自分で実測した数値】この様式で『やりがち』な白抜き文字は最明部で 1.16:1、定番の薄いラベンダー文字 #b3a9c9 は 1.93:1。どちらも全く読めない。淡い地では文字色の逃げ場が『暗くする』一択しかない
  • CTA は淡地に置く数少ない濃い面。紫 #6d4a9c なら白文字で 6.75:1。ここで様式にアクセントの1点を作れる

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

壊れる条件

コントラスト実測

対象文字色背景実効背景比判定
見出し（地の最も暗い部分：描画結果から採取）#241d38#f2ecfb#f4e0e912.76:1AA 合格
本文（地の最も暗い部分：描画結果から採取）#3a3352#f2ecfb#f4e0e99.40:1AA 合格
CTAボタン文字（淡地に置く濃い面）#ffffff#6d4a9c#6d4a9c6.75:1AA 合格
壊れた例：白抜き文字（地の最明部）#ffffff#f2ecfb#f2ecfb1.16:1不合格
壊れた例：定番の薄いパステル文字（最明部）#b3a9c9#f2ecfb#f2ecfb1.93:1不合格

アクセシビリティ

スマホへの落とし方

ブラウザ対応

関連するパーツ

コードを見る 
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>ソフト・グラデーション ヒーロー デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --fg:#241d38;       /* 見出し。淡い地の上なので、濃くしないと沈む */
  --fg-soft:#3a3352;  /* 本文。最暗部でも 9.37:1（実測） */
  --cta:#6d4a9c;      /* CTA。淡地に置く濃い面。白文字で 6.75:1 */
}
body{min-height:340px;position:relative;overflow:hidden;
  font-family:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--fg);
  /* メッシュ風グラデ：複数の radial を重ねる。角度一発の linear-gradient より、
     色が「面」で溶け合ってソフトに見える。淡い色だけで作るのが成立条件 */
  background:
    radial-gradient(70% 60% at 12% 18%, #f0e6fb 0%, transparent 60%),
    radial-gradient(65% 55% at 88% 22%, #f7dfe9 0%, transparent 58%),
    radial-gradient(75% 70% at 78% 92%, #dfe6f8 0%, transparent 62%),
    radial-gradient(60% 55% at 25% 95%, #eae4fb 0%, transparent 60%),
    #f2ecfb;
}
/* 淡いグラデは 8bit だと縞（バンディング）が出やすい。極薄のノイズで散らす。
   04 の打ち放しコンクリートで使った feTurbulence をそのまま流用（彩度は残してよい＝ごく薄いため目立たない） */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.inner{position:relative;padding:40px 34px}
.eyebrow{font-size:10px;letter-spacing:.26em;color:var(--fg-soft);font-weight:600;margin-bottom:16px}
h1{font-size:clamp(30px,6vw,52px);line-height:1.18;letter-spacing:-.02em;font-weight:700;
  max-width:16em}
/* 和文の行長は em。ch は半角基準で半分になる */
p{margin-top:16px;font-size:14px;line-height:1.9;color:var(--fg-soft);max-width:26em}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  background:var(--cta);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:13px 26px;border-radius:999px;text-decoration:none}
.cta:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
</style></head><body>
<div class="inner">
  <p class="eyebrow">SOFT GRADIENT</p>
  <h1>やわらかい色が、<br>そっと背中を押す。</h1>
  <p>淡い色を面で溶け合わせて、圧の無い空気をつくる。派手さではなく、居心地のよさで信頼を得たいサービス向き。</p>
  <a class="cta" href="#">はじめる →</a>
</div>
</body></html>
出典・参考: 自作の再現実装。メッシュグラデーション＋パステルという定番構成を、コントラストを実測しながら組んだ