登録フォームのベスト プラクティス

ユーザーが簡単に登録、ログイン、アカウントの詳細を管理できるようにサポートします。

Sam Dutton

サイトにログインする必要がある場合は、登録フォームのデザインが最適です。 重大な問題ですこれは、接続が不安定なユーザー、モバイル デバイス、 急いでいるときやストレスにさらされているときなどに便利です。登録フォームのデザインが不適切だと、直帰率が高くなります。 直帰が 1 回発生するたびに、登録を逃すだけでなく、ユーザーが不満を募らせている可能性があります 学びます。

試してみる: 実践的なチュートリアルでこれらのベスト プラクティスを学ぶ場合は、登録フォームに関するベスト プラクティスの Codelab をご覧ください。

次の非常にシンプルな登録フォームの例は、すべてのベスト プラクティスを示しています。

注意: この投稿では、フォームのベスト プラクティスについて説明します。サードパーティの ID プロバイダ（フェデレーション ログイン）を使用した登録の実装方法や、ユーザーの認証、認証情報の保存、アカウントの管理を行うためのバックエンド サービスの構築方法については説明しません。Google ログインをウェブアプリに統合するでは、登録オプションにフェデレーション ログインを追加する方法について説明します。ユーザー アカウント、認証、パスワード管理に関する 12 のベスト プラクティスでは、ユーザー アカウントの管理に関するバックエンドの基本原則について説明しています。

チェックリスト

• 可能であればログインを避ける。
• アカウントの作成方法をわかりやすくする。
• アカウントの詳細にアクセスする方法をわかりやすく示します。
• フォームをすっきり整理:
• セッションの長さを考慮する。
• パスワード マネージャーがパスワードを安全に提案、保存できるようにします。
• 不正使用されたパスワードを許可しない。
• パスワードの貼り付けを許可する。
• パスワードを書式なしテキストで保存または送信しないでください。
• パスワードを強制的に更新しない。
• パスワードの変更やリセットを簡単に行えるようにする。
• フェデレーション ログインを有効にします。
• アカウントの切り替えを簡単に行えるようにする。
• 多要素認証の提供を検討する。
• ユーザー名に注意する。
• ラボだけでなくフィールドでもテストします。
• さまざまなブラウザ、デバイス、プラットフォームでテストできます。

可能であればログインしない

登録フォームを実装し、サイトでユーザーにアカウントの作成を求める前に、以下の点を考慮してください。 判断できます可能な限り、ログインの背後に機能を制限しないようにする必要があります。

最適な登録フォームは、登録フォームを使わないことです。

ユーザーにアカウントの作成を求めることで、ユーザーはユーザーとユーザーが何をしようとしているのかを考えます。 個人データについて信頼してもらい、ユーザーに好意的を伝えています。すべてのパスワードとアイテム 保存するデータのうち、プライバシーとセキュリティの「データ負債」が伴い、 できます。

アカウントの作成をおすすめする主な理由が、ナビゲーションや 代わりにクライアントサイド ストレージの使用を検討してください。ショッピング用 ユーザーが商品を購入するためにアカウントの作成を強制していることが、ショッピングの主な理由として挙げられています。 あります。「ログインせずに決済」をデフォルトに設定する必要があります。

ログインをわかりやすくする

ログインやログインなど、サイトでのアカウントの作成方法をわかりやすく示します。 ] ボタンをクリックすると、あいまいなアイコンやあいまいな表現は使用しないでください（例: 「参加しましょう！」 「参加」）し、ナビゲーション メニューにログインを非表示にしないでください。ユーザビリティのエキスパートである Steve Krug 氏は、 必要に応じて ウェブチームの他のメンバーを説得し、分析を使用して、 。

<ph type="x-smartling-placeholder">

</ph>

ログインをわかりやすくする:アイコンはあいまいなこともありますが、 in ボタンやリンクがわかりやすい名前です。

で確認できます。

注: アカウントを作成するためのボタン（またはリンク）と、既存のユーザーがログインするための別のボタンを追加するかどうか、多くの人気サイトでは [ログイン] ボタンが 1 つ表示されるようになっています。ユーザーがこれをタップまたはクリックすると、必要に応じてアカウントを作成するためのリンクも表示されます。これは今では一般的なパターンで、ユーザーも理解している可能性が高いと思われますが、インタラクション分析を使用すると、1 つのボタンが最適に動作するかどうかをモニタリングできます。

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

