フォームの項目数が多いほど離脱率は上がる。実案件での改善事例をもとに、UXと情報収集のバランス設計を解説します。
こんな悩み、ありませんか？
サイトへのアクセスはそれなりにあるのに、問い合わせフォームからの送信数がなぜか伸びない——そんな状況に心当たりはないでしょうか。
GA4でファネルを確認すると、フォームページへの到達数は悪くないのに、送信完了まで至るユーザーが極端に少ない。「ページが悪いのか」「オファーが弱いのか」とあちこちを見直すうちに、意外な犯人が見つかることがあります。それが入力欄の多さです。
私たちFivenine Designが関わった案件でも、同じ課題に直面したことが何度かあります。フォームに12項目並べていたBtoB企業の事例では、フォームページのセッションのうち完了まで至ったのはわずか**8%**でした。一見「情報を多く集めたい」という営業サイドの要望は正当に見えますが、ユーザー側の心理的負荷との間には大きなギャップがある。本記事では、その実案件を軸に、フォーム設計の「削る技術」を具体的に解説します。
あわせて読みたい
なぜ入力欄が多いと離脱するのか
ユーザーがフォームを前にして感じる心理的負荷は、**「労力コスト」と「信頼コスト」**の2種類に分けられます。
労力コストは単純です。入力欄が多ければ多いほど、手間がかかる。スマートフォンのフリック入力で「部署名」「役職」「FAX番号」まで要求されたら、多くの人は途中で閉じます。特にモバイルユーザーが過半数を占める現代では、一つひとつの入力欄が離脱リスクを積み上げていきます。
信頼コストはより深刻です。「なぜここまで個人情報が必要？」という疑問が頭をよぎった瞬間、ユーザーの手は止まります。「電話番号必須」「生年月日」「会社の従業員数」などの項目は、送信後に営業電話がかかってくるイメージを想起させ、フォームへの不信感につながります。
実際のデータを見ても、この傾向は明確です。
このデータが示すように、10項目以上のフォームでは完了率が一桁台に落ち込むケースも珍しくありません。逆に3項目以下に絞り込むと、50%を超える完了率を達成できる可能性があります。
実案件：12項目から5項目へ削減した改善の記録
神奈川県内の製造業BtoB企業からご依頼を受けたリニューアル案件での話です。既存サイトの問い合わせフォームには以下の12項目が並んでいました。
- 氏名（必須）
- 氏名（フリガナ）（必須）
- 会社名（必須）
- 部署名
- 役職
- 電話番号（必須）
- FAX番号
- メールアドレス（必須）
- 郵便番号
- 住所
- 従業員数
- お問い合わせ内容（必須）
営業担当者からは「名刺1枚分の情報がないと対応できない」という声がありました。気持ちはわかります。ただ、フォームの完了率8%という数字は、営業が受け取っているリード数の問題ではなく、土台となるフォーム設計の問題だと判断しました。
削減の判断フロー
flowchart TD
A[全12項目を洗い出す] --> B{初回問い合わせに必須か？}
B -->|Yes| C[残す]
B -->|No| D{返信時に確認できるか？}
D -->|Yes| E[削除]
D -->|No| F{任意項目に変更可能か？}
F -->|Yes| G[任意に変更]
F -->|No| Cこのフローに従って各項目を精査した結果、必須項目は以下の5つに絞られました。
- 氏名（必須）
- 会社名（必須）
- メールアドレス（必須）
- 電話番号（任意に変更）
- お問い合わせ内容（必須）
フリガナ・部署名・役職・FAX・住所・郵便番号・従業員数はすべて削除または初回連絡後に確認する運用に切り替えました。
実装例：バリデーション設計（Laravel）
項目を減らすと同時に、残した項目のバリデーションを明確に定義することで、受信側の品質も担保しました。
// app/Http/Requests/ContactRequest.php
public function rules(): array
{
return [
'name' => ['required', 'string', 'max:50'],
'company' => ['required', 'string', 'max:100'],
'email' => ['required', 'email:rfc,dns', 'max:255'],
'phone' => ['nullable', 'regex:/^[0-9\-\+]{10,15}$/'],
'message' => ['required', 'string', 'min:10', 'max:2000'],
];
}
public function messages(): array
{
return [
'name.required' => 'お名前は必須です',
'email.email' => '正しいメールアドレスを入力してください',
'phone.regex' => '電話番号は数字とハイフンで入力してください',
'message.min' => 'お問い合わせ内容は10文字以上で入力してください',
];
}
電話番号をnullableにすることで任意化しつつ、入力された場合のフォーマットチェックは維持しています。この設計が重要で、「任意にしたら変なデータが来た」という事態を防げます。
フロントエンド側のリアルタイムバリデーション
フォーム送信後にエラーメッセージが出る体験はユーザーにとってストレスです。入力中にリアルタイムでフィードバックを返すことで離脱をさらに抑制できます。
// resources/js/contact-form.js
const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', () => {
const value = emailInput.value.trim();
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
const errorEl = document.getElementById('email-error');
if (!isValid && value !== '') {
errorEl.textContent = '正しいメールアドレスを入力してください';
emailInput.classList.add('border-red-500');
} else {
errorEl.textContent = '';
emailInput.classList.remove('border-red-500');
}
});
blurイベント（フォーカスが外れたタイミング）でバリデーションを走らせることで、入力中の干渉を避けつつ適切なタイミングでフィードバックを返せます。
改善結果
リリースから4週間後の計測で、フォーム完了率は**8% → 31%**に改善。問い合わせ件数は月平均4件から17件へと増加しました。営業担当者も「件数が増えた分、初回メールで会社規模を聞く手間が増えたが、それは全然問題ない」と納得されていました。
よくある失敗パターンと対処法
失敗① 「とりあえず任意にすれば良い」という発想
必須を任意に変えるだけで項目数は変わらない設計をよく見かけます。視覚的なボリュームはそのままなので、ユーザーの心理的負荷はほぼ変わりません。削る勇気が必要です。本当に初回問い合わせ時に必要な情報か、一度ゼロベースで見直してください。
失敗② スパム対策でreCAPTCHAを前面に出しすぎる
reCAPTCHA v2の「ロボットではありません」チェックボックスは、正直なところUXを著しく損ないます。画像認証が連続して出てきた瞬間に離脱するユーザーは少なくありません。代わりにreCAPTCHA v3（バックグラウンドで動作）やHoneypot方式を採用することをお勧めします。
<!-- Honeypot方式：ボットのみ入力する隠しフィールド -->
<input
type="text"
name="_honeypot"
style="display:none;"
tabindex="-1"
autocomplete="off"
/>
サーバー側でこのフィールドに値が入っていた場合はスパムとして弾く処理を加えるだけで、大半の単純なボット送信を防げます。
失敗③ 削減後の運用フローを整備しない
フォームを削減した後、「情報が足りなくて営業が困る」という事態になるケースがあります。これはフォーム設計の問題ではなく、初回返信テンプレートの問題です。フォーム改善と同時に、初回返信メールで追加情報を自然に収集できるテンプレートを用意することがセットで必要です。
Web制作・UI改善もお任せください
フロントエンド開発
モダンな技術で、使いやすく美しいWebサイトを実現します
※ 通常1営業日以内にご返信します
まとめと次のステップ
フォームの完了率改善は、デザインのリニューアルや広告費の増額より、はるかにコストパフォーマンスの高い施策です。今あるフォームを見直すだけで、同じ集客数から得られるリード数が2〜4倍になる可能性があります。
まず自社のフォームを開いて、「この項目、初回問い合わせに本当に必要か？」と一項目ずつ問い直してみてください。おそらく半分以上は「なくても問題ない」と気づくはずです。
フォームの設計変更やLaravelでの実装に不安がある場合は、私たちFivenine Designにご相談ください。既存サイトの分析から改善提案、実装まで一貫してサポートしています。
