※本記事の内容は昨日公開の記事「EFOで大切な＜入力例＞の存在と、＜プレースホルダー＞活用のススメ【前編】」の後編です。昨日の記事をまだお読みでない方は、一読されてから下記に進まれることをおすすめいたします。
プレースホルダーを活用しよう
昨日の記事では入力例がフォームのユーザビリティに大きな影響を与えているとお伝えしました。
そこで入力例をさっそくフォームに取り入れたい、そんなときは「プレースホルダー」を利用するのがおすすめです。
プレースホルダーって何？
プレースホルダーとは、テキストボックスやテキストエリアの中にあらかじめ表示しておくテキスト（初期表示文言）のことです。みなさまも、様々なサイトでよく目にするのではないでしょうか？
◀プレースホルダーの例。Twitterのログイン画面。
「ユーザー名、または…」のような記述をプレースホルダーと呼びます。
スペースの節約に！
プレースホルダーを利用する利点は、とにかくスペースの節約になること。
入力欄の右横や下に入力例を表示しているフォームはよくありますが、どうしてもスペースをとってしまいます。
下記にプレースホルダーを使用した時と使用しないサンプルを用意したので、ぜひ見比べてみてください。
プレースホルダー利用時
プレースホルダーを利用しない例（項目の下に入力例を表示）
プレースホルダーを利用しない例。上下にスペースが多く取られてしまいます。
プレースホルダーを利用せず項目の下などに入力例を表示する方法でも、ユーザーが直感的に入力内容を把握できる点では同様にすぐれています。
さらには入力を開始すると消えてしまうプレースホルダーよりも、入力中でも内容を確認できるという点ではより親切といえるかもしれません。
しかし項目数の多いフォームなどでは、入力例のために割いたスペースが少しずつ積み増さなり、縦長いフォームになってしまうこともあるでしょう。
状況によって使い分けたいところですが、入力欄をシンプルにスッキリと見せてくれるという点ではプレースホルダーに軍配でしょうか。
入力欄の中にあるので、より直感的。例示の効果アップ！
また、まさに入力しようとしている欄内に入力例を表示しておくことで、視線の移動も必要なく、より直感的です。
入力例といえば、入力欄の横に表示する例もよく見かけますが、
確かにわかりやすいのですが、左右の視線の移動が必要です。
プレースホルダーだと上下の動きだけで済み、ユーザーの負担も軽減できスムーズですね。
とくにスマホでは活用するべき！
省スペースに役立つプレースホルダー。とくにスマートフォンのように画面が小さい端末向けのフォームでは大活躍します。
「home’s」（http://www.homes.co.jp）の物件問い合わせフォーム（スマホ用）の例。小さい画面でもスッキリと見えます。
さらにスマートフォン（iPhone）だと、通常、項目タップ時に表示エリアが拡大されてしまうため、左右などに入力例を表示すると見えなくなってしまう可能性があります。
そういった理由からもプレースホルダーをぜひとも使いたいところです。
極端な話、入力欄だけでも…？使い方には注意
さらにはプレースホルダー内にラベルを収めてしまうという方法もあります。
こちらはSNSアプリ「Path」のアカウント作成フォーム。
プレースホルダーの活用により、８つの入力項目がスッキリと収まっています。
facebbokのアカウント登録画面でもこの方法が利用されているようです。
こちらはgoogleのアカウント登録フォームの例。
ラベルが入れ子になっている場合に、中項目にのみ適用する例です。これなら、マネしやすそうですね。
このようにフォームをシンプルにしたい場合やファーストビューに収めたい場合、プレースホルダーは大幅な省スペースに一役買うはずです。
ただし注意したい点も
このように、便利なプレースホルダーですが、以外な落とし穴も。
それは入力を開始すると内容が見えなくなる点。
つまり、入力途中でラベルが見えなくなってしまうということ。
上記で取り上げた、Pathやfacebookのような形ですと、入力中に何を入力していたかわからなくなった…という事態が起こる可能性も。（あまりないケースなのかもしれませんが）
基本的なフォーム項目ならば、問題ないかもしれませんが、ラベルを入れたいときはgoogleの例のような補助的な使い方に留めるのが無難です。
◀冒頭でも取り上げたTwitterのログイン画面。
ユーザー名とパスワードくらいの項目の少なさ・シンプルさならばさほど問題もないでしょう。
くれぐれも、見た目を重視するあまりユーザビリティを損なわないよう、注意したいですね。
まとめ
いかがだったでしょうか。
昨日、今日と２記事にわたって、以下の点についてお話しました。
- 入力例の存在は、ユーザーが迷いなくスムーズに入力開始できるうえで重要
- 入力例の表示方法は多様だが、プレースホルダーを利用するのが効率的
フォームに入力例が無いという方、プレースホルダーを使っていないという方、さっそく採り入れてみてはいかがでしょうか！
