プレースホルダー vs ラベル:プレースホルダーはラベルではない理由と、使うべきフィールド仕様
フィールド内のグレーの文字は、入力した瞬間に消えます。プレースホルダーがラベルの代わりになれない理由、ヒントの置き場所、合格するボーダー色、そして開発者に渡すべき正確なフィールド仕様をまとめました。
プレースホルダーはラベルではありません。入力した瞬間に消え、そのフィールドが何のためのものかを示す唯一の手がかりも一緒に消えます。すべてのフィールドの上に本物のラベルを置き、ヒントはその下に、周りには見えるボーダーを付け、プレースホルダーは例を示すためだけに使いましょう。理由と正確な仕様はこちらです。
プレースホルダーがラベルだと何が起きるか
入力前:すっきり見える
✕ 入力後:このフィールドは何だっけ?
左のフィールドは整って見えます。だからデザイナーは好きなのです。右のフィールドは、その2秒後の同じフィールドです。「メールアドレス」という言葉は消え、確認すべきラベルがありません。長いフォームでは、どの答えがどのフィールドのものか分からなくなります。
これは好みの問題ではなく、記憶の問題です。Nielsen Norman Group によるフォームのプレースホルダー調査では、消えてしまう文字が短期記憶に負担をかけ、送信前の回答確認を難しくすると指摘されています。フォーム全体については フォームデザインのベストプラクティス で扱っています。この記事は、トラブルの大半を生む1つの判断を掘り下げます。
問題はもうひとつあります。プレースホルダーの文字は初期設定でグレーですが、そのグレーはたいてい薄すぎます。よく使われるプレースホルダーのグレー #8E8E93 は、白背景でコントラスト比が約 3.3 対 1 で、WCAG がテキストに求める 4.5 対 1 に届きません。せっかくのヒントも読みづらいのです。
対策1:フィールドの上に本物のラベル
メールアドレス
✓ ラベルは上:入力後も残る
勤務先メールアドレス
✓ プレースホルダーは例だけ
ラベルはフィールドの外にあるので、入力しても影響を受けません。フィールドの上に、左揃えで、15 px のセミボールドで置きます。横置きより上置きがよいのは、スマホを含むあらゆる幅で機能し、視線がフォームを一直線に下りていけるからです。
スペースを節約するためにラベルを隠してはいけません。ラベルを置く余地がないデザインは、デザインのほうが間違っています。ルールのせいではありません。フォーカス時に隅へ縮むフローティングラベルは妥協案です。ラベルは残りますが、小さく、タイミングの調整が要り、素直な上置きラベルよりアクセシブルに作るのが難しくなります。
本物のラベルはスクリーンリーダーも読み上げます。HTML ではラベルをフィールドに関連付けて、ラベルをタップすると入力欄にフォーカスが移るようにします。
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
対策2:ヒントはフィールドの下に
パスワード
8文字以上。
✓ ヒントは下:入力中も残る
✕ プレースホルダーのヒント:最初のキーで消える
形式やルールなど、フィールドが伝えられる最も役立つ情報は、入力中にこそ必要なものです。だから最初の1文字で消えるプレースホルダーには置けません。フィールドの下、少し控えめなグレーの 13 px に移せば、常に見えたままです。
エラーも同じ場所を使います。問題が起きたらヒントの行がそのままエラーメッセージに変わるので、レイアウトが安定します。そのメッセージの見た目については エラーメッセージの色 をご覧ください。
対策3:ちゃんと見えるボーダー
メールアドレス
✕ #E5E5E5 のボーダー:幽霊
メールアドレス
✓ #79747E のボーダー:見つけやすい
フィールドは操作部品であり、操作部品は見つけられなければなりません。左の幽霊のようなグレーのボーダーはデザインファイルでは人気です。軽く見えるからです。しかし実際の画面ではほとんど消えてしまい、どこをタップすればいいか分かりません。
WCAG 1.4.11 は、ユーザーインターフェース部品を識別するための視覚情報が、隣接する色に対して 3 対 1 以上であることを求めています。白背景の #E5E5E5 は約 1.3 対 1 で不合格です。Material 3 のアウトライン色である #79747E は約 4.6 対 1 で、余裕で合格します。低密度の画面でも保てるよう 1.5 px にしましょう。
区切り線との違いに注意してください。#E5E5EA のような薄いグレーは、リスト行の間なら問題ありません。区切り線は気づかれれば十分だからです。フィールドのボーダーは、はっきり見えなければなりません。区切り線とサーフェスのグレーについては ライトモードの背景色 で扱いました。
対策4:適切なキーボードを要求する
何のためのフィールドか分かっていれば、iPhone でも Android でも役立つキーボードを開けます。@ キーが用意された状態で開くメール欄は、入力ミスを防ぎ、文字ごとにタップを1回節約します。HTML なら属性ひとつです。
| フィールド | Input type | スマホで開くもの |
|---|---|---|
| メール | type="email" | @ と . のあるキーボード |
| 電話 | type="tel" | テンキー |
| ウェブサイト | type="url" | / と .com のあるキーボード |
| カードまたはコード | inputmode="numeric" | テンキー、スピナーなし |
| 検索 | type="search" | キーボードに検索キー |
さらに email や name などの autocomplete の値を組み合わせれば、スマホがフィールドを自動入力できます。
フィールド仕様
| 部分 | 値 |
|---|---|
| ラベル | フィールドの上、15 px、セミボールド |
| フィールド | 高さ 48 px、角丸 12 px |
| ボーダー | #79747E の 1.5 px |
| テキスト | 16 px、これより小さくしない |
| ヒント | フィールドの下、13 px |
| プレースホルダー | 例、または何もなし |
テキストを 16 px にすることは iPhone では重要です。それより小さい文字のフィールドをタップすると Safari がページを拡大し、バグのように感じられます。
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
高さ 48 px は快適なタッチターゲットになります。角丸 12 px はルールではなく選択です。自分のシステムに合わせ、すべてのフィールドで統一してください。
FAQ
ラベルの代わりにプレースホルダーを使ってもいいですか?
いいえ。プレースホルダーは入力すると消えるので、フィールドが名前を失います。フィールドの上に見えるラベルを置き、プレースホルダーは形式の例に使うか、空にしておきましょう。
プレースホルダーはアクセシブルですか?
初期設定ではほとんど違います。プレースホルダーはたいてい低コントラストの薄いグレーで、入力すると消え、支援技術によってはラベルとして扱われません。入力欄に関連付けた本物のラベルがアクセシブルな選択です。
ラベルはフィールドの上と中、どちらに置くべきですか?
上に、左揃えで。どの画面幅でも機能し、入力中も見え続け、視線がフォームを一直線に下りていけます。
プレースホルダーには何を入れるべきですか?
name@company.com のような形式の例、または何も入れません。入力中に必要な指示は絶対に入れないでください。それはフィールドの下のヒントに置きます。
入力欄のボーダーは何色にすべきですか?
WCAG 1.4.11 が求めるように、ページに対して少なくとも 3 対 1 になる濃さです。Material 3 のアウトライン色 #79747E は白背景で約 4.6 対 1 です。薄い #E5E5E5 は約 1.3 対 1 で不合格です。
フローティングラベルでプレースホルダーの問題は解決しますか?
部分的には。テキストの上に縮小してラベルを見せ続けますが、小さいサイズ、アニメーション、アクセシビリティ対応の手間を考えると、フィールドの上の素直なラベルのほうが安全な初期設定です。
出典
- Nielsen Norman Group, Placeholders in Form Fields Are Harmful(Katie Sherwin、2014年):プレースホルダーは入力すると消え、短期記憶に負担をかけ、回答の確認を難しくする。
- WCAG 2.1, 1.4.11 Non-text Contrast(ユーザーインターフェース部品は 3 対 1)および 1.4.3 Contrast (Minimum)。
- 白背景での比率は WCAG の相対輝度の式で算出:#E5E5E5 は 1.26 対 1、#79747E は 4.55 対 1、プレースホルダーのグレー #8E8E93 は 3.26 対 1。#79747E は Material 3 の Outline(NeutralVariant50)で、androidx Compose の ColorLightTokens から取得。
- MDN, the input element, type attribute:
type="email"はスマホでメール用キーボードを表示する。 - 仕様表のフィールドサイズ(ラベル 15 px、高さ 48 px、角丸 12 px、ヒント 13 px)は、プラットフォームの値ではなく当方の推奨です。
- 最初は UX Brainy でカルーセルとして公開しました。
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
