ユーザーの登録をサポートする
多くの場合、登録フォームはウェブサイト上のフォームで最初に操作されるものです。 登録フォームは適切に設計することが重要であり、フォームを安全に作成することが不可欠です。
ここでは、登録フォームの概要と、ユーザーがウェブサイトで登録できるようサポートする方法をご紹介します。
登録フォームは最小限に抑え、アカウントの作成に必要なフォーム コントロールのみを表示します。 ユーザーがアカウントの詳細を正しく確認できるように、フォーム コントロールを二重に作成しないでください。代わりに確認メールを送信します。
ユーザーがアカウントの詳細を入力できるようサポートする
適切な 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 を提供することを検討してください。