【EFO】離脱率を下げる！実装すべきフォーム機能10選【動画解説あり】

Webマーケティングにおいて、ユーザーにいかにコンバージョンしてもらうか、皆さん四苦八苦しているかと思います。

ユーザーはコンバージョンするために「フォーム」を通過する場合が多いですが、そのフォームでの平均離脱率をご存知でしょうか？
なんと69.82%と言われております。
※Baymard Institute社が2018年に行った調査
https://baymard.com/lists/cart-abandonment-rate

約7割のユーザーが、せっかくフォームまでたどり着いたのにも関わらず離脱してしまうのです。いくら魅力的な商材・サービスや、サイトを作ったとしてもフォームで多くのユーザーが離脱してしまいます。フォームは大きなボトルネックになりがちなのです。

しかし逆に考えてみると、このフォームの離脱率を改善できるとCVRが大きく向上することがお分かりいただけると思います。

今回の記事ではフォームにおいていかに離脱を防ぐか、いわゆるEFO（エントリーフォーム最適化）に必須の機能を10個ご紹介いたします。ぜひ本記事を参考に自社のフォームを見直してみてください。
また郵便番号の自動入力といったメジャーですでに多くのフォームで導入されている機能は今回は扱いません。こういう機能もあるのか、といったものを中心にまとめておりますのでぜひ参考にしてください。

動画でも解説しております。ご興味ある方は目次より記事の一番下からご覧ください。

• ①カラーリング
• ②ドメインサジェスト
• ③キーボード最適化
• ④フリガナ自動入力
• ⑤文字種自動変換
• ⑥ガイドメッセージ
• ⑦リアルタイムエラー
• ⑧残数項目表示
• ⑨離脱時確認ダイアログ
• ⑩送信ボタン制御
• まとめ
• 解説動画

1つ目はフォームの必須入力項目や入力中項目の背景を白ではなく薄い赤色などで色付けをする機能になります。
どの項目が必須で入力しなければならないのか、もしくは入力途中なのかをわかりやすくする狙いがあります。

些細な機能に感じられると思いますが、このような細かい入力支援機能を多数実装しておくことで、最終的なCVRが大きく変わります。

メールアドレスの入力欄にて、アドレスのドメインの頭文字を例えば「g」と入力した際にドメインのサジェストとして「gmail.com」や「goo.jp」などを表示する機能です。

ユーザーの入力の手間を軽減するのと、ドメインの入力間違いを防止する狙いがあります。メールアドレスを入力間違いをされてしまうとせっかくコンバージョンまで至ったにもかかわらず、連絡が繋がらず無駄になってしまいます。

フォームの入力欄は元から入力する文字種が決まっているものがあります。メールアドレスの入力欄では英字・数字・記号、電話番号の入力欄では数字などです。

PCではキーボードが物理的にあるので関係ありませんが、スマートフォンでは上記の入力欄の種類に応じて、表示するキーボードを変えるべきです。

SPでの打ち間違いや、ユーザーがわざわざ表示キーボードを切り替える手間がなくなります。ユーザーファーストの気持ちに立ち、ユーザーに優しいフォームを作ることが離脱率改善において重要なポイントです。

氏名のフリガナも入力が必要な場合、漢字用の氏名入力欄へ記入された際にフリガナ入力欄にも自動で記入されるべきです。

こちらもユーザーの手間を削減するための機能になります。
ちなみに営業の体制にもよりますが、フリガナ入力欄は必須でないのであれば、ユーザーの手間なのでそもそもフォームの項目から削除することが推奨です。

システムや集計上の都合で、全角英数字はエラーとなり半角英数字のみ受け付ける必要がある場合、全角で入力されたとしてもただエラーを表示するのではなく半角に自動変換するべきです。こちらはひらがな⇒カタカナなどでも同様です。

ユーザーの手間が減りますし、ユーザーに入力された情報のデータベース上での文字種も揃います。

入力欄をクリック・タップしたタイミングで、「半角で入力してください」などの注記を表示する機能です。ただ、こちらは実装すべきかはフォームや注記によってケースバイケースです。

「半角で入力してください」などの注記は最初から入力欄の下に表示されている方が基本的には望ましいです。しかし、そういった注記が今度は多くなりすぎると、フォーム全体に文字が多くなり雑多な印象を与えたり、気を付けるべきポイントが大量にあるように思われ入力にハードルを感じるようになってしまいます。
そういった際に入力欄選択時に注記を表示することでフォームをすっきりと見せることができます。フォームが雑多なデザインになっているのであれば検討しましょう。

入力欄に誤った形式で入力された際に、エラーメッセージを吹き出しの形ですぐに表示する機能です。
よく送信ボタンを押してからエラーメッセージが表示されるフォームがありますが、ユーザーにとっては二度手間になってしまうため、エラーがある際はすぐに表示することでスムーズに送信ボタンを押してもらえるようサポートしましょう。

エラーメッセージを出すタイミングとしては以下が考えられます。

必須入力項目の残りの数をフローティングバナーで表示する機能です。

ユーザーに必須項目を埋めていくモチベーションを持ってもらうのが狙いになります。他にも達成率・進捗率のような形の提示もおすすめです。
必須項目が20個など多い場合は、ユーザーに作業量が多いことが数で伝わってしまうため項目数が多い際は使用を避けた方が望ましいです。またそもそもフォームの項目数は必要最低限になるよう心掛けましょう。

フォームの入力途中にブラウザを閉じたり、ページを戻す操作をした際に、画像のようなダイアログを表示し入力途中の誤った離脱を防ぐ機能です。

フォーム入力中にページを離脱してしまうと、またいちから入力し直しになってしまうため、ユーザーにページから離れても問題ないかを確認するのが狙いです。

必須入力項目が全て入力されるまで、送信ボタンをクリックできない（押しても反応しない）ようにする機能です。

未入力の項目があることをわかりやすく明示することが狙いです。残数項目表示の実装が難しい場合はこちらを使用しても良いです。エラーはなるべく入力中に解決してもらい、スムーズに進んでもらうのが離脱防止において重要です。

ここまで10個のEFO機能をご紹介しました。

どれも些細な機能に感じられますが、これらを掛け合わせて複数実装しておくことで、フォームからの離脱そしてCVRが大きく改善します。しかし、これらの機能を1つずつ実装していくのは大変かと思います。

そこでおすすめなのが SiTest です。
SiTest には本記事でご紹介した機能が多数入っており、ご自身のフォームに SiTest のタグを1つ埋め込んでいただくだけで数々のEFO機能を実装可能です。SiTest のEFO機能を活用いただき、CVRが188.25%改善したお客様もいらっしゃいました。

いちからの実装には費用や時間がかかりますが、ツールを使えばそこをコストカットできます。SiTest はEFO機能だけでなく、ヒートマップやA/Bテストなどサイト改善に必要な機能がオールインワンになったツールになります。フォームと合わせてサイト全体を改善可能です。無料トライアルも可能ですので、お気軽にお問合せください。

無料トライアルのプランについてはこちら
https://sitest.jp/plan/

今回の内容、以下動画でも解説しております。ぜひご覧ください。