やってみよう「次へ」と「戻る」を押してみてください
ナビゲーションメジャー（よく見る）
ステップインジケーター
Step Indicator / Progress Stepper
「カート → お届け先 → 支払い → 確認」のように、手続きの今どこにいるかを丸と線で示す。
別名ステップバー進捗ステップウィザードフローの進み具合Stepper（手順）
どこで使われている？
- よく見かける場所
- ネット通販の購入手続き、会員登録、オンライン申し込み
- 使うとよい場面
- 3〜5段階の手続きで、あとどれくらいかを示したいとき
- 避けたい場面
- 1画面で終わる短いフォーム
補足Material Design や Flutter で「Stepper」と言うと、こちらのことを指します。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ステップインジケーター（Step Indicator / Progress Stepper）」を実装してください。 動き：手続きの各段階を番号付きの丸で横に並べ、線でつなぐ。終わった段階は ✓ と色付きの線、今の段階は強調、まだの段階は灰色にする。「次へ」で進むと線が伸びて次の丸に色が付く。 使う部品：Step Indicator（<ol> で自作）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Step Indicator（<ol> で自作） |
|---|---|
| iPhoneアプリなら | 標準部品なし。自作 |
| Androidアプリなら | 標準部品なし。自作 |
| Flutterなら | Stepper |
| React Nativeなら | react-native-step-indicator |