UIUX

KNOWLEDGE

入力フォームの離脱率を改善するデザインの工夫|商談化まで見た設計

  • #UIUX
  • #WEB制作

SHARE

問い合わせフォームの改善というと、まず「入力項目を減らす」という話になります。実際に項目を減らせばコンバージョン数は増えます。しかし、それだけを進めると別の問題が起こります。電話がつながらない、要件が分からない、商談に至らないリードが増えるという現象です。

フォーム改善の目的はCV数を増やすことではなく、商談化する問い合わせを増やすことです。この前提を置くと、削ってよい項目と削ってはいけない項目が分かれます。

この記事では、フォームの離脱を3つの段階に分解して原因を特定する方法、項目の要否を判定する基準、スマートフォンでの入力設計、そして改善の効果を商談化まで含めて測る方法を解説します。

この記事でわかること

・フォームの離脱を「到達前・入力中・送信時」の3段階に分けて原因を特定する方法

・入力項目の要否を判定する基準と、削ってはいけない項目

・スマートフォンでの入力負荷を下げる実装(autocomplete・inputmodeなど)

・エラー表示の設計原則

・改善効果をCV数ではなく商談化数で評価する考え方

・各段階を計測するためのGTM設定の考え方

結論:離脱は3段階に分けて原因を特定する

「フォームで離脱している」とひとまとめにすると、打ち手が決まりません。次の3段階に分けると、それぞれ別の対策になります。

段階 起きていること 主な原因 対策の方向
到達前の離脱 フォームまで来ない、または見て入力を始めない 項目数が視覚的に多い、入力の所要時間が想像できない、直前の情報が不足 所要時間の明示、項目の折りたたみ、直前に不安を解消する情報を置く
入力中の離脱 入力を開始したが完了しない 項目が多い、入力しづらい、必須と任意が分かりにくい、住所の手入力 項目削減、autocomplete対応、郵便番号からの住所補完
送信時の離脱 送信ボタンを押したが完了しない エラーで戻される、入力内容が消える、送信できない エラー表示の改善、入力値の保持、実機での送信テスト

3段階目の「送信時の離脱」は、最も損失が大きく、最も見落とされます。入力を最後まで終えた人が失われるためです。実機での送信テストを一度も行っていないフォームは珍しくありません。

離脱は「到達前」「入力中」「送信時」で原因が違います。まずどこで落ちているかを特定してください。

特に送信時のエラーは、最も意欲の高い人を失っています。

どこで落ちているかを計測する

感覚で改善せず、段階ごとの数値を取ります。GTMで次のイベントを設定すれば、コードを書かずに把握できます。

計測するもの GTMでの設定 分かること
フォーム到達 ページビュー、または要素の表示トリガー フォームまで来た人数
入力開始 最初の入力欄のフォーカス、またはGA4のform_start 見て離脱した人の割合
エラー発生 エラーメッセージ要素の表示トリガー どの項目でつまずいているか
送信完了 サンクスページのページビュー、または完了メッセージの表示 最終的な完了率

「到達 → 入力開始 → 送信完了」の3つの数字が取れれば、どの段階に問題があるかは一目で分かります。GA4の拡張計測機能にもフォーム操作の自動収集がありますが、JavaScriptで制御されたフォームや外部サービスの埋め込みでは発火しないことがあるため、GTMで明示的に設定するほうが確実です。設定手順はGA4×GTM計測設定ガイドで解説しています。

入力項目の要否を判定する

項目削減は最も効果が大きい施策ですが、闇雲に減らすと後工程が困ります。判定基準は1つです。

「初回の対応(折り返し・見積・日程調整)に、その情報が必要か」

必要でないものは、後の会話で聞けます。この基準で仕分けると次のようになります。

項目 店舗ビジネス BtoBサービス 判断の理由
氏名 必須 必須 折り返しの呼びかけに必要
電話番号 必須 推奨 店舗はここが最速の連絡経路
メールアドレス 推奨 必須 BtoBは記録が残る経路が前提
会社名 不要 必須 BtoBは対応可否と担当割り当てに使う
住所 不要(訪問業種は必須) 不要 訪問見積が必要な業種のみ
希望日時 推奨 不要 予約型は初回対応が短縮される
問い合わせ内容(自由記述) 推奨(任意) 推奨(任意) 必須にすると離脱するが、あると初回対応の質が上がる
予算・時期 不要 条件付き 必須にすると離脱する。任意項目にとどめる
性別・年齢 不要 不要 初回対応に不要。マーケ用の情報は後で取る

