UIデザインは、ユーザーがアプリやWebサイトをストレスなく利用するための設計です。
申し込みフォームの質は、UIデザインの質で大きく変化します。
ユーザーをフォーム入力完了へ導くには、ユーザビリティの考慮や入力フォームのデザインを工夫する取り組みが不可欠です。
本記事では、UIデザインに優れた申し込みフォームを作成するときに役立つ、21のポイントを解説します。
目次
なぜ申し込みフォームにUIデザインが重要なのか
UIデザインに優れた申し込みフォームとは、「ユーザーに親切なフォーム」のことです。
ユーザビリティに優れた入力フォームは「入力する項目が多い」「文字が小さくて見づらい」「なぜエラーになるのか分からない」など、ユーザーが感じやすいストレスを排除しています。
申し込みフォームは新規会員登録や資料請求に活用する、自社とユーザー間の重要な接点です。
入力フォームまでたどり着いたにもかかわらず入力途中で離脱されると、大きな機会損失につながります。
ユーザーを入力完了へ導くには、ユーザビリティ・UIデザインに考慮した申し込みフォームの準備が欠かせません。
本記事では、UIデザインに優れた申し込みフォームの21の重要ポイントを解説します。
UIデザインに優れた申し込みフォームの重要ポイント21選
ここでは、UIデザインに優れた申し込みフォームを作るとき、誰でも挑戦しやすいポイントを21種類紹介します。
1.できるだけ入力項目は減らす
ユーザーの入力の手間や時間を省くために、入力項目は極限まで減らす必要があります。
理想的な項目数は5〜10個程度です。
「必須」と表示された項目が多すぎると、離脱へ繋がるため注意しましょう。
2.入力項目は自然な順序で
設問の順序が一般的な入力フォームから大幅にずれていると、ユーザーはストレスを感じます。
ユーザーが自然な流れで入力を進められるよう、質問の順序に一貫性を持たせるように意識してください。
設置する設問が必要かを選定して、可能な限り任意回答の設問を省くことが効果的です。
3.入力欄は縦並びに配置
入力欄は、縦にスクロールして入力できるよう、縦並びに配置してください。
横並びの入力欄があると2方向のスクロールが必要なため、視点が定まらずユーザーにストレスを与えてしまいます。
縦画面のスマホで見たとき、文字が小さく読みづらいため、スクロールの方向性は縦で揃えましょう。
4.チェックボックスやラジオボタンも縦並びで
チェックボタンやラジオボタンは、縦並びに配置します。
スマホで見たとき、設問とチェックボタン・ラジオボタンを1スクロール内に納めると、ユーザーに余計なストレスを与えません。
チェックボックスやラジオボタンの大きさを、クリックしやすいサイズに調節するとさらに効果的です。
5.ラベルやプレースホルダテキストは適切に使う
プレースホルダテキスト＝入力欄に表示させる文字
ラベルには、ユーザーが何を入力するべきか、要点を短い文言で表示します。
プレースホルダテキストにはユーザーがスムーズに入力できるよう、入力例を表記してください。
プレースホルダテキストに項目を表示させる方法はラベルを省け、入力フォームをすっきり見せる効果があります。
ただし、ユーザーが入力中に何を入力するべきだったかが分からなくなり、途中離脱へ繋がる可能性があるため、あまりおすすめできません。
6.ラベルは入力欄の上に配置
ラベルは、入力欄の上に配置しましょう。横並びに左にラベル、右に入力欄を配置すると、文字のサイズが小さくなってしまい、読みづらさを感じます。
ラベルを入力欄の上に配置すると、「縦スクロールで入力できるため入力完了が早くなる」というデータがあります。
7.項目と入力欄はグループで分ける
関連性のある項目と入力欄をグループごとに分けてデザインすると、ユーザーが設問を理解できます。
グループごとに枠で囲んだり、ラベルの位置を工夫したりして距離を離すと、視認性が上がります。
8.英語表記の大小文字の表示
ラベルの英語表記がすべて大文字だと、文字が読みづらい傾向です。頭文字は大文字で、それ以降は小文字表記をするとストレスなく文字を読めます。
日本人向けのWebサイトの場合は、やむを得ない場合を除いて英語表記を避けましょう。
英語表記より日本語表記の方が、直感的に設問の意味を理解できます。
9.ヘルプテキストは常に表示させる
パスワードなど文字数や英数字の入力指定がある項目は、入力欄の下にヘルプテキストを常に表示してください。
文章を簡潔にまとめると、ユーザーは入力をスムーズに進められます。
10.ドロップダウンを使用する
ドロップダウンをクリックすると、複数の選択肢がリストで表示されます。
住所の都道府県や、生年月日の西暦など、選択肢が5つ以上ある場合は、ドロップダウンを使用することで、入力フォームをすっきり見せられます。
11.エラー表示はリアルタイムで的確にアラートする
入力エラーが発生した場合、どの項目で入力ミスが起きているかを明記したアラートを、リアルタイムで表示させましょう。
エラーの発生箇所が分かりづらいと、ユーザーはストレスを感じ離脱をしてしまいます。
アラートの表示位置は、エラーが起きている入力欄の上下にすると、ユーザーに親切です。
12.必須項目と任意項目は一目で分かるように
入力フォームの必須項目と任意項目は、ユーザーが一目見て分かる形が理想です。
必須項目の入力漏れでエラーが発生すると、離脱に繋がる可能性が高まります。
必須事項の横に赤字で【必須】と表記するなどして、視認性を高める方法が有効です。
13.入力補助、自動入力機能を使う
郵便番号を入力するだけで、住所が自動的に入力される入力補助に使える機能が、オートコンプリート機能です。
オールコンプリート機能を積極的に活用すれば、ユーザーの入力の手間を省け、入力完了までの時間短縮が可能です。
14.入力欄は適切なサイズに
入力欄のサイズは、入力するべき内容に合わせて幅を調整しましょう。
名前や電話番号など、文字数が少ない項目は入力欄の幅を狭めます。
住所やメールアドレスなど文字数が多い項目は幅を広げ、入力したテキストが全て表示されるようにすると、入力ミスにすぐ気づけます。
15.CTAボタンには具体的に何が起きるのか明示
入力完了後に押すCTAボタンには、ボタンクリック後に何が起きるのかを具体的に明示しましょう。
「送信」などシンプルなテキストよりも「入力を完了して資料請求する」「30日間の無料サービスを始める」など、ユーザーが得られる具体的なメリットを明示すると親切です。
16.完了までのステップや残り項目数を表示
入力項目が多くページをまたぐ場合は、画面上部にステップを表示させましょう。
入力作業がどれぐらい進んでいて、残りいくつ入力すれば完了できるか把握できると、ユーザーは最後までモチベーションを保てます。
17.適切な配色
申し込みフォームの色味はできるだけシンプルに抑え、重要な箇所にだけ色をつける意識を持ちましょう。
必須項目は赤文字で目立たせたり、入力エラーが発生している入力欄に背景色をつけたりすると、視認性が高まります。
CTAボタンは、色によってコンバージョンに差が出る場合があるため、定期的にABテストを実施してフォームの最適化を目指してください。
18.「戻る」ボタンはCTAボタンと並列して配置しない
操作を誤って前のページへ戻ったとき、改めて入力をやり直すのを避けるため、「戻る」ボタンとCTAボタンを並列配置しないようにしてください。
CTAボタンは、目立つようにサイズを大きくしたり色付けしたりする工夫が有効です。
19.不要なリンクや広告は削除する
ユーザーが他のページへ遷移してしまう不要なリンクや広告は、極力削除しましょう。
別ページへ遷移したユーザーが、申し込みフォームへ戻ってこなくなり、結果的に途中離脱してしまうのを防ぐためです。
申し込みフォームページにヘッダーやフッターメニューを表示させるのも、あまりおすすめできません。
20.スマホ最適化
スマホなどのモバイル端末にフォームデザインを最適化させましょう。
PCに最適化したフォームをスマホで表示すると、キーボードの種類が違うため、非常に入力しづらいです。
ユーザー自らキーボードを切り替える手間はストレスにつながり、離脱を招きます。
PCの横画面に最適化したページは、縦画面のスマホで見ると文字が小さく見づらいです。
ユーザーが使用している端末に合わせて、PC向けページとスマホ向けページが自動で切り替わる設定にしておきましょう。
21.セキュリティーの明示
申し込みフォームへ進む前の段階で、セキュリティに対応していることを明示しましょう。
プライバシーポリシーを記載して、個人情報の取り扱いについて明示しておくと、ユーザーは初めて利用するWebサイトでも、安心して入力を進めることができます。
UIデザインに優れたおしゃれな申し込みフォームの作り方3選
ここでは、UIデザインに優れたおしゃれな申し込みフォームの作り方を3つご紹介します。
CSSやHTMLを使って自作する
CSSやHTMLなどのプログラミング用語を使ってフォームを作成する方法は、コーディングの知識がある人におすすめの方法です。
デザインや設置する項目の自由度が高く、制作コストを押さえられるなどのメリットがあります。
デメリットは、専門的な知識が必要で作成に時間がかかる点です。
Web制作会社に外注する
Web制作会社に外注する方法は、申し込みフォームを自社で制作するリソースはないがデザイン性にこだわりたいときにおすすめです。
申し込みフォームをオーダーメイドで作成でき、フォーム制作にかけるリソースを他の業務へ充てられるメリットがあります。
デメリットは、自作するより高額な制作コストがかかる点と、後から修正や変更をするときに再度依頼しなければならない点です。
フォーム作成ツールを利用する
Googleフォームなど、汎用性が高く無料で利用できるものから、入力フォーム作成に特化した有料ツールを利用する方法もあります。
申し込みフォームを自社で作成するリソースはないが、デザイン性とコストを重視したい人におすすめです。
フォーム作成ツールを選ぶ際には、デザインが豊富か、操作性は簡単か、ユーザーが使いやすいフォームを作成できる機能が備わっているかなどの観点から選定します。
多くの場合、有料ツールを無料で使えるプランやお試し期間が用意されているため、自社に合ったツールを見つけられます。
UIデザインに優れた申し込みフォームでコンバージョンを向上させよう！
申し込みフォームは、自社サービスに興味を持つ感度の高いユーザーとの貴重な接点です。
LPやサイト内のコンテンツに比べて優先度は低くなりがちですが、入力フォームがUIデザインに優れているかどうかで、コンバージョン獲得数は大きく変化します。
自社のリソースや予算に合った方法でUIデザインに優れた申し込みフォームを作成して、コンバージョン向上を目指してください。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
