プログレスチェックリスト Progress Checklist

セットアップ手順や達成項目を進捗バーとチェックリストで表示。ユーザーの完了状態を可視化。

使用場面: アカウント初期設定や、プロジェクトのセットアップ手順の進捗管理 採用例: Stripe Dashboard, Notion

ライブデモ

アカウント設定

0 / 5 完了

ソースコード

<div class="demo-checklist">
  <div class="demo-checklist-header">
    <h3 class="demo-checklist-title">アカウント設定</h3>
    <span class="demo-checklist-counter">0 / 5 完了</span>
  </div>
  <div class="demo-checklist-progress">
    <div class="demo-checklist-progress-fill"></div>
  </div>
  <div class="demo-checklist-items">
    <label class="demo-checklist-item">
      <input type="checkbox" class="demo-checklist-checkbox" />
      <span class="demo-checklist-check">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
      </span>
      <div class="demo-checklist-item-content">
        <div class="demo-checklist-item-title">プロフィールを設定</div>
        <div class="demo-checklist-item-desc">名前とアバターを設定しましょう</div>
      </div>
    </label>
    <label class="demo-checklist-item">
      <input type="checkbox" class="demo-checklist-checkbox" />
      <span class="demo-checklist-check">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
      </span>
      <div class="demo-checklist-item-content">
        <div class="demo-checklist-item-title">チームメンバーを招待</div>
        <div class="demo-checklist-item-desc">一緒に働くメンバーを追加</div>
      </div>
    </label>
    <label class="demo-checklist-item">
      <input type="checkbox" class="demo-checklist-checkbox" />
      <span class="demo-checklist-check">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
      </span>
      <div class="demo-checklist-item-content">
        <div class="demo-checklist-item-title">最初のプロジェクトを作成</div>
        <div class="demo-checklist-item-desc">プロジェクトを作って作業を始めましょう</div>
      </div>
    </label>
    <label class="demo-checklist-item">
      <input type="checkbox" class="demo-checklist-checkbox" />
      <span class="demo-checklist-check">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
      </span>
      <div class="demo-checklist-item-content">
        <div class="demo-checklist-item-title">通知を設定</div>
        <div class="demo-checklist-item-desc">メールやプッシュ通知の設定</div>
      </div>
    </label>
    <label class="demo-checklist-item">
      <input type="checkbox" class="demo-checklist-checkbox" />
      <span class="demo-checklist-check">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
      </span>
      <div class="demo-checklist-item-content">
        <div class="demo-checklist-item-title">インテグレーションを接続</div>
        <div class="demo-checklist-item-desc">Slack や GitHub と連携</div>
      </div>
    </label>
  </div>
</div>
.demo-checklist { padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.demo-checklist-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.demo-checklist-title { margin: 0; font-size: 16px; color: #111; }
.demo-checklist-counter { font-size: 13px; color: var(--ui-primary); font-weight: 600; }
.demo-checklist-progress {
  height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;
  margin-bottom: 16px;
}
.demo-checklist-progress-fill {
  height: 100%; width: 0%; background: var(--ui-primary); border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.demo-checklist-items { display: flex; flex-direction: column; gap: 4px; }
.demo-checklist-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border-radius: 8px; cursor: pointer; transition: background 0.2s;
}
.demo-checklist-item:hover { background: #f9fafb; }
.demo-checklist-checkbox { display: none; }
.demo-checklist-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #d1d5db; display: flex; align-items: center;
  justify-content: center; color: transparent; transition: all 0.25s;
  margin-top: 2px;
}
.demo-checklist-checkbox:checked ~ .demo-checklist-check {
  background: var(--ui-primary); border-color: var(--ui-primary); color: #fff;
}
.demo-checklist-item-title { font-size: 14px; font-weight: 500; color: #333; transition: color 0.2s; }
.demo-checklist-checkbox:checked ~ .demo-checklist-item-content .demo-checklist-item-title {
  color: #999; text-decoration: line-through;
}
.demo-checklist-item-desc { font-size: 12px; color: #999; margin-top: 2px; }
(function(){
  var checkboxes = document.querySelectorAll('.demo-checklist-checkbox');
  var fill = document.querySelector('.demo-checklist-progress-fill');
  var counter = document.querySelector('.demo-checklist-counter');
  var total = checkboxes.length;
  function update(){
    var checked = document.querySelectorAll('.demo-checklist-checkbox:checked').length;
    fill.style.width = (checked / total * 100) + '%';
    counter.textContent = checked + ' / ' + total + ' 完了';
  }
  checkboxes.forEach(function(cb){
    cb.addEventListener('change', update);
  });
})();

AIプロンプト

Basic 
プログレスチェックリストをHTML/CSS/JSで作ってください。チェックボックス付きのリストと、完了率を示すプログレスバーを表示します。
Custom 
以下の仕様でプログレスチェックリストを実装してください。
- 5項目のセットアップチェックリスト
- チェック時に円形チェックマークをアニメーション
- プログレスバー（完了率に連動）
- 完了カウンター表示（n/5 完了）
- チェック済み項目は打消し線
- プライマリカラー: #2563eb
Advanced 
永続化対応のプログレスチェックリストを実装してください。
- localStorageで進捗を保存・復元
- 項目の並び替え（ドラッグ&ドロップ）
- サブタスク展開機能
- 全完了時の祝福アニメーション（コンフェッティ）
- 進捗のタイムライン表示（完了日時記録）
- マイルストーン機能（特定の達成率でボーナス表示）
- チーム進捗の集計表示
- API連携用のコールバックフック
← カタログに戻る