クロスプラットフォームのブラウザ機能を使用して、安全でアクセスしやすく、使いやすい登録フォームを作成します。
ユーザーがサイトに登録する必要がある場合は、登録フォームのデザインが重要になります。これは、接続が不安定な場合、モバイルを使用している場合、急いでいる場合、ストレスを感じている場合に特に当てはまります。登録フォームのデザインが不適切だと、直帰率が高くなります。直帰は、登録の機会を逃しただけでなく、顧客を失い、ユーザーを不満にさせたことを意味する可能性があります。
導入方法
以下に、効果的な登録フォームを作成するための最も重要なガイドラインを示します。
意味のある有効な HTML を使用する
フォーム作成用に構築された要素と属性を最大限に活用します。
<form>、<input>、<label>、<button>type、autocomplete、inputmode
これらにより、組み込みのブラウザ機能が有効になり、ユーザー補助が向上し、マークアップに意味が追加されます。
<label> 要素を使用して、データ入力用のフォーム フィールドにラベルを付ける
<input>、<select>、<textarea> にラベルを付けるには、<label> を使用します。ラベルの for 属性に、入力の id と同じ値を指定して、ラベルを入力に関連付けます。
HTML 属性を最大限に活用する
適切な <input> 要素の <type> 属性を使用して、モバイルで適切なキーボードを提供し、ブラウザによる基本的な組み込み検証を有効にすることで、ユーザーがデータを入力しやすくします。
メールアドレスには常に type="email" を、電話番号には常に type="tel" を使用してください。
すべての <input>、<select>、<textarea> 要素は、ユーザー補助を改善し、ユーザーがデータを再入力しなくて済むように、適切な autocomplete 属性を持つべきです。
ユーザー名とメールアドレスの入力には、文章ではなく識別子を保持します。spellcheck="false" を追加して、ブラウザがアカウントに一致しないものに書き換えないようにします。autocorrect と autocapitalize は input type="email" では常に無効になりますが、メールアドレス以外のユーザー名には必須です。
ボタンを役立つものにする
ボタンには <button> を使用します。<input type="submit"> を使用することもできますが、div やその他のランダムな要素をボタンとして使用しないでください。ボタン要素は、ユーザー補助機能、組み込みのフォーム送信機能を提供し、簡単にスタイルを設定できます。
各フォームの送信ボタンに、そのボタンの動作を示す値を指定します。わかりやすく、認識しやすいラベルを使用します。たとえば、[続行] や [送信] ではなく、[アカウントを作成] や [登録] を使用します。
可能な限り、1 つの名前入力を使用する
名前、姓、敬称、その他の名前の部分を個別に保存する正当な理由がない限り、ユーザーが 1 つの入力で名前を入力できるようにします。名前の入力欄を 1 つにすることで、フォームがシンプルになり、切り取りと貼り付けが可能になり、自動入力が簡単になります。
国際的な名前を許可します。検証では、ラテン文字のみに一致する正規表現を使用しないでください。[Latin-only] を選択すると、ラテン文字以外の文字を含む名前や住所のユーザーが除外されます。代わりに Unicode 文字の一致を許可し、バックエンドが入力と出力の両方で Unicode を安全にサポートするようにします。正規表現の Unicode は、最新のブラウザで十分にサポートされています。
登録の進行状況を表示する
登録の各ステップで、ページのタイトルと説明的なボタンの値を使用して、今何をする必要があるのか、次のステップは何なのかを明確にします。
フォーム入力で enterkeyhint 属性を使用して、モバイル キーボードの Enter キーのラベルを設定します。たとえば、複数ページのフォームでは enterkeyhint="previous" と enterkeyhint="next" を使用し、フォームの最後の入力には enterkeyhint="done" を、検索入力には enterkeyhint="search" を使用します。
ユーザーが登録データを再入力しなくて済むようにする
登録フォームに適切な autocomplete 値を追加してください。
これにより、ブラウザは登録情報を安全に保存し、フォームデータを正しく入力して、ユーザーを支援できます。予測入力がないと、ユーザーは登録情報の物理的な記録を保持したり、登録データをデバイスに安全でない方法で保存したりする可能性が高くなります。
慎重に検証する
リアルタイムとフォーム送信前の両方でデータ入力を検証します。メールアドレスの入力には type="email" を使用します。ブラウザが形式を自動的に検証します。パスワードには、pattern 属性を使用して強度要件を適用し、検証に失敗した場合は明確なエラー メッセージを表示します。必須フィールドに required 属性を追加して、空の送信を防ぎます。
登録を独自の <form> 要素に配置する
ユーザーにデータを入力してもらう場合は、常に <form> 要素を使用します。
入力を <div> でラップせず、入力データの送信を JavaScript のみで処理する。通常は <form> 要素を使用することをおすすめします。これにより、スクリーン リーダーなどのアシスタント デバイスでサイトにアクセスできるようになり、さまざまな組み込みブラウザ機能が有効になります。また、古いブラウザでも基本的な機能の登録を簡単に構築でき、JavaScript が失敗した場合でも動作します。
入力を重複させない
一部のサイトでは、ユーザーにメールアドレスやパスワードを 2 回入力するよう求めています。これにより、一部のユーザーのエラーは減るかもしれませんが、すべてのユーザーに余分な作業が発生し、放棄率が高くなります。ブラウザがメールアドレスを自動入力したり、安全なパスワードを提案したりする場合も、2 回尋ねる意味はありません。ユーザーがメールアドレスを確認できるようにし（いずれにせよ、これを行う必要があります）、必要に応じてパスワードを簡単に再設定できるようにすることをおすすめします。
パスワードを非公開にする（ただし、ユーザーが希望する場合は表示できるようにする）
パスワード入力には、パスワード テキストを非表示にし、入力がパスワード用であることをブラウザが認識できるように、type="password" を指定する必要があります。（ブラウザはさまざまな手法を使用して入力ロールを理解し、パスワードの保存を提案するかどうかを決定します）。
ユーザーが入力したテキストを確認できるように、[パスワードを表示] の切り替えを追加する必要があります。また、[パスワードを忘れた場合] のリンクも忘れずに追加してください。
モバイル ユーザーに適切なキーボードを表示する
<input type="email"> を使用すると、モバイル ユーザーに適切なキーボードを提供し、ブラウザによる基本的な組み込みのメールアドレス検証を有効にできます。JavaScript は必要ありません。
メールアドレスではなく電話番号を使用する必要がある場合は、<input type="tel"> を使用すると、モバイルで電話キーパッドが有効になります。必要に応じて inputmode 属性を使用することもできます。inputmode="numeric" は PIN 番号に最適です。
モバイルキーボードが [登録] ボタンを遮らないようにする
注意しないと、モバイルキーボードがフォームを覆ったり、最悪の場合、[登録] ボタンを部分的に遮ったりする可能性があります。ユーザーは、何が起こったのかを理解する前に諦めてしまう可能性があります。
可能であれば、登録ページの上部にメール（または電話番号）とパスワードの入力欄、[登録] ボタンのみを表示することで、この問題を回避してください。他のコンテンツは下に配置します。
ユーザーがデータを再入力しなくて済むようにする
ブラウザがデータを正しく保存し、入力を自動入力できるようにすることで、ユーザーがメールアドレスとパスワードの値を覚えて入力する必要がなくなります。これはモバイルでは特に重要であり、放棄率の高いメール入力では不可欠です。これには次の 2 つの部分があります。
autocomplete、name、id、type属性は、ブラウザが入力の役割を理解し、後で自動入力に使用できるデータを保存するのに役立ちます。自動入力のためにデータを保存できるようにするには、最新のブラウザでは、入力に安定したname値またはid値（ページの読み込みやサイトのデプロイごとにランダムに生成されるのではなく）が必要であり、submitボタンを含む<form>要素に配置する必要があります。autocomplete属性は、ブラウザが保存されたデータを使用して入力を正しく自動入力するのに役立ちます。
メール入力には autocomplete="username" を使用します。username は、最新のブラウザのパスワード マネージャーで認識されるためです。ただし、type="email" を使用する必要があり、id="email" と name="email" を使用することもできます。パスワード入力の場合は、適切な autocomplete 値を使用して、ブラウザが新しいパスワードと現在のパスワードを区別できるようにします。
新しいパスワードには autocomplete="new-password" を使用する
必須: 登録フォームの場合は autocomplete="new-password" を使用します。
<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>
ブラウザで安全なパスワードを自動生成できるようにする
最新のブラウザは、ヒューリスティックを使用して、パスワード マネージャーの UI を表示するタイミングを決定し、安全なパスワードを提案します。
ブラウザにパスワード生成機能が組み込まれているため、ユーザーやデベロッパーは「安全なパスワード」とは何かを考える必要がありません。ブラウザはパスワードを安全に保存し、必要に応じて自動入力できるため、ユーザーがパスワードを覚えたり入力したりする必要はありません。ブラウザに組み込まれているパスワード生成機能を使用するようユーザーに促すことで、ユーザーがサイトで一意の安全なパスワードを使用する可能性が高まり、他の場所で漏洩する可能性のあるパスワードを再利用する可能性が低くなります。
ユーザーが誤って入力を忘れないようにする
メールアドレスとパスワードの両方のフィールドに required 属性を追加します。最新のブラウザでは、不足しているデータに対して自動的にプロンプトが表示され、フォーカスが設定されます。
パスワードの貼り付けを許可する
一部のサイトでは、パスワード入力欄にテキストを貼り付けることができません。
パスワードの貼り付けを禁止すると、ユーザーは不便に感じ、覚えやすいパスワード（つまり、侵害されやすいパスワード）を使用するようになります。英国の国家サイバー セキュリティ センターなどの組織によると、実際にはセキュリティが低下する可能性があります。ユーザーは、パスワードを貼り付けようとした後に初めて貼り付けが許可されていないことに気付くため、パスワードの貼り付けを禁止してもクリップボードの脆弱性を回避することはできません。
サードパーティのログインを提供する
多くのユーザーは、メールアドレスとパスワードの登録フォームを使用してウェブサイトにログインすることを好みます。ただし、サードパーティの ID プロバイダ（フェデレーション ログイン）を使用してログインできるようにすることも必要です。
このアプローチにはいくつかのメリットがあります。フェデレーション ログインを使用してアカウントを作成するユーザーの場合、パスワードを要求、通信、保存する必要はありません。
また、統合ログインから、メールアドレスなどの検証済みのプロフィール情報にアクセスできる場合もあります。つまり、ユーザーがそのデータを入力する必要はなく、デベロッパーが自分で検証を行う必要もありません。また、連携ログインを使用すると、ユーザーが新しいデバイスを入手したときに、より簡単にログインできるようになります。
ユーザー名に注意する
ユーザー名が必要になるまで、ユーザー名の入力を求めないでください。ユーザーは、メールアドレス（または電話番号）とパスワードのみ、または必要に応じて連携ログインを使用して、登録とログインを行うことができます。ユーザーにユーザー名の選択と記憶を強制しないでください。
サイトでユーザー名が必要な場合は、ユーザー名に不合理なルールを課さないでください。また、ユーザーがユーザー名を更新できないようにしないでください。バックエンドでは、ユーザー名などの個人データに基づく識別子ではなく、ユーザー アカウントごとに一意の ID を生成する必要があります。
また、ユーザー名には autocomplete="username" を使用してください。
代替戦略
自動入力はプログレッシブ エンハンスメントです。自動入力に対応していないブラウザでは、ユーザーは登録認証情報を手動で入力する必要があります。セマンティック HTML の制約（type、inputmode、required など）は、ユーザー入力を検証して正しい仮想キーボードを提供するために、引き続き適切に機能します。