「入力フォーム」はサイト改善でもまず最初に手を付ける

会員登録や、資料請求、商品購入など、サイトのゴールを達成する為に必ず必要になる「入力フォーム」はサイト改善でもまず最初に手を付ける！ということが多いのではないでしょうか。

今日は、UIまとめシリーズ第一弾ということで、色々なサイトの入力フォームをまとめてみたいと思います。

入力フォームをデザインするときのコツ10選

 

フォームのデザインといっても、見た目の綺麗さだけにこだわることはよろしくありません。ユーザーの視点に立って入力のしやすさや理解しやすい状況を含めてデザインする必要があります。

 

設問の順序

入力フォームの設問の順序は論理的に一貫しているのかチェックする必要があります。会話でも論理的でないと理解しにくくなるのと同じように入力フォームでもお論理性や一貫性のない設問が続いていくことで、ユーザーの理解を遅らせてしまうことになります。

 

入力欄の配置

入力欄の配置には注意が必要となっています。フォームに必ず設置される入力欄では、垂直方向に配置することでユーザーにわかりやすくなります。横に複数の入力欄を配置されるデザインでは視線の移動が増えてしまうことで内容の理解に時間を要することになります。

 

項目名と入力欄のグループ化

入力フォームのレイアウトは項目名と入力欄をグループだとわかるようにまとめる必要があります。グループ化することでどの項目名と入力欄に慣例があるのかはっきりとするため、ユーザーが設問に対して理解しやすくなります。

 

大文字小文字の表記

項目名などの英語表記は大文字と小文字を分けて使うことを心がけると良いでしょう。全てが大文字になっているとユーザーが読みづらく感じることがあります。また、英語表記では意味を考えてしまうこともあるため、なるべく日本語表記とすることがおすすめです。

 

ドロップダウンを使用

ドロップダウンを使用することで、入力欄をクリックすることにより複数の選択肢をリスト形式に表示させることができます。住所の入力などで選択肢が多いときにはドロップダウンは有効となります。選択肢が少ないときには、逆に手間になることもあります。

 

プレースホルダーの使いどころ

プレースホルダーとは項目名を入力欄内に表示させる機能となります。プレースホルダーを使うことで例文を表示する必要がなく、入力フォームの余分なスペースを減らすことにつながります。項目名を記載するのではなく、入力例や補足情報を記載しましょう。

 

CTAの文言

入力フォームに設置するCTAの文言にも工夫を加える必要があります。ユーザーに行動を起こしてもらうためにテキストやボタンを表示します。送信や完了などの文字だけだと、ユーザーはその後にどうなるのかイメージがつかないためにためらうかもしれません。

 

必須項目と任意項目

フォームの入力項目の中でどの入力項目が必須項目なのか、任意項目なのかをわかりやすく表示させることが必要です。必須項目と任意項目が明確になっていないと、未入力のままに送信しようとしてしまうことがあります。エラーとなり、離脱してしまう可能性があります。

 

オートコンプリート機能

オートコンプリート機能とは、途中入力の段階で入力内容を予測して表示させる機能となります。オートコンプリート機能を使うことでユーザーが手入力する負担を軽減することによって、入力途中での離脱を防ぐこととなります。

 

モバイル最適化

モバイル入力に最適化することも必要となります。パソコンだけではなく、モバイル端末からの入力では文字・数字で入力するためにはキーボード切り替えを行う必要がありますので、入力するテキストによってキーボードが自動で切り替わる設定も必要です。

 

入力フォーム作成の3ステップ

 

入力フォームの作成方法は3ステップで完了することができます。それぞれのステップごとに入力フォームの作成方法を解説していきます。

 

目的を明確化する

入力フォームを設置する目的を明確にすることが重要であり、商品やサービスへの問い合わせなのか、見込み客獲得のためなのか、商品やサービスを直接購入するためなのかなどをしっかりと明確にします。目的によって入力フォームの構成は異なってきます。

 

入力フォームを使うユーザーのペルソナ設定

