デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: フラットデザイン / ボタン・コントロール
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| 主ボタン（白文字 on 塗り青） | #ffffff | #2563eb | #2563eb | 5.17:1 | AA 合格 |
| 副ボタン（青文字 on 淡青面） | #1d4ed8 | #eef2ff | #eef2ff | 5.99:1 | AA 合格 |
| 危険ボタン（白文字 on 赤） | #ffffff | #dc2626 | #dc2626 | 4.83:1 | AA 合格（余裕なし） |
| 本文（白カード） | #1f2937 | #ffffff | #ffffff | 14.68:1 | AA 合格 |
| サブテキスト（白） | #6b7280 | #ffffff | #ffffff | 4.83: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:#f7f8fa;
--ink:#1f2937; /* 本文。白カードで 14.68:1 */
--sub:#6b7280; /* サブ。白で 4.83:1 */
--primary:#2563eb; /* 白文字で 5.17:1 */
--primary-ink:#1d4ed8;
--soft:#eef2ff; /* secondary の面。青文字 #1d4ed8 で 5.99:1 */
--danger:#dc2626; /* 白文字で 4.83:1 */
}
body{background:var(--bg);color:var(--ink);min-height:340px;padding:30px 28px;
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
h3{font-size:16px;font-weight:700;margin-bottom:3px}
.lead{font-size:12px;color:var(--sub);line-height:1.7;margin-bottom:20px}
.card{background:#fff;border-radius:12px;padding:20px 22px;max-width:34em}
.card h4{font-size:13px;font-weight:700;margin-bottom:2px}
.card p{font-size:12px;color:var(--sub);line-height:1.7;margin-bottom:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* 影は使わない。押せることは「色の面・十分な大きさ・明快なラベル」で示す。
フラットの成立条件＝影で立体を作らず、色とサイズで階層を作る */
.btn{border:0;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
border-radius:8px;padding:11px 18px;min-height:44px; /* タップ領域 44px（WCAG 2.5.8）*/
display:inline-flex;align-items:center;gap:7px;transition:background .12s}
.btn .ic{width:16px;height:16px;flex:none}
/* 主：塗り。最も強い色の面が「一番押してほしいボタン」を示す */
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-ink)}
/* 副：淡い面＋濃い文字。主より弱い色面で階層を1段下げる */
.btn.secondary{background:var(--soft);color:var(--primary-ink)}
.btn.secondary:hover{background:#e0e7ff}
/* 危険：赤。色そのものが警告のラベルになる */
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#b91c1c}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* アイコンだけにしない。アイコン＋文字ラベルを併記する */
</style></head><body>
<h3>フラットなボタン群</h3>
<p class="lead">影を使わず、色の面・大きさ・ラベルだけで「押せること」と「優先順位」を示す。</p>
<div class="card">
<h4>この内容を公開しますか？</h4>
<p>公開すると、リンクを知っている人が閲覧できるようになります。あとから非公開に戻せます。</p>
<div class="row">
<button class="btn primary" type="button">
<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>
公開する
</button>
<button class="btn secondary" type="button">下書き保存</button>
<button class="btn danger" type="button">削除</button>
</div>
</div>
</body></html>