TOP › UX用語 › プレースホルダー
デザイン・情報設計

プレースホルダーPlaceholder

プレースホルダー(placeholder)とは、入力欄の中に薄く出す、ヒントや入力例である。文字を打ちはじめると、消える。入力欄の外に置く、項目名(ラベル)とは、別のものである。 たとえば、会員登録の画面で、欄の外に項目名がないとする。各欄 […]

プレースホルダー(placeholder)とは、入力欄の中に薄く出す、ヒントや入力例である。文字を打ちはじめると、消える。入力欄の外に置く、項目名(ラベル)とは、別のものである。

たとえば、会員登録の画面で、欄の外に項目名がないとする。各欄の中に、「お名前」「ふりがな」と薄く書いてある。入力の途中で、電話が鳴る。戻ってくると、欄には「たなか」とだけ残っている。名前なのか、ふりがななのか、分からない。

ラベルの代わりにしてはいけない

ラベルの代わりに使うと、問題が起きる。ニールセン・ノーマン・グループ(NN/g)の2014年の記事は、7つを示している。

  • 消えるので、ヒントを覚えておく負担が増える。
  • ラベルがないと、送る前に、見直せない。
  • エラーが出たとき、何を直すのか、分からない。欄ごとに、文字を消して、見直すことになる。
  • 欄に入ると消えるので、Tab キーで次々に進む人は、ヒントを読む前に、消してしまう。
  • 文字が入った欄は、目立たない。視線を測る調査では、空の欄に視線が集まる。そのため、探すのに時間がかかり、最悪の場合は、欄ごと見落とされる。
  • 自動で入った値だと、勘違いされる。欄を飛ばしてしまう人もいる。
  • 欄に入っても消えないプレースホルダーは、自分で消す手間がかかる。
ラベルの代わりにプレースホルダーを使う例、ラベルと併用する例、ラベルとヒントを欄の外に置く例の比較
図1:プレースホルダーの使い方の比較(説明用に作った図。よい順は NN/g「Placeholders in Form Fields Are Harmful」に基づく)

ラベルと一緒に使うとき

ラベルを欄の外に置き、プレースホルダーは補足のヒントにとどめる使い方は、ラベルなしよりよい。ただし、大事なヒントまで欄の中に入れると、同じ7つの問題が、程度は軽くても、起きる。

項目が1〜2つの、簡単なフォーム(検索欄やログイン)では、負担は軽い。入力する内容を、利用者が推測できるからである。

欄を正しく埋めるために欠かせないヒントは、欄の外に置く。いつも見えるようにするためである。

フローティングラベル

フローティングラベル(浮かぶラベル)は、最初は欄の中にラベルを置く形である。欄をクリックすると、ラベルが欄の上へ動く。ラベルがいつも見えるので、先の7つのうち、1〜4つ目の問題が、減る。画面の高さも節約できる。

ただし、文字が入った欄が目立たない問題と、自動で入った値と勘違いされる問題は、残る。アクセシビリティの問題も、残ることがある。画面に余裕があるなら、ラベルとヒントを、欄の外に置くのが、いちばんよい。

アクセシビリティ

  • ブラウザーの標準の薄い灰色は、背景との色の差が小さく、見えにくい。
  • 認知や、手の動きに困難がある人には、負担が大きい。
  • スクリーンリーダー(音声で読み上げるソフト)は、プレースホルダーを読まないことがある。

出典

関連用語

「UX用語」のカテゴリー