ログイン フォームのベスト プラクティス

クロス プラットフォームのブラウザ機能を使用して、安全でアクセスしやすく使いやすいログイン フォームを作成します。

Sam Dutton

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

次の簡単なログイン フォームの例で、すべてのベスト プラクティスをご確認ください。

チェックリスト

で確認できます。

わかりやすい HTML を使用する

ジョブ用にビルドされた要素（<form>、<label>、<button>）を使用します。これにより、 組み込みのブラウザ機能、ユーザー補助機能の改善、 マークアップを追加します。

<form>

入力を <div> でラップして入力データを処理したくなるかもしれません JavaScript のみで送信しています。通常は、P-MAX の <form> 要素です。これにより、スクリーン リーダーなどの支援機能がサイトにアクセスできるようになります 幅広い組み込みのブラウザ機能を組み込んで、ビルドが簡単になります。 基本的な機能によるログインが必須となっており、 JavaScript が失敗する。

<label>

入力にラベルを付けるには、<label> を使用します。

<label for="email">Email</label>
<input id="email" …>

理由は 2 つあります。

  • ラベルをタップまたはクリックすると、その入力にフォーカスが移動します。ラベルをラベルに関連付ける ラベルの for 属性と入力の name または id を使用して入力する必要があります。
  • ラベルまたはラベルの入力が受信されると、ラベルのテキストが読み上げられます 焦点を当てます

プレースホルダを入力ラベルとして使用しないでください。人は、自分の状態、 テキストを入力し始めると 「メールアドレス、電話番号、または口座の 。プレースホルダには、他にも多くの問題が発生する可能性があります。禁止事項: プレースホルダを使用する Attribute と フォームの項目のプレースホルダは 有害である 疑問に思われるかもしれません。

おそらく、ラベルは入力の上に配置することをおすすめします。これにより、一貫した モバイルとデスクトップの両方に対応しており、Google AI 調査、 スキャンを高速化できます全幅のラベルと入力を取得し、 ラベルのテキストに合わせてラベルと入力幅を調整する必要はありません。

<ph type="x-smartling-placeholder">
</ph> モバイルでのフォーム入力のラベル位置を示すスクリーンショット（入力の横、入力の上）。
ラベルと入力の幅は、両方が同じ行上にある場合、制限されます。

label-position Glitch を 自分の目で確かめてください。

<button>

<button> を使用する ボタンに！ボタン要素によるユーザー補助機能の動作と組み込みフォーム 送信機能があり、簡単にスタイル設定できます。説明しても意味がない <div> やボタンになりすましたその他の要素を使用する。

送信ボタンの内容が伝わるようにします。たとえば、アカウントの作成や [送信] や [開始] ではなくログインしてください。

フォームの送信を成功させる

フォームが送信されたことをパスワード管理者が把握できるようにします。2 つのモデル できます。

  • 別のページに移動します。
  • History.pushState() または History.replaceState() でナビゲーションをエミュレートする。 パスワード フォームを削除します。

XMLHttpRequest リクエストまたは fetch リクエストを使用して、ログインが成功したことを レスポンスで報告され、DOM から取り出されて処理されます。 ユーザーに成功を示すものとして 定義されます

ユーザーがタップまたはクリックしたら [ログイン] ボタンを無効にすることを検討する できます。多くのユーザーがボタンを何度もクリックする これは高速でレスポンシブなサイトでも 同じですやり取りが遅くなり サーバーの負荷が増大します。

逆に、ユーザー入力を待つフォーム送信を無効にしないでください。たとえば ユーザーが顧客情報を入力していない場合に、[ログイン] ボタンを無効にしない PIN を入力します。フォームの入力を見落とす可能性があります。その場合は、 （無効）[ログイン] ボタンが動作しないと思われる場合。少なくとも フォームの送信を無効にして、ユーザーが足りないデータを 無効のボタンをクリックします

入力を 2 倍にしない

サイトによっては、メールアドレスやパスワードを 2 回入力するようユーザーに強制している場合があります。これにより、 少人数のユーザーに対してエラーが表示されるが、すべてのユーザーに対して余分な作業が発生し、 放棄 。 また、2 回質問しても、ブラウザがメールアドレスやメールアドレスを 安全なパスワードを提案します。ユーザーがメールアドレスを確認できるようにすることをおすすめします。 （いずれにしてもこの操作は必須です）し、ユーザーが簡単にリセットできるように パスワードを入力します。

要素の属性を最大限に活用

