フォームデザイン虎の巻：フォームの基礎をおさえる

エ・ビスコム・テック・ラボ
2008/07/17 08:00

ユーザーから情報を受け取る大切な窓口「フォーム」。しかし、フォームのデザインが悪ければ不正確な情報が入力されたり、入力をあきらめてページから離脱されてしまう。窓口の整備を始める前に、まずはどんな種類のフォームがあるのかをみていこう。

　フォームはユーザーから情報を送信してもらうために、さまざまな場面で利用されている。ブログのコメント投稿フォームやオンラインショッピングの注文フォーム、検索用のキーワード入力フォームなど、フォームがなければサイトの用途は半減してしまうだろう。

　しかし、せっかくフォームを用意しても、使い勝手が悪いせいで、ユーザーが情報を送信してくれなければ何も始まらない。また、情報を送信してもらえても、入力ミスが多発するようではせっかくの情報も役に立たなくなってしまう。

　情報を正確に入力して送信してもらうためには、フォームをわかりやすく、ユーザーを迷わせることのないようにデザインすることが求められる。どこに、何を、どのような形で入力すればよいのか。それが簡単に伝わるデザインこそ理想的だ。

　そこで、本連載では4回にわたってフォームの基本的なデザインについて取り上げていく。今回は、フォームのタイプについて見ていきたい。

フォームのタイプ

　フォームには次のように多様なタイプがあり、組み合わせて利用することができる。わかりやすいフォームを作成するためには、送信してほしい情報に合わせて最適なタイプを選択することが必要だ。

フォームのタイプ フォームのタイプ
※ブラウザで表示を確認する

　そこで、それぞれのフォームのタイプがどのような情報の入力に適しているのか、どのように利用するのが有効なのかを次のページから見ていこう。

記事に関係する情報をコメントでお寄せください

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

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