デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: コンストラクティビズム / CTA・告知
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 白文字 on 赤（見出し・ボタン） | #ffffff | #c8102e | #c8102e | 5.88:1 | AA 合格 |
| 黒文字・活字 on 生成り地 | #111111 | #f4f1ea | #f4f1ea | 16.74:1 | AA 合格 |
| 赤の見出し語 on 生成り地 | #c8102e | #f4f1ea | #f4f1ea | 5.22:1 | AA 合格 |
| キッカー（生成り文字 on 黒） | #f4f1ea | #111111 | #111111 | 16.74:1 | AA 合格 |
| やりがちな失敗：黒文字 on 赤 | #111111 | #d0161c | #d0161c | 3.43:1 | 不合格 |
| やりがちな失敗：純赤に白文字 | #ffffff | #ff0000 | #ff0000 | 4.00:1 | AA 合格だが眩しさ・残像が強い |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>コンストラクティビズム 告知セクション デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--red:#c8102e; /* 白文字で 5.88:1。純赤#ff0000 は眩しく残像が出るので使わない */
--ink:#111111; /* 黒。活字と幾何形状の主色 */
--paper:#f4f1ea; /* 白より少し生成りにして、赤黒が浮きすぎないようにする */
}
body{background:var(--paper);color:var(--ink);min-height:340px;position:relative;overflow:hidden;
font-family:"Arial Black","Helvetica Neue",system-ui,"Hiragino Kaku Gothic ProN",sans-serif}
/* 幾何形状：ベタ塗りの三角と円。グラデもテクスチャも使わない。
斜めの色面が構図の背骨。これが無いと「赤黒配色のミニマル」に転ぶ */
.geo{position:absolute;pointer-events:none}
.tri{top:-40px;right:-30px;width:0;height:0;
border-left:150px solid transparent;border-top:220px solid var(--red);transform:rotate(8deg)}
.bar{left:-60px;bottom:-30px;width:340px;height:56px;background:var(--ink);transform:rotate(-18deg)}
.dot{right:60px;bottom:36px;width:76px;height:76px;border-radius:50%;
border:9px solid var(--ink);background:transparent}
.inner{position:relative;padding:38px 34px;z-index:1}
.kicker{display:inline-block;background:var(--ink);color:var(--paper);
font-size:11px;letter-spacing:.18em;padding:6px 14px;transform:rotate(-4deg);margin-bottom:20px}
/* 活字を「構造物」として傾ける。ただしブロック単位・見出し語のみ。
本文は傾けない（斜めの本文は読字負荷が高い＝アクセシビリティを壊す） */
h1{font-size:clamp(34px,8vw,66px);line-height:.94;letter-spacing:-.01em;font-weight:900;
text-transform:uppercase}
h1 .l2{display:inline-block;color:var(--red);transform:translateX(14px)}
/* 和文は正方形ボディが強く、傾けると潰れる。短い見出し語だけに留める */
.ja{margin-top:14px;font-size:clamp(15px,3.4vw,22px);font-weight:900;
writing-mode:horizontal-tb;letter-spacing:.02em}
/* 本文はまっすぐ・水平。ここは絶対に傾けない */
p{margin-top:16px;font-family:"Helvetica Neue",system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
font-weight:400;font-size:13px;line-height:1.9;max-width:26em}
.cta{display:inline-block;margin-top:22px;background:var(--red);color:#fff;
font-size:13px;font-weight:900;letter-spacing:.06em;padding:14px 30px;
text-decoration:none;transform:rotate(-2deg)}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
</style></head><body>
<div class="geo tri"></div>
<div class="geo bar"></div>
<div class="geo dot"></div>
<div class="inner">
<span class="kicker">2026 EXHIBITION</span>
<h1>BUILD<br><span class="l2">FORWARD</span></h1>
<p class="ja">前へ、構造でものを言う。</p>
<p>赤・黒・白の三色と、斜めの構図だけで前進感をつくる。写真もグラデも要らない。形と角度が主張する。</p>
<a class="cta" href="#">チケットを取る →</a>
</div>
</body></html>