デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: ハンドクラフト・手描き / カード・バッジ
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 見出し・本文インク（紙地） | #2b2622 | #f4ead8 | #f4ead8 | 12.55:1 | AA 合格 |
| サブテキスト（紙地） | #6b5d4f | #f4ead8 | #f4ead8 | 5.33:1 | AA 合格 |
| 赤インク・下線・判子（紙地） | #b23a2e | #f4ead8 | #f4ead8 | 4.98:1 | AA 合格（余裕なし） |
| CTA（白文字 on 赤スタンプ） | #ffffff | #b23a2e | #b23a2e | 5.94:1 | AA 合格 |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>ハンドクラフト・手描き クーポン デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--paper:#f4ead8; /* 生成りの紙 */
--ink:#2b2622; /* インク。紙地で 12.55:1 */
--sub:#6b5d4f; /* サブ。紙地で 5.33:1 */
--stamp:#b23a2e; /* 判子の赤。紙地で 4.98:1、白抜きで 5.94:1 */
--tape:#f6e7a8; /* マスキングテープ */
}
body{background:var(--paper);color:var(--ink);min-height:340px;position:relative;overflow:hidden;
font-family:"Yu Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif}
/* 手描きの肝：線・枠を「揺らす」。feTurbulence で乱数を作り、feDisplacementMap で
要素の輪郭を押し出す。完璧な直線を避けるのが成立条件。04 のノイズ技術の応用 */
svg.filters{position:absolute;width:0;height:0}
/* 紙のグレイン。ベタ塗りにしない（04 と同じ data URI ノイズ、彩度は残す＝紙の粒） */
body::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
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.5' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.inner{position:relative;z-index:1;padding:32px 30px}
.tape{position:absolute;top:-10px;left:40px;width:120px;height:30px;background:var(--tape);
opacity:.85;transform:rotate(-6deg);filter:url(#rough)}
.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--sub);font-weight:700;margin-bottom:12px}
/* 手描き枠：破線を feDisplacementMap で歪めて「手で描いた囲み」に見せる */
.card{position:relative;border:2.5px dashed var(--ink);border-radius:18px 12px 20px 10px;
padding:22px 24px;max-width:24em;filter:url(#rough);background:rgba(255,255,255,.25)}
h1{font-size:clamp(26px,6vw,40px);line-height:1.15;letter-spacing:.01em;font-weight:800}
h1 .hl{color:var(--stamp)}
p{margin-top:10px;font-size:13px;line-height:1.9;color:var(--sub);max-width:22em}
/* 手描きの下線：まっすぐな border でなく、揺らした SVG ストローク風に見せる */
.underline{display:inline;background:linear-gradient(var(--stamp),var(--stamp)) left bottom/100% 3px no-repeat;
padding-bottom:2px;filter:url(#rough)}
/* 判子：円をわずかに歪ませ、かすれた赤で「押した」風に */
.stamp{position:absolute;right:24px;bottom:22px;width:84px;height:84px;border:3px solid var(--stamp);
border-radius:50%;color:var(--stamp);display:flex;align-items:center;justify-content:center;
text-align:center;font-size:11px;font-weight:800;line-height:1.3;transform:rotate(-12deg);
opacity:.85;filter:url(#rough)}
.cta{display:inline-block;margin-top:18px;background:var(--stamp);color:#fff;font-weight:800;
font-size:13px;padding:11px 24px;border-radius:14px 10px 16px 8px;text-decoration:none;filter:url(#rough)}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* 手描き風の「揺らぎ」は小さい文字で潰れる。本文は普通のゴシック（filter を掛けない）*/
</style></head><body>
<svg class="filters" aria-hidden="true">
<filter id="rough"><feTurbulence type="fractalNoise" baseFrequency="0.018" numOctaves="3" result="n"/>
<feDisplacementMap in="SourceGraphic" in2="n" scale="4"/></filter>
</svg>
<div class="inner">
<div class="tape"></div>
<p class="eyebrow">HANDMADE MARKET</p>
<div class="card">
<h1>てしごとの、<br><span class="hl">まるいち</span>市。</h1>
<p><span class="underline">今週末だけ</span>、作り手が集まる小さな市を開きます。コーヒー1杯、お土産ひとつ。</p>
<a class="cta" href="#">場所を見る →</a>
</div>
<div class="stamp">土日<br>限定</div>
</div>
</body></html>