カラースウォッチ
色の丸をタップすると商品プレビューの色と選択中カラー名が変わる。選択中は白いリングでハイライト。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 色違い商品を切り替えて見せる商品詳細
- 選択肢が色そのものである場合
- 5〜8 色程度の少数選択
- 避ける場面
- 色の名前や差が微妙で丸だけでは区別できない品揃え
- 20 色を超える選択肢（一覧やセレクトが向く）
- 構成要素
- 商品プレビュー
- 選択中カラー名
- 色の丸ボタン
- 選択リング
- 持っている状態
- 通常
- 押下中
- キーボード
Tab で選択中の色へ（ローミング tabindex）、←→／↑↓ で隣の色を選択、Home／End で端へ。Enter／Space でも選択
- 支援技術
role=listbox／option と aria-selected で選択状態を伝え、各丸に aria-label で色名。色名の変化は aria-live=polite。選択は拡大と外周リングで色以外にも示し、focus-visible の輪郭あり
- 動き
選択の丸が 1.15 倍に 200ms バウンス、商品色は fill 300ms、色名は 150ms のフェード差し替え。reduced-motion で全停止
デザインの要点
- 選択リングは丸の外側 5px に置き、丸自体は 1.15 倍にする。丸の縁を変えるだけだと濃い色で消える
- 色名は必ず文字でも出す。丸だけでは「インディゴ」と「ネイビー」の違いを伝えられない
- 矢印キーで隣の色に移れるようにする（1 つの listbox として Tab は 1 回で通過させる）
- 商品側は fill の 300ms 遷移で「同じ商品の色が変わった」と分かるようにする。差し替えだと別物に見える
コード（コピーして使えます）
<div class="sw-wrap">
<div class="sw-preview">
<div class="sw-product" id="swProduct">
<svg viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="120" height="80" rx="12" id="swRect" fill="#2b50c7"/>
<ellipse cx="60" cy="38" rx="22" ry="16" fill="rgba(255,255,255,.2)"/>
<rect x="36" y="55" width="48" height="6" rx="3" fill="rgba(255,255,255,.25)"/>
</svg>
</div>
</div>
<p class="sw-selected-name" id="swName" aria-live="polite">インディゴブルー</p>
<div class="sw-list" role="listbox" aria-label="カラー選択" id="swList">
<button class="sw-dot sw-active" data-color="#2b50c7" data-name="インディゴブルー" role="option" aria-selected="true" tabindex="0" style="background:#2b50c7;" aria-label="インディゴブルー"></button>
<button class="sw-dot" data-color="#c74040" data-name="チェリーレッド" role="option" aria-selected="false" tabindex="-1" style="background:#c74040;" aria-label="チェリーレッド"></button>
<button class="sw-dot" data-color="#2a9d5c" data-name="フォレストグリーン" role="option" aria-selected="false" tabindex="-1" style="background:#2a9d5c;" aria-label="フォレストグリーン"></button>
<button class="sw-dot" data-color="#8b5cf6" data-name="ラベンダー" role="option" aria-selected="false" tabindex="-1" style="background:#8b5cf6;" aria-label="ラベンダー"></button>
<button class="sw-dot" data-color="#d97706" data-name="アンバーゴールド" role="option" aria-selected="false" tabindex="-1" style="background:#d97706;" aria-label="アンバーゴールド"></button>
</div>
</div>