Gmail のログインページには、アカウントを作成するためのリンクがあります。
ここに示されているサイズより大きいウィンドウ サイズでは、Gmail に [ログイン] リンクと [作成 アカウント] ボタンをクリックします。

Google などの ID プロバイダ経由で登録したユーザーのアカウントと、 メールとパスワードを使用して登録することもできます。ユーザーのメールアドレスにアクセスできると、これは簡単に行えます。 ID プロバイダのプロファイル データから取得し、2 つのアカウントと一致させます。次のコードは ユーザーのメールデータにアクセスする方法

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

アカウントの詳細情報にアクセスする方法を明示する

ユーザーがログインしたら、アカウントの詳細にアクセスする方法を明確にします。特に、 パスワードを変更または再設定する方法がすぐにわかる。

フォームをすっきり整理

登録フローでの仕事は、複雑さを最小限に抑え、ユーザーの作業に集中できるようにすることです。不要なものを整理する。 今は、気晴らしや誘惑のための時間ではありません。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">をご覧ください。

登録完了の妨げにならないように注意します。

登録時には、最低限の金額をリクエストします。追加のユーザーデータ（名前、住所など）を収集する ユーザーがデータを提供することで明確なメリットがあることがわかれば、データを提供できます。留意点 通信、保存するデータ項目すべてに費用と法的責任が課せられることを覚えておいてください。

ユーザーが連絡先情報を正しく入力できるようにするためだけに、データを重複して入力しないでください。その結果 フォームのフィールドに自動入力されても意味をなしません。代わりに確認を送信してください。 ユーザーにコードを送信し、アカウントの作成に進みます。 返信すると予測されます。これは一般的な登録パターンであり、ユーザーは使い慣れています。

ユーザーがログインするたびにコードを送信することで、パスワード不要のログインを検討することをおすすめします。 ダウンロードします。Slack や Medium などのサイトは、これに対応したバージョンを使用している。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">をご覧ください。

medium.com では、パスワードなしでログインできます。

フェデレーション ログインと同様に、ユーザー パスワードを管理する必要がないという利点もあります。

セッションの長さを考慮する

ユーザー ID のどの方法を採用する場合でも、セッションについて慎重に決定する必要がある 長さ: ユーザーのログイン継続時間とログアウトの原因。

ユーザーがモバイルとパソコンのどちらを使用しているかを確認し、 パソコンで共有していることがわかります。

注: 共有デバイスに関する問題の一部は、購入時やアカウントの更新時など、機密性の高い機能に対して再認証を適用することで回避できます。再認証の実装方法について詳しくは、Codelab の初めての WebAuthn アプリをご覧ください。

パスワード マネージャーがパスワードを安全に提案、保存できるようにする

サードパーティや組み込みのブラウザのパスワード マネージャーがパスワードを提案、保存することで、 ユーザー自身でパスワードを選択、記憶、入力する必要がありません。パスワード マネージャーは 最新のブラウザ、デバイス間、プラットフォーム固有のアプリやウェブアプリ間でのアカウントの同期。 対応しています。

そのため、登録フォームを正しくコーディングすること、特に正しい 予測入力値。登録フォームでは、新しいパスワードとして autocomplete="new-password" を使用し、 可能な場合は、autocomplete="email" など他のフォーム フィールドに予測入力値を修正する および autocomplete="tel"。別の name や id を使用してパスワード マネージャーをサポートすることもできます 登録フォームとログイン フォーム内の form 要素自体、および input、select の値を問い合わせる および textarea 要素。

適切な type 属性も使用する必要があります。 を使用して、モバイルに適したキーボードを提供し、ブラウザによる基本的な組み込み検証を有効にしています。 詳しくは、支払いフォームと住所フォームに関するおすすめの方法をご覧ください。

注: ログイン フォームのベスト プラクティスには、組み込みのブラウザ機能を活用するためにフォームのデザイン、レイアウト、アクセシビリティを改善する方法や、フォームを正しくコーディングする方法など、他にも多くのヒントが記載されています。

ユーザーが安全なパスワードを入力していることを確認する

パスワード マネージャーを有効にしてパスワードを提案できるようにすることが最善であり、 ブラウザやサードパーティのブラウザ マネージャーが提示する安全なパスワードをユーザーに許可する。

しかし、多くのユーザーが自分のパスワードを入力したいので、パスワードのルールを実装する必要があります。 強化します。米国国立標準技術研究所の説明 安全でないパスワードを避ける方法をご確認ください。

