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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

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

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

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

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

※ブラウザで表示を確認する

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

デザインをカスタマイズしたコメント投稿フォーム

※ブラウザで表示を確認する

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

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

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

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

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

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

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

背景色だけをカスタマイズしたもの

※ブラウザで表示を確認する

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

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

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

枠線だけをカスタマイズしたもの

※ブラウザで表示を確認する

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

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

まわりの背景をカスタマイズしたもの

※ブラウザで表示を確認する

画像でカスタマイズする

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

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

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

画像でカスタマイズしたもの

※ブラウザで表示を確認する

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