プレースホルダー(placeholder)とは、入力欄の中に薄く出す、ヒントや入力例である。文字を打ちはじめると、消える。入力欄の外に置く、項目名(ラベル)とは、別のものである。
たとえば、会員登録の画面で、欄の外に項目名がないとする。各欄の中に、「お名前」「ふりがな」と薄く書いてある。入力の途中で、電話が鳴る。戻ってくると、欄には「たなか」とだけ残っている。名前なのか、ふりがななのか、分からない。
ラベルの代わりにしてはいけない
ラベルの代わりに使うと、問題が起きる。ニールセン・ノーマン・グループ(NN/g)の2014年の記事は、7つを示している。
- 消えるので、ヒントを覚えておく負担が増える。
- ラベルがないと、送る前に、見直せない。
- エラーが出たとき、何を直すのか、分からない。欄ごとに、文字を消して、見直すことになる。
- 欄に入ると消えるので、Tab キーで次々に進む人は、ヒントを読む前に、消してしまう。
- 文字が入った欄は、目立たない。視線を測る調査では、空の欄に視線が集まる。そのため、探すのに時間がかかり、最悪の場合は、欄ごと見落とされる。
- 自動で入った値だと、勘違いされる。欄を飛ばしてしまう人もいる。
- 欄に入っても消えないプレースホルダーは、自分で消す手間がかかる。

ラベルと一緒に使うとき
ラベルを欄の外に置き、プレースホルダーは補足のヒントにとどめる使い方は、ラベルなしよりよい。ただし、大事なヒントまで欄の中に入れると、同じ7つの問題が、程度は軽くても、起きる。
項目が1〜2つの、簡単なフォーム(検索欄やログイン)では、負担は軽い。入力する内容を、利用者が推測できるからである。
欄を正しく埋めるために欠かせないヒントは、欄の外に置く。いつも見えるようにするためである。
フローティングラベル
フローティングラベル(浮かぶラベル)は、最初は欄の中にラベルを置く形である。欄をクリックすると、ラベルが欄の上へ動く。ラベルがいつも見えるので、先の7つのうち、1〜4つ目の問題が、減る。画面の高さも節約できる。
ただし、文字が入った欄が目立たない問題と、自動で入った値と勘違いされる問題は、残る。アクセシビリティの問題も、残ることがある。画面に余裕があるなら、ラベルとヒントを、欄の外に置くのが、いちばんよい。
アクセシビリティ
- ブラウザーの標準の薄い灰色は、背景との色の差が小さく、見えにくい。
- 認知や、手の動きに困難がある人には、負担が大きい。
- スクリーンリーダー(音声で読み上げるソフト)は、プレースホルダーを読まないことがある。