プレースホルダーとは？概要や使い方、使用ケースを解説！
プレースホルダーとは、Webページの入力欄に入力例などの文字を薄いグレーで表示し、ユーザーに入力方法を提示する機能です。
この記事では、「どんなメリットがあるの？」「使い方がわからない」とお悩みの方へ、プレースホルダーの概要やメリット・デメリットから、向いているケースや使い方まで、初心者にもわかりやすく解説します。
- 目次
プレースホルダーとは
一般的なプレースホルダーとは、文字や値などの情報をあとから挿入するために、一時的に確保している場所を指します。
PowerPointやプログラミング、HTMLで主に使用されます。
PowerPointのプレースホルダー
PowerPointでは、スライド内の点線で囲まれた、文字・グラフ・イラストなどを入力する専用の領域をプレースホルダーと呼びます。
例えば、「タイトルを入力」の領域をクリックすると文字を入力でき、文字を記入すると「タイトルを入力」の表示は消えます。
プログラミングのプレースホルダー
プログラミングでは、利用者が入力する値など、実行時に外部から与えられる要素を反映させる場合に、その要素が入る予定の場所をプレースホルダーと呼びます。
HTMLのプレースホルダー
HTMLのプレースホルダーとは、Webページの入力欄にあらかじめ入力されている、入力例などの文字や値です。
例えば、氏名の入力欄には「山田 太郎」、パスワードの入力欄には「半角英数字8文字以上で入力してください」などの文字を薄いグレーで表示し、ユーザーに入力方法を提示します。ユーザーが入力し始めると自動的に消える仕組みです。
氏名やパスワードの他にも、郵便番号や電話番号、メールアドレスなどの項目に使われます。
この記事では、HTMLのプレースホルダーについて解説していきます！
プレースホルダーを利用するメリット・デメリット
プレースホルダーを使う前に知っておきたい、メリットとデメリットを解説します。
メリット
入力すべき内容を示せる
プレースホルダーの大きなメリットが、ユーザーに入力すべき内容を示せることです。
あらかじめ入力例が表示されていると、入力すべき内容をイメージしやすくなるため、ユーザーは直感的に入力できます。
デザインをすっきりまとめられる
Webサイトのデザインをすっきりとまとめられる点もメリットです。
ユーザーに入力してもらいたい内容の説明を、入力欄の外に長々と記載していると、Webサイトのデザインに悪影響を与えてしまうでしょう。
また、入力欄内に情報を表示させることで、余分なスペースを節約できるため、限られたWebページのスペースを有効活用できます。
デメリット
ユーザーが入力で迷ってしまう可能性がある
プレースホルダーにあらかじめ表示されている文字などの情報は、ユーザーが入力し始めると消える仕組みです。一度消えてしまった情報を再び表示させるには、入力内容を消すなどしなければなりません。
入力欄の数が多い場合は、ユーザーが入力で迷わない工夫が必要です。
どこまで入力したかわかりにくい
入力欄の数が多いと、入力途中で別の用事が入り、手を止めるケースもよくあります。
一度入力欄から目を離して再び入力し始めようとした際に、入力欄がプレースホルダーで埋め尽くされていると、ユーザーはどこまで入力したかわかりにくくなるでしょう。
たしかに、入力欄に空白がないように見えるから、どこから入力したらいいか迷ってしまうかもしれないですね。
音声読み上げの対象になる
プレースホルダーは、視覚障がい者のために設けられている、音声読み上げ機能の対象です。そのため、マウスをあてたりクリックしたりすると、入力している情報が読み上げられますので、注意が必要です。
プレースホルダーが向いているケース
メリットとデメリットが理解できたので、早速プレースホルダーを使ってみます！
その前に！プレースホルダーの使用が向いていないケースについても知っておきましょう！
適切に活用するためには、向いているケースと向いていないケースの確認が必要です。
向いている3つのケース
入力例を表示したい
プレースホルダーが最も活用されているのが、入力例の表示です。
例えば、フリガナを入力して欲しい場合は、「ヤマダ タロウ」と表示しておけば、ユーザーはフリガナを入力すべきだと直感的に理解できるため、使用をおすすめします。
入力欄に入力例を表示することで、ユーザーの入力をサポートできます。
入力欄の項目が少ない
入力欄の項目が少なく一般的な形式の場合も、プレースホルダーが向いています。
たとえば、Googleをはじめとした多くのWebサイトのログイン画面には、「メールアドレスと電話番号」「パスワード」しかありません。
入力欄や項目が1つしかなかったり、項目が少なくよくある形式であったりする場合は、わざわざ入力欄の外に説明を記載しなくても、ユーザーが入力で迷うことはないでしょう。
並び順で項目がわかる
氏名の「姓」と「名」の2つの入力欄や、電話番号の3つの入力欄のように、説明しなくても入力すべき内容がわかる場合にも向いています。
向いていない2つのケース
重要な情報を示す
重要な情報を示す場合には、プレースホルダーは不向きです。
「メールアドレス」や「パスワード」、「アカウント名」や「電話番号」など、入力が欠かせない重要な情報の項目のタイトルは、入力欄の外にラベルとして表示させましょう。
項目のタイトルが消えてしまうと、ユーザーはなにを入力すべきかわからなくなってしまいます。
入力形式を示す
入力形式を示す場合にも、プレースホルダーは向いていません。
例えば、電話番号に「-（ハイフン）」をつけて入力してもらう場合、プレースホルダーで「090-1111-2222」と表示しても、ユーザーが入力し始めると消えてしまうため、ハイフンなしで入力してしまう人が発生します。
入力内容にエラーが出てしまうとユーザーがストレスを感じるため、離脱する可能性が高まるでしょう。
プレースホルダーを活用することで、ユーザーの利便性が向上するかどうかを重視しましょう！
HTMLのプレースホルダーの使い方
では、実際にプレースホルダーを使ってみましょう。placeholder属性はinput要素やtextarea要素内で使用できます。
氏名の項目に入力例として「山田 太郎」を表示させる
<form>
<label>氏名</label>
<input type="text" placeholder="山田 太郎">
</form>と記述すると、
ブラウザ上では上記のように表示されます。
会員番号の項目に「10桁の会員番号を入力」を表示する
会員番号：
<input type="text" value="" placeholder="10桁の会員番号を入力">と記述すると、
ブラウザ上では上記のように表示されます。
お問い合わせフォームを作成する
<form>
<h1>お問合せフォーム</h1>
<div class="items">
<div class="item">
<label>氏名：</label>
<input type="text" name="name" placeholder="山田 太郎">
</div>
<div class="item">
<label>携帯番号：</label>
<input type="tel" name="tel" placeholder="090-1234-5678">
</div>
<div class="item">
<label>メールアドレス：</label>
<input type="email" name="email" placeholder="taro_yamada.@〇△□.com">
</div>
<div class="item">
<label>お問合せ内容：</label>
<textarea></textarea>
</div>
</div>
</form>
と記述すると、
ブラウザ上では上記のように表示されます。
あまり難しくないですね！
ルールに則って記載すれば問題ないため、ぜひ使ってみましょう！
よくある質問
プレースホルダーとは？
入力欄に入力例などの文字を薄いグレーで表示し、ユーザーに入力方法を提示する機能です。
プレースホルダーのメリットは？
ユーザーに入力すべき内容を示せたり、デザインをすっきりまとめられたりするメリットがあります。
プレースホルダーにCSSは設定できる？
設定できます。CSSを使えば、フォントカラーやフォントファミリー、テキストカラーなどの設定が可能です。
まとめ
プレースホルダーを使えば、ユーザーの入力をサポートしたり、デザインをすっきりさせたりできるため、ユーザーの利便性が向上します。
ただし、使い方を誤るとかえって不便になってしまうため、適切に使うことが大切です。
この記事で紹介した向いているケース・向いていないケースや使い方を参考に、プレースホルダーを活用しましょう。
