デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: オーガニック・シェイプ / フッター
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 見出し・リンク（描画の最暗部：採取 #d2d6d5） | #243038 | #edf0ee | #d2d6d5 | 9.21:1 | AA 合格 |
| 見出し・リンク（地） | #243038 | #edf0ee | #edf0ee | 11.77:1 | AA 合格 |
| サブテキスト（描画の最暗部：採取 #d2d6d5） | #4a5a63 | #edf0ee | #d2d6d5 | 4.88:1 | AA 合格（余裕なし） |
| 購読ボタン（白文字 on 深緑） | #ffffff | #2c6149 | #2c6149 | 7.21:1 | AA 合格 |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>オーガニック・シェイプ フッター デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#edf0ee;
--ink:#243038; /* 見出し・リンク。全ブロブ上で 10:1 以上（実測） */
--sub:#4a5a63; /* サブ。全ブロブ上で 5:1 以上 */
--cta:#2c6149; /* 深緑。白文字で 7.21:1 */
}
body{background:var(--bg);color:var(--ink);min-height:340px;position:relative;overflow:hidden;
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
/* 有機ブロブ：border-radius の8値指定で非対称の曲線を作る。直線・直角・正円を避ける。
大小と重なりで単調さを消す。ベタ塗り＋blur で縁を柔らかくし、地と穏やかに溶かす */
.blob{position:absolute;pointer-events:none;filter:blur(26px);z-index:0;
animation:drift 18s ease-in-out infinite alternate}
.b1{width:260px;height:230px;top:-70px;left:-40px;background:#cfe3d4;
border-radius:62% 38% 55% 45% / 58% 52% 48% 42%}
.b2{width:220px;height:250px;bottom:-90px;right:8%;background:#f3ddd0;
border-radius:44% 56% 38% 62% / 52% 44% 56% 48%;animation-delay:-6s}
.b3{width:200px;height:180px;top:30%;right:-50px;background:#d5e0ee;
border-radius:57% 43% 47% 53% / 45% 58% 42% 55%;animation-delay:-11s}
/* 動きは「生きた質感」を出すためのごく緩やかな変形。ただし常時アニメは 2.3.3 の配慮対象。
reduced-motion を選んでいる人には完全に止める */
@keyframes drift{
from{transform:translate(0,0) rotate(0deg)}
to{transform:translate(14px,-10px) rotate(6deg)}
}
@media (prefers-reduced-motion:reduce){
.blob{animation:none}
}
.inner{position:relative;z-index:1;padding:34px 32px;
display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.brand h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
.brand p{font-size:12px;color:var(--sub);line-height:1.8;margin-top:8px;max-width:15em}
.sub{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.sub input{border:1px solid #c3ccc6;border-radius:999px;padding:9px 14px;font:inherit;
font-size:12px;min-width:0;flex:1;background:rgba(255,255,255,.6)}
.sub button{border:0;background:var(--cta);color:#fff;font:inherit;font-size:12px;font-weight:700;
border-radius:999px;padding:9px 18px;cursor:pointer;white-space:nowrap}
.sub button:focus-visible,.col a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.col h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);
font-weight:700;margin-bottom:12px}
.col a{display:block;font-size:13px;color:var(--ink);text-decoration:none;
margin-bottom:9px;width:max-content}
.col a:hover{text-decoration:underline;text-underline-offset:2px}
.copy{position:relative;z-index:1;padding:0 32px 26px;font-size:11px;color:var(--sub)}
</style></head><body>
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<div class="inner">
<div class="brand">
<h2>Nagomi</h2>
<p>やわらかな暮らしの道具を、つくる人から。</p>
<form class="sub" onsubmit="return false">
<input type="email" placeholder="メールで新着を受け取る" aria-label="メールアドレス">
<button type="submit">登録</button>
</form>
</div>
<nav class="col" aria-label="製品">
<h3>製品</h3>
<a href="#">うつわ</a><a href="#">布もの</a><a href="#">木の道具</a><a href="#">ギフト</a>
</nav>
<nav class="col" aria-label="会社情報">
<h3>会社情報</h3>
<a href="#">私たちについて</a><a href="#">つくり手</a><a href="#">お問い合わせ</a>
</nav>
</div>
<div class="copy">© 2026 Nagomi — 有機的な曲線は border-radius の8値指定。動きは reduced-motion で停止。</div>
</body></html>