プレースホルダー

入力フィールドに表示される仮のテキストで、ユーザーに入力内容の形式や例を示す。入力を開始すると消える。

プレースホルダー (placeholder) は、テキスト入力欄が空の状態で表示される薄い灰色のテキストです。HTML では <input placeholder="例: tanaka@example.com"> のように記述します。ユーザーがフィールドをクリックして入力を始めると自動的に消え、入力内容が空に戻ると再び表示されます。

プレースホルダーの主な役割は、入力の形式や期待される内容をユーザーに伝えることです。「電話番号」というラベルだけでは、ハイフンを入れるべきか、市外局番から書くべきか判断できません。プレースホルダーに「090-1234-5678」と表示すれば、期待される形式が一目で伝わります。

ただし、プレースホルダーをラベルの代わりに使うのはアクセシビリティ上の問題があります。入力を開始するとプレースホルダーが消えるため、ユーザーは「このフィールドに何を入力すべきだったか」を思い出せなくなります。特に認知障害のあるユーザーや、複数のフィールドを行き来する場面で問題が顕著です。WCAG (Web Content Accessibility Guidelines) では、プレースホルダーはあくまで補助的な情報として使い、ラベル (<label>) は必ず別途設けることを推奨しています。

プレースホルダーの文字数にも実務上の制約があります。モバイル端末では入力フィールドの幅が狭いため、長いプレースホルダーは途中で切れて表示されます。一般的に、プレースホルダーは 20〜30 文字以内に収めるのが望ましいとされています。日本語の場合は全角文字の幅を考慮すると、15〜20 文字程度が実用的な上限です。

プログラミングの文脈では、プレースホルダーはテンプレートエンジンや SQL のパラメータバインディングでも使われます。SQL の SELECT * FROM users WHERE name = ? の「?」はプレースホルダーであり、実行時に実際の値に置き換えられます。この仕組みは SQL インジェクション攻撃を防ぐセキュリティ上の重要な手法です。

文字数カウントの観点では、プレースホルダーのテキストは入力値ではないため、フォームの文字数カウンターには含めません。しかし、プレースホルダー自体の文字数設計は UX に直結します。「お名前を入力してください」(11 文字) より「山田太郎」(4 文字) のように具体例を示す方が、短くて伝わりやすいプレースホルダーになります。

この記事を共有