今回のポイント
フォームが使われる個所
CSSでテキストボックスを修飾する
現実的なフォームのデザイン
3行フォームを構成する

 フォームもWebページの一部ですから,いかにしてページのデザインと親和性を高めるかを考える必要があります。フォーム部分だけ浮き上がってしまうと,バランスが崩れてせっかくデザインした他の部分の良さを潰してしまいます。

フォームは一体どこで使われるのか

 まず,フォームはサイト内のどんな部分で使われているのか,ということから考えてみましょう。サイト内でフォームが使われる個所として,次のようなケースが考えられます。一般に,下のものほど複雑なフォーム構成になります。

  1. サイト内検索の語句入力
  2. Webアプリケーションのパラメータ入力
  3. システムにログインするID/パスワード
  4. お問い合わせ/質問
  5. 商品購入時などの各種情報入力
図1●サイト内検索の例
図1●サイト内検索の例。Wikipediaのサイドバーにある検索フォーム

 1番めの「サイト内検索の語句入力」フォームは,たいていの場合,テキストボックスひとつと送信ボタンのみで構成されます(図1)。サイトが巨大な場合はジャンルを絞り込むためのリストボックスが付くこともあります。

 このフォームはどこのサイトに行ってもたいてい付いています。サイトが肥大化してしまったときに,閲覧者を素早く目的部分に誘導するためのショートカットを提供するのは大変重要なポイントです。目的の情報に辿り着くために何度もリンクをたどることになると閲覧者はサイトから逃げていってしまいます。

 2番めの「Webアプリケーションのパラメータ入力」フォームは,Google Mapのようなものを考えていただければいいと思います(図2)。ドメイン名やIPアドレスを入力するとnslookupの結果を表示するアプリケーションもあります。アプリケーションによりますが,それほど複雑なパラメータ入力を要するものを公開することは多くないでしょう。Google Mapでは住所の入力用にテキストボックスと送信ボタンがひとつ付いているだけです。

図2●Google Map。住所を入力するテキストボックスと送信ボタンが最上部に付く
[画像のクリックで拡大表示]
図3●ログイン用のID/パスワード入力欄の一例
図3●ログイン用のID/パスワード入力欄の一例。たいていサイドバーに付く

 3番めの「システムにログインするID/パスワード」フォームは,認証を要するサイトでは必須です。IDとパスワードの入力欄と,システムによっては「ID/パスワードを記憶する」「次回から自動でログイン」といったチェックボックスが付きます(図3)。

 ID/パスワードをどうやって記憶するのかはプログラム側の話になりますので詳細は省略しますが,少なくても大手サイトでは,毎回ログインの手続きをしなくてもいいようにある程度のログイン情報は記憶させる傾向になっています。ただし銀行など高いセキュリティを要するサイトでは当然,ID/パスワードは記憶できないことが多いようです。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら