Styledex

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

打ち放しコンクリート地

様式名: ネオブルータリズム / 背景・質感

背景質感ブルータリズムノイズ
⧉ 別タブで開く

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

特徴 — なぜ効くか

  • 均一な灰色ではなく、ムラとノイズで「素材」に見せる。画像を1枚も使わずCSSだけで作れる
  • 建築のブルータリズム由来。飾らない素材をそのまま見せる思想
  • ガラスや特大タイポと相性が良い。硬い地の上でこそ、透明感や文字が立つ
  • やりすぎると「汚い背景」になる。ノイズは見えるか見えないかの境界が正解

実装メモ — 踏んだ罠

  • SVGのfeTurbulenceをdata URIで背景に敷く。画像ファイル不要・可変・軽い
  • 【実験して分かった罠・その1】feTurbulence は RGB を独立に乱数化するので、そのままだと『色つきの粒』が出る。灰色の粒にしたいなら feColorMatrix type=saturate values=0 を必ず挟む。挟まないと、粒を目立たせた瞬間に紫や緑の斑が浮いて油膜のように見える
  • 【実験して分かった罠・その2】粒の見え方を決めるのは opacity ではなく baseFrequency。0.8 は粒が細かすぎてディスプレイ上で平均化され、opacity を .07 → .30 → .55 と上げても『地が白茶ける』だけで粒として見えなかった（3段階を並べて実測）。0.35 まで下げて初めて粒が立つ。このデモは 0.35＋彩度0＋opacity .16 に作り直した
  • 『opacity を .15 超にすると汚れて見える』は誤り。汚く見えるのは粒が粗く（0.15前後）かつ彩度が残っているとき。細かい粒なら opacity を上げても汚れではなく色あせになる
  • 複数の radial-gradient を重ねてムラを作る。単色 + ノイズだけだと平坦なまま
  • ノイズ層は pointer-events:none。クリックを吸うと操作不能になる
  • 上に文字を置くならノイズは背景側だけに。文字にノイズが乗ると可読性が落ちる
  • 【実測して直した罠】ムラを作るということは「背景の明度が場所ごとに変わる」ということで、つまりコントラストも場所ごとに変わる。当初は地 #8e8e93・暗ムラ rgba(0,0,0,.16)・本文 #2c2c2e で組んでいたが、最も暗い斑の上で本文が 3.13:1（AA 4.5:1 に不合格）まで落ちていた。地を #9a9a9f に上げ、暗ムラを .10 に弱め、本文を #1c1c1e に濃くして、最暗部でも 4.95:1 出るよう作り直した。ムラのある地では、基準色ではなく最も不利な斑の上で測る

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

壊れる条件

コントラスト実測

対象文字色背景実効背景比判定
見出し・本文（地の基準色）#1c1c1e#9a9a9f#9a9a9f6.07:1AA 合格
見出し・本文（最暗部：描画結果から採取）#1c1c1e#9a9a9f#8d8d925.15:1AA 合格
見出し・本文（最明部：描画結果から採取）#1c1c1e#9a9a9f#a0a0a56.54:1AA 合格
修正前・本文（地の基準色）#2c2c2e#8e8e93#8e8e934.27:1不合格
修正前・本文（最も暗いムラの上）#2c2c2e#8e8e93#77777b3.13:1不合格
スラブのボタン文字#f2f2f7#1c1c1e#1c1c1e15.25:1AA 合格

アクセシビリティ

スマホへの落とし方

ブラウザ対応

関連するパーツ

コードを見る 
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>打ち放しコンクリート地 デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;min-height:340px;position:relative;
  /* ムラ：radial-gradient を複数重ねて「打ち放し」の斑を作る。
     ムラは背景の明度を場所ごとに変える＝コントラストも場所ごとに変わる。
     地 #8e8e93・暗ムラ .16 で組んでいたが、最も暗い斑の上で本文が 3.13:1 まで落ちていた（実測）。
     地を上げ、暗ムラを弱めて、最暗部でも 4.95:1 出るようにしている */
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 80% 70%, rgba(0,0,0,.10), transparent 62%),
    radial-gradient(ellipse 40% 30% at 55% 40%, rgba(255,255,255,.06), transparent 58%),
    #9a9a9f;
}
/* 粒：SVGノイズ。画像ファイル不要。
   feTurbulence は RGB を独立に乱数化するので、そのままだと「色つきの粒」になる。
   feColorMatrix saturate=0 を挟んで灰色の粒に落とす（これが無いと色被りが出る）。
   baseFrequency は 0.8 だと粒が細かすぎて平均化され、opacity をいくら上げても
   地が白茶けるだけで粒として見えなかった（実測）。0.35 まで下げて初めて粒が立つ */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.16;
  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.35' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.inner{position:relative;padding:32px 28px}
.tag{display:inline-block;border:2px solid #1c1c1e;color:#1c1c1e;font-size:10px;
  letter-spacing:.2em;padding:5px 12px;font-weight:700}
h2{margin-top:18px;font-size:clamp(28px,7vw,52px);font-weight:800;color:#1c1c1e;
  line-height:1.12;letter-spacing:-.01em}
/* 和文の行長は em で取る（ch は半角基準。詳細は 02_oversized_type の実装メモ） */
/* 本文は見出しと同じ濃さまで落とす。#2c2c2e では最暗ムラの上で AA に届かない */
p{margin-top:14px;font-size:13px;line-height:1.9;color:#1c1c1e;max-width:30em}
.slab{margin-top:22px;background:#1c1c1e;color:#f2f2f7;display:inline-block;
  padding:12px 22px;font-size:12px;font-weight:700;letter-spacing:.06em}
</style></head><body>
<div class="inner">
  <span class="tag">BRUTALISM</span>
  <h2>素材を、<br>そのまま見せる。</h2>
  <p>塗り潰した灰色ではなく、ムラと粒で素材に見せる。画像は使っていない。すべてCSS。</p>
  <div class="slab">VIEW WORKS →</div>
</div>
</body></html>
出典・参考: 自作の再現実装。試作1（ベントー×コンクリート）の系統