サインアップフォームをデザインする8つのポイント

サインアップフォームは、ユーザーと製品の最初の接点です。ユーザーのブランドイメージを左右する重要な瞬間であり、Webサービスにおける体験全体の印象を決定づけます。

ユーザー体験をシームレスなものにするために、サインアップフォームはできるだけ直感的で親しみやすいデザインにすることが重要です。

今回はリード（見込み客）の増加という目標を軸に、サインアップフォームをデザインするときのポイントについて解説します。

サインアップフォームの基礎知識

サインアップフォームとは？

サインアップフォームとは、ユーザーがWebサービスを利用するために必要な情報を入力するWebページ、ポップアップ、モーダル等を指します。

サインアップフォームで入力する情報は、Webサービスの性質や提供内容によって異なりますが、多くの場合は名前、メールアドレス、ユーザー名、パスワードなどです。

先述のとおり、サインアップフォームは製品への入り口です。もしデザインに不備があれば、ユーザー体験に悪影響を及ぼして、製品購入の意欲を削いでしまうかもしれません。

サインアップフォームの目的は？

サインアップフォームにはさまざまな目的があります。一般的に共通しているのは、名前やメールアドレスなどの個人情報を取得し、それと引き換えに情報やサービスを提供することです。

また多くの場合、サインアップフォームはその後のコンバージョン（サイトが目指す目的の達成）を可能にする入り口にもなります。

なぜサインアップフォームのデザインが重要なのか？

サインアップフォームは、Webサービスの訪問者が継続的に訪れるための第一歩となるほか、ユーザーの初期登録にも大きな影響を及ぼします。

Webサイトの訪問者が安心してシームレスにサインアップできれば、サービス全体についても「信頼できる」という印象を与えられるはずです。

また、はじめて利用するユーザーにも良い印象を与え、まだ製品についてよく知らない潜在顧客に製品の利点を伝える機会にもなります。

サインアップフォームをデザインするときのポイント

1. フォームはできるだけ短く

サインアップフォームの項目が多ければ多いほど、離脱率が高まります。項目を少なくしたことで、コンバージョン率が120%増加した例もあるほどです。

ユーザーに不要な情報を求めるのは避けましょう。多くのWebサイトやアプリは情報を求めすぎています。

理想的なのは「名前」「メールアドレス」「パスワード」など、顧客のデータベースに登録するために欠かせない情報のみを求めるのが良いです。ユーザー名を使用せず、メールアドレスとパスワードのみで登録できるようにするのもおすすめです。

▲左のフォームは長すぎる。右のフォームのように簡潔に（出典：UX Planet）

2. 最初の入力フィールドに自動フォーカスする

サインアップフォームの最初の入力フィールド（または入力必須のフィールド）へ自動的にフォーカスすることで、どこから入力を始めればいいのかがすぐにわかります。

ユーザーが毎回クリックをする必要がなくなるのも大きなメリットです。たった一回のクリックでも、手間を省くことによってUXを向上させられます。

▲右側のフォームのように、最初の入力フィールドに自動でフォーカスする（出典：UX Planet）

3. 外部アカウントからのサインアップを許可する

SSO（シングル・サイン・オン）技術により、ユーザーはWebサイトの認証情報を転用できるようになりました。この技術を活用すれば、サインアップのプロセスを大幅に削減できます。

メール認証のほか、GoogleアカウントやSNS認証によるサインアップなど、ユーザーに適切な選択肢を与えることで、迅速かつ快適にアカウントを作成してもらえます。

たとえば現在、SNSのユーザー数は約26億人ともいわれています。Cruipの調査によると、なかでも人気なのがGoogle（70.79%）、Facebook（16.69%）、Twitter（9.32%）です。

どの外部アカウントのサインインを採用するか迷ったときは、Google、Facebook、Twitter、LinkedInなどのSNSがおすすめです。

▲右側のフォームのように、複数の外部アカウントを許可するのがおすすめ（出典：UX Planet）

4. パスワードの条件を表示する

ユーザーが誰しも強力なパスワードを設定できるわけではありません。どのようなパスワードにすべきか、条件を表示しましょう。

「名前やメールアドレスを含めてはいけない」「8文字以上」「数字か記号を含む」といった条件を表示しましょう。

また、ユーザーが入力したパスワードの文字列については、デフォルトでは隠すデザインにし、必要に応じて表示できるようにするのがおすすめです。

▲右側のフォームのように、条件をあらかじめ表示しておく（出典：UX Planet）

5. 入力内容の検証結果を表示する

サインアップフォームやログインページのUX（いかにストレスフリーで操作できるか）を高めたいなら、入力内容を検証して結果を表示しましょう。フォームを送信する前に入力ミスに気づけるデザインにしておけば、ユーザーのフラストレーションを減らせます。

システムがエラーの存在を認識したら、すぐにメッセージを表示するのがポイントです。問題点と解決方法を明確にするようなメッセージを心がけましょう。ユーザーを手助けするようなエラーメッセージは信頼感の向上に役立ちます。

▲右側のフォームのように、誤った内容を検知したらすぐメッセージを表示する（出典：UX Planet）

6. パスワードの確認を求めない

サインアップフォームのコンバージョン率を低下させる要素のひとつが、パスワードの再入力です。

パスワードが一致するまで何度も入力し直すプロセスは、ユーザーにストレスを与えます。再入力を求めるかわりに、パスワードを任意で表示できるデザインにすれば、必要な場合すぐに修正できます。

▲右側のフォームのように、パスワードの再入力欄は省く（出典：UX Planet）

7. ラベルの内容は具体的に

ボタンをクリックしたら何が起こるか、わかりやすい明確なテキストを心がけましょう。

サインアップフォームの場合、「次へ」などの曖昧な表現ではなく、「アカウントを登録」など具体的な表現にするのがおすすめです。

▲右側のフォームにおける「Sign Up（サインアップ）」のように、具体的な表記を心がける（出典：UX Planet）

8. サインアップとログインの切り替えを提供する

新規ユーザーと既存ユーザー、どちらも同じWebサイトを利用します。

サインアップページにいても、ログインページにいても、簡単に双方に切り替えられるようなデザインにしましょう。

▲右側のフォームのように、サインアップフォームであってもログインページへのリンクをつける（出典：UX Planet）

サインアップフォームの入力は、ユーザーが必ずしも楽しんで行う作業ではありません。だからこそ、シームレスな体験を実現するためのデザインが必要です。

また、インセンティブを提供すると、サインアップのコンバージョン率が最大15%向上するという調査もあります。サインアップによって得られるなんらかの報酬を提供するのもおすすめです。

直感的で親しみやすいサインアップフォームをデザインし、ユーザーエクスペリエンスの向上を目指しましょう。

（執筆：Dmitry Sergushkin　翻訳：Asuka Nakajima　編集：鈴木里菜　提供元：UX Planet）