魔法のような効果が得られます。 ブラウザには、入力要素の属性を使用する便利な組み込み機能が複数あります。

パスワードは非公開にし、必要に応じてユーザーが確認できるようにする

パスワード入力時に、パスワード テキストを非表示にして、type="password" パスワードに対する入力だと認識します。（ブラウザでは さまざまな手法を使用して、入力の役割を理解し、 パスワード保存を確認するかどうかを選択できます）

[パスワードを表示] 切り替えスイッチを追加して、ユーザーが [パスワードをお忘れの場合] のリンクを忘れずに追加してください。詳しくは、 パスワードの表示を有効にする。

<ph type="x-smartling-placeholder">
</ph> パスワード表示アイコンが表示されている Google ログイン フォーム。
Google ログイン フォームからのパスワード入力: パスワードを表示アイコンと [パスワードをお忘れの場合] リンク

モバイル ユーザーに適切なキーボードを提供する

<input type="email"> を使用して、モバイル ユーザーに適切なキーボードと ブラウザによる基本的な組み込みのメールアドレス検証を有効にする（JavaScript は不要） 必須！

メールアドレスの代わりに電話番号を使用する必要がある場合は、<input type="tel"> によってモバイルで電話キーパッドが有効になります。また、 inputmode 属性（必要な場合）: inputmode="numeric" は PIN に最適です。 あります。知っておきたいこと inputmode より詳しく見てみましょう

モバイル キーボードで [ログイン] ボタンが隠れないようにする

残念なことに、モバイル キーボードでフォームが隠れてしまったり、 さらに悪いことに、[ログイン] ボタンが部分的に隠れてしまうことがあります。ユーザーは次の日時より前にあきらめて 何が起こったのかを認識します。

<ph type="x-smartling-placeholder">
</ph> Android スマートフォンのログイン フォームのスクリーンショット 2 枚。1 つは、[送信] ボタンがスマートフォンのキーボードで隠されている様子を示している。
[ログイン] ボタン: 表示されるようになりました。

可能であれば、ログインページの上部にメールアドレス、電話番号、パスワードの入力と [ログイン] ボタンのみを表示することで、この状況を避けることができます。その他のコンテンツを以下に配置します。

<ph type="x-smartling-placeholder">
</ph> Android スマートフォンのログイン フォームのスクリーンショット: [ログイン] ボタンがスマートフォンのキーボードで隠されていません。
[ログイン] ボタンがキーボードによって遮られていない。

さまざまなデバイスでテストする

ターゲット オーディエンス向けにさまざまなデバイスでテストし、 必要があります。BrowserStack によりオープンソースの無料テストを実現 さまざまなプロジェクトのプロジェクト 使用できます。

<ph type="x-smartling-placeholder">
</ph> iPhone 7、8、11 のログインフォームのスクリーンショットiPhone 7 および 8 では、ログインボタンがスマートフォンのキーボードによって隠されるが、iPhone 11 では見えない
[ログイン] ボタン: iPhone 7 と iPhone 8 では非表示になりますが、iPhone 11 では非表示になります。

2 ページの使用を検討する

一部のサイト（Amazon や eBay など）は、 メール/電話番号とパスワードを 2 ページに表示。この方法では ユーザーは一度に 1 つのことしか担当しない。

<ph type="x-smartling-placeholder">
</ph> Amazon ウェブサイトのログイン フォームのスクリーンショット（2 つの独立したページに表示されているメールアドレス/電話番号とパスワード）。
2 段階のログイン: メールまたはスマートフォン、その次にパスワード。

1 つの <form> で実装するのが理想的です。JavaScript を使用する 最初はメールアドレス入力のみを表示し、次に入力を非表示にしてパスワード入力を表示します。 メールアドレスを入力し、 2 ページ目のフォームには、入力要素が非表示になっている必要があります。 email 値を追加して、パスワード マネージャーで正しい値を保存できるようにします。パスワード Chromium が認識するフォーム スタイル コード例をご覧ください。

ユーザーがデータを再入力しないようにする

ブラウザがデータを正しく保存し、入力を自動入力することで、ユーザーが メールとパスワードの値の入力を忘れずに済みます。これは特に重要です 放棄率が高いメール入力において重要です。

これには、次の 2 つの部分があります。

  1. autocomplete、name、id、type の各属性は、ブラウザが認識できるようにする 後で自動入力に使用できるデータを格納するための入力の役割。 データを保存して自動入力できるようにするために、最新のブラウザでは、 name または id の値が安定している（ページの読み込みのたびにランダムに生成されない、または サイトのデプロイなど）で、<form>submit ボタンを使用します。

  2. autocomplete 属性を使用すると、ブラウザで入力を正しく自動入力できます。 保存データです

