ID

多くの場合、登録フォームはウェブサイト上のフォームで最初に操作されるものです。 登録フォームは適切に設計することが重要であり、フォームを安全に作成することが不可欠です。

ここでは、登録フォームの概要と、ユーザーがウェブサイトで登録できるようサポートする方法をご紹介します。

登録フォームは最小限に抑え、アカウントの作成に必要なフォーム コントロールのみを表示します。 ユーザーがアカウントの詳細を正しく確認できるように、フォーム コントロールを二重に作成しないでください。代わりに確認メールを送信します。

ユーザーがアカウントの詳細を入力できるようサポートする

適切な 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)を使用してフィールド データを収集し、LighthousePageSpeed Insights などのツールを使用してご自身でテストを実施します。詳細については、ユーザビリティのテスト分析データの収集をご覧ください。

さまざまなブラウザやプラットフォームでフォームが機能するようにします。 キーボードのみを使用するか、スクリーン リーダー(Mac では VoiceOver、Windows では NVDA など)を使用して、さまざまな画面サイズでフォームをテストします。

ユーザーがアカウント設定を変更できるようサポートする

ユーザーがメールアドレス、パスワード、ユーザー名など、すべてのアカウント設定を変更できるようにします。

保存するデータを明示し ユーザーがいつでもすべての個人データをダウンロードできるようにします必要に応じて、ユーザーがアカウントを削除できるようにします。 このようなアカウント管理機能は、地域によっては法的要件となる場合があります。

ユーザーがパスワードを更新できるようにする

ユーザーがパスワードを簡単に更新できるようにします。

パスワードを変更する前にユーザーに現在のパスワードの確認を求め、アカウントを元に戻してロックするオプションが記載された、パスワードの変更に関するメールを送信します。

新しいパスワードをリクエストするオプションを追加し、新しいパスワードをリクエストするための .well-known URL を提供することを検討してください。

リソース