プレースホルダー

Placeholder

web general beginner

入力欄や制作途中の領域へ、実際の内容が入るまで一時的に表示しておく案内や仮データのこと。

概要（サマリー）

プレースホルダーとは、入力欄や制作途中の領域へ、実際の内容が入るまで一時的に表示しておく案内や仮データのことである。席を確保するために置く「予約済み」の札のように、あとで本物へ置き換わる内容を示す。

以下は、入力欄に文字を入力すると、プレースホルダーが消えて実際の入力値が表示される簡単なデモである。

メールアドレス

現在の入力値: （未入力）

HTMLの入力欄ではplaceholder属性を使い、入力形式の例を薄く表示できる。

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

この例では、利用者が入力を始めるまでメールアドレスの形式例が表示される。

入力するとプレースホルダーは消えるため、何を入力する欄だったか確認できなくなる。色が薄く読みにくい場合もあるので、アクセシビリティのために常に見えるラベルを別に用意するべきである。

画像が未完成の場所へ仮画像を置く、文章の代わりにダミーテキストを入れる、未確定値を{userName}のような記号で示す、といった用途もプレースホルダーと呼ばれる。

テンプレートでは「ここへ実際の値が入る」という目印として使われる。変数に近い見た目でも、プレースホルダーは置換される位置や仮の内容を指す広い言葉である。

読み込み中の形を示すスケルトンスクリーンも広い意味では仮表示だが、主目的は待ち時間の状態を伝えることである。フォームのプレースホルダーは入力例やヒントを示す目的が中心になる。

十分ではない。入力後に消えるため、ラベルを別に表示する必要がある。

違う。通常は入力欄の値として送信されず、利用者が入力すべき内容の例を示す。

薄すぎると読めない。背景とのコントラストや文字サイズへ配慮する必要がある。