プログレスチェックリスト
初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 初期設定の残り項目を促すセットアップ画面
- 完了数をバーと「N/5 完了」で見せたいリスト
- 項目を押して完了扱いにしたいチェックリスト
- 避ける場面
- 順序が固定の手続き（ステップフォーム）
- 項目が10を超える（バーの意味が薄い）
- 構成要素
- 見出し・副文
- 完了カウンター
- 進捗バー
- 項目ボタン
- チェック丸
- ラベル（打消し線）
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で各項目（role=checkbox のボタン）へ、Enter／Space で完了／未完了を切替
- 支援技術
バーは role=progressbar＋aria-label・aria-valuemin/max/now を更新。「N/5 完了」は aria-live=polite。項目は button role=checkbox＋aria-checked、:focus-visible でリング。完了は打消し線＋チェック＋色
- 動き
バー幅 400ms cubic-bezier(0.4,0,0.2,1)、チェック描画 300ms、打消し線 300ms（進捗の増減を追える）。reduced-motion で無効
デザインの要点
- 最初から2つ完了にしておく。ゼロから始まるバーより「もう 40% 進んでいる」の方が残りをやる気になる
- 項目は行全体を 44px のボタンにする。チェック丸だけが押せる作りは、スマホで外しやすい
- 完了は打消し線＋チェック＋色の3つで示す。色だけだと、完了と未完了の差が見分けにくい人がいる
- バーの幅は 400ms で動かす。瞬間移動だと「増えた」実感が薄く、遅すぎると次の項目を押す前に終わらない
コード（コピーして使えます）
<div class="pc-card">
<div class="pc-head">
<div class="pc-titles">
<p class="pc-title">セットアップを完了しましょう</p>
<p class="pc-sub">あと少しで準備完了です。</p>
</div>
<span class="pc-count" id="pcCount" aria-live="polite">2/5 完了</span>
</div>
<div class="pc-bar" role="progressbar" aria-label="セットアップの進捗" aria-valuemin="0" aria-valuemax="5" aria-valuenow="2">
<span class="pc-fill" id="pcFill"></span>
</div>
<ul class="pc-list" id="pcList">
<li>
<button class="pc-item" role="checkbox" aria-checked="true">
<span class="pc-box"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="pc-tick" d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="pc-label">アカウントを作成</span>
</button>
</li>
<li>
<button class="pc-item" role="checkbox" aria-checked="true">
<span class="pc-box"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="pc-tick" d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="pc-label">プロフィールを入力</span>
</button>
</li>
<li>
<button class="pc-item" role="checkbox" aria-checked="false">
<span class="pc-box"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="pc-tick" d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="pc-label">メールアドレスを認証</span>
</button>
</li>
<li>
<button class="pc-item" role="checkbox" aria-checked="false">
<span class="pc-box"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="pc-tick" d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="pc-label">最初のメモを作成</span>
</button>
</li>
<li>
<button class="pc-item" role="checkbox" aria-checked="false">
<span class="pc-box"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="pc-tick" d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="pc-label">通知を設定</span>
</button>
</li>
</ul>
</div>