警告: 一部のサイトの登録フォームには、ブラウザやサードパーティのパスワード マネージャーによる安全なパスワードの生成を許可しないパスワード確認ルールがあります。フォーム入力の妨げとなり、ユーザーに不快感を与え、独自のパスワードを設定する必要があり、パスワード マネージャーによって生成されるパスワードよりも安全性が低いため、サイトではこのようなことを行わないようにしてください。

不正使用されたパスワードを許可しない

パスワードに適用するルールがどのようなものであっても、Google Cloud で漏洩したパスワードは 防ぐことができます。

ユーザーがパスワードを入力したら、そのパスワードが、すでに登録済みのものでないことを確認する必要があります。 できます。サイトで Have I Been Pwned に、パスワード用の API を用意している 自分でサービスとして実行することもできます

Google のパスワード マネージャーでは、既存のパスワードが 不正使用されています。

ユーザーから提示されたパスワードを拒否した場合は、その理由を具体的に説明します。 問題をインラインで表示し、解決方法を説明する ユーザーが値を入力したとき（ユーザーが登録フォームを送信して サーバーからの応答を待ちます。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">をご覧ください。

パスワードが拒否された理由を明確にする。

パスワードの貼り付けを禁止しない

一部のサイトでは、パスワード入力にテキストを貼り付けることが許可されていません。

パスワードの貼り付けを禁止すると、ユーザーに不快感を与えるほか、覚えやすいパスワードを使用する（つまり、 侵害されやすいなど）、英国の国家組織や サイバー セキュリティ センターによって、実際にはセキュリティが低下する可能性があります。 ユーザーはパスワードを貼り付けようとした後にのみ、貼り付けが許可されていないことに気が付くため、 パスワードの貼り付けを無効にしても、クリップボードの脆弱性は回避できません。

パスワードを書式なしテキストで保存または送信しない

パスワードはソルトとハッシュにしてください。独自のハッシュ アルゴリズムを作ろうとしないでください。

パスワードを強制的に更新しない

パスワードを勝手に更新することをユーザーに強制しないでください。

パスワードの更新を強制すると、IT 部門のコストがかさみ、ユーザーの負担になります。 セキュリティに及ぼす影響をご覧ください。また 読者は 覚えのないパスワードを使用したり、パスワードを物理的な記録として保管したりすることが可能になります。

パスワードを強制的に更新するのではなく、通常とは異なるアカウント アクティビティをモニタリングし、ユーザーに警告する必要があります。 可能であれば、データ侵害によって漏洩したパスワードもモニタリングする必要があります。

また、ユーザーがアカウントのログイン履歴にアクセスできるようにして、 ログインが行われた日時などです

<ph type="x-smartling-placeholder">

</ph>

Gmail アカウント アクティビティ ページ

。

パスワードの変更またはリセットを簡単に行えるようにする

アカウント パスワードをどこで、どのように更新するかをユーザーに明示します。一部のサイトでは、 困難です。

もちろん、ユーザーがパスワードを忘れた場合に簡単に再設定できるようにすることも必要です。 Open Web Application Security Project では、 パスワード。

ビジネスとユーザーの安全を守るために、特に重要なのは、ユーザーが 再発防止策を講じますこれを簡単にするために、 /.well-known/change-password URL: パスワード管理ページにリダイレクトしますこれにより、パスワード マネージャーは サイトのパスワードをユーザーが変更できるページに直接アクセスできます。この機能は は Safari と Chrome に実装されており、他のブラウザにも導入される予定です。ユーザーによるパスワード変更のサポート よく知られた URL を追加してパスワードを簡単に変更できるようにするで、 実装します。

また、ユーザーが必要に応じてアカウントを削除できるようにする必要もあります。

サードパーティの ID プロバイダ経由でログインできるようにする

多くのユーザーは、メールアドレスとパスワードの登録フォームを使用してウェブサイトにログインすることを好みます。 ただし、ユーザーがサードパーティの ID プロバイダ（別名: フェデレーション ログインを使用できます。

<ph type="x-smartling-placeholder">

</ph>

Google と Apple のログイン オプションが表示された WordPress のログインページ。

このアプローチにはいくつかの利点があります。フェデレーション ログインを使用してアカウントを作成したユーザーについては、 パスワードの要求、通信、保存が不要になります。

次のようなフェデレーション ログインから、確認済みの追加のプロフィール情報にアクセスできる場合もあります。 として設定できます。つまり、ユーザーがデータを入力する必要はなく、管理者がデータを入力する必要がありません。 確認する必要があります。また、フェデレーション ログインを使用すると、ログインしたときに、 ダウンロードします

