プレースホルダーについて考える
プレースホルダー (placeholder) とは、入力フォームの記入欄 (テキストボックスやテキストエリア) の中に記述される、入力に関するヒントを示したテキストです。
HTML5 以降は、<input> 要素と <textarea> 要素で placeholder 属性が使えるようになり、HTML の標準仕様として、あらかじめ入力フォーム (記入欄) にプレースホルダーを書き入れておくことができます。
プレースホルダーをラベル代わりに使わない
ところでこのプレースホルダー、記入欄のラベル (項目名) を記述する用途で使われているケースを、時折見かけます。本来であれば <label> 要素を使って、記入欄のすぐ手前にラベルを記述すべきところ、記入欄の内側にラベルを記述する形を採っているのです。
このように、プレースホルダーをラベル代わりに使ってしまうのには、以下のような理由があると思います。
- <label> 要素を使って記入欄の外側にラベル付けするよりも、外見上スマートにまとめることができるから。
- (特にスマートフォン向けの Web サイトやアプリにおいて) 限られた貴重な画面表示スペースを考慮して、すっきりとコンパクトにまとめたいから。
こうした理由もわからないではないのですが、フォームの記入欄に何らかの文字列を入力し始めると、プレースホルダーの記述は消えてしまうことに、注意する必要があります。基本的に記入欄のラベルは、フォーム入力中に消えてしまうと支障が出る、重要な情報と言えます。これをプレースホルダーによって実装するのは、特に認知負荷/記憶負荷という点でユーザビリティ/アクセシビリティの問題を引き起こす可能性が高い (「自分は今、何について入力しているのか？」を見失ってしまうことにつながりやすい) ことを、十分に意識したいところです。
やはり原則は、記入欄のラベルは <label> 要素を用いて、常に見える形で記述するべきでしょう。ちなみに W3C (World Wide Web Consortium) が策定中の HTML5 仕様書 (ドラフト) の中でも、「placeholder 属性は、label の代替として用いられるべきではない。」と明記されています。
The placeholder attribute should not be used as an alternative to a label.
出典 : HTML5 (W3C Working Draft) の 4.10.7.2.12 "The placeholder attribute"
The placeholder attribute should not be used as a replacement for a label.
出典 : HTML5.1 Nightfly (W3C Editor's Draft) の 4.10.7.4.3 "The placeholder attribute"
プレースホルダーを記述する際に気をつけたいこと
プレースホルダーは、フォームの記入欄に何らかの文字列を入力し始めると、消えてしまうものなので、あくまでも一時的な表示であることに留意すべきです。その意味では、「入力前にユーザーに気に留めてほしい、無くても困らないけどあったら役に立つような (nice-to-have な) ヒント」を記述する、というのが適切と言えそうです。
これを踏まえて、実際にプレースホルダーを記述するにあたって、気をつけたいことについて、少し考えてみましょう。
ユーザーの短期記憶に残る簡潔な記述をする
プレースホルダーは、記入欄に入力し始めると消える情報なので、消えてしまってもその主旨がユーザーの短期記憶に一定時間残る程度の、簡潔な記述をするのがよいでしょう。
短期記憶に残りにくいような長い記述であったり、あるいは短期記憶に残ることに依存すべきではない重要な注記の場合は、プレースホルダーを用いるのではなく、以下のように記入欄の欄外に注釈を記述し、入力中であっても常に見える形にするのが望ましいと言えます。
* パスワードは、半角アルファベットの大文字と小文字、および数字を組み合わせた8文字以上で設定してください。
なお、W3C が策定中の HTML5 の仕様書にも、「長いヒントやその他の注意書きの場合、入力欄に隣接する形でテキストを配置すること。」と明記されています。
For a longer hint or other advisory text, place the text next to the control.
出典 : HTML5.1 Nightfly (W3C Editor's Draft) の 4.10.7.4.3 "The placeholder attribute"
書かなくてよいことは書かない
たとえば、メールアドレスを記入する欄に「you@example.com」と書かれたプレースホルダーがあるとします。
サイト制作者/運営者の意図としては、「メールアドレスを記入する際は半角英字で、アットマーク (@) を付けて、入力して欲しい」ということなのだと思いますが、そもそもメールアドレスというのはそういうものなので、これでは実質的に何のヒントにもならないことになります。むしろ、このようなプレースホルダーがあることで、「自分のメールアドレスは .jp なんだけど (.com じゃないんだけど) 大丈夫かな...？」などと、余計な不安をユーザーに与える可能性すらあります。
書かなくてよいことは、無理にプレースホルダーとして書かなくてよいのです。
ユーザーを迷わせない
上述のメールアドレス記入欄の例からも言えることですが、プレースホルダーの記述は、ユーザーを迷わせないことが大事です。
たとえば、URL を記入する欄に「http://」と書かれたプレースホルダーがあるとします。
これでは、URL を記入する際に「http://」から書き出せという意味なのか、あるいは「http://」を省略してそれ以降を記入すればよいという意味なのか、わかりません。恐らくは、「http://」を省略してもしなくても、どちらでも大丈夫だったりするのでしょうが、ユーザーを無駄に迷わせるという点で、あまりよいプレースホルダーとは言えません。
プレースホルダーを記述する際には、具体的にユーザーのアクションを後押しするような、明快なヒントを書くことを心がけるようにしましょう。
プレースホルダーのインストラクションだけで解決しようとしない
たとえば、電話番号を記入する欄に「例) 0312345678」というプレースホルダーの記述があるとします。あるいは、クレジットカード番号を入力する欄に「スペースで区切らず16桁を入力」というプレースホルダーの記述があるとします。
いずれも、記入方法/フォーマットを指示するプレースホルダーですが、実際に記入欄に入力し始めるとこれらの指示 (インストラクション) は消えてしまうので、ユーザーに厳守されない可能性があることも想定しておく必要があります。プレースホルダーのインストラクションだけで解決しようとしないことが大切です。
上記のような例であれば、仮にユーザーがインストラクション通りの記入をしなかったとしても、システム側で吸収する仕組みを設けておくとよいでしょう。たとえば、電話番号の中にハイフンやカッコが入力されていたり、クレジットカード番号の中にスペースが入っていたりしても、システム側で自動的に消去する...といった具合です。
最終的にはバランスで判断することも
以上、プレースホルダーのありかたについて考えてみましたが、これらを踏まえたうえで、最終的には原則から外れた判断をする、ということもあるでしょう。たとえば、以下のようなケースです。
- アカウント登録済みユーザーがログインする画面で、テキストボックスがふたつだけ並んでいて (ログイン ID とパスワードを入力する欄)、それぞれに対し、ラベル情報がプレースホルダーのみによって提供されている。
- サイト内検索機能で、テキストボックス (検索クエリ入力欄) に対して、ラベル情報がプレースホルダーのみによって提供されている。
いずれも、記入欄の手前にラベル記述がないので問題と言えそうですが、他の大多数のサイトで一般的に採用されているユーザーインターフェース (UI) であって、ユーザーのメンタルモデルとの間で齟齬がなければ (そして実際の使用においてユーザー行動が阻害されることがなければ)、このような外観上の実装はありかな、と思います。
ただしアクセシビリティ確保の観点から、HTML のソースコード上は <label> 要素によるラベル記述がちゃんと存在していて、CSS の「オフレフト」テクニックによって、あくまでも「外観上は」表示されない...という形にしておくのがよいでしょう。このように原則から外れたデザイン上の判断をすることはあり得る話ですが、その場合も、上記で述べてきたプレースホルダーのありかたや、不適切な実装で生じるリスクについてあらかじめ十分理解しておき、そのうえで、トレードオフをバランスよく慎重に検討するようにしたいところです。