こんにちは、こんばんは、にゃんこ師匠です。
さて、今回はプレースホルダの話です。

主として、スマホの省スペースと利便性を追求する上でプレースホルダは便利な機能です。しかし、使い方には十分な検証が必要です。

目次

プレースホルダとは?

プレースホルダ(Place Holder)とはHTML5で実装されたinput要素の補助機能です。サポートブラウザには制約があり、PCではあまり使用されていません。

HTML5 Forms Attributeslink
スクリーンショット 2014-10-03 15.44.52

実装状況は70%、IEシリーズは未実装のため、PC用のWebページには向いていないといえるでしょう。

ただし、HTML5の実装が進んでいるスマートフォン、タブレット用のブラウザ(Webkit/Chrome)では、ほぼ実装されているので、新しいデバイス向けのオプションと考えれば、使い道も多くなっています。

20141003001

小さな画面で省スペース化

画面の小さなスマートフォンでは、ラベル(項目名)、入力事例、必須/オプション、入力フィールドなどが縦に並ぶと1項目の専有面積が大きくなり、フォームの全容が見えにくくなります。

入力項目が多いように錯覚して離脱する可能性も高まります。一方で入力フィールド部分はたっぷりと高さを確保しないとタッチしにくくなるため、省スペースに向けた工夫は非常に重要です。

20141003001b

プレースホルダの書き方

HTML5の場合、input要素にplaceholder=””を加えるだけです。
<input type=”email” name=”e-mail” placeholder=”mail@efo-navi.com”>

ただし、フォームの改修が入るため容易に変更できないポイントの1つでもあります。PCではIEがサポートしていないため、手間とコストを掛ける程の有効性がありませんでした。

20141003002
Javascriptで代替するah-placeholder.js(IE9以上)等もあります。
【参考】HTML5のPlaceholderをIEでも利用可能に

プレースホルダの利点

視認性と省スペースがプレースホルダの導入メリットと言えるでしょう。入力例の1行分が省略できるので、その分フォーム領域を広く使えます。また、一目で視認できる点も大きなメリットと言えます。

20141003003

プレースホルダの欠点

反面、欠点も有るので使い方を間違えるとユーザビリティを逆に下げることになるので注意しましょう。
まず、入力を開始するとプレースホルダの表示は消えます。つまり入力例が消えることになります。

一見して理解できないような入力ルールがある場合、プレースホルダを使うべきでは有りません。

また、実入力とプレースホルダの入力例を見分けられるように文字色などにも注意しましょう。

20141003004

間違ったプレースホルダの使い方

まず、コントラストに注意しましょう。入力例が薄すぎるとアクセシビリティが低下し、色弱では認知できない場合があります。逆に濃すぎると入力済みの項目と区別がつかなくなり混乱します。

次に、「必須」など、警告、注意喚起用には使っては行けません。入力した時に消えてしまうわけですから、そうした常時表示が好ましい項目に使うべきでは有りません。

最後にラベルの替わりとして使ってはいけません。Facebook等、一部の著名サービスの登録画面でこのパターンを見る事もありますが、参考にすべきではない「悪い事例」と言えるでしょう。

20141003005

まとめ

  • HTML5を基本とするのでPCには不向き
  • スマホでは効果的に使えばCVアップにつながる
  • プレースホルダの特性を十分に理解しないとCVダウンとなる