username が認識されるため、メールアドレス入力には autocomplete="username" を使用します。 パスワード マネージャーによって管理されます。ただし、type="email" を使用する必要があります。 id="email" と name="email" を使用することもできます。

パスワードの入力には、ブラウザが識別できるように適切な autocomplete と id の値を使用します 新しいパスワードと現在のパスワードを区別できます。

新しいパスワードに autocomplete="new-password" と id="new-password" を使用する

  • 登録時のパスワード入力に autocomplete="new-password" と id="new-password" を使用する フォーム、または新しいパスワードの変更パスワードを入力します。

既存のパスワードとして autocomplete="current-password" と id="current-password" を使用する

  • パスワード入力に autocomplete="current-password" と id="current-password" を使用します。 ログイン フォーム、パスワード変更フォームへのユーザーの古いパスワードの入力などです。これにより、 そのサイト用に保存した現在のパスワードを使用させることができます。

登録フォームの場合:

<input type="password" autocomplete="new-password" id="new-password" …>

ログインの場合:

<input type="password" autocomplete="current-password" id="current-password" …>

パスワード マネージャーをサポートする

メールの自動入力とパスワードの候補の処理はブラウザによって異なる 違いはあるものの、効果はまったく同じです。Safari 11 以降（パソコンの場合） たとえば、パスワード マネージャーが表示され、その後に生体認証 可能な場合は指紋または顔認識を使用します。

<ph type="x-smartling-placeholder">
</ph> パソコンの Safari でのログイン プロセスの 3 つの段階（パスワード マネージャー、生体認証、自動入力）のスクリーンショット
テキスト入力なしで予測入力を使用してログイン

パソコンの Chrome にメール候補とパスワード マネージャーが表示され、パスワードが自動入力されます。

<ph type="x-smartling-placeholder">
</ph> パソコンの Chrome でのログイン プロセスの 4 つの段階（メール入力の完了、メールの候補、パスワード マネージャー、選択時の自動入力）を示すスクリーンショット。
ログインフローを予測入力（Chrome 84）

ブラウザのパスワードや自動入力のシステムは簡単ではありません。このアルゴリズムは、 値の推測、保存、表示は標準化されておらず、 統合されていますたとえば、Hidde de Vries: 「Firefox のパスワード マネージャーは、 レシピシステム」と表示されます。

自動入力: ウェブ デベロッパーに知っておいていただきたいことは、 してはならない name と autocomplete の使用について詳しくは、こちらをご覧ください。HTML 仕様 使用可能な 59 個の値がすべてリストされています。

安全なパスワードの候補がブラウザに表示されるようにする

最新のブラウザでは、パスワード マネージャーの UI を表示するタイミングや、ヒューリスティック技術を使用して 安全なパスワードを提案します。

パソコンでの Safari の動作は次のとおりです。

<ph type="x-smartling-placeholder">
</ph> パソコン上の Firefox のパスワードマネージャーのスクリーンショット。
Safari でのパスワードの候補表示フロー

（Safari のバージョン 12.0 以降、固有の強力なパスワードの候補が使用可能でした）。

ブラウザの組み込みのパスワード生成ツールにより、ユーザーやデベロッパーは 「安全なパスワード」とは何かを考案し、ありますブラウザは 必要に応じて自動入力されるため、ユーザーはパスワードを パスワードを入力します。組み込みブラウザの利用をユーザーに促す パスワード生成ツールにより、一意の強力なパスワードを使用する可能性が高くなります。 なく、不正利用の可能性があるパスワードを再利用する可能性が低くなります。 他の場所にも侵害されます。

誤って入力し忘れないようにする

メールアドレスとパスワードの両方のフィールドに required 属性を追加します。 最新のブラウザでは、データが欠落している場合、自動的にプロンプトが表示され、フォーカスが設定されます。 JavaScript は必要ありません。

<ph type="x-smartling-placeholder">
</ph> 「このフィールドに入力してください」と表示されたパソコン版 Firefox と Chrome for Android のスクリーンショット欠損データのプロンプトが表示されます。 <ph type="x-smartling-placeholder">
</ph> パソコン版 Firefox（バージョン 76）で欠落したデータに関するメッセージを表示してフォーカスする Chrome for Android（バージョン 83）です。

指で操作しやすくするデザイン

