🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

ステップナビゲーション（インジケーター）

複数段階のUIでユーザーを分かりやすく導きます。

👀 ライブデモ（矢印タイプ）

① 入力
② 確認
③ 完了

🧩 発展形デモ（ステップ連動型フォーム）

お問い合わせフォーム

1
2
3
4

📋 関連コード

ステップナビゲーション（矢印）のHTML

<div class="step-nav">
  <div class="step completed">① 入力</div>
  <div class="step current">② 確認</div>
  <div class="step">③ 完了</div>
</div>

ステップインジケーター（ドット）のHTML

<div class="step-indicator-dots">
  <div class="step-circle completed">1</div>
  <div class="step-circle active">2</div>
  <div class="step-circle">3</div>
</div>

📌 ステップナビゲーションで現在位置を矢印表示

このデモでは、ユーザーが現在どのステップにいるかを「↑↑↑↑↑↑」と英語テキストで明示的に表示します。フォームの入力〜送信完了など、複数段階のUIに便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .step-nav {
      display: flex;
      justify-content: space-around;
      font-weight: bold;
      margin: 2rem 0;
      position: relative;
    }
    .step {
      color: gray;
      position: relative;
    }
    .step.current {
      color: #007bff;
    }
    .step.current::after {
  content: "　↑↑↑↑↑↑\A　 　今ここ";
  white-space: pre;
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #007bff;
  pointer-events: none;
}
    .step.completed {
      color: green;
    }
    .step.completed::before {
      content: "✔ ";
      color: green;
    }
  </style>
</head>
<body>
  <div class="step-nav">
    <div class="step current">① 入力</div>
    <div class="step">② 確認</div>
    <div class="step">③ 完了</div>
  </div>
  <br><br>
  <div style="text-align: center;">
    <button onclick="nextStep()">次へ ▶</button>
  </div>
  <script>
    function nextStep() {
      const steps = document.querySelectorAll(".step-nav .step");
      const current = document.querySelector(".step.current");
      if (!current) return;
      current.classList.remove("current");
      current.classList.add("completed");
      const next = current.nextElementSibling;
      if (next) {
        next.classList.add("current");
      }
    }
  </script>
</body>
</html>

📘 このテンプレの用途・メリット

  • ステップ形式のUIで進行状況が一目瞭然
  • ユーザーが「今どこにいるか」を直感的に把握できる
  • フォーム・購入フロー・アンケートなどに最適
  • 矢印や色変化でUX向上
  • JavaScriptでステップ制御も可能（拡張性あり）

🧩 ステップUIの発展：状態管理やブロック制御との連携

このテンプレートでは、ステップの進行状況をビジュアルで明確化することで、ユーザーの迷いを防ぎ、フォームや購入フローの途中離脱を減らす効果があります。

さらに発展的な使い方としては、ステップごとの内容をブロック表示・非表示で切り替える形式が挙げられます。JavaScriptの `display: none` などと組み合わせることで、今いるステップの入力フォームだけを表示し、次に進んだときに内容が切り替わるようなUXも実現可能です。

たとえば、

  • 入力ステップ：フォーム入力欄を表示
  • 確認ステップ：入力内容の確認画面を表示
  • 完了ステップ：完了メッセージを表示

このようにステップと中身を同期させることで、よりダイナミックで直感的なUIに発展させることができます。

また、VueやReactなどのフレームワークとの連携を考慮すれば、ステート管理によりステップごとのバリデーションや戻る処理なども制御しやすくなり、実践的なSPA（シングルページアプリ）の構築にも応用可能です。

下記のようなお問い合わせフォームも作れます

お問い合わせフォーム

1
2
3

