ユーザーの登録をサポートする
登録フォームは、ウェブサイト上のフォームとの最初のやり取りになることがよくあります。登録フォームの優れた設計は非常に重要であり、安全なフォームは不可欠です。
登録フォームを見て、ユーザーがウェブサイトで登録できるようにする方法を確認します。
登録フォームを最小限に抑え、アカウントの作成に必要なフォーム コントロールのみを表示します。ユーザーがアカウントの詳細を正しく入力できるように、フォーム コントロールを重複させないでください。代わりに確認メールを送信します。
アカウントの詳細
適切な autocomplete 属性を使用すると、ユーザーがアカウントの詳細を入力するのをサポートできます。メール フィールドには autocomplete="email" を使用し、新しいパスワード フィールドには autocomplete="new-password" を使用します。
詳しくは、入力コントロールの自動入力をご覧ください。
パスワードを表示する <button> を提供して、ユーザーが安全なパスワードを入力できるようにすることもできます。パスワードの表示パターンについて詳しくは、こちらをご覧ください。
登録フォームを保護する
パスワードを平文で保存したり送信したりしないでください。パスワードをソルト処理してハッシュ化してください。また、独自のハッシュ アルゴリズムを考案しようとしないでください。
特に個人情報や機密情報を保存する場合は、多要素認証を提供します。SMS OTP のベスト プラクティスと WebAuthn を使用した強力な認証の有効化では、多要素認証を実装する方法について説明しています。
不正使用されたパスワードが使用されないようにします。たとえば、Have I Been Pwned の API を使用して漏洩したパスワードを検出し、ユーザーに別の新しいパスワードの入力を提案したり、パスワードが漏洩した場合は警告したりします。
ユーザーのログインをサポートする
ユーザーがウェブサイトにログインできるように、ログイン フォームを作成する方法をご覧ください。
登録ボタンとログインボタンの場所をわかりやすくします。フォームがタッチ デバイスで使用できることを確認します。
- ボタンのタップ ターゲットのサイズが 48 ピクセル以上である。
- フォーム要素の
font-sizeが十分に大きい（モバイルでは20px程度が適切です）。 - フォーム コントロールの間に十分なスペース（
margin）があり、入力欄が十分に大きい（モバイルでは少なくともpadding: 15pxを使用している）。
ユーザーがメールアドレスとパスワードを入力するのをサポートする
ブラウザやパスワード マネージャーがアカウントの詳細を自動入力できるようにします。メール フィールドには autocomplete="email" を、現在のパスワード フィールドには autocomplete="current-password" を使用します。
ユーザーがアカウントの詳細を手動で入力できるようにするには、メール フィールドに type="email" を使用して、モバイル デバイスに適切な画面キーボードを表示します。
メール フィールドとパスワード フィールドに required 属性を使用して、ユーザーがフォームを送信したときに無効な値を警告できるようにします。リアルタイム検証を使用して、ユーザーがフォームを送信するまで待つのではなく、無効なデータを入力した直後に修正できるようにすることを検討してください。
ユーザーが入力したパスワードを確認できるようにする
<input type="password"> に入力したテキストは、ユーザーのプライバシーを尊重するため、デフォルトで非表示になります。入力したテキストの表示 / 非表示を切り替える <button> を表示して、ユーザーがパスワードを入力できるようにします。
詳しくは、パスワード表示 <button> の実装をご覧ください。
ログイン フォームと登録フォームが使用可能であることを確認する
実際のユーザーでログイン フォームと登録フォームを定期的にテストして、認証が想定どおりに機能することを確認します。分析と実際のユーザーの測定（RUM）を使用してフィールド データを収集し、Lighthouse や PageSpeed Insights などのツールを使用してテストを自分で実行します。詳しくは、ユーザビリティのテストと分析データの収集をご覧ください。
フォームがさまざまなブラウザやプラットフォームで動作することを確認します。キーボードのみを使用するか、Mac の VoiceOver や Windows の NVDA などのスクリーン リーダーを使用して、さまざまな画面サイズでフォームをテストします。
お客様がアカウント設定を変更できるようサポートする
ユーザーがメールアドレス、パスワード、ユーザー名など、すべてのアカウント設定を変更できるようにします。
保存しているデータを明確にし、ユーザーがいつでもすべての個人データをダウンロードできるようにします。ユーザーがアカウントの削除を希望する場合は、アカウントを削除できるようにします。このようなアカウント管理機能は、一部の地域では法的要件となっている場合があります。
ユーザーがパスワードを更新できるようにする
ユーザーがパスワードを簡単に更新できるようにします。
パスワードを変更する前に現在のパスワードをユーザーに尋ね、パスワードの変更に関するメールを送信します。このメールには、アカウントを元に戻してロックするオプションが含まれます。
新しいパスワードをリクエストするオプションを追加し、新しいパスワードをリクエストするための .well-known URL の提供を検討します。