検索窓に薄いテキストを入れて、何を入力すべきかわかりやすくする

本日は「検索窓に薄いテキストを入れて、何を入力すべきかわかりやすくする」プレースホルダについて。
こんにちは、見習いWEBディレクターのTです。

ECサイトやホームページ内で目的の商品やページを探す際、検索窓を使います。

ECサイトでは特に、目的の商品をいかに簡単に見つけられるかでそのサイトでの購買有無が変わったりしますので重要です。

ですが、お客様は「そもそもなんて検索したらいいかわからない」「何を入力すべきかわからない」こともあります。

そこで検索窓の中に、入力すべき事項の例を入れておきます。そうすると、お客様がそこに何を入力すべきかわかりやすくなります。

html5でサイトを作った場合：

と、入力します。

こうすると、検索窓の中に、「商品を探す（キーワードを入力）」とあらかじめ薄いテキストで表示させることができます。

設定した文字は、ユーザーがテキストを入力した時点で消えます。テキストボックスが空になったらあらかじめ設定したテキストに戻ります。

この方法だと、テキスト色の指定をしなくても最初から薄いので、便利です。