デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: ニューモーフィズム / ボタン・コントロール
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 暗い影 vs 地（境界：非文字は3:1が基準） | #bec3c9 | #e0e5ec | #e0e5ec | 1.40:1 | 不合格 |
| 明るい影 vs 地（境界：非文字は3:1が基準） | #ffffff | #e0e5ec | #e0e5ec | 1.27:1 | 不合格 |
| 見出し・カード内の強調 | #2f3b4a | #e0e5ec | #e0e5ec | 8.99:1 | AA 合格 |
| 本文・ラベル | #4a5568 | #e0e5ec | #e0e5ec | 5.94:1 | AA 合格 |
| この様式の定番文字色をそのまま使った場合 | #a3b1c6 | #e0e5ec | #e0e5ec | 1.72:1 | 不合格 |
| 壊れた例：3:1 を満たすまで濃くした影 | #7a8490 | #e0e5ec | #e0e5ec | 3.00:1 | AA 合格（ただし様式は崩れる） |
| フォーカスリング（様式の外側で担保） | #2f3b4a | #e0e5ec | #e0e5ec | 8.99: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:#e0e5ec;
/* 影は必ず2枚。暗い方は地より約15%暗く、明るい方は白。
1枚だけにすると普通のドロップシャドウに戻り、この様式は成立しない */
--sh-dark:#bec3c9;
--sh-light:#ffffff;
/* 文字だけは AA を通す。定番の #a3b1c6 は地の上で 1.72:1 しかなく読めない（実測） */
--fg:#2f3b4a;
--fg-soft:#4a5568;
}
body{background:var(--bg);color:var(--fg);min-height:340px;padding:26px 28px;
font-family:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
h3{font-size:15px;letter-spacing:.02em;margin-bottom:4px}
/* 和文の行長は em で取る。ch は半角基準なので想定の半分で折り返す */
.lead{font-size:12px;color:var(--fg-soft);line-height:1.8;max-width:30em;margin-bottom:20px}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
/* 凸：光源は左上。明るい影を左上、暗い影を右下に置く */
.btn{
border:0;font:inherit;font-size:13px;font-weight:600;color:var(--fg);
background:var(--bg);border-radius:14px;padding:13px 22px;cursor:pointer;
box-shadow:6px 6px 12px var(--sh-dark), -6px -6px 12px var(--sh-light);
}
/* 凹：影の向きを反転させて内側に入れる。凸との違いはこれだけ */
.btn.pressed,.btn:active{
box-shadow:inset 5px 5px 10px var(--sh-dark), inset -5px -5px 10px var(--sh-light);
color:var(--fg-soft);
}
/* この様式は境界が 1.40:1 しかなく、フォーカスが影では絶対に伝わらない。
輪郭を1本足して補う。様式の外側で担保するしかない部分 */
.btn:focus-visible{outline:3px solid #2f3b4a;outline-offset:3px}
.sw{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-soft)}
.track{width:58px;height:30px;border-radius:999px;background:var(--bg);position:relative;
box-shadow:inset 4px 4px 8px var(--sh-dark), inset -4px -4px 8px var(--sh-light)}
.knob{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;
background:var(--bg);box-shadow:3px 3px 6px var(--sh-dark), -3px -3px 6px var(--sh-light)}
.track.on .knob{left:auto;right:4px;background:#5a7fb8}
.card{background:var(--bg);border-radius:18px;padding:16px 18px;margin-top:4px;
box-shadow:8px 8px 16px var(--sh-dark), -8px -8px 16px var(--sh-light);max-width:31em}
.card p{font-size:12px;line-height:1.85;color:var(--fg-soft)}
.card b{color:var(--fg)}
</style></head><body>
<h3>押せそうに見えるか</h3>
<p class="lead">背景と同じ色のまま、影の向きだけで凹凸を作る。装飾色をほとんど使わずに質感が出る反面、境界のコントラストが構造的に足りない。</p>
<div class="row">
<button class="btn" type="button">保存する</button>
<button class="btn pressed" type="button">選択中</button>
<span class="sw"><span class="track on"><span class="knob"></span></span>自動保存 ON</span>
<span class="sw"><span class="track"><span class="knob"></span></span>通知 OFF</span>
</div>
<div class="card">
<p>凸と凹の違いは<b>影の向きの反転だけ</b>。地とのコントラストは <b>1.40:1</b>（実測）で、WCAG 1.4.11 が求める 3:1 に届かない。ボタンの輪郭が「見えている」のではなく、<b>見えていると錯覚している</b>状態に近い。</p>
</div>
</body></html>