みなさんのサイトにお問い合わせフォームはございますでしょうか？
問い合わせ以外にも、会員登録、採用エントリー等、ユーザーからのアクションを求めるフォームはほとんどのサイトで実装されています。
サイトの成果につながる大変重要な役割を果たすフォーム、実は49％、約半分の方が途中で離脱しているのをご存知ですか？
今回は、ダメなフォームの事例と改善ポイントをご紹介いたします！
■目次
１）こんなフォームはダメ！ 気をつけるべき8つのポイント
２）離脱を防ぐ解決策5つ！
３）まとめ
１）こんなフォームはダメ！ 気をつけるべき8のポイント
1.必須入力項目が多い
情報収集をする自社の視点でフォームをつくってしまうと、つい必須項目を多く設定しがちになります。
一方で入力する側の視点にたつと、入力作業において、必須項目が多いと面倒くさい、難しい等ストレスを感じ、よほどのモチベーションがないと完了する前に離脱してしまいます。
フォームをつくる上で、必須項目は最小限になるように心がけましょう。
2.入力条件が細かい
情報を入力する上で、「郵便番号は半角数字で」や「ふりがなは半角カタカナで」等、入力の条件を細かく指定している場合があります。
受け口の情報統一性を考えすぎてあまりにも細かな条件設定をしてしまうと、こちらもユーザーのストレスになり、離脱する可能性を高めてしまうので、気をつけましょう。
入力の半角・全角等はシステム側で自動で揃うようにしておき、ユーザーの手間をとらせないようにしましょう。
3.入力が終わるまで、入力間違いに気づけない
フォームに入力すべき項目をすべて入力し、「送信」ボタンを押すと、そこで初めて赤字で入力ミスのアラートが出る。
また、そのアラート文言が分かりにくい…
やっとの思いで入力が終わったユーザーからすると、「何が間違っているの？」とストレスを覚え、完了間近での離脱を発生させる原因となります。
4.スマートフォンに最適化がされていない
スマートフォンでのインターネット利用が一般的になり、問い合わせや資料請求をスマートフォンから行う人も増えています。
パソコンでの閲覧しか考えられていないサイトだと、文字が小さく、入力もしづらい等、かなり不便です。
最終成果を出すために重要な役割を担うフォームのスマートフォン最適化は必須条件となります。
5.分割されている入力欄が多い
郵便番号や電話番号等、入力欄が細かく分割されていると、その入力欄に移動するという手間が発生します。
こちらもユーザーにとって入力時のストレスとなるので、できるだけ入力欄を分割することは避けましょう。
6.入力項目がざっくりしている
入力項目が多すぎるのもダメですが、一方で、具体的な問い合わせ内容（採用応募や見積依頼等）が必要な場合は、欲しい情報を明確にすることが重要です。
「お問い合わせ内容」等、あまりにもざっくりしたフリー入力項目しか設置していないと、反対に何を入力したらよいか分からず、足踏みしてしまう原因となります。
それぞれ、問い合わせ機能の特性に合わせて、最適な入力項目を熟考しましょう。
7.離脱アラートがない
入力途中で、間違って「×」マークや「戻る」ボタンを押してしまうことがあります。
その際に、何もアラートを出さず操作をさせてしまうと、せっかく入力してくれていた人を逃すきっかけになってしまいます。
離脱の際に必ずアラートが出るように設定をしましょう。
8.住所やフリガナ等、入力補助がない
住所をすべて入力しないといけない…それだけで気が重くなります。
郵便番号での検索やフリガナの自動補助等、ユーザーの負担を減らすアシストは最大限考えてつくりましょう。
２）離脱を防ぐ解決策5つ！
1.必須入力項目をできるだけ絞る＋残り○項目表記
必須項目をできるだけ絞り、且つ、入力最中に終わりが見えるフォームにしましょう。
そうすることで、完了までの道筋が見えるため離脱を防ぐことができます。
2.リアルタイムエラー＋「送信」ボタン後のアラートは間違った項目だけを表示
入力に不備が合った場合、都度エラー内容を表示させる機能を設けましょう。
また、そのエラー文言はできるだけ具体的なフィードバック内容にしましょう。
（例：メールアドレス入力欄で、「＠マークが含まれていません。」等。）
また、リアルタイムエラーに気づかず、「送信」ボタンを押してしまった方へは、
間違った項目だけを表示し、修正をうながしましょう。
3.数字のみ入力
スマートフォンの利用率が高い今、表示をスマートフォン最適化にすることは必須ですが、
それ以外にも電話番号等、入力させる項目が数字と決まっている場合は、該当する入力欄を選択した際に、ユーザー側で何も設定しなくても数字版のキーパッドを表示させるように設定しておきましょう。
4.離脱アラートを実装
「×」マークや「戻る」ボタンを押した際に、「このサイトを離れますか？」とアラートを出してください。
間違って押した場合は、せっかく入力した情報を無くさずに済みますし、途中であきらめて離脱しようとしている人にも思いとどまってもらうきっかけにもなります。
5.入力補助機能の実装
入力時の離脱を防ぐために補助機能として実装できることはたくさんあります。
いくつか下記にてご紹介いたします。
・住所が自動的に入力される
郵便番号入力時に、郵便番号から導き出された住所が自動的に入力されるように設定しましょう。
・フリガナが自動的に入力される
「名前」を入力している際に、同時に「フリガナ」欄に文字が入力されるように設定しましょう。
・生年月日の初期値がターゲット層の平均年齢で指定されている。
プルダウンで生年（西暦）を選んで頂く際は、フォームを入力しているだろうターゲット層の平均年齢から割り出した生年を初期値として設定しておきましょう。
・メールアドレスのサジェスト機能がある。
メールアドレスを入力する際、＠以降に「g」と入力するだけで、gmail.comを候補として表示させます。
上記同様に、主要アドレスは1文字目を起点に候補を表示させるようにしましょう。（yahoo.co.jp、docomo.ne.jp、ezweb.ne.jp等。）
３）まとめ
会員登録や見積依頼、採用応募、商品問い合わせ等、フォームはWebサイトの最終成果に繋がる大変重要な機能となっています。
上記でご紹介した「気をつけるべき8つ」と「離脱を防ぐ解決策5つ」をもとに、実際ご自身のサイトが問題ないか確認いただき、少しでも多くの成果を生み出すサイトにしていきましょう。
また解決策の具体的な実施方法等が分からない等お困りのことございましたら、是非ブリッジにご相談ください。
以下は弊社の制作実績になります。ご参考になれば幸いです。
■株式会社クリエイト様 お問い合わせフォーム
https://www.cr-net.co.jp/inquiry/
リアルタイムバリデーション、入力補助機能
■日米英語学院様 学校説明会・体験レッスン
https://www.nichibeieigo.jp/trial/
リアルタイムバリデーション、離脱アラート、入力補助機能
■ブリッジコーポレーション メルマガ登録フォーム
https://web.bridge-net.jp/mailmagazine/
項目数の最小化
