ステッパー・ウィザードUIパターン：複数ステップフォームのUX設計ガイド

ウィザード（ステッパー）は、複雑な入力プロセスを複数のステップに分割して提供するUIパターンです。チェックアウト・オンボーディング・保険申請・アカウント設定などで広く使われています。本記事では、ユーザーが離脱せずにステップを完了できるウィザードUIの設計原則を解説します。

ウィザードUIを使うべき場面

複雑なフォームの分割：

1ページに多数のフィールドを並べると認知負荷が高く、入力への心理的ハードルが増します。関連する情報をまとまりごとにステップに分割することで、1度に処理する情報量を減らします。

依存関係のある入力：

前のステップの回答によって次のステップの選択肢が変わるような条件分岐がある場合、ウィザード形式が最も自然に対処できます。

明確なゴール感：

「3ステップで完了」のような明確な終点の提示は、ユーザーに「あとどれくらいで終わるか」を伝え、離脱を防ぎます。

ステップインジケーターの設計

視覚的なステップ表示：

画面上部（または左サイドバー）にステップの全体像を表示します。完了・現在・未完了の3状態を明確に区別します：

• 完了: プライマリカラー + チェックマーク
• 現在: プライマリカラーのリング + ステップ番号
• 未完了: グレーのリング + ステップ番号

ステップ名の表示：

番号だけでなく「1. 個人情報」「2. 配送先」「3. 支払い」のようにステップ名を添えることで、全体の流れが理解しやすくなります。

プログレスバーとの組み合わせ：

ステップインジケーターの下に全体進捗を示すプログレスバーを併用すると、「ステップ2/4」という感覚が強まります。

ナビゲーション（次へ・戻る）の設計

「次へ」ボタン：

現在のステップの入力が完了し、バリデーションが通過した後のみ有効になります。フィールドが未入力・エラーがある場合は、ボタンをdisabledにするか、タップ時にエラーを表示します。

「戻る」ボタン：

前のステップに戻るボタンは、入力した内容を保持したまま前のステップを表示します。入力を消去してはなりません。「戻る」はプライマリより控えめなスタイル（テキストボタンまたはセカンダリ）にして、「次へ」より目立たないようにします。

「キャンセル」の扱い：

長いフォームの途中でのキャンセルは、「入力した内容は失われます。終了しますか？」という確認ダイアログを挟むことで、意図しない離脱を防ぎます。

入力値の保存と復元

ブラウザ/アプリのバックグラウンド対策：

ブラウザのタブを閉じた・アプリをバックグラウンドにした際も、入力途中の状態を localStorage・セッションストレージ・サーバーに保存しておき、次回アクセス時に「前回の続きから再開しますか？」を提示します。

自動保存（Draft）：

ステップ間の遷移時にサーバーに中間データを自動保存（Draft保存）することで、ブラウザクラッシュ・接続断からの回復を可能にします。

バリデーションのタイミング

各ステップのフィールドのバリデーションは、「次へ」ボタンを押したタイミングで行います（ステップ完了時の一括チェック）。ただしリアルタイムバリデーション（フォーカスを外したとき）と「次へ」押下時チェックを組み合わせるのが最もユーザーフレンドリーです。

完了ステップのデザイン

サクセスステート：

最後のステップで「確認」後に完了画面を表示します。達成感を演出するアニメーション（コンフェッティ・チェックマークアニメーション）と、「次に何をすべきか」の明確な誘導が重要です：

• 受付完了番号・参照ID
• 次のアクション（「マイページへ」「確認メールを確認する」）
• サマリー（送信した内容の概要）

まとめ

ウィザード・ステッパーUIは複雑なプロセスを「乗り越えられる段階」に分割することで、ユーザーの完了率を高めます。ステップインジケーター・入力値の保持・明確な進捗表示・完了時の達成感を設計することで、ユーザーが最後まで完了したくなるウィザードUIが完成します。UI ZUKANではウィザードUIの実装例を掲載しています。