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

エ・ビスコム・テック・ラボ
2008/07/31 22:38

これまで2回にわたってフォームのタイプごとの特徴を見てきた。今回はフォームのタイプを組み合わせて、フォームをデザインするときのポイントを紹介したい。

フォームのデザイン

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

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

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

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

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

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

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

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

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

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

項目を区切って表示したもの 項目を区切って表示したもの
※ブラウザで表示を確認する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
インストール 仮想化 Chrome Tips Off Topic Firefox Firefox 3 オープンソース Webサービス Webデザイン 小技 CSS Safari iPhone 3G Database 脆弱性 Opera Internet Explorer Flash 開発環境 iPhone Apple Windows Mozilla Windows Vista Google UI Windows 7 ブラウザ ソフトウェア開発 マイクロソフト プログラミング言語 JavaScript HTML Windows XP WebKit Java リファレンス Microsoft RIA Ajax モバイル OS Linux データベース Mac OS X アプリケーション セキュリティ iPod touch クラウド
  • 話題のタグを見る »