入力要素に関連するほぼすべてに対応するデフォルトのブラウザサイズ ボタンが小さすぎます。当然のことのように思えるかもしれませんが、 多くのサイトでよく見られるログイン フォームの問題です。

入力とボタンが十分な大きさであることを確認する

デスクトップでは、入力とボタンのデフォルトのサイズとパディングが小さすぎる モバイルではさらに悪化します

パソコン版 Chrome と Android 版 Chrome のスタイルなしフォームのスクリーンショット。

Android のユーザー補助機能 ガイダンス タッチスクリーン対象物の推奨ターゲット サイズは 7 ～ 10 mm です。Apple のインターフェース ガイドラインでは 48x48 ピクセルを、W3C では少なくとも 44x44 ピクセルを推奨 ピクセルです。その上で 入力要素とボタンに（少なくとも）約 15 px のパディングを追加して、 パソコンでは 10 ピクセルほどです実際のモバイル デバイスで試してみましょう。 指示してください。1 枚ずつ問題なくタップでき、 入力とボタンです。

タップ ターゲットのサイズが適切でない Lighthouse の監査により、入力要素の検出プロセスを自動化できる 小さすぎます

親指を意識したデザイン

「タップ ターゲット」と検索します。 人差し指の画像がたくさん表示されます。しかし実際の環境では スマートフォンの操作に親指を使いますサムネイルが次の値より大きい 制御の精度が低下します。それだけの理由が タップ ターゲットのサイズを調整します。

文字を十分な大きさにする

サイズやパディングと同様に、入力要素とデフォルト コンテンツの ボタンが小さすぎます。

<ph type="x-smartling-placeholder">
</ph> パソコン版 Chrome と Android 版 Chrome のスタイルが設定されていないフォームのスクリーンショット。
パソコンとモバイルのデフォルトのスタイル: 入力テキストが小さすぎて、多くのユーザーが判読できない。

プラットフォームによってブラウザが異なるとフォントのサイズも異なるため、 どこでも適切に機能する特定のフォントサイズを指定することができます。簡単なアンケート 一般的なウェブサイトでは、パソコンでのサイズが 13 ～ 16 ピクセル（実際のサイズと同じ） 最低でも十分です

モバイルでは、より大きなピクセルサイズ（Chrome では 16px）を使用する必要があります。 パソコンではかなり判読できますが、視力が良好でも読みにくい16px Chrome for Android。サイズごとにフォントのピクセルサイズを メディアによるビューポートのサイズ クエリをご覧ください。 20px はモバイルですぐに使えますが、友だちと一緒に試すか、ぜひお試しください。 ロービジョンの同僚です

ドキュメントで判読可能なフォントサイズが使用されていない Lighthouse の監査を使用すると、不適切なテキストを検出するプロセスを自動化できます。 小さくなります。

入力の間に十分なスペースを確保する

入力がタップ ターゲットと同様に機能するように、十分な余白を確保してください。つまり、 指一本分ほどの余白はありません

入力内容がはっきりと見えるようにしてください

入力のデフォルトの枠線のスタイルでは、枠線が見えにくくなっています。彼らは、 Chrome for Android などの一部のプラットフォームでは表示されません。

パディングに加えて枠線も追加します。白い背景の場合の目安として、 #cccまたは暗めを使用します。

<ph type="x-smartling-placeholder">
</ph> Android 版 Chrome のスタイル付きフォームのスクリーンショット。
読みやすいテキスト、入力の枠線が見える、適切なパディングと余白。

組み込みのブラウザ機能を使用して、無効な入力値を警告する

ブラウザには、入力に対して基本的なフォーム検証を行う機能が組み込まれており、 type 属性。無効な値でフォームを送信するとブラウザは警告を表示します 問題のある入力に集中できます

<ph type="x-smartling-placeholder">
</ph> ブラウザのプロンプトと無効なメールアドレスへのフォーカスが表示されている、パソコン版 Chrome のログインフォームのスクリーンショット。
ブラウザによる基本的な組み込み検証。

:invalid CSS セレクタを使用すると、無効なデータをハイライト表示できます。使用 :not(:placeholder-shown): コンテンツのない入力が選択されないようにします。

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

無効な値を含む入力をハイライト表示するさまざまな方法を試してください。

必要に応じて JavaScript を使用する

パスワードの表示を切り替える

[パスワードを表示] 切り替えスイッチを追加して、ユーザーが 表示されます。ユーザビリティ ユーザーが ユーザーが入力したテキストを見ることはできません。現在のところ、組み込みのメカニズムは ただし、今後 実装をご覧ください。これから JavaScript を使用する必要があります。

