離脱が多い入力フォームを改善するための見直し方
「広告経由のアクセスは増えているのに、申込数が伸びない」——原因を追っていくと、フォームの手前で離脱しているケースが少なくありません。ランディングページや導線設計は褒められるのに、最後の入力フォームで半分近くが離脱している、という状態です。
フォームは「作って終わり」になりやすい画面です。一度リリースされると仕様変更の優先度が下がり、項目追加は繰り返されても削除はされない。エラーメッセージが不親切なまま放置される。そうして数年かけて、気づかぬうちに離脱率の高いフォームに育っていきます。この記事では、離脱の原因の切り分け方と、作り直す前にできる改善の進め方を整理します。
離脱が起きる典型的な原因
フォーム離脱の原因は一つではなく、複数が重なっていることがほとんどです。まず典型パターンを知っておくと、自社のフォームがどれに当てはまるか当たりがつきます。
- 入力項目が多すぎる: 「念のため」で増えた任意項目、社内の管理都合で必須にしている項目(部署名・従業員数など)が、本来のCVに不要な負荷をかけている
- エラー表示が不親切: 送信ボタンを押すまでエラーに気づけない、エラーメッセージが「入力内容に誤りがあります」としか言わず何が悪いか分からない、エラー箇所までスクロールしない
- 入力しづらいUI: 電話番号・郵便番号のハイフン有無で弾かれる、日付をカレンダーUIでしか選べない、プレースホルダーだけでラベルが無く何を入れる欄か分かりにくい
- 進捗が見えない: 複数ページに分かれているのに「あと何ステップ」が示されない。ユーザーは終わりが見えない作業に耐性が低い
- モバイル最適化されていない: PC前提のレイアウトのまま、スマホでは入力欄が小さい・キーボードの種類(数字/メール)が最適化されていない・誤タップしやすい
- バリデーションのタイミングが悪い: 1文字入力するたびにエラーが出る(過敏すぎる)、逆に送信するまで一切チェックされない(遅すぎる)の両極端
これらは個別に直すより、まず「自社のフォームがどれに当てはまるか」を計測で特定するのが先です。感覚で「項目を減らそう」と手を付けると、実際の離脱要因を外してしまうことがあります。
どこで離脱しているかを計測する
改善の前に、離脱が起きている箇所を数値で特定します。
- フォーム到達率とフォーム完了率を分けて見る: ページ全体の離脱率だけでは「フォームに来る前」と「フォームの中」の問題が混ざってしまう。まずフォームページへの到達数と、送信完了数を分けて追う
- 項目別の離脱位置を計測する: GA4のフォームインタラクションイベントや、Hotjar・Microsoft Clarityのようなセッション録画・ヒートマップツールで、どの入力欄でユーザーが止まっているかを見る。特定の1〜2項目に離脱が集中していることが多い
- エラー発生率をログで見る: バリデーションエラーが発生した項目・エラー内容を送信前にログとして残せているか。無ければ、まずこのログを取れるようにするのが最初の改修になる
- デバイス別に完了率を比較する: モバイルとPCで完了率に大きな差があれば、モバイルUIの問題である可能性が高い
- 入力開始から送信までの所要時間を見る: 極端に時間がかかっている場合、項目の多さや入力しづらさが疑われる
この計測を1〜2週間行うだけで、「どの項目で」「どのデバイスで」「どのタイミングで」離脱しているかが見えてきます。ここを飛ばしていきなり項目を減らしたりUIを変えたりすると、当たっていない改善に工数を使うことになります。
改善の優先順位
計測で見えた課題を、効果とリスクのバランスで順に着手します。
1. 不要な項目の削除(効果が大きく低リスク)
CVに直接使わない、あるいは後から個別にヒアリングできる項目は削除候補です。「念のため」で残っている項目ほど、実は誰も見ていないことが多いので、まず社内で「この項目、本当に今使っているか」を確認します。削除は実装コストも低く、即座に効果が出やすい施策です。
2. エラー表示の改善(即効性が高い)
入力欄からフォーカスが外れたタイミングでリアルタイムにエラーを表示し、何が問題かを具体的に伝える(「メールアドレスの形式が正しくありません」など)。エラー箇所へ自動スクロールするだけでも、送信ボタンを何度も押して諦めるユーザーを減らせます。
3. 入力補助の追加(中コストで効果が出やすい)
郵便番号からの住所自動入力、電話番号のハイフン自動整形、選択式にできる項目のプルダウン/ラジオボタン化。ユーザーが「何を入力すればいいか迷う」時間を減らします。
4. モバイルUIの最適化(計測で差が出ていれば優先度を上げる)
入力欄のタップ領域拡大、type="tel" type="email" などのinputmode指定によるキーボード最適化、フォントサイズの見直し。モバイル完了率がPCより明確に低い場合、この施策の投資対効果は高くなります。
5. 進捗表示・ステップ分割の見直し(設計変更を伴うため計画的に)
複数ページのフォームに進捗バーを追加する、逆に1ページに情報が多すぎる場合はステップ分割を検討する。どちらが正解かはフォームの性質(項目数・入力の複雑さ)によるため、A/Bテストで検証しながら進めるのが安全です。ここは他の施策と違い設計変更を伴うので、既存の送信処理・バリデーションロジックを壊さないよう段階的に手を入れます。
いきなりフォームを作り直さないのが原則です。項目削除やエラー表示改善だけで離脱率が大きく改善するケースは多く、まずは低リスクな施策から着手して効果を計測し、それでも足りない場合に設計レベルの見直しに進む、という順番を守ることで、開発コストと改善効果のバランスを取れます。
外注する場合の進め方
自社にフロントエンドの改修リソースが無い、あるいはあっても他の開発に手一杯という場合、外部への改善依頼は現実的な選択です。
進め方としては、まず計測環境(GA4のイベント設計、セッション録画ツールの導入)を整えるところから始め、1〜2週間のデータを見て離脱ポイントと原因の仮説を立てます。その上で、優先順位の高い施策から着手し、リリース後に完了率の変化を追う、というサイクルを回します。フォームは一度直して終わりではなく、項目の見直しや訴求文言の変更を継続的に行う対象と捉えるのが実務的です。
なお、フォーム単体だけでなく、モバイル利用者の比率が高いプロダクトではモバイル利用時の使いやすさそのものに課題があるケースもあります。フォームの離脱率だけを追っていても改善が頭打ちになる場合は、モバイルUI全体の見直しも合わせて検討する価値があります。
まとめ
- フォーム離脱の原因は項目過多・エラー表示の不親切さ・モバイル非対応など複数あり、まず計測(項目別の離脱位置・デバイス別完了率・エラー発生率)で自社の課題を特定することが先決
- 改善は「不要な項目の削除」「エラー表示の改善」など低リスクで即効性のある施策から着手し、進捗表示やステップ分割のような設計変更は効果を検証しながら段階的に進める
- いきなりフォームを作り直すのではなく、既存フォームの計測と部分的な改修から始めることで、開発コストを抑えながら着実にCVRを改善できる
torcheees では、既存プロダクトのフォームやCV導線を対象にした開発診断、継続的な改善が必要な場合は継続的な改善支援を提供しています。まずは現状のフォームの離脱状況を一緒に確認するところから始められます。既存プロダクトの改善全般については既存プロダクトの改善、外部チームが最初に見る観点もあわせてご覧ください。お問い合わせフォームからお気軽にご相談ください。