デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: ニューモーフィズム / プログレスバー・ステッパー
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 塗り（定番の淡色）vs 地 | #5a7fb8 | #e0e5ec | #e0e5ec | 3.21:1 | 非文字3:1 合格（ギリギリ） |
| 壊れた例：塗り（定番の淡色）vs トラックの縁（暗い影） | #5a7fb8 | #bec3c9 | #bec3c9 | 2.29:1 | 不合格 |
| 塗り（濃色に変更）vs 地 | #3d6b99 | #e0e5ec | #e0e5ec | 4.41:1 | AA 合格 |
| 塗り（濃色に変更）vs トラックの縁（暗い影） | #3d6b99 | #bec3c9 | #bec3c9 | 3.15:1 | 非文字3:1 合格 |
| 完了チェックマーク（白）vs 塗り | #ffffff | #3d6b99 | #3d6b99 | 5.58:1 | AA 合格 |
| パーセンテージ数値・本文 | #4a5568 | #e0e5ec | #e0e5ec | 5.94: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;
--sh-dark:#bec3c9;
--sh-light:#ffffff;
--fg:#2f3b4a;
--fg-soft:#4a5568;
/* 塗りは濃色。定番の淡色(#5a7fb8)だとトラックの縁で2.29:1しかなく境目が消える（実測） */
--fill:#3d6b99;
}
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}
.lead{font-size:12px;color:var(--fg-soft);line-height:1.8;max-width:32em;margin-bottom:22px}
.bar-row{margin-bottom:26px}
.bar-label{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-soft);margin-bottom:8px}
.bar-label b{color:var(--fg)}
/* トラック：地と同色のまま inset の2枚影で溝を作る */
.track{height:20px;border-radius:999px;background:var(--bg);position:relative;overflow:hidden;
box-shadow:inset 4px 4px 8px var(--sh-dark), inset -4px -4px 8px var(--sh-light)}
.fill{height:100%;width:68%;border-radius:999px;background:var(--fill);
box-shadow:1px 1px 3px rgba(0,0,0,.15)}
.steps{display:flex;gap:0;margin-top:6px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;font-size:11px;color:var(--fg-soft)}
.step:not(:last-child)::after{content:"";position:absolute;top:15px;left:50%;width:100%;height:6px;
background:var(--bg);border-radius:999px;
box-shadow:inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light);z-index:0}
.step.done:not(:last-child)::after{background:var(--fill);box-shadow:none}
.dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:13px;position:relative;z-index:1;margin-bottom:6px;background:var(--bg)}
/* 未着手：地に沈む凹み */
.step .dot{box-shadow:inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);color:var(--fg-soft)}
/* 完了：塗り色で凸に。チェックは白で5.58:1（実測） */
.step.done .dot{background:var(--fill);color:#fff;
box-shadow:2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light)}
/* 現在：凹凸の反転だけに頼らず、外側にアクセントリングを足して状態を二重に示す */
.step.current .dot{background:var(--bg);color:var(--fg);font-weight:800;
box-shadow:2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light);
outline:2px solid var(--fill);outline-offset:2px}
.step.current{font-weight:700;color:var(--fg)}
.card{background:var(--bg);border-radius:16px;padding:14px 16px;margin-top:22px;
box-shadow:6px 6px 12px var(--sh-dark), -6px -6px 12px var(--sh-light);max-width:34em}
.card p{font-size:11px;line-height:1.8;color:var(--fg-soft)}
.card b{color:var(--fg)}
</style></head><body>
<h3>進捗の埋まり方が見えるか</h3>
<p class="lead">トラックは地と同色の凹み、塗りだけが色を持つ。淡すぎる塗りは地に溶けて境目が消えるため、この様式では珍しく彩度の残った濃い色を選ぶ。</p>
<div class="bar-row">
<div class="bar-label"><span>ファイルをアップロード中</span><b>68%</b></div>
<div class="track" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" aria-label="アップロードの進捗">
<div class="fill"></div>
</div>
</div>
<div class="steps">
<div class="step done"><div class="dot">✓</div>お届け先</div>
<div class="step current"><div class="dot">2</div>お支払い</div>
<div class="step"><div class="dot">3</div>確認</div>
</div>
<div class="card">
<p>塗り <b>#3d6b99</b> は地の上で <b>4.41:1</b>、トラックの縁（暗い影 #bec3c9）の上でも <b>3.15:1</b>（実測）。定番の淡色 #5a7fb8 では縁の上が 2.29:1 まで落ちる。</p>
</div>
</body></html>