【2024年版UI/UX】入力フォームのデザインでCVRを高める改善ルール15選！徹底図解 

Webサイトの中で、入力フォームはユーザーとの接点を考える上で非常に重要な要素です。デザインやUI/UXを改善することで、コンバージョンを飛躍的に高めたり、意図しないユーザーの離脱を防ぐ効果もあります。

「入力がしずらい」「項目がわかりずらい」などの問題点を行動経済学の視点で洗練することで、スムーズな入力ができるお問い合わせフォームやお申し込みフォームを実現するためのコツやルールを図解でまとめました。

ユーザビリティを高めるユーザー視点で改善や検討を行う

フォームを設置する際は、ユーザーの入力時のストレスを最小限にする工夫が必要です。「何を入力すればいいのすぐにわかる」「入力がどれくらいで終わりそうか予想が立つ」など、ユーザーの検討度合いによってできるだけフォームの入力完了率が変わらないようなスムーズな設計が求められます。

WebサイトのコンテンツやECサイトの商品をどれだけ充実させても、最終的にユーザーが入力を完了しなければ結果がでないことも少なくありません。

資料請求や新規会員登録、お申し込みフォームなどでユーザー獲得の機会を1%改善するだけでも、全体としてはコンバージョン数が大きく伸びることもあるため、最低限のユーザービリティを意識した設計が重要です。

1. 入力項目を最低限に絞る

入力項目が多いと、フォーム入力完了までの時間と労力がユーザーにとって心理的な負担になってしまいます。銀行口座開設や新規登録で長すぎるフォームだったがために見た時に諦めてしまったり、途中で辞めてしまった経験がある方も多いのではないでしょうか。

企業側としては、より細かくたくさんの情報を顧客から集めた方がマーケティングに活用しやすい反面、送ってもらえない方が結果的に悪手となるため、まずは簡潔に入力完了してもらえることを優先することをお勧めします。

例えば、会社名を入力させる際は、住所はこちらで調べられる可能性も高いので省いたり、任意の項目を無駄に増やさないなども一つの手法です。

2. 設問項目は自然な順番にする

入力フォームの順序がユーザーにとって違和感なく論理的かを意識した並びにしましょう。一般的なフォームでは、「名前」「ふりがな」「会社名」「電話番号」などの順番が多いですが、これを「電話番号」から始めたりすると、見慣れない順番にユーザーが戸惑い入力をためらうことも予想されます。

また、「従業員数」などを入力させる場合は「会社名」の後など関連する箇所にきっちり挿入することが重要です。

3. 入力欄と項目名は縦に配置する

入力フォームが横に並んでいると、視線の移動が多くなるためユーザーにとってストレスになり理解度が下がる傾向にあります。フォームは基本的には垂直方向の縦に配置することが望ましいとされています。

また、項目名も左に配置するよりもすぐ上に置く方が視線やカーソルの移動が少ないのでお勧めです。入力欄の数が多い場合はできるだけ短く見せるために横に置く場合もあります。

4. プレースホルダーは入力例やヒントを入れる

入力欄には、入力例や文字列をあらかじめ表示できるプレースホルダー機能があります。ここに項目名と同じラベルを入れているフォームも散見されますが、具体的な入力例を入れることで注意書きや補足情報の代わりとして使うこともできます。

注意書きが多いと余分なスペースを使ってしまうことにもつながるので、簡潔に何を入力すればいいのか伝える手段として有用に使いましょう。

5. プルダウンを活用する

プルダウン型のフォームでは、クリックするすることで複数の選択肢をリストとして表示させることができる機能です。都道府県の選択や、日時の選択など、数に上限があり選択肢がそこそこ多い場合はスッキリと簡潔に見せることができるのでプルダウンを活用すると良いでしょう。

ただし、プルダウンで選択する数が4個程度までのものであれば、クリックする回数がより少なくて済むチェックボックスやラジオボタンでも選択肢表示の方がスムーズに入力を完了させることができる部分にも注意しましょう。

6. 必須項目と任意項目を明確にする

お申し込みフォームやお問い合わせフォームには、時に全員が該当しない項目として任意の入力欄を設けることがあります。その場合に、入力が必須な項目と任意の項目をぱっと見でわかるようにラベルをつけてあげることも重要です。

