【すてっぱー】
ステッパー（ウィザード） とは？
💡 「あと何歩？」が見えるから、長い道のりも最後まで歩ける
📌 このページのポイント
ひよこ ステッパーって、あの「ステップ1→ステップ2→完了」みたいな表示のこと？
ペンギン先生 そうだよ！ネットショッピングの注文画面で「お届け先→支払い→確認→完了」みたいに、今どこにいるか丸や線で示してくれるやつだね
ひよこ なんで一画面にまとめないの？
ペンギン先生 入力項目が20個もある画面を見たら、それだけで離脱したくなるでしょ？ステッパーで5項目×4ステップに分けると、心理的なハードルがグッと下がるんだよ
ひよこ 「ウィザード」とは違うの？
ペンギン先生 ほぼ同じ意味だよ。ウィザードは「魔法使いが手取り足取り案内する」イメージの古い呼び方で、最近は「ステッパー」のほうがUI用語として主流だね
ひよこ 実装するときに気をつけることってある？
ペンギン先生 「戻る」ボタンを必ず用意して、前のステップの入力内容を保持することが大事だよ。あとステップ数は3〜5が理想的で、7以上になると「まだ終わらないの？」ってストレスになるんだ。もし多くなりそうなら、ステップの中にサブステップを作るより、入力項目自体を減らすことを検討したほうがいいよ
まとめ：ざっくりこれだけ覚えればOK！
「ステッパー」って出てきたら「手順の進捗を示すステップ表示UI」と思えればだいたいOK！
📖 おまけ：英語の意味
「Stepper / Wizard」 ＝ 段階を踏むもの / 魔法使い
💬 Stepperは「ステップを踏む人」、Wizardは「魔法使いのようにユーザーを導く」という意味から来ているんだよ