ステップウィザード
会員登録、申込、初期設定などを複数ステップに分けて入力します。
ステップウィザードは、入力項目が多い登録や申込を「基本情報」「詳細条件」「確認」のような段階に分け、利用者が今どこまで進んでいるかを見ながら入力できるUIです。Roundtableでは、何を1ステップにまとめるか、前後移動で入力値を保持するか、どの段階で必須チェックするかを先に決めておくと、実装者と発注者の認識を合わせやすくなります。
この機能でできること
長い入力フォームを複数の段階に分け、利用者が少しずつ入力、確認、送信できるようにします。途中の入力値を保持しながら前のステップへ戻したり、ステップごとに必須チェックを行ったり、最後に確認画面を挟んでから登録できます。
入力量が多い手続きを、迷いにくい流れに分ける部品です。
1画面にすべての入力欄を並べるよりも、利用者が次に何を入力すればよいかを把握しやすくなります。
よくある利用場面
公開申込フォーム
会社情報、希望内容、請求先、確認のように、入力内容を段階的に集めます。
会員登録・初期設定
アカウント情報、プロフィール、通知設定、利用開始確認を順番に進めます。
管理側の設定作成
基本設定、権限、表示項目、通知条件など、初回設定で迷いやすい項目を整理します。
プロンプト例
「申込フォームを3ステップに分けたい」のように、ステップ名、各ステップの入力項目、戻る操作、確認画面、保存タイミングをセットで伝えます。
プロンプト
導入申込フォームをステップウィザードにしてください。ステップは「会社情報」「申込内容」「確認」の3つです。会社情報では会社名と担当者、申込内容ではプランと開始希望日を入力し、最後の確認ステップで入力内容を確認して送信できるようにしてください。戻る操作でも入力済みの値は保持してください。
この機能を使うときのポイント
ステップ構成基本情報、詳細条件、確認のように、利用者が入力目的を理解しやすい単位で分けます。
入力値の保持次へ進む、戻る、エラーで再表示する場合に、入力済みの値を失わないようにします。
チェックのタイミング各ステップで必要な項目だけ確認するか、最後にまとめて確認するかを決めます。
途中保存長い申込や管理設定では、下書き保存や再開導線が必要かを確認します。
この機能を実装するときのコツ
公開ページで使う場合は、ページ内の見た目だけで切り替えるよりも、現在ステップと入力値をサーバー側へ送り、フォーム部分だけを再描画する構成にすると検証しやすくなります。管理側では、既存の画面遷移や保存処理と合わせて、ステップごとの権限、エラー表示、スマホ表示、二重送信防止を確認します。