ウェブアプリへの Google ログインの統合 登録オプションにフェデレーション ログインを追加する方法について説明します。その他多数の ID プラットフォームを利用できます。

注: 「初日のエクスペリエンス」新しいデバイスを購入する際の重要性がますます高まっています。ユーザーは、スマートフォン、ノートパソコン、デスクトップ パソコン、タブレット、テレビ、車など、複数のデバイスからログインすることを期待しています。登録フォームやログイン フォームがシームレスに使用できなければ、ユーザーを失うか、少なくとも設定し直さない限りユーザーとの接点が失われる可能性があります。新しいデバイスを使用しているユーザーができるだけすばやく簡単にサイトを利用できるようにする必要があります。この点でも、フェデレーション ログインが役に立ちます。

アカウントの切り替えを簡単に

多くのユーザーはデバイスを共有し、同じブラウザを使用してアカウントを切り替えています。ユーザーがアクセスできるかどうか フェデレーション ログインを使用するかどうかに関係なく、アカウントの切り替えはシンプルにする必要があります。

<ph type="x-smartling-placeholder">

</ph>

Gmail でのアカウントの切り替え。

多要素認証の提供を検討する

多要素認証とは、ユーザーが複数の方法で認証を行えるようにすることです。 たとえば、ユーザーにパスワードの設定を要求するだけでなく、 メールや SMS テキスト メッセージで送信されたワンタイム パスコード、またはアプリベースのワンタイム パスコードを使用する 。SMS OTP のベスト プラクティス WebAuthn による強力な認証の有効化 多要素認証の実装方法について説明します。

サイトが個人または会社のサービスを処理する場合は、必ず多要素認証を提供（または適用）する 機密情報を保護する責任を負います。

ユーザー名に注意する

必要な場合以外（または必要なときまで）でない限り、ユーザー名を要求しないでください。ユーザーが メールアドレス（または電話番号）とパスワード、またはフェデレーション ログインのみ することもできます。ユーザーにユーザー名の選択や記憶を強制しないでください。

サイトでユーザー名が必須になっている場合は、ユーザー名に不当なルールを課したり、ユーザー名の使用を ユーザー名を更新できないようにします。バックエンドでは、ユーザー アカウントごとに一意の ID を生成する必要があります。 識別子ではありません。

また、ユーザー名には autocomplete="username" を使用してください。

注意: 個人名と同様に、ユーザー名にラテン文字の文字以外が使用されていることを確認してください。支払いフォームと住所フォームのベスト プラクティスでは、Unicode 文字照合を使用して検証する方法とその理由について説明しています。

さまざまなデバイス、プラットフォーム、ブラウザ、バージョンでテストできる

ユーザーが最もよく使用するプラットフォームで登録フォームをテストします。フォーム要素の機能は異なる場合がありますが、 ビューポートのサイズの違いによって レイアウトに問題が生じる可能性がありますBrowserStack では、 オープンソース プロジェクトです。

分析と実際のユーザーのモニタリングを実装する

フィールド データとラボデータが必要です。 では、登録フォームでのユーザー エクスペリエンスを把握する方法を紹介します。アナリティクスとリアル ユーザーのモニタリング （RUM）は、登録ページが ユーザーが操作する（または操作しない）UI コンポーネントと、ユーザーが操作を完了するまでにかかる時間 できます。

• ページ分析: 登録フローの各ページのページビュー、直帰率、離脱。
• インタラクションの分析: 目標達成プロセス および events ユーザーが登録手続きを放棄した場所や ボタンをクリックする割合 リンクなど、登録ページのコンポーネントを使用します。
• ウェブサイトのパフォーマンス: ユーザー中心の指標 登録フローの読み込みが遅いか、見た目が不安定かを判断できます。

わずかな変更でも、登録フォームの完了率に大きな違いが見られます。分析と RUM 最適化して変更の優先順位付けを行い、サイト上で問題が発生していないかをモニタリングできます。 公開されています。

学習を続ける

• ログイン フォームに関するおすすめの方法
• 支払いフォームと住所フォームに関するベスト プラクティス
• 魅力的なフォームを作成
• モバイル フォームのデザインに関するベスト プラクティス
• フォーム コントロールの機能強化
• アクセシブルなフォームの作成
• Credential Management API を使用した登録フローの合理化
• WebOTP API を使用してウェブ上で電話番号を確認する

写真撮影: @ecowarriorprincess（Unsplash より）