デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: マキシマリズム／ドーパミン / ヒーロー
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 主役見出し（黒文字 on イエロー面） | #141414 | #ffd21e | #ffd21e | 12.71:1 | AA 合格 |
| 本文（白い島） | #1f2937 | #ffffff | #ffffff | 14.68:1 | AA 合格 |
| CTA（白文字 on パープル） | #ffffff | #6d28d9 | #6d28d9 | 7.10:1 | AA 合格 |
| タグ（黒文字 on オレンジ・白は落ちる） | #141414 | #ea580c | #ea580c | 5.18:1 | AA 合格（余裕なし） |
| 壊れた例：シアン文字 on イエロー地 | #22d3ee | #ffd21e | #ffd21e | 1.25:1 | 不合格 |
| 壊れた例：ピンク文字 on パープル地 | #ff8fab | #6d28d9 | #6d28d9 | 3.31:1 | 不合格 |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>マキシマリズム セクション デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--ink:#141414; --white:#fff; --ink2:#1f2937;
--yellow:#ffd21e; --cyan:#22d3ee; --lime:#a3e635; --pink:#ff8fab;
--purple:#6d28d9; --orange:#ea580c;
/* 配色ルール（実測）：明るい面=黒文字、濃い面=白文字。
黄12.71 / シアン10.19 / ライム12.22 / ピンク8.57（黒文字）、
パープル7.10（白文字）、オレンジは白3.56で落ちるので黒4.75 */
}
body{background:var(--purple);min-height:340px;position:relative;overflow:hidden;
font-family:"Arial Black",system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
background-image:radial-gradient(circle at 80% 10%, #8b5cf6, transparent 40%),
radial-gradient(circle at 10% 90%, #4c1d95, transparent 45%)}
/* レイヤーは z-index で明示管理。重ねても「最前面が何か」を崩さない */
.layer{position:absolute}
.blob1{top:-40px;right:-30px;width:180px;height:180px;background:var(--cyan);
border-radius:50%;z-index:1;transform:rotate(0)}
.blob2{bottom:-50px;left:-20px;width:150px;height:150px;background:var(--pink);
border-radius:40% 60% 55% 45%;z-index:1}
.tagY{top:30px;right:40px;background:var(--lime);color:var(--ink);z-index:3;
font-size:11px;font-weight:900;padding:6px 12px;transform:rotate(6deg);letter-spacing:.08em}
.tagO{bottom:40px;right:60px;background:var(--orange);color:var(--ink);z-index:3;
font-size:11px;font-weight:900;padding:6px 12px;transform:rotate(-5deg);letter-spacing:.08em}
.inner{position:relative;z-index:2;padding:30px 30px}
/* 主役は1つ。黒 on 黄の大きな面で『最初に見る場所』を明示する（意図された階層）*/
.hero{display:inline-block;background:var(--yellow);color:var(--ink);
font-size:clamp(30px,7.5vw,58px);line-height:.98;letter-spacing:-.01em;
padding:10px 16px;transform:rotate(-2deg);box-shadow:8px 8px 0 var(--ink)}
.hero .l2{color:var(--orange);-webkit-text-stroke:2px var(--ink)}
/* 本文は白い『島』に避難させる。多色の上に長文を直接置かない */
.island{background:var(--white);color:var(--ink2);border-radius:14px;padding:16px 18px;
max-width:23em;margin-top:20px;box-shadow:6px 6px 0 rgba(0,0,0,.25);position:relative;z-index:4}
.island p{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:400;
font-size:13px;line-height:1.85}
.cta{display:inline-block;margin-top:14px;background:var(--purple);color:var(--white);
font-family:system-ui,sans-serif;font-weight:800;font-size:13px;padding:11px 22px;
border-radius:10px;text-decoration:none}
.cta:focus-visible{outline:3px solid var(--white);outline-offset:3px}
</style></head><body>
<div class="layer blob1"></div>
<div class="layer blob2"></div>
<div class="layer tagY">NEW DROP</div>
<div class="layer tagO">LIMITED</div>
<div class="inner">
<div class="hero">SUMMER<br><span class="l2">MADNESS</span></div>
<div class="island">
<p>色も音も全部のせ。夏のドロップは、うるさいほど楽しい方がいい。でも「読む場所」だけは静かに用意する。</p>
<a class="cta" href="#">ラインナップを見る →</a>
</div>
</div>
</body></html>