快適なテキストボックスを作る、たった5つの条件

今回はエントリーフォームの入力欄のなかでも、テキスト情報を入力する「テキストボックス」にフォーカスし、快適なフォームの入力欄を作るコツをご紹介いたします。

googleのトップページの検索窓テキストボックスの例。

googleのトップページの検索窓テキストボックスの例。

目次

今回ご紹介するポイントは以下の5点です。

  1. 文字サイズが充分な大きさ
  2. 横幅が適切なサイズになっている
  3. まわりに適切な余白がある
  4. 内側にも多少の余白がある
  5. フォーカス中に強調されている

以下、それぞれ詳しく説明していきます。

文字サイズが充分な大きさ

テキストボックスの文字サイズが小さすぎると、単純に見難く、入力がしにくくなります。
メールアドレスなど、半角英数字を入力する歳に特に顕著なのではないでしょうか。

文字サイズ12px時。なかなかつらいものがある

文字サイズ12px時。なかなかつらいものがある

ユーザーの年齢層が高めの場合はとくにイライラの原因になっているのではないでしょうか。

対処法は簡単、文字サイズを大きくするだけです。

文字サイズを16pxに。かなり見やすくなりました。

文字サイズを16pxに。かなり見やすくなりました。

サイト全体の文字が小さめの場合でも、最低でも13px以上のフォントサイズにしておくようにしましょう。

横幅が適切なサイズになっている

みなさんはこんなケース、ご経験があるでしょうか。

狭すぎる!

狭すぎる!

テキストボックスの横幅が狭すぎて、入力していくうちに詰まってしまい不便な思いをするケースです。

またはその逆のパターンの、不必要に横幅が広いケース。

広すぎる…

広すぎる…

大は小を兼ねるとは言いますが、不必要に大きくすると違和感を感じるのではないでしょうか。

適切な横幅

このように、テキストボックスの横幅は、入力内容に応じて適切なサイズをとっておきましょう

まわりに適切な余白がある

まわりの余白

いかがでしょうか?項目同士の余白がないと、入力するのにウンザリしてしまいませんか。

これはテキストボックスに限った話ではありませんが、項目同士、適切な余白をもって配置するようにしましょう。

まわりの余白を広げた例

内側にも多少の余白がある

余白の話の続きになりますが、テキストボックスの内側にも余白があると、なお視認性が上がります

内側に余白を入れた例

上記はこれまでの例に内側に3px余白を入れたものです。
一気にテキストボックス内の文字が見やすくなったのではないでしょうか。

フォーカス中に強調されている

デフォルト状態のテキストボックスのスタイルでは、(ブラウザの種類、バージョンにもよりますが)現在カーソルを当てている入力項目の色を少し変えてくれます。

firefoxでのフォーカス中項目の表現例

firefoxでのデフォルト時フォーカス中項目の表現。

現在どこを入力しているかが一目瞭然となり、大変便利な機能ですが、少々目立ちません。

フォーカス中のテキストボックスは、より強調した表現にするといっそう親切です。

アクティブなフィールドをオレンジ色の枠線にしてみました

アクティブなフィールドをオレンジ色の枠線にした例

例では枠線の色を変えたのみですが、枠線の太さや項目の背景色を変えたり、光っているような表現にするなど、さまざまな手法が考えられると思います。

最後に

いかがだったでしょうか。
今回はテキストボックスに特化した、ユーザビリティ向上のテクニックをお伝えしました。

ご紹介した5つのポイントをクリアできれば、テキストボックスはある程度のレベル、快適に入力できるようになります。
ある程度最近のデザインを取り入れたフォームであれば、既に実装済みということもあるかもしれませんね。

いずれも簡単に実装できる(スタイルシートの変更のみ)方法ばかりですので、まだの方はぜひ採り入れていただければと思います。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です