Component Gallery

Screen Pattern

入力ウィザード画面（Form Wizard Screen）UIの作り方

入力ウィザード画面は、長いフォームを複数ステップに分け、進捗と保存状態を示しながら完了へ導く画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

入力ウィザード画面は、長いフォームを複数ステップに分け、進捗と保存状態を示しながら完了へ導く画面です。

自前ワイヤーフレーム

入力ウィザード画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・申込フォームを段階化する
  • ・本人確認や住所入力を分ける
  • ・途中保存を扱う

レイアウトの考え方

  • ・ステップごとの目的を明確にする
  • ・戻る操作で入力を保持する
  • ・最後に確認画面を置く

アクセシビリティ

  • ・現在ステップをテキストで示す
  • ・エラー箇所へ移動できるようにする
  • ・必須項目をラベルで伝える

よくある失敗

  • ・進捗が分からない
  • ・戻ると入力が消える
  • ・最終確認なしで送信される

構成コンポーネント

ステッパー（Stepper）ステッパー（Stepper）は、複数ステップの手順や進捗を視覚的に示すナビゲーションコンポーネント。申請フォームのウィザードUI・購入フローなどで使われる。テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。プログレスバー（Progress Bar）プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。

AI実装プロンプト

入力ウィザード画面実装

入力ウィザード画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

入力ウィザード画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、stepper、input、selectなどの構成要素を優先度順に配置します。

入力ウィザード画面でよくある失敗は何ですか？

進捗が分からない

入力ウィザード画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。