コンバージョン率を高めるフォームデザインの工夫・EFOとは？

入力フォーム

お問い合わせや申し込みなどコンバ―ジョンに繋げるためには、お問い合わせや申し込みページで使われるフォームの最適な設計が不可欠です。今回はフォームの役割や構成要素を知り、ユーザーが途中で入力を止めてしまわないための方法を考えましょう。

• フォームとは
• フォームの構成要素
• フォームレイアウトとEFO
• フォームの改善例
• 色々なサイトのフォームを見てみよう

フォームとは

ユーザー登録、申込みなどを行う際、個人情報を入力するためのページ、もしくは入力箇所の事をフォームと呼びます。

お問い合わせや会員登録などを行う際には入力フォームが用いられます。 このフォームが入力しづらい不便なフォームではユーザーが途中で離脱してしまう可能性があります。そうならないために重要な点を確認していきましょう。

基本的にフォームの役割を持つページは入力画面、確認画面、完了画面の3種類に大別できます。ただし、ショップサイトでは住所入力画面と支払い確定画面が分かれていたりと、完了までに遷移する画面数はサイトによって変わります。

フォームの構成要素

フォームを構成する要素（パーツ）には、下記のようなものがあります。 * テキストボックス * ラジオボタン * チェックボックス * セレクトボックス * ボタン

テキストボックスはそのまま、文字をユーザー自身に打ち込んでもらう部分です。 お名前、電話番号、メールアドレスなどはこちらを使いますね。

ラジオボタン、チェックボックス、セレクトボックスはこちらが用意した選択肢の中からユーザーに当てはまるものを選んでもらう形です。入力に手間がかからないので、ユーザの負担が減る・必須項目以外でも入力してくれるなどのメリットがあります。

ラジオボタン

ラジオボタンは、「選択できるのが１つ」である時に使われます。

チェックボックス

チェックボックスは、「複数選択する事が出来る」時に使われるものです。

セレクトボックス

選択肢が多い場合、見ずらさがあったり、場所をとってしまうという問題があります。その場合は、セレクトボックスを使うと良いでしょう。 生年月日やお住まいの国・都道府県選択などでよく使われていますね。

フォームレイアウトとEFO

フォームが入力しづらい不便なフォームではユーザーが途中で離脱してしまう可能性があります。そうならないために重要な点を確認していきましょう。

EFOとは

入力フォームを使いやすいように最適化する事をEFO（Entry Form Optimization/入力フォーム最適化）と言います。ユーザの途中離脱を減らすことで、コンバージョン率を高める施策ですね。

まず項目数についてです。 項目数が多くなってしまうと入力するのに手間がかかりますよね。そうなるとユーザーは途中で離脱してしまうかもしれません。ですので必要な情報・項目を選別し設定していきましょう。

また、以下のようにスムーズな入力ができるようにする工夫も必要でしょう。

• 商品の到着日の指定等であれば1番直近の日にちを予め選択している状態にする
• 未入力の項目にはカラーを付け未入力であることを示す
• 入力するとカラーが消える

下記のような入力フォームがあるとします。そのときにすべて入力するのは面倒です。 それを軽減してくれるのがEFOという訳です。

例えば、漢字で名前を打ち込むと自動でカタカナを入力してくれる。 入力ミスを教えてくれる。 郵便番号から住所を自動入力してくれる。 ……など便利機能を盛り込めば、フォーム入力が嫌になって途中でユーザーが操作をやめてしまうことを防げそうですよね。

バリデーション

入力エラーを判別し、エラーであることを表示させる仕組みをValidation（バリデーション）と呼びます。入力フォームのバリデーションは、上図のメールアドレス入力箇所に表示されている赤色の吹き出し「必須項目です」のような“吹き出し型”と、フォーム内に表示する“インライン型”の２つが良く使われます。

Huluの登録フォームではインライン型のバリデーションが使われています。 このような表示は、WEB申し込み・商品購入時などに目にした事があるのではないでしょうか？

新規会員登録 Hulu https://id.hulu.jp/signup/form

入力箇所を間違えていたり、必須項目が空欄だったりしたまま気づかずに、登録もしくは送信ボタンを押したとしましょう。すると「入力に不備があります」という画面になり、再びフォーム入力に戻らなくてはいけません。 これを繰り返すと嫌になってきますよね。

「どこが間違っているのか」がその場で分かれば、ユーザは確認と修正が行いやすくなります。 フォーム画面での離脱を防ぎ、コンバージョン率アップにつながるでしょう。

必須箇所を明確化する

必須項目がある場合はそこを明確に表示しておくことも必要です。 必須項目で未入力の箇所は入力ボックスに色を付けておく、残り必須項目数を表示させておく、などユーザーが必須項目を把握できるようにしましょう。

