プレースホルダーを入力フィールドのラベルとして使ってはいけない理由――ただし、解決策はある

UXデザイナーの間では、「プレースホルダーテキストを入力フィールドのラベルとして使うべきではない」という警告をよく目にします。これには、しっかりとした理由があります。

実際に入力してみると分かる問題

まずは、下の入力フィールドに実際に文字を入力してみてください。何が起こるかに注目してみましょう。

すると、文字を入力し始めた瞬間に、プレースホルダーテキストが消えてしまうことが分かります。

なぜこれが問題なのか

メールアドレスとパスワードだけといったシンプルなログインフォームであれば、さほど問題にはなりません。しかし、項目数の多いフォームになると話は別です。入力を始めた途端にラベル(この場合、プレースホルダーが唯一のラベル)が見えなくなってしまうため、ユーザーは「各フィールドに正しく記入できているのだろうか?」と容易に混乱してしまうのです。

それでもデザイナーがプレースホルダーを使いたがる理由

多くのデザイナーが、入力フィールド内のテキストとしてプレースホルダーだけを使うスタイルを好むのには理由があります。それは、UIがすっきりと洗練された印象になり、ごちゃごちゃした感じを避けられるからです。これは確かにメリットと言えます。

しかし残念ながら、その見た目の美しさと引き換えに、ユーザーを混乱させてしまうリスクを負うことになります。ユーザーエクスペリエンスの観点では、これは絶対に避けたい事態です。

解決策は「フローティングラベル」

幸いなことに、このジレンマを解決する方法があります。それがフローティングラベル(Floating Labels)です。

フローティングラベルを使えば、すっきりとしたクリーンなUIを維持しながら、ユーザーが必要とする情報をすべて提供できます。入力前はプレースホルダーのように振る舞い、入力を始めるとラベルが浮かび上がって常に表示され続ける仕組みです。「デザインの美しさ」と「ユーザーの分かりやすさ」を両立したいなら、検討する価値のある手法といえるでしょう。