入力フォームを使用するターゲット層のペルソナを明確にすることで、ターゲットとするユーザーの属性や興味関心のあることなどの入力項目は変わってきます。会社名や社内メールアドレスの入力など、ターゲット層によって入力してもらう内容は大きく異なることでしょう。

 

出力イメージを持って入力欄を作成

入力フォームをデザインするときには、あらかじめ出力イメージを持ちながら各項目を作成するようにします。フォームに入力された情報を確認するときに、次のアクションに必要な情報が足りていなかったケースも起きることがあります。フィードバックをもらいながら改善していくことが必要となります。

 

入力フォームにおいてデザインが重要な理由

 

入力フォームではウェブサイトやECサイトなどのコンテンツと比べると、対策が手薄になりがちとなります。ユーザーからの問い合わせや新規登録、商品などの注文を獲得するためには必要不可欠な存在となっています。

ユーザーが問い合わせをしようと考えても、問い合わせや登録などの直前で離脱してしまうことがあります。入力フォームの入力に手間がかかることが理由で離脱につながれば売り上げやCVの獲得をを逃してしまいます。

入力フォームはユーザーの期待値を下げることなくスムーズに利用できるようにデザインし、フォーム画面での離脱を防ぐ必要があります。フォームでの離脱により、機会損失に繋がることが多いため、フォームデザインのコツなども考慮しながらユーザー目線に立って作成しましょう。

 

本日の入力フォーム参考事例サイトラインナップ

入力フォームをご紹介するにあたり、今回取り上げるサイトをご紹介します。

サイトのタイプによって入力フォームにも特徴が出ると思いますので、様々なサイトをピックアップしてみました！

○EC系
Amazon

○広告メディア系
カーセンサー

○SaaS系
freee

○LP系
引越し侍

○SNS系
Facebook

今日は、この5種類についてご紹介をさせて頂き、次回の記事では各種サービスタイプ内でもいくつか比較してみたいと思います。

EC系：Amazon

言わずと知れたグローバルNo1ECサイトの「Amazon」です。

TOPページはレコメンドの嵐で無茶苦茶複雑になってますが、新規アカウント登録画面は実にシンプル！
スマホのファーストビュー内にきっちりと全項目が収まってますね！

入力フォームのポイント①
ファーストビューにCVボタンを設置する

これは本当にどのサイトでも通用する、入力フォームの勝ちパターンの一つだと思います。

ファーストビューにCVボタンがあるかないかで、入力フォームに入力するカスタマーの心理的負荷に大きな違いが出ると考えられております。

ファーストビューにCV導線がないと、「この入力項目いつまで続くんだろうか。。」って形で、負荷を感じて離脱されてしまうってことですね。

こちらの画面は、Eメールアドレスを入力せずに、「新規登録」ボタンをクリックした時の画面です。

入力フォームのポイント②
入力ミスがあった場合は、どこでミスが発生しているかを明確に可視化する

エラー画面は特にカスタマーが離脱されるポイントなので、極力カスタマーが混乱を招かないように、次に何をすれば良いかが明確になるようなサポート機能をつけてあげましょう。

ちなみに、Amazonでは対応されてませんでしたが、CVボタンを押したタイミングでミスを指摘するのではなく、入力項目を入力し終えた時点でミスを指摘してあげることで、あとから確認に戻る手間を減らすというのも良くあるパターンですよね。
例えば、メールアドレスとして最低限必要な@マークなどのお作法が担保できていないことを確認し、そのタイミングで「適切なメールアドレスが入力されておりません」と表示したり、既に利用されているメールアドレスが入った時点で「そのメールアドレは既に使用されております」と出してあげることで、ミスをした時点で気がつくことができます。

（きっとAmazonは新規獲得よりも、既存カスタマーの活性化の方が改善ボリューム多いと思うので、そこまで丁寧にはやってないんだと思います。）

広告メディア系：カーセンサー

中古車サイト最大手のカーセンサーの入力フォームは特徴的ですね！

こちらはスマホのブラウザ版サイトなのですが、チャット形式の入力フォームが実装されております。

入力フォームのポイント③
カスタマーの入力負荷を低く感じさせる

チャット形式の入力項目にするメリットは、入力項目が少なく見えることですね。
少なくとも最初の画面上には質問が一つしか見えていないので、最初の印象を少なく抑えることができます。

一般的なサイトの場合、入力項目の一問目の回答率が極端に低く、それ以降は安定して入力を進めてくれるケースが多い為、こういった施策によって最初のハードルを下げることは非常に有効な手段だと思われます。

また、最初の一問目をフリーテキストではなく「選択形式」から聞いているのもポイントかと思います。
出来るだけカスタマーに負荷を与えずに最初の一問目に回答しやすくさせることで、フォームの入力負荷を低くすることができますね。

ちなみに、質問に回答すると、同じページ上でQAが続いていきます。

入力フォームのポイント④
入力項目の確認をスムーズにさせる

一問一答形式の場合、一つ目の回答を終えると、ページ遷移が走り、次の質問画面に移る形式も多く見かけますが、これだと、もし間違えてしまった際も修正がしにくいですし、直前の内容を確認したくても見れないという課題が生じてしまいますね。

入力フォームのポイント⑤
極力画面遷移を少なくする

そういったページの場合、最後に「確認画面」を入れるケースもあると思うのですが、これはこれで画面遷移が増えてしまい、カスタマーに手間を与えることになります。

一般的に画面遷移が増える度に、カスタマーに待ち時間を与える可能性がある為、それに応じて離脱の数も増える傾向にあります。

無駄な遷移は減らして、シンプルなサイト構造になるように心がけたいですね。

SaaS系：freee

もしかしたら、freeeはPCからの登録の方が多いかもしれないですが、統一感を理由にSPブラウザ版で確認しますね。

ちなみにfreeeは個人事業主やベンチャー企業向けのクラウド型会計ソフトを提供しているサービスです。確定申告なんかでも利用することが増えましたよね。

入力フォームのポイント⑥
対象カスタマーに応じて、入力項目を出し分ける

freeeの特徴として面白いのは、最初の一問目の質問で「個人事業主」か「法人」かを確認するところですね。

実は「法人」をクリックすると入力項目が少し増える形になってます。

最初からこの入力項目を見せるよりは、最初の印象を少なく見せることが出来ますし、「個人事業主」の場合は、そもそも不要な入力項目だったりするので、余計な離脱を防ぐことができます。

入力フォームのポイント⑦
必要項目が完了するまで「CVボタン」を押させない

画像だとわかりにくいかもしれませんが、実は最初の1枚目の「Freeeを始める」は入力項目がすべて埋まっていないと、クリックすることができません。

入力項目を埋めることで、非活性状態だったCVボタンがクリックできるようになります。

これの良いところは、早めにカスタマーにミスに気付いてもらいやすくするところですね。

また、画面遷移を発生させないので、無駄な離脱も防ぐことができます。

（あとは、開発観点でも無駄にエラー画面とか作らなくて良いので、楽ですよね）

入力フォームのポイント⑧
SNSアカウント利用した簡易ログイン機能の実装

特に入力項目が多いサイトなんかだと、これがあると非常に便利ですよね。

カスタマーの入力へのハードルを下げることができると思います。

ただ、最近SNS連携しても、あまり挙動がうまくいかないケースを度々見かけます。

これはおそらくSNS側の仕様が変更になったり、自社サイトの入力フォーム側の仕様変更があった場合に、SNS連携のAPIとの接続がうまく行かなくなってしまったのだと思います。

当然こうなると離脱の要因になってしまいますので、運用保守観点では注意が必要ですね。

長くなってしまったので、後半は次回！

前半3つで結構長くなってしまったので、前半後半で記事を分けますね。

3つのサイトのみですが、各社ごとに特徴があって非常に勉強になると思います。

ただ、実は入力フォームで大事なのは、どんなサイトでも共通するお作法をまずは徹底的に抑えるということなんですよね。

他のページと比較すると、カスタマーセグメントやペルソナによる傾向の変化が少なく、王道の勝ちパターンが明確だったりするので、まずは最低限を担保すること。

それだけでも結構な改善インパクトを生み出すことが可能です。

それでは、後半戦も楽しみにしていてくださいね！
（後半戦はまた来週）