ステッパー Stepper

マルチステップのプロセスを順番に進めるUI。フォームウィザードに最適。

使用場面: 会員登録・注文・申込フォームなど複数ステップのプロセス 採用例: Shopify注文, Google Forms

ライブデモ

入力

確認

完了

ステップ2: 入力内容をご確認ください。

ソースコード

<div class="demo-stepper">
  <div class="demo-stepper-header">
    <div class="demo-step-item completed" data-step="1">
      <div class="demo-step-circle">1</div>
      <span class="demo-step-label">入力</span>
    </div>
    <div class="demo-step-line completed"></div>
    <div class="demo-step-item active" data-step="2">
      <div class="demo-step-circle">2</div>
      <span class="demo-step-label">確認</span>
    </div>
    <div class="demo-step-line"></div>
    <div class="demo-step-item" data-step="3">
      <div class="demo-step-circle">3</div>
      <span class="demo-step-label">完了</span>
    </div>
  </div>
  <div class="demo-stepper-body">
    <div class="demo-stepper-panel" data-panel="1" style="display:none;">
      <p>ステップ1: お名前とメールアドレスを入力してください。</p>
    </div>
    <div class="demo-stepper-panel active" data-panel="2">
      <p>ステップ2: 入力内容をご確認ください。</p>
    </div>
    <div class="demo-stepper-panel" data-panel="3" style="display:none;">
      <p>ステップ3: 登録が完了しました！</p>
    </div>
  </div>
  <div class="demo-stepper-actions">
    <button class="demo-step-prev" id="demoStepPrev">← 戻る</button>
    <button class="demo-step-next" id="demoStepNext">次へ →</button>
  </div>
</div>

.demo-stepper-header {
  display: flex; align-items: center; margin-bottom: 24px;
}
.demo-step-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.demo-step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  border: 2px solid #e5e7eb; color: #999; background: #fff;
  transition: all 0.3s;
}
.demo-step-item.active .demo-step-circle {
  border-color: var(--ui-primary); color: #fff;
  background: var(--ui-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-step-item.completed .demo-step-circle {
  border-color: var(--ui-primary); color: #fff;
  background: var(--ui-primary);
}
.demo-step-label {
  font-size: 12px; color: #999; font-weight: 500;
  transition: color 0.3s;
}
.demo-step-item.active .demo-step-label,
.demo-step-item.completed .demo-step-label { color: var(--ui-primary); font-weight: 600; }
.demo-step-line {
  flex: 1; height: 2px; background: #e5e7eb; margin: 0 8px;
  transition: background 0.3s; margin-bottom: 22px;
}
.demo-step-line.completed { background: var(--ui-primary); }
.demo-stepper-body {
  min-height: 60px; padding: 16px; border-radius: 8px;
  background: color-mix(in srgb, var(--ui-primary) 4%, #fff);
  border: 1px solid #e5e7eb; margin-bottom: 16px;
}
.demo-stepper-panel { font-size: 14px; color: #555; }
.demo-stepper-panel p { margin: 0; }
.demo-stepper-actions { display: flex; justify-content: space-between; }
.demo-step-prev, .demo-step-next {
  padding: 8px 20px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.demo-step-prev {
  background: #f3f4f6; color: #555;
}
.demo-step-prev:hover { background: #e5e7eb; }
.demo-step-prev:disabled { opacity: 0.4; cursor: not-allowed; }
.demo-step-next {
  background: var(--ui-primary); color: #fff;
}
.demo-step-next:hover { opacity: 0.85; }

(function() {
  let current = 2;
  const total = 3;
  const items = document.querySelectorAll('.demo-step-item');
  const lines = document.querySelectorAll('.demo-step-line');
  const panels = document.querySelectorAll('.demo-stepper-panel');
  const prev = document.getElementById('demoStepPrev');
  const next = document.getElementById('demoStepNext');
  function update() {
    items.forEach((item, i) => {
      const step = i + 1;
      item.classList.remove('active', 'completed');
      if (step < current) item.classList.add('completed');
      if (step === current) item.classList.add('active');
    });
    lines.forEach((line, i) => {
      line.classList.toggle('completed', i + 1 < current);
    });
    panels.forEach(p => {
      const s = parseInt(p.dataset.panel);
      p.style.display = s === current ? '' : 'none';
      p.classList.toggle('active', s === current);
    });
    prev.disabled = current === 1;
    next.textContent = current === total ? '完了' : '次へ →';
  }
  prev.addEventListener('click', () => { if (current > 1) { current--; update(); } });
  next.addEventListener('click', () => { if (current < total) { current++; update(); } });
  update();
})();

AIプロンプト

ステッパーUIをHTML/CSSで作ってください。マルチステップフォームの進行状況を丸い番号とラインで表示します。

以下の仕様でステッパーを実装してください。
- 3ステップ構成（入力→確認→完了）
- 進行中・完了・未完了の3状態を視覚的に区別
- ステップ間の接続ラインに進行アニメーション
- プライマリカラー: #2563eb
- 前へ/次へボタンでステップ移動
- 各ステップにバリデーション機能

アクセシビリティ対応のステッパーを実装してください。
- aria-current="step" で現在のステップを通知
- 各ステップの完了状態をaria-labelで伝達
- キーボードのみで全操作可能
- プログレスバーのaria-valuenow/aria-valuemax
- prefers-reduced-motion対応
- バリデーションエラー時のフォーカス管理とaria-invalid
- ステップ間の状態永続化（localStorageバックアップ）
- 非線形ナビゲーション（完了済みステップへの直接移動）

← カタログに戻る