フォーム設計でやってはいけない10のこと

フォームはWebサイトの「最後の関門」。ここで離脱されると、それまでの努力が水の泡です。今回はTANTOMAが多くのサイトを見てきた中で頻出する「やってはいけないフォーム設計」を10個に整理しました。

1. 項目が多すぎる

10個以上の入力欄は離脱の温床。お問い合わせフォームなら会社名・氏名・メール・電話・ご相談内容の5個で十分。「住所」「業種」「ご予算」などは、必要なら2段階目で聞きます。

2. 必須マークの見えにくさ

※マーク、小さな赤い「*」、それも全項目同じトーンで—。視認性が悪いと、何が必須かわからず途中で離脱します。「必須」とテキストで明示+背景色付きバッジが最強。任意項目には「任意」と表示すると、なお親切。

3. プレースホルダーをラベル代わりに使う

入力欄にグレーで「お名前」と表示するパターン。入力し始めるとラベルが消え、「何の項目だったか」がわからなくなります。必ずラベルを上に固定表示。プレースホルダーは例文用(「山田太郎」など)に限定します。

4. エラーメッセージが不親切

「入力に誤りがあります」だけでは、どこが悪いかわからない。「メールアドレスの形式が正しくありません(例: name@example.com)」のように、具体的・建設的・例文付きで。送信ボタン押下時にまとめて表示するのではなく、入力欄から離れた時点(blur時)に個別表示するとUXが上がります。

5. 送信完了画面が淡白

「ありがとうございました」だけのページは寂しすぎ。1) 送信内容の確認、2) 折り返しの目安時間(24時間以内など)、3) 自動返信メールについての説明、4) 関連コンテンツへの導線を入れて、ユーザーの「次の不安」を解消します。

6. プライバシー同意の文言が長すぎる

規約全文をフォームの上に貼り付けるのは逆効果。3行程度の要点+詳細はリンクが適切。「ご入力いただいた情報はお問い合わせ対応のみに使用します。詳しくはプライバシーポリシーをご確認ください。」これくらいで十分。

7. 送信ボタンが目立たない

キャンセルボタンと同じ色・大きさで並べると、ユーザーが迷います。送信ボタンは明確に主役の色・大きさ・余白で、キャンセルはテキストリンク程度に弱めるのが鉄則。

8. モバイルでの入力性悪さ

スマホで入力するとき、入力欄が小さすぎる、間隔が狭すぎる、キーボードに被る—これらが離脱の原因。入力欄の高さは48px以上、入力欄間の余白16px以上。電話番号入力時は数字キーボード、メール入力時はメールキーボードを呼び出すよう、type属性を適切に設定。

9. CAPTCHAの過剰

「私はロボットではありません」の歪んだ文字認証はUXを著しく下げます。Google reCAPTCHA v3なら、ユーザーに見えない判定でスパムを防げます。Cloudflare Turnstileも軽量な選択肢。

10. 自動返信メールの不在

送信後に何のメールも届かないと、「ちゃんと送れたのかな?」と不安になります。送信から5分以内に自動返信メールを必ず設定。本文には「24時間以内に担当者から返信します」「不在の場合は迷惑メールフォルダもご確認ください」を明記。

まとめ

フォームの完了率は、Webサイトの売上に直結します。TANTOMAではフォーム単体の改善コンサルもお引き受けしています。