今回のポイント フォームが使われる個所 CSSでテキストボックスを修飾する 現実的なフォームのデザイン 3行フォームを構成する |
フォームもWebページの一部ですから,いかにしてページのデザインと親和性を高めるかを考える必要があります。フォーム部分だけ浮き上がってしまうと,バランスが崩れてせっかくデザインした他の部分の良さを潰してしまいます。
フォームは一体どこで使われるのか
まず,フォームはサイト内のどんな部分で使われているのか,ということから考えてみましょう。サイト内でフォームが使われる個所として,次のようなケースが考えられます。一般に,下のものほど複雑なフォーム構成になります。
- サイト内検索の語句入力
- Webアプリケーションのパラメータ入力
- システムにログインするID/パスワード
- お問い合わせ/質問
- 商品購入時などの各種情報入力
1番めの「サイト内検索の語句入力」フォームは,たいていの場合,テキストボックスひとつと送信ボタンのみで構成されます(図1)。サイトが巨大な場合はジャンルを絞り込むためのリストボックスが付くこともあります。
このフォームはどこのサイトに行ってもたいてい付いています。サイトが肥大化してしまったときに,閲覧者を素早く目的部分に誘導するためのショートカットを提供するのは大変重要なポイントです。目的の情報に辿り着くために何度もリンクをたどることになると閲覧者はサイトから逃げていってしまいます。
2番めの「Webアプリケーションのパラメータ入力」フォームは,Google Mapのようなものを考えていただければいいと思います(図2)。ドメイン名やIPアドレスを入力するとnslookupの結果を表示するアプリケーションもあります。アプリケーションによりますが,それほど複雑なパラメータ入力を要するものを公開することは多くないでしょう。Google Mapでは住所の入力用にテキストボックスと送信ボタンがひとつ付いているだけです。
3番めの「システムにログインするID/パスワード」フォームは,認証を要するサイトでは必須です。IDとパスワードの入力欄と,システムによっては「ID/パスワードを記憶する」「次回から自動でログイン」といったチェックボックスが付きます(図3)。
ID/パスワードをどうやって記憶するのかはプログラム側の話になりますので詳細は省略しますが,少なくても大手サイトでは,毎回ログインの手続きをしなくてもいいようにある程度のログイン情報は記憶させる傾向になっています。ただし銀行など高いセキュリティを要するサイトでは当然,ID/パスワードは記憶できないことが多いようです。