茨城県鹿嶋市・神栖市 ホームページ制作、デザイン スキル・バンク

皆さん、こんにちは。 スキル・バンク　ＳＥのＷ　です。 連日の投稿になりますが、ふとした気づきをシェアしたいと思います。 とあるＥＦＯに関する記事を読んでおりましたら、下記のような記述がありました。 ・モバイルサイトでは、入力例はテキストボックス内に初期表示した方がいい。 ・理由は、その方がレイアウトがすっきりするから。 ・その方がユーザーにもページが見やすくなって、満足度が上がるはず。 そこで、実際に自社サイトの問い合わせページで試してみようと思ったのです。 テキストボックスに初期表示させるには、inputタグの中に「placeholder」という設定値を追加します。 CSSを使えば色も濃くしたり、薄くしたり、色を付けたりもできます。 設定は簡単に終わりまして、さて実機でテスト。 確かにレイアウトは若干すっきりして見えます。 テキストボックスに値を入力してみますと、初期表示が消えます。 なるほどなるほど、もう少し色が薄い方がいいかな、それとも青系の方がいいんだろうか・・・。 そこでハタと気づきました。 入力しようとしたら入力例が消えます。 ということは、入力する段階では、参考になるものが見えなくなっているんですね。 「これでは、入力例の意味がない」 そう判断して、入力例はこれまで通り、テキストボックスの下に、控えめに表示することにしました。 入力例が消えてしまって、入力間違いを起こしている方が、絶対にいるはずです。 レイアウトがどうのこうの以前の問題ですね。 やはり実機での確認も大事ですが、まずは「それは何のために存在しているのか？」を良く考えないといけないな、と改めて感じました。