【すてっぱー】
ステッパー（手順の進捗表示） とは？
最終更新:
💡 いま何歩目？ 手順の現在位置とゴールが見える
複数の手順で現在位置や完了状況を示すUI。ウィザードとの違い、入力を戻して修正する設計、色以外でも状態を伝える工夫を説明します。
📌 このページのポイント
- 複数の手順の現在位置や完了状況を表示する
- 入力を段階的に案内するウィザードで使われることがある
- 戻って修正するときにも、入力内容を保つ設計が大切
- 現在・完了・未完了は、色だけでなく文字などでも伝える
ひよこ 通販で「配送→支払い→確認」と並んでいる表示のこと？
ペンギン先生 そうだよ。いくつの手順があり、今どこにいるかを示すのがステッパー。終わった手順や、まだ進んでいない手順が分かる表示にもできるんだ。
ひよこ ウィザードと同じもの？
ペンギン先生 ウィザードは、入力や操作を段階的に案内する仕組みだよ。その進み具合をステッパーで表示することがある。案内する流れと、進捗の表示を分けて考えると分かりやすいんだ。
ひよこ 手順を細かく分けるほど、使いやすくなる？
ペンギン先生 細かさだけでは決まらないよ。関連する入力をまとまりにして、手順数と現在位置を伝えよう。任意の手順はそう分かるようにし、戻って修正しても入力内容が失われないようにするんだ。
ひよこ いまの手順を青にすれば、十分？
ペンギン先生 色だけに頼らず、「現在」「完了」などの文字や記号も使おう。読み上げでも現在位置を伝える設計が必要だよ。表示を置くだけで離脱が必ず減るわけではなく、実際の入力や戻る操作も確かめよう。
まとめ：ざっくりこれだけ覚えればOK！
「ステッパー」って出てきたら「手順のどこまで進んだかを示す表示」と思えばだいたいOK！
📖 おまけ：英語の意味
「Stepper」 ＝ 段階を示すUI
💬 Stepは段階や手順のことです。ウィザードは一連の操作を段階的に案内する仕組みで、進捗を示すステッパーとは役割が異なります。