基本情報



  <div class="unique-step-form-container" style="font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; background: #fafafa;">
    <h2 style="text-align: center; color: #333; margin-bottom: 25px;">お問い合わせフォーム</h2>
    
    <div class="unique-step-indicator" style="display: flex; justify-content: center; margin-bottom: 25px;">
        <div class="unique-step-circle active" data-unique-step="1" style="width: 30px; height: 30px; border-radius: 50%; background-color: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; margin: 0 10px;">1</div>
        <div class="unique-step-circle" data-unique-step="2" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">2</div>
        <div class="unique-step-circle" data-unique-step="3" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">3</div>
    </div>
    
    <div class="unique-step-container" style="position: relative; min-height: 300px;">
        <!-- ステップ1: 基本情報 -->
        <div class="unique-step active" id="unique-step1" style="display: block; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; animation: uniqueFadeIn 0.5s;">
            <h3 style="margin-top: 0; color: #444;">基本情報</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-name" style="display: block; margin-bottom: 5px; font-weight: bold;">氏名</label>
                <input type="text" id="unique-name" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-email" style="display: block; margin-bottom: 5px; font-weight: bold;">メールアドレス</label>
                <input type="email" id="unique-email" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button disabled class="unique-btn-prev" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0; color: #999;">戻る</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(1)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">次へ</button>
            </div>
        </div>
        
        <!-- ステップ2: 詳細情報 -->
        <div class="unique-step" id="unique-step2" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">詳細情報</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-subject" style="display: block; margin-bottom: 5px; font-weight: bold;">件名</label>
                <input type="text" id="unique-subject" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-message" style="display: block; margin-bottom: 5px; font-weight: bold;">メッセージ</label>
                <textarea id="unique-message" rows="5" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">戻る</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">次へ</button>
            </div>
        </div>
        
        <!-- ステップ3: 確認 -->
        <div class="unique-step" id="unique-step3" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">確認</h3>
            <div id="unique-confirmation-content" style="margin-bottom: 20px;">
                <!-- 確認内容がここに動的に表示されます -->
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(3)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">戻る</button>
                <button class="unique-btn-next" onclick="uniqueSubmitForm()" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">送信</button>
            </div>
        </div>
        
        <!-- ステップ4: 完了 -->
        <div class="unique-step" id="unique-step4" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; text-align: center;">
            <h3 style="margin-top: 0; color: #444;">送信完了</h3>
            <p style="color: #4CAF50; font-weight: bold;">お問い合わせありがとうございます</p>
            <p>3営業日以内にご返信いたします</p>
        </div>
    </div>
</div>

<script>
// スコープを定義
(function() {
  let uniqueCurrentStep = 1;
  const uniqueTotalSteps = 4;

  window.uniqueNextStep = function(step) {
    if (step === 1) {
      const name = document.getElementById('unique-name').value;
      const email = document.getElementById('unique-email').value;
      if (!name || !email) {
        alert('必須項目を入力してください');
        return;
      }
    } else if (step === 2) {
      const subject = document.getElementById('unique-subject').value;
      const message = document.getElementById('unique-message').value;
      if (!subject || !message) {
        alert('必須項目を入力してください');
        return;
      }
    }

    if (step === 2) {
      uniqueUpdateConfirmation();
    }

    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step+1}`).style.display = 'block';
    document.getElementById(`unique-step${step+1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.color = 'white';

    uniqueCurrentStep = step + 1;
  };

  window.uniquePrevStep = function(step) {
    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step-1}`).style.display = 'block';
    document.getElementById(`unique-step${step-1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.color = 'white';

    uniqueCurrentStep = step - 1;
  };

  function uniqueUpdateConfirmation() {
    const name = document.getElementById('unique-name').value;
    const email = document.getElementById('unique-email').value;
    const subject = document.getElementById('unique-subject').value;
    const message = document.getElementById('unique-message').value;

    const content = `
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">基本情報</h4>
        <p style="margin: 5px 0;"><strong>氏名:</strong> ${name}</p>
        <p style="margin: 5px 0;"><strong>メールアドレス:</strong> ${email}</p>
      </div>
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">詳細情報</h4>
        <p style="margin: 5px 0;"><strong>件名:</strong> ${subject}</p>
        <p style="margin: 5px 0 10px;"><strong>メッセージ:</strong></p>
        <div style="background:#fff; padding:10px; border:1px solid #eee; border-radius:4px; margin-bottom: 15px;">${message.replace(/\n/g, '<br>')}</div>
      </div>
      <p style="margin-top:20px; color:#666; font-size: 0.9em;">内容を確認の上、送信ボタンをクリックしてください</p>
    `;

    document.getElementById('unique-confirmation-content').innerHTML = content;
  }

  window.uniqueSubmitForm = function() {
    document.getElementById('unique-step3').style.display = 'none';
    document.getElementById('unique-step4').style.display = 'block';
    document.getElementById('unique-step4').style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="3"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.color = 'white';

    uniqueCurrentStep = 4;
  };

  const style = document.createElement('style');
  style.textContent = '@keyframes uniqueFadeIn {from { opacity: 0; } to { opacity: 1; }}';
  document.head.appendChild(style);
})();
</script>
</section>