削減の議論で対立が起きやすいのは営業部門との間です。「情報が少ないと対応できない」という主張は正当ですが、項目を1つ増やすことで失われる問い合わせ数と、その情報があることで上がる対応効率を、数字で比較してください。A/Bテストができない規模なら、1か月ごとに項目を変えて完了率と商談化率を記録する方法でも判断できます。

入力中の負荷を下げる実装

スマートフォンでの入力を前提にする

問い合わせの多くはスマートフォンから発生します。次の実装は、デザインを変えずに完了率を改善します。

実装 効果
autocomplete属性の指定(name、tel、emailなど) ブラウザの自動入力が働き、手入力が減る
inputmodeの指定(電話番号ならtel、数値ならnumeric 適切なキーボードが表示され、入力の手間が減る
郵便番号からの住所自動補完 住所の手入力という最大の負荷を削減できる
ラベルを入力欄の上に配置 プレースホルダーだけの設計は、入力を始めると項目名が消える
タップ領域の確保 入力欄とボタンの高さを十分に取り、誤タップを防ぐ
不要な全角・半角の指定を外す 「半角で入力してください」で弾かれる設計は離脱の原因になる

必須と任意を明示する

必須項目にのみ「必須」ラベルを付け、任意項目には何も付けない設計が一般的ですが、任意が多いフォームでは「任意」を明示したほうが心理的負荷が下がります。どちらの方式でも構いませんが、1つのフォーム内で表記を混在させないでください

進捗を見せる

項目が多くならざるを得ない場合は、ステップ形式にして進捗を示す方法があります。ただし、ステップ化は総項目数を減らすわけではないため、まず削減を検討し、それでも減らせない場合の手段と位置づけてください。

エラー表示の設計

送信時の離脱の大半は、エラー処理の設計で防げます。

原則 悪い例 良い例
エラーは該当項目のすぐ近くに出す ページ上部にまとめて表示し、どこが問題か分からない 入力欄の直下に、該当項目のエラーを表示
何が問題かを具体的に書く 「入力内容に誤りがあります」 「電話番号はハイフンなしの半角数字で入力してください」
入力済みの内容を消さない エラーで全項目が空になる 入力値を保持したまま該当箇所のみ指摘
入力中に検証する 送信後にまとめてエラーを返す 入力欄を離れた時点で形式を確認する
送信ボタンを押せる状態にする 必須が埋まるまでボタンを無効化し、理由が分からない 押せる状態にして、押したときに不足箇所を示す

最後の項目は意見が分かれますが、ボタンを無効化する設計は「なぜ押せないのか」が伝わらず、離脱の原因になります。押せる状態にして、押したときに不足箇所へスクロールさせるほうが、利用者は次に何をすべきか分かります。

送信テストを必ず実施する

公開前と、公開後の定期確認として、次を実機で確認してください。

  • スマートフォン(iOS・Android)から実際に送信できるか
  • 自動返信メールが届くか。迷惑メールに振り分けられていないか
  • 管理者宛の通知が届くか。宛先が退職者のアドレスになっていないか
  • サンクスページに遷移するか。コンバージョン計測が発火するか
  • 入力途中でブラウザバックしたときの挙動

フォーム送信が壊れているのに数か月気づかない、というのは実際に起こります。月1回、自分で送信してみる運用を決めておくと、機会損失を防げます。サーバー移設やプラグイン更新の直後は特に確認してください。

効果はCV数ではなく商談化数で測る

フォーム改善の評価指標を整理します。

指標 見るタイミング 注意点
フォーム到達数 毎月 流入側の変化と切り分ける
入力開始率 毎月 到達したうち何割が入力を始めたか
送信完了率 毎月 入力開始したうち何割が完了したか
項目別のエラー発生率 改善時 どの項目でつまずいているか
商談化率/来店率 四半期 最終的な判断はこの指標で行う
1商談あたりのコスト 四半期 広告費 ÷ 商談数。CV単価ではなく商談単価で見る

項目を削って送信完了率が20%上がっても、商談化率が半分になれば事業としてはマイナスです。逆に、項目を1つ増やして完了率が少し下がっても、初回対応の精度が上がって商談化率が改善するなら、その変更は正解です。

フォームはCVを作る装置ではなく、商談の入口です。評価軸を完了率だけに置かないでください。

よくある失敗

失敗1:項目を減らしすぎて連絡がつかない

メールアドレスのみにすると、返信率の低さから接触できないケースが増えます。店舗ビジネスでは電話番号、BtoBでは会社名を残すほうが、結果的に商談数は増えます。

失敗2:確認画面を挟むかどうかだけを議論する

確認画面の有無より、エラー処理と項目数のほうが影響が大きい項目です。確認画面をなくすかどうかは、優先順位としては後になります。

失敗3:フォーム単体で改善しようとする

フォームに到達する前の情報が不足していると、そもそも入力が始まりません。料金の目安、対応エリア、対応の流れが直前に書かれているかを確認してください。ファーストビューの設計についてもファーストビュー設計の重要性で解説しています。

失敗4:計測せずに改善を繰り返す

どの段階で落ちているか分からないまま変更すると、良くなったか悪くなったかも判断できません。改善の前に計測を入れてください。

よくある質問

Q. 入力項目は何個までにすべきですか?

固定の正解はありません。判断基準は「初回対応に必要か」です。店舗ビジネスなら氏名・電話番号・希望日時の3項目でも成立し、BtoBなら会社名・氏名・メールアドレス・問い合わせ内容の4項目が実務的な下限になります。数を目標にせず、各項目の必要性を1つずつ判断してください。

Q. 確認画面はあったほうがよいですか?

影響は限定的です。確認画面をなくせば工程は1つ減りますが、入力ミスの発見機会も減ります。それよりエラー処理と項目数の改善を優先してください。どうしても判断したい場合は、送信完了率と、その後の連絡到達率(電話やメールがつながった率)を比較します。

Q. EFOツールは導入すべきですか?

入力補助やリアルタイム検証を手早く実装できる利点はありますが、月額費用が発生します。まずautocomplete属性の指定、郵便番号からの住所補完、エラー表示の改善といった、追加費用なしでできる対応を済ませてください。それでも入力中の離脱が大きいなら、導入を検討する順序が合理的です。

Q. 自由記述欄は必須にすべきですか?

任意にしてください。必須にすると離脱しますが、任意で置いておくと一定数が記入します。記入された内容は初回対応の精度を大きく上げるため、欄自体は残す価値があります。

Q. どのくらいで効果が判断できますか?

月のフォーム到達数が少ない場合、単月では判断できません。到達数が月100件に満たないなら、2〜3か月分をまとめて比較してください。あわせて、明らかな不具合(送信エラー、通知が届かない)は数値を待たずに直します。

まとめ

フォーム改善は、離脱を「到達前」「入力中」「送信時」の3段階に分けることから始めます。どの段階で落ちているかを計測せずに項目を削っても、良くなったかどうかを判断できません。

項目の要否は「初回対応に必要か」で判定します。店舗ビジネスなら電話番号、BtoBなら会社名は残してください。これらを削ると完了率は上がりますが、連絡がつかない、対応できないという形で後工程に問題が移るだけです。

入力中の負荷は、autocomplete属性の指定、inputmodeの指定、郵便番号からの住所補完といった実装で下げられます。デザインを変えずに実施でき、費用もかかりません。そして送信テストは、公開前だけでなく月1回の運用として組み込んでください。

最終的な評価はCV数ではなく商談化数で行います。フォームはCVを作る装置ではなく、商談の入口です。

「問い合わせは増えたが商談につながらない」「どの項目で離脱しているか分からない」「フォームが正しく動いているか不安がある」といった状態にある場合は、フォーム単体ではなく、直前のページ・計測設定・初回対応の体制まで含めて確認する必要があります。

当社の資料では、CVR改善の進め方、計測環境の整え方、LP・サイトの導線設計をまとめています。自社の課題を整理したい方は、ぜひ資料をダウンロードしてご活用ください。

SHARE