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

2025 7/18

2025年7月18日 2025年7月17日

この記事について

本記事は、2022年3月に実施した社内勉強会資料の内容をもとに、社外向けに再編集したものです。
記載の情報は執筆当時のものであり、現在の仕様や価格とは異なる可能性があります。
実装にあたっては、必ず最新の公式ドキュメントをご確認ください。

はじめに

Googleが公開している「サインインフォームのベストプラクティス」を紹介します。
ここで紹介するポイントは、サインインフォームだけでなく、さまざまな入力フォームにも応用可能です。
本記事では、公式記事の要点に加え、補足説明や実装例を交えて解説します。

出典：Google web.dev – ログインフォームのベストプラクティス
https://web.dev/articles/sign-in-form-best-practices?hl=ja

用途がはっきりした HTML を使用する

特定のジョブ用に構築された要素
出典：Google web.dev – ログインフォームのベストプラクティス – 有意な HTML を使用する
https://web.dev/articles/sign-in-form-best-practices?hl=ja#meaningful-html

フォームの役割に応じて、適切なHTML要素を選びましょう。
たとえば、入力フォームには必ずform用のタグを使用するようにします。

<form>

フォームを必要とする UI コンポーネントごとに別の <form> を使用します。たとえば、同じページにサインイン機能と検索機能がある場合は、2 つのフォーム要素を使用する必要があります。
出典：Google web.dev – ログインフォームのベストプラクティス – <form>
https://web.dev/articles/sign-in-form-best-practices?hl=ja#form

<!-- ログインフォーム -->
<form action="/login/">
  〜
  <button type="submit">ログイン</button>
</form>

<!-- 検索フォーム -->
<form action="/search/">
  〜
  <button type="submit">検索</button>
</form>

<label>

入力ラベルとしてプレースホルダを使用しないでください。
出典：Google web.dev – ログインフォームのベストプラクティス – <label>
https://web.dev/articles/sign-in-form-best-practices?hl=ja#label

<!-- NG -->
<input id="name" type="text" placeholder="名前">

<!-- OK -->
<label for="name">名前</label>
<input id="name" type="text" placeholder="オプス イン子">

<button>

送信ボタンにその機能が明記されていることを確認します。たとえば、[アカウントを作成] や [ログイン] は使用できますが、[送信] や [開始] は使用できません。
出典：Google web.dev – ログインフォームのベストプラクティス – <button>
https://web.dev/articles/sign-in-form-best-practices?hl=ja#button

<!-- NG -->
<button type="submit">送信</button>

<!-- OK -->
<button type="submit">検索する</button>

そのボタンで何をするのか明確に書かれていないといけません。

フォームが正常に送信されたことを確認する

History.pushState() または History.replaceState() を使ってナビゲーションをエミュレートし、パスワードフォームを削除します。
出典：Google web.dev – ログインフォームのベストプラクティス – フォームが正常に送信されたことを確認する
https://web.dev/articles/sign-in-form-best-practices?hl=ja#submission

どちらも、URLバー（履歴）を操作するものです。

逆に、ユーザー入力を待機してフォームの送信を無効にしないでください。たとえば、お客様がお客様 PIN を入力していない場合でも、[ログイン] ボタンを無効にしないでください。ユーザーがフォームの入力を間違えて、無効になっている [ログイン] ボタンを何度もタップして、機能していないと判断することがあります。フォームの送信を無効にする必要がある場合は、少なくとも、無効なボタンをクリックしたときに不足している内容をユーザーに説明してください。
出典：Google web.dev – ログインフォームのベストプラクティス – フォームが正常に送信されたことを確認する
https://web.dev/articles/sign-in-form-best-practices?hl=ja#submission

必須項目が全て入力されてからボタンをアクティブにするのではなく、バリデーションエラーで知らせましょう。
入力が不足している場合はエラーメッセージを表示し、ユーザーが迷わないようにします。

入力を重複させない

<!-- NG -->
<label for="email">メールアドレス</label>
<input type="email" name="email" id="email">
<label for="email2">メールアドレス確認</label>
<input type="email" name="email2" id="email2">

<!-- OK -->
<label for="email">メールアドレス</label>
<input type="email" name="email" id="email">