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

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）