Webデザイナーブログから学ぶホームページ制作

問い合わせや資料請求、会員登録など、ユーザーとの接点を持つために入力フォームを使用します。
入力フォームは、ホームページやアプリケーションなどのユーザーインターフェースで、ユーザーがテキストや数値などの情報を入力するための領域を指します。一般的に、ユーザーが名前、メールアドレス、住所、パスワード、コメントなどの情報を提供する場合、それらの情報を収集するために入力フォームが使用されます。

また、入力フォームには、テキストボックス、ラジオボタン、チェックボックス、ドロップダウンメニューなどの要素が含まれることがあります。これらの要素は、ユーザーが情報を選択または入力できるようにします。
入力フォームは、ホームページのお問い合わせフォーム、登録フォーム、ログインフォーム、注文フォームなどさまざまな用途で使用されます。
ユーザーが情報を提供することで、サービス提供者やホームページの管理者は必要な情報を収集し、UX(ユーザーエクスペリエンス）を向上させることができます。

入力フォームの、UX(ユーザーエクスペリエンス）を向上させるためにひとつの方法として、フォームの入力欄に入力例を最初から表示させる、というようなユーザーの使いやすさと視覚的な魅力を両立させる施策も戦略のひとつとなります。

今回は、フォームの入力欄に最初から薄く文字を表示させる方法を解説します。

UI/UXの違いと重要性とは？デザインの視点から見るユーザー体験の向上を理解する

入力フォームの入力欄に最初から文字を表示する場合は「placeholder（プレースホルダー）」属性を用いてhtml内に使用する「input」要素や「textarea」要素等で作るテキストボックスやテキストエリアに記述します。

「placeholder（プレースホルダー）」は、入力フォーム内に、ユーザーが入力すべき内容や期待される形式を示す短いヒントテキストのことです。
通常、入力フォームが空の場合に表示され、ユーザーに入力する内容を指示する役割を果たします。
プレースホルダーは、フォームのデザインを改善し、ユーザーが正しい情報を入力するのを助けるために使用されます。

要素に「placeholder（プレースホルダー）」を記述し、文字の色を変更したり文字を透過させる場合は、「placeholder」にcssで指定することで実装できます。

<input type="text" name="name" size="50" placeholder="こちらにプレースホルダーの文字を入れることができます。">

::placeholder {
  color: #c7c7c7;
}

<textarea name="" cols="70" rows="3" placeholder="こちらにプレースホルダーの文字を入れることができます。"></textarea>

::placeholder {
  color: #c7c7c7;
}

「placeholder（プレースホルダー）」を利用した入力フォームは、WordPress（ワードプレス）で「Contact Form 7」プラグインを利用した入力フォームの入力欄にも実装ができます。
「Contact Form 7」プラグインの入力フォームに「placeholder（プレースホルダー）」を追記する場合は、フォーム内に追記するショートコード[text]や[textarea]に追記することができます。

[text text-1 placeholder "こちらにプレースホルダーの文字を入れることができます。"]

[textarea your-message placeholder "こちらにプレースホルダーの文字を入れることができます。"]

ユーザーが入力すべき内容や期待される形式を示すことで、入力フォームの目的や要求が明確化されます。これにより、ユーザーは入力する情報についてより理解しやすくなります。
「placeholder（プレースホルダー）」を使った戦略は小さな施策ではありますが、ユーザーエクスペリエンスを向上させる要素の1つです。
実装は簡単なのでなるべく設定することをおすすめいたします。