「*」マークなどで必須項目を表現している場合もありますが、小さすぎる目印は見落としの原因にもなるため可能な限り赤字等で明示しておくことがお勧めです。

7. 入力欄のサイズを適切にする

回答欄の幅について、デザイン上全て揃えたくなってしまう気持ちもわかりますが、画面いっぱいの横長の入力欄に2〜3桁の数字を入力させたりすると何を入力する場所なのかユーザーが混乱してしまうこともあります。

郵便番号やクレジットカード番号など、桁数が決まっているものは、適切に文字数に対する違和感がないサイズの入力欄を設けてあげましょう。

8. 英字のラベルは大文字＋小文字にする

デザイン上ラベルを英字にする場合には、全て大文字表記にするのは避けましょう。全て大文字で通称として使われるような固有名詞以外は、頭文字のみ大文字にした方が読みやすさが担保されます。意味を理解するまでの微妙なタイムロスが時に大きな機会損失に繋がります。

9. フィールドフォーカス機能をONにする

フィールドフォーカス機能は、入力中の項目に色をつけたり枠線をつけたり強調する際に使える機能です。今どこを入力しているのかわかりやすくなるため、ユーザーが入力箇所を見失ったりどこまで入力を完了しているのか思考するストレスが軽減できます。

先頭からスムーズに入力できるよう、ページに訪れた際、一つ目の項目は自動でフォーカスするような工夫を施しても良いでしょう。

10. OKとエラーを近くに表示する

入力済みの入力欄で、問題ない場合は色を変えたりチェックマークを置くことでユーザーのストレスを軽減できます。また、エラーがある場合は何のミスがあるのかを明示した上で、項目のすぐ近くに配置しましょう。

入力途中でのリアルタイムエラー表示は、ユーザーのストレスになる場合もあるので、項目によってエラー表示をリアルタイムにするのかフォーカスが外れた際にするのかは検討する余地があります。

11. オートコンプリート機能をONにする

オートコンプリート機能では、入力候補を予測して表示することができます。入力履歴や他の情報を使って候補を表示できるため、メールアドレスや住所の入力に活用することで手入力の負担を軽減することができ、離脱を防ぐことができます。

12. 余計なリンクは設置しない

情報の補足のため、他ページへのリンクを設置したい場合もあると思いますが、確実に必要なプライバシーポリシー等を除き極力余計なリンクは設置しないようにしましょう。

リンクを設置してクリックされてしまうと、そのまま離脱してしまう可能性が高まるため、どうしても情報を補足したい場合はポップアップなど別の手段を検討する必要があります。

13. ヘルプテキストは常に表示する

プレースホルダーなどで説明しきれない入力に対するヘルプテキストは、アイコンクリック時に表示するよりは常時表示しておく方が手間が少ないのでおすすめです。上述の通り、項目が多くフォームが極端に長い場合を除きます。

14. アクションボタンのテキストは明確にする

フォームの入力が完了して送信する際のボタンは、色を目立つように設置した上でアクションを明示しましょう。「送信する」ではなく「確認画面へ進む」「会員登録する」など何が起こるのかがわかるように意識したマイクロコピーを設置するとユーザーがアクションを躊躇わずに行えます。

15. スマホ用にフォームは最適化する

スマートフォンで入力するユーザーも増えているため、画面サイズが小さいことを考慮してラベルや入力欄を少し大きめにしたり、ハイフンなどの記号入力を減らすなど最適化する工夫を検討しましょう。

ユーザー視点の完了しやすいフォームデザインを意識する

入力フォームは小さな改善で大きな効果が見込める数少ないコンテンツです。コンテンツの拡充などに目が行きがちですが、お問い合わせページやLPのコンバージョンフォームはユーザー獲得にとって大きなインパクトをもたらすので、チャンスを最大化するためにも細やかな配慮を心がけたフォームを設計しましょう。

自分でコーディングしてフォームを作成するのが難しい場合は、「formrum」や「HubSpot」といったコーディング不要で細やかなカスタマイズができるフォームを簡単に作れるサービスもあるので、活用してみてはいかがでしょうか。

フォーム作成ツール「formrun」

コーディング無しでデザイン性の高いフォームを作成･運用可能「HubSpot」