デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: 特大タイポ・ダーク / ヒーロー
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 見出し（Nocturne） | #f5f1e8 | #0d1220 | #0d1220 | 16.57:1 | AA 合格 |
| 縦組み（WORKS、ブロブ外の無地上） | #f5f1e8 | #0d1220 | #0d1220 | 16.57:1 | AA 合格 |
| パネルeyebrow（実測パネル地） | #99a1b3 | #0d1220 | #242834 | 5.67:1 | AA 合格（余裕なし） |
| パネル見出し（ja） | #f5f1e8 | #0d1220 | #242834 | 13.05:1 | AA 合格 |
| パネル本文（lede） | #cbd2de | #0d1220 | #242834 | 9.67:1 | AA 合格 |
| 修正前・パネルeyebrow（#8a93a6） | #8a93a6 | #0d1220 | #242834 | 4.76:1 | AA 合格（余裕なし） |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>特大タイポ・ヒーロー（ダーク）デモ</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 02_oversized_type と同じウェイトのみ読み込む。字体を合わせて骨格の統一感を保つ -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Shippori+Mincho:wght@700&family=Noto+Serif+JP:wght@400&display=swap">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
background:#0d1220;
color:#f5f1e8;
padding:34px 30px;
overflow:hidden; /* 裁ち落としの受け皿 */
position:relative;
min-height:340px;
}
/* 粒状のノイズ。ダーク地では明地版(02)と同じopacity(.10)だと砂嵐に見えたため.05まで落とした */
body::before{
content:"";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.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 大判の有機的な色面を1枚。今回は右下に配置（02は右上）で背骨の位置を変えた。
左下に置いていた版はパネルと重なり、パネルの実効色計算が崩れる罠を踏んだため右下に移した */
.blob{
position:absolute;bottom:-70px;right:-80px;width:320px;height:320px;
background:#7b1418;opacity:.85;
border-radius:58% 42% 46% 54% / 44% 58% 42% 56%;
transform:rotate(16deg);
}
.inner{position:relative;padding-top:10px}
h1{
font-family:'Playfair Display',serif; /* ハイコントラストのDidone系 */
font-size:clamp(56px,15vw,132px);
font-weight:900;
line-height:.9;
letter-spacing:-.02em;
white-space:nowrap;
color:#f5f1e8;
}
/* 縦組み。ダーク地は地そのものにコントラストがあるため、明地版(02)のように
色面(ブロブ)の上に置かなくても白文字のまま消えない。ここでは意図的にブロブの外＝
無地の上に置いて成立を確認している */
.vertical{
position:absolute;top:30px;right:28px;
writing-mode:vertical-rl;
font-family:'Shippori Mincho',serif;
font-weight:700;
font-size:13px;letter-spacing:.32em;color:#f5f1e8;
}
/* 半透明パネル。02では省いていた「手癖5」をここで足す。
実効色は実測: rgba(245,242,234,.10) を #0d1220 に重ねると合成後は #242834 相当 */
.panel{
position:absolute;left:30px;bottom:24px;
max-width:19em;
background:rgba(245,242,234,.10);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.16);
border-radius:10px;
padding:16px 20px;
}
.eyebrow{
font-size:10px;letter-spacing:.28em;color:#99a1b3;margin-bottom:8px;
font-family:system-ui,sans-serif;
}
.ja{
font-family:'Shippori Mincho',serif;
font-size:15px;font-weight:700;letter-spacing:.04em;color:#f5f1e8;margin-bottom:8px;
}
.lede{
font-family:'Noto Serif JP',serif;
font-size:12px;line-height:1.9;color:#cbd2de;
max-width:17em; /* 和文は em で取る。ch は半角基準で半分になる */
}
</style></head><body>
<div class="blob"></div>
<div class="vertical">WORKS</div>
<div class="inner">
<h1>Nocturne</h1>
</div>
<div class="panel">
<p class="eyebrow">SELECTED WORKS</p>
<p class="ja">夜は、輪郭を濃くする。</p>
<p class="lede">光を絞るほど、形だけが残る。写真を使わず、文字と質感だけで魅せるヒーロー。</p>
</div>
</body></html>