UI Component Labナビゲーション
Stepper ステップナビゲーション
申請など複数画面にまたがる手続きの段階と、今どの段階にいるかを示す部品。
デモ
- 申請者情報
- 住所
- 書類
- 確認
ステップ 1/4: 申請者情報
別名
- Progress indicator — Carbon Design System
- Steps — Ant Design
- ステップナビゲーション — デジタル庁デザインシステム
見分けるポイント
番号の付いた丸が横（または縦）に並び、それぞれに名前が付く。終わった段階にはチェックが付き、現在の段階は強調される。
バリエーション
- 縦並び
- 段階を縦に並べたもの。名前が長いときや、幅の狭い画面に向く。
- 段階へ移動できるもの
- 終わった段階をリンクやボタンにして、戻れるようにしたもの。
挙動
- 「次へ」などのボタンで手続きを進めると、表示が切り替わる。
- このデモでは段階の表示そのものは操作できない。現在の段階には aria-current="step" を付け、終わった段階には読み上げ用の「完了」を添えている。
キーボード操作
| キー | 動作 |
|---|---|
| — | 段階の表示にはない。デモの「戻る」「次へ」は Tab と Enter / Space で操作する。 |
使い分け・注意点
- 作業を意味のまとまりで段階に分け、始める前に手続きの全体が分かるようにする。
- 各段階の状態（完了・現在・スキップ・エラー）を表示する。
- 読み込み待ちのような一時的な状態にはプログレスインジケーターを、順番に並んだページの行き来にはページネーションを使う。
似た部品との違い
- タブ: ステップナビゲーションの段階は決まった順に進め、タブはどの順番でも開ける。
- プログレスバー: ステップナビゲーションは複数画面の手続きの中での現在地を示し、プログレスバーは1つの作業の進み具合を示す。
- ページネーション: ステップナビゲーションは内容の異なる手順を示し、ページネーションは同じ種類の内容のページを行き来する。
- 数値入力（スピンボタン）: Apple の「Stepper」は数値入力の − / + の部品で、段階の表示ではない。
出典
- Carbon Design System: Progress indicator (最終確認日: )
- Ant Design: Steps (最終確認日: )
- デジタル庁デザインシステムウェブサイト「ステップナビゲーション」をもとに作成 (最終確認日: )