フォームのデザインで気をつけたい3つのポイント

フォームのデザイン

　フォームはユーザーにデータを送信してもらうことが重要だ。入力ミスを減らすことも考えなければならない。そのため、見た目の派手さなどよりも、ユーザーにとってわかりやすく、使いやすいデザインにすることが重要になる。

項目名をわかりやすく表示する

　フォームは、どこに、なにを入力してほしいのかをユーザーに伝えなければならない。そこで、テキストボックスなどには必ず項目名を付けて表示する。項目名がなければ、ユーザーは何を入力していいのかわからなくなるからだ。

　たとえば、次のサンプルではテキストボックスに「名前」という項目名を表示している。日本語のテキストは左から右、上から下の順に読み進めるので、項目名はテキストボックスの上または左側に表示するのがポイントだ。テキストボックスの下や右側に表示すると、項目名がどこを指しているのかわからなくなってしまう。

項目名を上に表示したもの

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

項目名を左に表示したもの

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

項目の区切りを明確にする

　複数の入力項目を用意する場合、項目の区切りを明確にすることでフォームをわかりやすくデザインすることができる。

　次のサンプルでは5つの入力項目を用意した。しかし、項目の間には区切りがなく、ごちゃっとした印象になっている。特に、チェックボックスの選択肢は「趣味」と「購読希望」のどちらの項目に属しているのかがわかりにくくなっている。

項目を区切らずに表示したもの

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

　項目の区切りが明確になるようにデザインすると次のようになる。ここでは、項目の間を緑色の罫線で区切るようにデザインした。また、項目名の部分は黄緑色の背景色で表示して、項目名が目立つようにデザインしている。

項目を区切って表示したもの

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