オンボーディング・ガイド
プログレスチェックリスト
初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<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">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>