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

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

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

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

チェックリスト

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

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

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

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

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

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

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

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

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

</ph>

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

</ph>

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">をご覧ください。

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

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

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

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

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

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

そのため、登録フォームを正しくコーディングすること、特に正しい 予測入力値。登録フォームでは、新しいパスワードとして 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> 。

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

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

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

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

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

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

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

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

</ph>

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

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

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

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

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

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

</ph>

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

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

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

ユーザー名に注意する

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

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

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

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

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

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

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

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

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

学習を続ける

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

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