参考にしたい!ログイン&新規会員登録フォームのデザイン集

DESIGNER

Webサイトやツールを利用するときに、会員制のものであれば必ず新規会員登録をしなければなりません。ユーザーを獲得できるかを決める、かなりデリケートな関門です。

登録後も、ログインフォームの使いやすさは満足度に直接関わってくる部分です。

今回は、ログインフォームや新規会員登録フォームを作るときのポイントを、事例とともにまとめました。

ログイン&新規会員登録フォームの設計ポイント

 1.登録による価値を明確にする

一般的なユーザーは、当たり前ですが自分にとって価値を感じないサービスに登録してくれることはありません。

求人のマッチングサイトLinkedinの場合は、”Connect to Opportunity”や”Relationships matter. Build yours”などのメッセージで価値をはっきりと、直接的に表しています。

例:Linkedin

2.ログインページに飛びやすくする

トップページからすぐログインまたは新規登録できるよう導線を設計しましょう。わかりやすい位置にボタンを配置することが大切。

例:Mint

3.ランディングページに登録フォームを設置する

ログインなしでは利用できないSNSのように、ログインの優先度が高めのサービスの場合、リンクを飛ばすのではなく、流入した最初のページ上部に登録フォームを表示してしまいましょう。Twitterでも同じ手法を使っています。

例:Facebook

4. 「サインイン」と「サインアップ」の違いを明確に

「サイン~」で始まる言葉はときに明確ではなく、人によっては違いがわかりづらいこともあります。

GoDaddyでは、ボタンの色を変えたり説明を導入するほか、「サイン」という言葉を限定しました。さらにヘッダーへも組み込むことによって差別化しています。

例:GoDaddy

 

5.SNSアカウントと連携してのログインを許可

FacebookやTwitterなどの、SNSアカウントに登録されている情報を使ってログインができると、ユーザーにとっては情報を入力する手間や、パスワードを覚えておく手間が省けるため、かなり便利に感じてもらえます。

例:Pinterest

6.ユーザーネームの代わりにEメールを使う

本当に必要でない限り、新規登録でユーザーネームを設定させないようにしましょう。Eメールや電話番号であれば、ユーザーは簡単に記憶できます。

例:MakeMyTrip

 7.電話番号の国番号を設定しておく

電話番号の入力が必要なら、国番号をユーザーに入力させるのではなく、Cookieの情報などから自動設定しておきましょう。選択肢は残しましょう。

例:Yatra

8. ログイン画面と新規登録画面の行き来をスムーズに

新規登録をするはずのユーザーが間違えてログインページに行ってしまうことはよくあります。どちらのページにも「ログイン画面」と「新規登録画面」のリンクを設置しておくなどして、つながりを作ってあげましょう。

9.入力する項目を選択しておく

PCでのみ可能ですが、ログインページではデフォルトで最初の項目を選択するように設定しておくことで、ユーザー入力する場所をクリックする必要性がなくなります。

例:Amazon

10.ログイン状態を保つ

ユーザーがWebサイトに入ってすぐ円滑にサービスを使用できるように、ログイン状態を保つという選択肢を与えるのも大切です。

例:Microsoft

11. ユーザー情報を保存しておく

前回ログインした人が再度使用するときに、すでに情報が保存されていると便利です。

12. ラベルは揃える

ラベルは大文字、小文字は統一し、上揃えにしておくと見やすいです。マテリアルデザインでは、短く明確なものがよく使われています。

13. プレースホルダに的確なメッセージを

仮のプレースホルダをラベルに使用するべきではありません。パスワードの文字数や番号など、実用的なアドバイスにのみ使用しましょう。

14.パスワードを表示する

パスワードを正しく入力したかを確認するため、見えるようにしておくことも大切です。基本的にパスワードは隠されているべきですが、ユーザーが必要に応じて表示できるとさらに使いやすく感じるものです。

例:Indika

15. CAPS Lockオンで通知

ユーザーがパスワードを正しく入力しているつもりなのに、何度もエラーになってしまうのにはCAPS Lockがオンになっていることが原因かもしれません。通知してあげましょう。

16. パスワードの強度を確認

パスワードは、当然ながら複雑であるほどハックされづらいため、ユーザーが簡単すぎるパスワードを設定しないようなセキュリティ対策も大切です。数字や大文字・小文字の組み合わせを確認して、パスワードの強度を一定のレベルまで上げるようにしましょう。

17.具体的なエラーメッセージの表示

ログインエラーやと黒く情報の抜け漏れがあった時には、具体的にどこを改善するべきか指摘しましょう。

例:Evernote

18.パスワード忘れの救済措置を用意

パスワードを忘れたときにはどうしたら良いか、というボタンは必ずログインページに置いておきましょう。メールアドレスや携帯番号、秘密の質問などで再設定ができるようになっているサービスも多いですよね。

これが当たり前のように置いてない場合、ユーザーはどうしても使いづらさを感じてしまいます。

例:Adobe ID

(翻訳:Kelala)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