💃

ユーザーが使いやすいログインフォームを作る

2025/04/28に公開

ログインフォームは、ほとんどのWebサイトで必要不可欠な要素です。

制作者にとって頻繁に作るパーツだからこそ、使いやすく、そして安全に設計することがとても重要になります。

今回は、どのデバイスでも快適に使えるログインフォームを作るためのTipsをまとめました。

安全策についてはまた別の機会に。

 最低限押さえたいフォームのマークアップ基本的なマークアップは以下のようになります。
 <form>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email">
    <label for="password">パスワード</label>
    <input type="password" id="password" name="password">
    <button type="submit" >ログインする</button>
</form>

 正しいフォーム構造<form>タグは、一つの操作単位（UI単位）ごとに囲むのが基本です。
ページ全体を <form> で囲むのは間違いです。

各入力フィールドには必ず <label> をセットで用意しましょう。
<label> の for 属性と <input> の id を対応させます。


 ラベルは入力の上に配置するモバイルでは、ラベルと入力欄を横並びにすると幅の調整が難しくなるため、ラベルは入力欄の上に配置するのがおすすめです。

こうすることで端末ごとのデザインの調整が必要なくなります。

 placeholderだけに頼るのはNGデザイン重視のサイトでよく見かけるのが、ラベルレスでplaceholderだけが表示されていること。

確かに見た目的にはスッキリして見えますが、実は弊害がたくさんあります。
placeholderは入力のヒント表示用
入力を開始すると消えてしまう。何をどういう形式で記入すべきかわからなくなることがある。





スクリーンリーダーに対応できない
アクセシビリティでは、labelにフォーカスされるとスクリーンリーダーがラベルのテキストを読み上げます。でもlabelが無いと何の入力欄なのかわからず混乱します。

翻訳機能が使えない。
ブラウザの翻訳はlabelのテキストを見ているのでこれが無いと何もわからない。

入力補助になるはずの文字列が、デバイスによっては見切れている。


こうなるともはや何のためのヒントだかわからなくなります。

入力補助になるはずなのに未入力の原因になる。
placeholderのデザインによっては見づらい・見えすぎるの障害になります。
色が濃すぎると入力済みと見間違い、結果的に入力ミスにつながります。



placeholderはあくまで補助的に使い、必ずラベルを併用するようにしましょう。

 ボタンの設計にも注意ボタンには「送信」ではなく、「ログインする」など具体的なアクションを書くほうがユーザーに理解されやすいです。

また二重送信を防ぐため、buttonをクリックしたら無効にすることを忘れずに。

未入力時にボタンを無効にする場合は、なぜ無効なのかわかりやすい場所（ボタンの上下）に説明を添えることが重要です（例：「すべての項目を入力してください」など）。

 適切なtype属性を設定する今や多くのユーザーはスマホやタブレットからアクセスしています。

適切なキーボードを表示させるためにも、inputのtype属性を正しく指定しましょう。

メールアドレス入力なら
<input type="email">
パスワード入力なら
<input type="password">
これだけで、スマホでは適切なキーボードが自動で立ち上がります。

 type一覧type属性を指定しない場合、デフォルトではtype="text"として扱われます。

それ以外の型は以下の通り。

submit,button,checkbox,file,image,radio,range,reset,hidden

text,url,tel,password,number,email,color

date,time,week,month,search,datetime-local
それぞれのtypeに適した補助属性（例：autocomplete, requiredなど）も活用できます。

 パスワード入力に必要な工夫パスワード文字列を隠して入力できるtype="password"は必須です。

この隠れた入力をユーザーが確認するために、「パスワードを表示する」項目を追加して用意するとユーザーに親切です（JavaScriptで実装可能）。

「パスワードを忘れたときはこちら」リンクも忘れず設置しましょう。


 autocomplete属性を活用するログインフォームではブラウザの自動入力を正しく誘導するため、autocomplete属性を適切に設定しましょう。

また、両方の入力にはrequired属性を必ず付与して、入力忘れを防ぎます。
メールアドレス入力なら
<input type="email" autocomplete="username" required>
パスワード入力なら
新規登録なら new-password
ログインなら current-password
<input type="password" autocomplete="current-password" required>

 バリデーションもtypeで強化できる例えば、type="email"にしておくと、無効なアドレスを入力してもブラウザ側でアラートしてくれます。

CSSでエラー箇所を目立たせるスタイルも有効です。
input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

 フォームの部品はスマホでも使いやすくPC用に作られたサイトや昔のサイトでは、スマホでタップする時に小さすぎて押せないということがよくあります。

今やスマホファーストが当たり前。どんな端末でもタップしやすいサイズを意識しましょう。
推奨タッチエリア：48px × 48px以上
スマホで読みやすい文字サイズ：20px前後
自身のスマホで実際に操作テストをして、タップやスクロールがしやすいか必ず確認しましょう。

クリックできても「タップできない」設計は致命的なUXの悪化になります。

 参考リンクログインフォームのベストプラクティス - web.dev
HTMLのinput要素について - MDN Web  Docs