builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

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

エ・ビスコム・テック・ラボ
2008-07-31 22:38:01
  • このエントリーをはてなブックマークに追加

フォームのデザイン

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

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

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

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

項目名を上に表示したもの 項目名を上に表示したもの
※ブラウザで表示を確認する
項目名を左に表示したもの
※ブラウザで表示を確認する

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

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

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

項目を区切らずに表示したもの
※ブラウザで表示を確認する

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

項目を区切って表示したもの 項目を区切って表示したもの
※ブラウザで表示を確認する

ブログの新規登録は、2021年12月22日に終了いたしました。

[ログイン] [ログアウト]
folllow builer on twitter
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]