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

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

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

フォームのデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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