フォーム入力欄の「プレースホルダー」と「ラベル」を正しく使い分ける方法｜現場で使える実践テクニック

こんにちは！

今日は「フォーム入力欄の『プレースホルダー』と『ラベル』を正しく使い分ける方法」について解説します。

僕が現場で見た「プレースホルダーだけ問題」

昔、あるECサイトのリニューアル案件に携わったことがあるんですけど、ディレクターから「ラベルがめっちゃ邪魔やから、プレースホルダーだけで対応してほしい」という指示をもらったことがあります。
見た目はミニマルでクールだったんですけど、ユーザーテストをしてみたら大変なことに。
ユーザーが入力を始めると、プレースホルダーのテキストが消えるので、何を入力していたのかわからなくなるんですよね。
特に高齢ユーザーからのクレームがすごかった。

その時僕は「あ、プレースホルダーとラベルは全く違う目的やんけ」ということに気づきました。
見た目の美しさだけで機能を削ぎ落とすのは、ほんま危険です。

プレースホルダーとラベルの役割の違い

まず、この2つの役割をはっきり分けて考えましょう。

ラベルの役割

「このフォーム欄は何を入力するのか」を常に見える状態で示すことです。
ユーザーがフォーカスを当てる前、入力中、入力後、どのタイミングでも見えている必要があります。
ラベルはユーザーの「判断」を助けるものですね。

プレースホルダーの役割

「どのような形式で入力すればいいのか」という具体例やヒントを与えることです。
「2024-01-15」という日付形式の例を示したり、「山田太郎」というサンプルを示したりするのが、プレースホルダーの本来の使い方です。
入力を始めると消えるので、あくまで「補助情報」なんです。

実装するときの正しい使い分けパターン

実際の実装では、どのように使い分けるといいか、具体例をお見せします。

パターン1: 名前入力欄（最も基本的）

HTMLは以下のようになります。

<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田太郎">

ラベルは常に表示されて「何を入力するのか」を伝えます。
プレースホルダーは「山田太郎」という実例を示して、入力の参考になるようにしています。

パターン2: メールアドレス入力欄

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="example@example.com">

ここでも同じですね。
ラベルで「メールアドレスを入力してください」と判断させて、プレースホルダーで「どのような形式か」を例示しています。

パターン3：検索フォーム（プレースホルダーのみでOK）

すべてのフォームでラベルが必要というわけではありません。
検索ボックスのような場合は、プレースホルダーだけでも大丈夫なこともあります。

<input type="search" placeholder="商品名で検索">

ただし、この場合も<label>タグを隠す形で実装することをお勧めします。
視覚的には見えなくても、スクリーンリーダーには伝わります。

アクセシビリティを損なわないコツ

現場あるあるなんですけど、プレースホルダーだけでいいと思ってる人、まだ多いんですよ。
でも実は、プレースホルダーはアクセシビリティが弱いんです。

プレースホルダーの弱い点

• スクリーンリーダーで読み上げられないことがある
• コントラスト比が低いデザインが多く、見づらい
• 入力開始で消えるので、ユーザーが迷う

だからこそ、ラベルは必ずつけるようにしましょう。
見た目の関係で非表示にしたい場合は、CSSで隠すといいですよ。

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; }

この.sr-onlyクラスをラベルに付けると、画面には見えないけど、スクリーンリーダーには読み上げられるようになります。

まとめ

プレースホルダーとラベルは、全く違う役割を持っています。
「判断」と「参考情報」の両方があってこそ、ユーザーは安心して入力できるんです。

見た目を整えることは大切ですけど、ユーザーの使いやすさやアクセシビリティを損なってはダメです。
ほんま、その バランスが大事やんか。

次のフォーム設計をするときは、「ラベルは常に見える」「プレースホルダーは補助情報」この使い分けを意識してみてくださいね。