また、最初からインラインバリデーションを使用する場合は、必須項目がすべて埋まらない限り登録・確認画面に進むためのボタンは押せない状態（非活性）にしておく方法もよく使われます。

先程のHulu会員登録フォームでも、必須項目を埋めないとボタンは効きませんね。

新規会員登録 Hulu https://id.hulu.jp/signup/form

このようにフォームはただ綺麗にレイアウトするだけではなく、機能面での美しさ＝使いやすさも必要です。ユーザーにとって「ストレスなく入力を行える」ことこそが、途中離脱率を下げ、コンバージョンアップに繋がるのです。

フォームの改善例

以下はショップもしくはサロンを想定した、予約フォームの簡単な例です。

このフォームには問題点がいくつもあります。 では、１つづつ見ていきましょう。

1.名前欄が姓名で分かれている

入力項目は出来るだけ少なくするべきです。 項目が多いと、ユーザーは面倒に感じ離脱してしまいます。

2.全てが必須項目とされている.

生年月日や郵便番号(住所)は、予約自体には必要でしょうか。

たとえば、ＤＭ等を送る為に登録してほしいとしましょう。 しかし、入力項目が多いのは面倒です。 そうなると、ＤＭどころか肝心の予約自体してもらえなくなります。

ＤＭ送付の為に住所を入力してほしいのであれば、任意入力とし「入力するとどのような得があるのか」を載せましょう。

生年月日を必須としたい場合も「ID、パスワード紛失時の本人確認に利用します」など、登録する理由が明記されていると納得してくれるでしょう。

3.全て手入力である

生年月日の欄はセレクトボックス選択を使うと良いのではないでしょうか。 セレクトボックスを使う際は、デフォルト値をユーザーに合わせておくことも大切です。また、生まれ年を入力すると自動で次の項目を入力出来るというのも、スムーズに入力出来てよいですね。

選択肢が少ない性別はラジオボタンにし、選択肢を全て表示することも出来ます。

4.横並びの項目が多い

フォームの入力・選択欄を横並びにすると、見落としやすくなります。 フォームの内容にもよりますが、あまり細かく細かく区切って横に並べるのは避けましょう。スマートフォンで見るユーザーもいますので、指でタップして入力箇所を切り替えやすいという点にも配慮がひつようですね。

以下は、上記例を改善したものです。

少し、簡潔になりましたね。

フォームデザインというと配色やデザイン性に目が行きがちですが、まずは「本当に必要な情報か」「入力するメリットが分かりやすいか(入力したくなるか)」「入力に手間がかからないか」などを考えてレイアウト・デザインするようにしましょう。 見栄え方面でのデザインはその後にでも決められます。

色々なサイトのフォームを見てみよう

普段、インターネットを使用していても、用事がないとフォームのページまでは見ませんよね。ですが、気になるサイトのフォームページをチェックして、自分の引き出しを増やしておくとwebデザインを行う時に役立ちますよ。

こちらはDropBoxのアカウント作成（登録）フォームです。 名前とメールアドレス、パスワードが入力項目です。

DropBox https://www.dropbox.com/ja/

続いて、レシピ動画サイトのクラシルの登録フォームです。 PCでもスマホでも同じフォームが表示され、設定項目も非常にシンプル。

kurashiru https://accounts.kurashiru.com/accounts/v1/signup

無料の会員登録だけであれば、メールアドレスとパスワードさえ設定されていれば十分ということですね。更に入力が省略できるSNSアカウント連携も、多くのサイトで導入されています。

では、ご予約フォームはどうでしょうか。

脱毛サロンのKIREIMOの無料カウンセリング申し込みフォームは、下記のようになっています。 連絡先や生年月日は必須ですが、住所の入力は求められていませんね。

KIREIMO https://counseling.kireimo.jp/

下記はアパホテルの予約フォームです。

アパホテル https://www.apahotel.com/

宿泊施設ということもあって住所など必須科目が多めですが、全体的にスッキリとして分かりやすいデザインですね。入力が大変だから予約はやめよう、という事にはならなさそうです。

最後に、SKILLHUBでもEFOを行いフォームデザインを変更しました。

現在のお問合せフォームは、お名前・メールアドレス・内容の３つだけのシンプル構成。 サインアップユーザーはメールアドレスも不要、お名前とご用件のみを入力していただければ送信可能となっています。

最低限必要な内容に絞ったことで、お問い合わせを頂く機会も増えました。

ファーストビューやキャッチコピーがどれほど魅力的でも、フォーム入力が面倒だと、興味を持ってくれたユーザーもお問合わせ・申し込みを止めてしまいます。 「結果を出すサイト」を作るために、フォームデザインもしっかりと考えたいですね。