お問い合わせや申し込みなどコンバ―ジョンに繋げるためには、お問い合わせや申し込みページで使われるフォームの最適な設計が不可欠です。
今回はフォームの役割や構成、フォームに導くために利用されることが多い「ボタン」を紹介します。
フォームの構成要素やレイアウトを知り、ユーザーが途中で入力を止めてしまわないための方法を考えましょう。
フォームとは
ユーザーがお問い合わせや資料をダウンロードする際、個人情報を入力するためのページ、もしくは入力箇所の事をフォームと呼びます。
お問い合わせや会員登録などを行う際には入力フォームが用いられます。このフォームが入力しづらい不便なフォームではユーザーが途中で離脱してしまう可能性があります。そうならないために重要な点を確認していきましょう。
基本的にフォームの役割を持つページは入力画面、確認画面、完了画面の3種類に大別できます。 ただし、ショップサイトでは住所入力画面と支払い確定画面が分かれていたりと、完了までに遷移する画面数はサイトによって変わります。
フォームの構成要素
フォームには、テキストボックス、ラジオボタン、チェックボックス、セレクトボックス、ボタンといった要素が入ります。
テキストボックスはそのまま、文字をユーザー自身に打ち込んでもらう部分です。お名前やメールアドレスなどはこちらを使いますね。
ラジオボタン、チェックボックス、セレクトボックスはこちらが用意した選択肢の中からユーザーに当てはまるものを選んでもらう形です。入力に手間がかからないので、ユーザの負担が減る・必須項目以外でも入力してくれるなどのメリットがあります。
ラジオボタン
ラジオボタンは、「選択できるのが１つ」である時に使われます。
チェックボックス
チェックボックスは、「複数選択する事が出来る」時に使われるものです。
セレクトボックス
選択肢が多い場合、見ずらさがあったり、場所をとってしまうという問題があります。その場合は、セレクトボックスを使うと良いでしょう。
フォームのレイアウト
フォームが入力しづらい不便なフォームではユーザーが途中で離脱してしまう可能性があります。そうならないために重要な点を確認していきましょう。
フォーム入力の手間を省く
まず項目数についてです。項目数が多くなってしまうと入力するのに手間がかかりますよね。そうなるとユーザーは途中で離脱してしまうかもしれません。ですので必要な情報・項目を選別し設定していきましょう。
また、以下のようにスムーズな入力ができるようにする工夫も必要でしょう。このように入力フォームを使いやすく最適化する事をEFO（Entry Form Optimization）と言います。
- 商品の到着日の指定等であれば1番直近の日にちを予め選択している状態にする
- 未入力の項目にはカラーを付け未入力であることを示す
- 入力するとカラーが消える
下記のような入力フォームがあるとします。そのときにすべて入力するのは面倒です。 それを軽減してくれるのがEFOという訳です。例えば漢字で名前を打ち込むと自動でカタカナを入力してくれる。入力ミスを教えてくれる。郵便番号から住所を自動入力してくれる。など便利機能を盛り込めばフォームが嫌になってやめちゃうってことを防げそうですよね。
バリデーション
入力エラーを判別し、エラーであることを表示させる仕組みをValidation（バリデーション）と呼びます。入力フォームのバリデーションは、上図のメールアドレス入力箇所に表示されている吹き出し「必須項目です」のような“吹き出し型”と、フォーム内に表示する“インライン型”の２つが良く使われます。
下記はインライン型のバリデーションです。
https://id.hulu.jp/signup/form
WEB申し込み・商品購入時などに目にした事があるのではないでしょうか？
入力箇所を間違えていたり、必須項目が空欄だったりしたまま登録ボタンを押す→エラーあり画面になる→フォーム入力画面に戻る、を繰り返すと嫌になってきますよね。
「どこが間違っているのか」が分かることで、ユーザは確認と修正が行いやすくなります。フォーム画面での離脱を防ぎ、コンバージョン率アップにつながるでしょう。
必須箇所を明確化する
バリデーションと重なる部分もありますが、必須項目がある場合はそこを明確に表示しておくことも必要です。必須項目で未入力の箇所は入力ボックスに色を付けておく、残り必須項目数を表示させておく、などユーザーが必須項目を把握できるようにしましょう。
また、最初からインラインバリデーションを使用する場合は、必須項目がすべて埋まらない限り登録・確認画面に進むためのボタンは押せない状態（非活性）にしておく方法もよく使われます。
https://id.hulu.jp/signup/form
フォームの使いやすさを考える
フォーム内での操作はユーザー目線で使いやすいものにしなければなりません。 以下は登録フォームの簡単な例です。
このフォームには問題点がいくつもあります。 では、１つづつ見ていきましょう。
1.名前欄が姓名で分かれている
入力項目は出来るだけ少なくするべきです。 項目が多いと、ユーザーは面倒に感じ離脱してしまいます。
2.全てが必須項目とされている.
メールアドレスや郵便番号(住所)は、予約自体には必要でしょうか。
たとえば、ＤＭ等を送る為に登録してほしいとしましょう。 しかし、入力項目が多いのは面倒です。 そうなると、ＤＭどころか肝心の予約自体してもらえなくなります。ＤＭの為に入力してほしいのであれば、任意入力とし「入力するとどのような得があるのか」を載せましょう。
生年月日を必須としたい場合も「ID、パスワード紛失時の本人確認に利用します」など、登録する理由が明記されていると納得してくれるでしょう。
3.全て手入力である
生年月日の欄はセレクトボックス選択を使うと良いのではないでしょうか。セレクトボックスを使う際は、デフォルト値をユーザーに合わせておくことも大切です。また、生まれ年を入力すると自動で次の項目を入力出来るというのも、スムーズに入力出来てよいですね。
選択肢が少ない性別はラジオボタンにし、選択肢を全て表示することも出来ます。
4.横並びの項目が多い
フォームの入力・選択欄を横並びにすると、見落としやすくなります。 フォームの無いようにもよりますが、あまり細かく細かく区切って横に並べるのは避けましょう。
以下は、上記例を改善したものです。
少し、簡潔になりましたね。 このように、「本当に必要な情報か」「入力するメリットが分かりやすいか(入力したくなるか)」「入力に手間がかからないか」などに注意しデザインする事が大切です。
このようにフォームはただ綺麗にレイアウトするだけではなく、機能面でも美しさを持たせると良いでしょう。
ボタンについて
ボタンはユーザーにアクションを起こさせる役割があります。 前回のレッスンでもボタンが登場しましたが、今回はより掘り下げて見てみましょう。
ボタン設計のポイント
①一目でボタンと分かるデザイン
一目でボタンだと認識出来るデザインでなければ、ユーザーはボタンを使ってくれません。 背景色を付ける・線で囲うなど「これはボタンだな」と認識出来るデザインにすることがボタンの大原則です。
②何をするボタンかを明確化
ボタンはユーザーにアクションを起こしてもらうための要素です。 押すことで何が起こるのか、それを明確に言語化して説明できるようにしましょう。
例えば下図、左側のボタンはプレセールを見られるのかと誤解される恐れがありますよね。そう思ったユーザーがボタンを押して登録フォームに飛ばされると、サイトに対しする不信感をもってしまう危険性があります。
何をする・どのページを開くボタンなのか分かるよう表記しましょう。
③ルールを決める
一般的にグレー色や、コントラストが弱い色のボタンは無効(非活性状態)という印象があります。下図、左側のボタンがあったとすると使えるのか迷いますよね。
例えば、フォームなどで項目の入力が完了するまでボタンを非活性状態にしておくことで「クリックできない」と認識させるためにこうした配色は必要です。
押して欲しいボタンの場合はくっきりとした色合いを選びましょう。 ただしサイトのデザインから明らかに浮いてしまうのはNG。それをれのボタンに全て別の色を振り分けるなど、統一感が無くなってしまうデザインも避けるべきです。
２種類程度ボタンデザイン（+非活性色）を決めておき、WEBサイト全体で統一感を持たせるように設計していくと良いでしょう。「amazon」や「楽天市場」では優先度に合わせて２色のボタンが配置されています。
◆実習：お問い合わせページのレイアウト
お問い合わせページのワイヤーフレームを作成します。 今回はフォーム部分までを作ります。
ご要望にあるように、予約・予約状況確認は外部のカレンダー付き予約システムを使用します。ユーザーが気軽にサロンへ問い合わせできるように簡単なフォームを配置しましょう。
上部には外部機能へのリンク、下部にお問い合わせに使うフォームを配置しました。
まとめ
フォームやボタンはコンバージョンに繋げるために重要な要素です。 見た目だけが美しいサイトを作っても、どこから申し込みをするのかわからなかったり、フォーム入力が難しかったりすれば、目的は達成できません。サイト全体のトンマナを考慮しつつ、ユーザーが認識しやすく、使いやすいデザインを心がけましょう。