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

エ・ビスコム・テック・ラボ
2008-07-31 22:38:01
  • このエントリーをはてなブックマークに追加

ブラウザの標準のデザインで表示する

 テキストボックスや送信ボタンは、スタイルシートを利用することでデザインをカスタマイズできる。しかし、テキストボックスなどのデザインはできるだけカスタマイズせず、ブラウザの標準のデザインで表示するのが一般的だ。

 たとえば、次のサンプルはブログなどでお馴染みのコメント投稿フォームとなっている。テキストボックスとテキストフィールド、送信ボタンで構成し、ブラウザの標準のデザインで表示している。デザイン的な目新しさはないが、ユーザーにとっては見慣れたデザインなのでわかりやすい。なお、ここではInternet Explorerを利用して表示を確認している。

ブラウザの標準のデザインで表示したコメント投稿フォーム ブラウザの標準のデザインで表示したコメント投稿フォーム
ブラウザで表示を確認する

 一方、次のサンプルは同じコメント投稿フォームのデザインをスタイルシートでカスタマイズしたものだ。ここでは、テキストボックスやテキストフィールドを上下の罫線ではさむ形にデザインしている。

デザインをカスタマイズしたコメント投稿フォーム デザインをカスタマイズしたコメント投稿フォーム
ブラウザで表示を確認する

 しかし、このデザインではどこに文字を入力できるのかがわかりにくい。フォームを使い慣れたユーザーであれば試しに入力してみようと思うかもしれないが、多くのユーザーは見慣れないデザインに戸惑い、入力を躊躇するだろう。

 これがフォームであるということを認識してもらえない可能性もある。

デザインをカスタマイズする場合

 テキストボックスや送信ボタンなどのデザインをカスタマイズする必要がある場合、すべてをカスタマイズせず、部分的にブラウザの標準のデザインを残すことで、わかりにくくなるのを防ぐことが可能だ。

 利用されることの多い主なカスタマイズのパターンを紹介しよう。

背景だけをカスタマイズする

 まずは、背景だけをカスタマイズするパターンだ。枠線はブラウザの標準のデザインで表示する。たとえば、次のサンプルではテキストボックスとテキストフィールドの背景を水色で表示している。

背景色だけをカスタマイズしたもの 背景色だけをカスタマイズしたもの
ブラウザで表示を確認する

枠線だけをカスタマイズする

 次は枠線のデザインだけをカスタマイズするパターンだ。背景は標準の白色で表示する。次のサンプルでは、テキストボックスとテキストフィールドの枠線を青色の細い線で表示している。フォーム全体をすっきりと見せたいときなどに利用することが多い。

 なお、上下左右の枠線はすべて表示する。部分的に枠線を消してしまうとわかりにくくなるので注意が必要だ。

枠線だけをカスタマイズしたもの 枠線だけをカスタマイズしたもの
ブラウザで表示を確認する

まわりの背景だけをカスタマイズする

 テキストボックスやボタンは標準のデザインのまま、まわりの背景だけをカスタマイズするパターンもある。次のサンプルでは、まわりの背景を青色で表示している。

まわりの背景をカスタマイズしたもの まわりの背景をカスタマイズしたもの
ブラウザで表示を確認する

画像でカスタマイズする

 テキストボックスやボタンのデザインは、画像を使ってカスタマイズすることもできる。しかし、ブラウザの標準のデザインからは大幅に変わることになるので、フォームを利用するユーザー層などを考慮してカスタマイズしなければならない。

 また、画像でカスタマイズする場合、フォームのタイプを判別できるように画像を作成する必要がある。

 たとえば、テキストボックスは1行の文字を入力する部分、テキストフィールドは複数行の文字を入力する部分、ボタンはクリックできる部分であることがわかるように画像を作成する。

画像でカスタマイズしたもの 画像でカスタマイズしたもの
ブラウザで表示を確認する

 次回はユーザーの入力を補助するフォームのデザインを紹介する。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]