<ph type="x-smartling-placeholder">
</ph> [パスワードを表示] の切り替えと [パスワードを忘れた場合] のリンクが表示された Google ログイン フォーム。
Google ログイン フォーム: [パスワードを表示] 切り替えボタンと [パスワードを忘れた場合] リンク

次のコードでは、テキストボタンを使用してパスワードを表示機能を追加します。

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

ボタンを書式なしテキストにするための CSS は次のとおりです。

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

パスワードを表示する JavaScript は次のとおりです。

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

最終結果は次のとおりです。

<ph type="x-smartling-placeholder">
</ph> Mac の Safari と iPhone 7 の「ボタン」で [パスワードのテキストを表示]が表示されたログインフォームのスクリーンショット
「button」というパスワードを表示したログイン フォーム（Mac と iPhone 7 の Safari）。

パスワード入力にアクセスできるようにする

aria-describedby を使用して、パスワード ルールの概要を示すために、該当するサービスの ID を指定します。 要素を定義します。スクリーンリーダーは、ラベルのテキスト、 入力タイプ（password）、説明を入力します。

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

パスワードを表示機能を追加する場合は、 パスワードが表示されることを警告する aria-label。そうしないと、ユーザーは パスワードが誤って公開されることはありません。

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

両方の ARIA 機能の動作を、次の Glitch でご覧ください。

アクセシブルなフォームの作成に、フォームを利用しやすくするためのその他のヒントが記載されています。

送信前にリアルタイムで検証

HTML フォームの要素と属性には、基本的な検証、 ただし、JavaScript を使用して、ユーザーがログインした後も、より確実な検証を行う必要があります。 ユーザーがデータの入力やフォームの送信を試みたときに、

ログイン フォームの手順 5 Codelab では Constraint Validation を使用して、 API（ 幅広くサポートされている） フォーカスの設定とプロンプトの表示を行う組み込みのブラウザ UI を使用したカスタム検証。

詳細: JavaScript を使用してより複雑なリアルタイム処理を行う 検証します。

分析と RUM

「測定できないものは、改善できない」特に登録の場合は ログイン フォームを利用できます。目標を設定して成果を測定し、サイトを改善し、 繰り返します。

割引のユーザビリティ テストは、 変更を試すのには便利ですが 実際のデータを使って 登録フォームとログインフォームがユーザーにどのように見えるかを把握します。

  • ページ分析: 登録およびログインのページビュー、直帰率、 示されます
  • インタラクションの分析: 目標 できます（ ログインやログインフローを放棄したユーザーなど）？ イベント （ユーザーはフォームを操作する際にどのようなアクションを取るか）？
  • ウェブサイトのパフォーマンス: ユーザー中心 指標（お申し込みとログイン なんらかの理由でフォームが遅くなる場合は、その原因は何ですか？）。

A/B テストの実施もおすすめします。 登録とログインのさまざまなアプローチ、段階的な公開で 一部のユーザーを対象に変更を行ってから、すべてのユーザーに変更をリリースします。

一般的なガイドライン

適切に設計された UI と UX により、ログイン フォームの放棄を削減:

  • ユーザーにログインを求めてはなりません。上部にログイン フォームへのリンクを配置する 「ログイン」、「アカウントを作成」などのよく理解できる文言を使用して、ページの または登録してください。
  • 焦点を絞る登録フォームは、 その他のサイト機能。
  • 登録の手間を最小限に抑える。他のユーザーのデータを収集する（住所、 クレジット カード情報など）を提供することが、ユーザーに明確なメリットをもたらす場合のみである 分析できます
  • ユーザーが登録フォームへの入力を開始する前に、どのような価値があるかを明確に示す 考えることができます。ログインすると、どのようなメリットがありますか？ユーザーに具体的な情報を提供する インセンティブをご利用いただけます。
  • 可能であれば、ユーザーが携帯電話番号で本人確認を行えるようにする を使用します。
  • ユーザーが簡単にパスワードを再設定できるようにして、 password? のリンクが明確です。
  • 利用規約とプライバシー ポリシーに関するドキュメントへのリンク: ユーザーのデータを保護する方法に最初から組み込まれています。
  • 登録時に会社または組織のロゴと名前を含めてください。 ログインページの言語、フォント、スタイルが できます。フォームによっては、他のフォームと同じサイトに所属していると思わないものがある 特に URL が大きく異なる場合は注意が必要です。

学習を続ける

写真撮影: Meghan Schiereck、Unsplash