フォームにデータを正確に入力してもらうためのポイント

　3回にわたってフォームの基本的なデザインについてまとめてきたが、今回はユーザーの入力を補助するフォームのデザインを紹介したい。

入力に必要な情報をわかりやすく伝える

　データを必ず入力してほしい場合や、全角で入力してほしい場合には、そのことをユーザーに伝えなければならない。そこで、ユーザーの目に留まるようにフォームに注意書きを表示する。

必須項目であることを示す

　必ず入力してほしい項目には「必須」と表示するのが一般的だ。項目名の部分に表示するパターンと、テキストボックスの部分に表示するパターンがあるが、ユーザーが認識できればどちらに表示しても問題はない。

　また、必須項目にマークを付けて、欄外に必須であることを記すパターンも利用することができる。

　たとえば、次のサンプルは「名前」と「メールアドレス」の項目名の横に「必須」と表示したパターンだ。

項目名の横に「（必須）」と表示したもの

※ブラウザで表示を確認する

　一方、テキストボックスの横に「必須」と表示するパターンは、次のようにデザインすることができる。ここでは文字の色を赤くして目立つようにした。

テキストボックスの横に「※必須」と表示したもの

※ブラウザで表示を確認する

　必須項目にマークを付けるパターンは次のようなかたちになる。ここでは必須項目に黄色の「★」というマークを付けて、フォームの一番上にマークについての説明を表示している。

必須項目にマークを表示したもの

※ブラウザで表示を確認する

全角／半角で入力してほしいことを示す

　全角や半角で入力してほしい項目には、一般的には「全角」や「半角英数」といった注意書きを表示する。必須項目の場合と同じように、項目名の部分やテキストボックスの部分に表示するとわかりやすい。

　しかし、フォームでは1つの項目に「必須」と「全角／半角」の両方の注意書きを表示しなければならないケースも多く、いっしょにまとめて表示すると両方とも目立たなくなるという問題が出てくる。

　たとえば、次のサンプルでは「必須」と「全角／半角」の両方の注意書きをテキストボックスの横に表示したが、文字がごちゃっとしてそれぞれの注意書きが目に留まりにくい。

2つの注意書きをテキストボックスの横に表示したもの

※ブラウザで表示を確認する

　そこで、「必須」と「全角／半角」の注意書きを別々のかたちで表示する。たとえば、「半角／全角」の注意書きを項目名の横に、「必須」の注意書きをテキストボックスの横に表示すると次のようになる。

「全角／半角」と「必須」の注意書きを別々に表示したもの

※ブラウザで表示を確認する

　また、「必須」の注意書きを「★」マークで表示し、「全角／半角」の注意書きをテキストボックスの下に表示すると次のようになる。

「全角／半角」と「必須」の注意書きを別々に表示したもの

※ブラウザで表示を確認する

その他の注意書きや記入例を表示する

　「必須」や「全角／半角」以外にも、気をつけてほしいことがあれば注意書きを表示する。また、注意書きだけでわかりにくい場合は記入例を表示するのも有効だ。

　たとえば、次のサンプルでは「名前」のテキストボックスの上に記入例を表示した。また、「メールアドレス」のテキストボックスと「購読希望」のチェックボックスの上には注意書きを表示している。

記入例や注意書きを表示したもの

※ブラウザで表示を確認する