EFO（入力フォーム最適化）とは？フォーム離脱率をさげる20のコツを公開

フォーム離脱率をさげる20のコツ

それでは、フォーム離脱率を下げるための20のコツを紹介します。「入力をしやすくする」「エラーメッセージや画面遷移をわかりやすく」「スマホユーザーへの配慮は必須」「ページから離脱させない工夫をする」の４つの分野に分けて紹介します。

入力をしやすくする

コツ1：項目の数は必要最小限にする

ユーザーに求める情報は必要最小限に留めましょう。余計な項目はユーザーにとって負担となり、フォームの離脱率を高めてしまいます。

設置しているフォームの各項目が「その時点で本当に必要か」を再度検討してみてください。例えば、ニュースレターの登録フォームでは配信に必要なメールアドレスだけを登録してもらいます。名前や年齢などの情報は後から必要に応じて取得しましょう。

コツ2：必須項目をわかりやすく表示する

必須項目であることを明確に表示することで、ユーザーが何を入力すべきか理解しやすくなります。「※必須」と赤文字および太字で表示しましょう。また、必須の入力欄のみ色を変えておく方法もあります。

コツ3：ラベルをわかりやすく表示する

項目のラベルは具体的に表示しましょう。「ご連絡先」というラベルは、それが電話番号なのか、メールアドレスなのか、それだけで判断することができません。具体的に「電話番号（携帯）」などの記載をしましょう。

コツ4：入力例を表示する

入力例を表示することで、ユーザーは何をどのように入力すべきかを具体的に理解することができます。

例えば、電話番号の入力でハイフンが必要な場合は「例：03-1234-5678」と入力例を示します。

コツ5：入力欄を分割しない

入力欄は一つの項目につき一つにするようにします。分割することでユーザーの入力の負担が増え、面倒だと感じさせてしまいます。顧客データベースなどのシステム的に分割が必要な場合は、受け取った後で分割するよう対処しましょう。

コツ6：入力の労力を減らす技術を活用する

入力の労力を減らすために、オートコンプリートや郵便番号による自動入力を実装するなどの手段があります。全角と半角の自動変換や、不要なスペースの自動削除も効果的です。

例えば、ユーソナーにはメールで使用している署名をコピペするだけで、名前やメールアドレス、企業名、部署などの情報を自動でフォーム入力欄に入力してくれる「かんたん登録」機能があります。

エラーメッセージや画面遷移をわかりやすく

コツ7：エラーメッセージはリアルタイムで表示する

エラーがある場合、該当の項目を入力した直後にエラーを知らせるようにします。すべて入力し終わって送信ボタンを押してからエラーを知らせる方法は、ユーザーのスムーズな行動を妨げ、離脱率を上げてしまいます。

文字の入力形式や文字数を入力完了時点（次の項目に移る際）でチェックし、その場でアラートを表示しましょう。

コツ8：エラーになっていることをわかりやすく表示する

エラーメッセージは具体的に、ユーザーがどの項目で何を間違えているのかを理解できるように表示します。

エラーのテキストは「入力が間違っています」などの曖昧なものにせず、「電話番号は半角数字のみで入力してください」など、具体的なメッセージにしましょう。また、文字色や背景色は目立つデザインにして強調しましょう。

コツ9：送信ボタンは目立つようにする

送信ボタンは、ユーザーが一目でわかるよう、目立つ色や大きさに設定することが重要です。

コツ10：送信ボタンのテキストを具体的にする

"送信"ではなく、"登録する"、"申し込む"など、具体的なアクションを示すテキストに変更することで、ユーザーの行動を促します。

例えば、ニュースレターの登録の場合、「今すぐニュースレターを受け取る」など具体的なアクションを示す表現にします。

コツ11：リセットボタンは配置しない

送信ボタンの横にリセットボタンを配置すると、誤操作の原因となります。リセットボタンは配置しないようにしましょう。

コツ12：確認ページは表示しない

確認ページも離脱の原因となります。後から何らかの方法で情報を修正できる内容のフォームの場合、確認ページは必須ではありません。なるべく設置しないようにしましょう。

コツ13：分割フォームでは進行状況を表示する

1ページの入力項目を減らして、複数ページに渡って入力させる「分割フォーム（ステップフォーム）」を使用する場合は、進行状況を表示します。ユーザーに進捗を理解してもらうことで、途中離脱を防ぎます。

フォームの上部や下部にプログレスバーを表示し、ユーザーが現在どのステップにいて、全体の何%を完了したかを示すことが有効です。

スマホユーザーへの配慮は必須

コツ14：フォームのラベルは上に配置する

スマートフォンでは、フォームのラベルは入力欄の上に配置するのが一般的です。スマートフォンの画面サイズの制約に加えて、ユーザーの視線を縦方向にそろえて入力しやすくする、という側面があります。

コツ15：入力モードを切り替える

ユーザーが入力しやすいように、数字の入力では数字キーパッドを、メールアドレスの入力ではメール入力キーボードを表示するなど、入力モードの自動切替を実装しましょう。

例えば、電話番号の入力欄の場合、数字、ハイフン、シャープなどの記号のみが表示されるテンキーモードを表示するよう設定します。

コツ16：ボタンも入力欄も大きくする

スマートフォンでの操作性を考慮し、ボタンや入力欄は十分に大きくするべきです。ボタンや入力欄が小さすぎると、誤操作の原因となります。

コツ17：入力欄の余白は十分にとる

指で操作するスマートフォンでは、間違った操作を防ぐためにも、各入力欄の間隔は十分に取りましょう。

ページから離脱させない工夫をする

コツ18：離脱ユーザーにメッセージを表示する

ユーザーが離脱しようとする際に、メッセージを表示し、行動を再考させることも一つの方法です。ページを離れるタイミングで「本当にこのページを離れますか？」などのダイアログを表示します。

これにより、ユーザーが意図しない操作でページから離脱してしまいそうになったときにも、入力画面に戻ることができます。

コツ19：送信のメリットや必要性をアピールする

フォームページ内に、「フォームを送信するとどのようなメリットを得られるか」を書いておくことで、フォームの入力と送信を促します。

また、お問い合わせフォームでは、具体的にどのようなお問い合わせがあるか、具体例を記載しておくと、お問い合わせのハードルを下げ、必要性を感じさせることができます。

コツ20：不要な情報や遷移を表示しない

フォームページはウェブサイト内のゴールとなるページです。ユーザーがフォームの入力に集中できるよう、余計な情報や画面遷移はなるべく排除します。

他ページへのリンクやメニューがあるヘッダー、フッター、サイドバーは非表示にするなどの工夫で、ユーザーの離脱を防ぎましょう。

EFOに関する基本的な考え方と、フォーム離脱率を下げるための20の具体的なコツを紹介しました。

「入力しやすく」「エラーをわかりやすく」「スマホで使いやすく」など、フォームを入力する側に立ってみれば当たり前に感じることでも、自社のウェブサイトとなると見逃していることが多いものです。ユーザー体験を理解し、最も使いやすいフォームを設計してフォームの離脱率を下げ、訪問者との接点を増やしていきましょう。