プレースホルダーとは？

この記事を読むための時間：5分

プレースホルダーという言葉を知っていますか？

例えばWEBサイトの会員登録画面で、名前の入力フォームに薄い文字で仮の名前が入力されているのを見たことがありませんか？

このように元から入力されている文字をプレースホルダーと呼んでいます。

プレースホルダー があることで、私たちは直感的に入力すべき内容が分かって便利だと感じます。しかし、使い方を間違えるとサイトのユーザビリティを損ねてしまう可能性があります。

この記事ではそんなプレースホルダー について解説しています。WEBデザインに携わっている方はぜひ参考にしてみてください。

プレースホルダーとは

プレースホルダー（英：placeholder）とは、あとから入力される文字・値の代わりに、仮に入力されている文字や値のことです。

以下で詳しく説明していきます。

PowerPointにおけるプレースホルダー

PowerPointのスライドの中にある、点線で囲まれた領域をプレースホルダーと呼んでいます。

それぞれのプレースホルダーには、以下のようにそれぞれ役割があります。

• 「クリックしてタイトルを入力」：そのスライドのタイトルを入力するためもの
• 「クリックしてテキストを入力」：本文を入力するためのもの

プログラミングにおけるプレースホルダー 

プログラミングのコードの中で、利用者が入力する値など、実行時に外部から与えられる要素を反映させたい場合があります。

その場合に、外部から与えられる要素が入る予定の場所のことをプレースホルダー と呼んでいます。

HTMLにおけるプレースホルダー

HTMLの場合は、入力フォームのテキストボックスの中にあらかじめ入力されている文章や値のことをプレースホルダー と呼んでいます。

例えば、名前の入力フォームにあらかじめ仮名が入っていたり、パスワードの入力フォームに「半角◯文字以上で入力してください」という案内文が記載されていたりします。このプレースホルダーは、ユーザーが入力を開始すると自動的に消えて、文字が入力できる状態に切り替わります。

この記事では、このHTMLにおけるプレースホルダーについて解説していきます。

プレースホルダーが使われる項目

プレースホルダーは以下のような項目の入力フォームで使われます。

• 氏名（姓、名）
• メールアドレス
• 電話番号
• 郵便番号
• パスワード

プレースホルダーのメリット

入力フォームに表示されるプレースホルダーには、具体的にどんなメリットがあるのでしょうか？

以下で確認していきましょう。

入力すべき内容が直感的に分かりやすい

プレースホルダーはユーザーに入力してほしい内容を補足的に示すものです。

そのため、ユーザーも何を入力したらいいのか、入力フォームを見てすぐに把握することができます。

デザインがすっきりとまとまる

入力してほしい内容を、入力フォームの外側に長々と書いていると、サイトのデザインにも悪影響を及ぼす場合があります。

また、プレースホルダーを利用することで、限りあるWEBサイトのスペースを節約して有効活用することもできます。

プレースホルダーのデメリット

プレースホルダーには、ユーザビリティを損なってしまうかもしれないデメリットもあります。

ユーザーを迷わせてしまう

プレースホルダーの値は、ユーザーが入力を開始すると消えてしまいます。

そのため、もしユーザーが何を入力すべきだったか忘れてしまった場合は、入力内容を消去するなどして再度プレースホルターの値を表示させなければならなくなります。

特に入力フォームの数が多い場合には注意が必要です。

自動入力された値だと勘違いする

入力フォームに最初から何も値が入っていなければ、ユーザーは「入力しなければいけない」と気付きやすいですが、プレースホルダーが入っていることによって入力欄を飛ばしてしまうユーザーが発生する恐れがあります。

どこまで入力したか分かりづらい

ユーザーが少し目を離して再度入力を開始しようとした場合など、入力フォームが最初からプレースホルダーで埋まっていると、自分がどこまで入力したかすぐに分からない場合があります。

プレースホルダーを正しく使うポイント

プレースホルダーにはメリットもデメリットもあることがわかりました。

では、プレースホルダーを正しく活用するにはどうしたらいいのでしょうか？

プレースホルダーを使わないほうがいい場合

プレースホルダーの最大のデメリットは、入力を開始すると値が消えてしまうことです。

そのため、以下のような場合にはプレースホルダーの入力は避けましょう。

重要な情報を示す場合

「名前」「メールアドレス」「パスワード」といった、入力フォームに入力すべき項目のタイトルは、プレースホルダーにせずラベルとして枠外に表示させるようにしましょう。

ユーザーがプレースホルダーの内容を忘れてしまっても、問題なく入力フォームの入力を完了できるように気を配る必要があります。

入力形式を示す場合

例えば、電話番号を-（ハイフン）を間に入れて入力してもらいたい場合、プレースホルダーにだけ「03-1234-5678」といった例示を示すのもユーザーにとっては不親切です。

ユーザーが入力を開始するとそのプレースホルダーは消えてしまうため、内容を忘れてハイフンを入れないで入力してしまう可能性が高まります。

さらに、入力内容がエラーになってしまうことはユーザーにとってのストレスにもつながります。

プレースホルダーを使ったほうがいい場合

次に、プレースホルダーを使ったほうがいい場合について見ていきましょう。

入力例として利用する場合

例えば名前を入力してほしい入力フォームに「ヤマダ　タロウ」などと仮名を示したりする場合は、ユーザーにとっても直感的に分かりやすいためプレースホルダーが適しています。

しかし、「半角で入力してほしい」「姓と名の間はスペースを入れてほしい」など、入力形式に指定がある場合は、枠外に補足説明を入れるなどの配慮が必要です。

項目がひとつしかない場合

検索ボックスのように、元から入力フォームがひとつしかない・入力すべき項目が明らかである場合には、プレースホルダーのみの表記で問題ありません。

入力フォームの項目が少なく、一般的な形式の場合

例えば、GoogleやTwitterのログイン画面は「メールアドレスまたは電話番号」と「パスワード」の2項目しかありません。Googleだけでなく、他の多くのWEBサイトのログイン画面も、ほとんどはこの2項目を使ってログインしています。

このように、項目が少なく、かつ一般的によくある形式の場合は、わざわざ補足的なテキストを入れ込まなくても、ユーザーの経験上迷いにくいというケースもあります。

明らかに並び順だけで項目がわかる場合

名前の「姓」と「名」や、電話番号の入力欄を3分割した入力欄のように、特に補足説明がなくても入力すべき内容がわかるような場合もプレースホルダーの使用が適しています。

他の方法で補う場合

プレースホルダーだけではユーザーにとって不親切な場合で、サイトのデザインやスペースの問題でラベルを設定したり枠外に補足説明ができないようなときには、項目を入力したときにだけ現れる吹き出しダイアログなどを利用するのもユーザビリティを向上させるひとつの方法です。

まとめ

プレースホルダーは便利である反面、使い方を間違えてしまうとユーザビリティを損ねてしまう危険性もあります。

WEBサイトをデザインする場合は、見た目を整えることだけでなく、一番はユーザーにとってのわかりやすさを大切にするように意識してください。