今回はエントリーフォームの入力欄のなかでも、テキスト情報を入力する「テキストボックス」にフォーカスし、快適なフォームの入力欄を作るコツをご紹介いたします。
googleのトップページの検索窓テキストボックスの例。
目次
今回ご紹介するポイントは以下の５点です。
以下、それぞれ詳しく説明していきます。
文字サイズが充分な大きさ
テキストボックスの文字サイズが小さすぎると、単純に見難く、入力がしにくくなります。
メールアドレスなど、半角英数字を入力する歳に特に顕著なのではないでしょうか。
文字サイズ12px時。なかなかつらいものがある
ユーザーの年齢層が高めの場合はとくにイライラの原因になっているのではないでしょうか。
対処法は簡単、文字サイズを大きくするだけです。
文字サイズを16pxに。かなり見やすくなりました。
サイト全体の文字が小さめの場合でも、最低でも13px以上のフォントサイズにしておくようにしましょう。
横幅が適切なサイズになっている
みなさんはこんなケース、ご経験があるでしょうか。
狭すぎる！
テキストボックスの横幅が狭すぎて、入力していくうちに詰まってしまい不便な思いをするケースです。
またはその逆のパターンの、不必要に横幅が広いケース。
広すぎる…
大は小を兼ねるとは言いますが、不必要に大きくすると違和感を感じるのではないでしょうか。
このように、テキストボックスの横幅は、入力内容に応じて適切なサイズをとっておきましょう。
まわりに適切な余白がある
いかがでしょうか？項目同士の余白がないと、入力するのにウンザリしてしまいませんか。
これはテキストボックスに限った話ではありませんが、項目同士、適切な余白をもって配置するようにしましょう。
内側にも多少の余白がある
余白の話の続きになりますが、テキストボックスの内側にも余白があると、なお視認性が上がります。
上記はこれまでの例に内側に3px余白を入れたものです。
一気にテキストボックス内の文字が見やすくなったのではないでしょうか。
フォーカス中に強調されている
デフォルト状態のテキストボックスのスタイルでは、（ブラウザの種類、バージョンにもよりますが）現在カーソルを当てている入力項目の色を少し変えてくれます。
firefoxでのデフォルト時フォーカス中項目の表現。
現在どこを入力しているかが一目瞭然となり、大変便利な機能ですが、少々目立ちません。
フォーカス中のテキストボックスは、より強調した表現にするといっそう親切です。
アクティブなフィールドをオレンジ色の枠線にした例
例では枠線の色を変えたのみですが、枠線の太さや項目の背景色を変えたり、光っているような表現にするなど、さまざまな手法が考えられると思います。
最後に
いかがだったでしょうか。
今回はテキストボックスに特化した、ユーザビリティ向上のテクニックをお伝えしました。
ご紹介した5つのポイントをクリアできれば、テキストボックスはある程度のレベル、快適に入力できるようになります。
ある程度最近のデザインを取り入れたフォームであれば、既に実装済みということもあるかもしれませんね。
いずれも簡単に実装できる（スタイルシートの変更のみ）方法ばかりですので、まだの方はぜひ採り入れていただければと思います。
