入力ステップを分割する見積フォームのUX設計

BtoBの見積フォームは、どうしても項目数が増えがちです。1ページにすべての項目を詰め込むと「入力の壁」が高くなり、離脱率が急激に上がります。そこで有効なのが、入力ステップを分割したマルチステップ型フォームです。

インテンスでも、機械設備・ITサービス・物流ソリューションなど、情報量の多い見積フォームでは、ステップ分割とUX設計をセットで行うケースが増えています。本記事では、その設計の考え方を整理します。

1. ステップ分割の基本方針

入力ステップを分割する際は、「ユーザーの頭の中の流れ」に合わせて区切ることが重要です。単純に項目数を均等に分けるだけでは、使いやすいフォームにはなりません。

1-1. 心理的なまとまりで区切る

• ステップ1：お問い合わせの目的・概要
• ステップ2：見積対象となる製品・サービス情報
• ステップ3：利用条件・数量・期間などの詳細
• ステップ4：会社情報・連絡先

このように、「何について相談したいのか」→「どの商品・サービスなのか」→「どのような条件なのか」→「誰が相談しているのか」という流れが自然です。

1-2. 必須情報と詳細情報を分離する

初期ステップでは「見積の可否判断に最低限必要な情報」に絞り、詳細な条件は後半のステップへ回すと、ユーザーの心理的負担を軽減できます。

2. ステップナビゲーションのUI

マルチステップ型フォームでは、「今どこにいるか」「あとどれくらいあるか」がわかるナビゲーションが不可欠です。

2-1. ステップインジケータ（進行バー）

• ステップ数が3〜5程度であれば、「1/4」「2/4」のような表示が有効
• ラベル付きステップ（例：基本情報 → 詳細条件 → 確認）で、内容のイメージを伝える

2-2. 戻るボタンと入力保持

「前のステップに戻る」操作が自然にでき、入力内容が保持されることは必須です。戻る操作で入力が消えると、そこで離脱が発生します。

3. バリデーションとエラー表示の設計

ステップ分割型フォームでは、バリデーションとエラー表示の設計も重要です。インテンスの案件でも、ここを誤ると「次へ進めないフォーム」になり、ユーザーのストレスが増えます。

3-1. ステップ単位のバリデーション

• 「次へ」ボタン押下時に、そのステップに関係する項目だけをチェック
• エラーがある項目の周辺に、具体的なメッセージを表示
• エラーが複数ある場合は、フォーム上部に「エラーがあります」の総括メッセージも出す

3-2. 確認画面をどうするか

ステップ数が多いフォームでは、「最終確認画面」を設けるかどうかも検討ポイントです。BtoBの見積フォームでは、入力内容を一覧で確認できる画面を挟むケースが多く、メール控えにも同じレイアウトを流用すると運用もシンプルになります。

4. 途中離脱に備えた運用設計

どれだけUXを工夫しても、ある程度の離脱は発生します。重要なのは、「どのステップで離脱しているか」を把握し、改善サイクルを回せる状態にすることです。

• ステップごとの離脱率を計測できるよう、イベント計測を設計する
• ステップ1での離脱が多い場合は、入力項目の削減やコピー改善を検討
• ステップ3以降での離脱が多い場合は、必須項目の見直しや補助説明の追加を検討

インテンスでは、解析ツールやタグマネージャを組み合わせて、「どのステップのどの項目で詰まりやすいか」を可視化することを推奨しています。

まとめ

見積フォームの入力ステップを分割することは、単に画面を分ける作業ではありません。ユーザーの思考の流れに沿ってステップを構成し、ナビゲーション・バリデーション・エラー表示・解析の仕組みまで含めて設計する必要があります。

インテンスでは、BtoBの見積フォームや要件ヒアリングフォームを多数設計してきた経験をもとに、ステップ設計とUI実装をセットで支援しています。複雑な見積依頼を扱う場合こそ、マルチステップ型のUX設計が効果を発揮します。