使いやすいフォームをデザインする6つのポイント

みなさんは，どのようにフォームをデザインしているでしょうか？　CSSでスタイリングされていない素のHTMLフォームは，当然ですがデザイン性にとぼしいものです。また，入力エリアが狭いため，ユーザビリティも高いとは言えません。

フォームにはお問い合わせフォーム，申し込みフォーム，予約フォームなどいろいろありますが，共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし，フォームへの入力は，ユーザーにとって面倒な作業です。そのため，極力簡単に入力できるようにして，ユーザーの負荷を軽減する必要があります。

それでは，どうすればユーザーの負荷を軽減させることができるでしょうか？　そのためのポイントが以下の6つです。

1. 要素を整列させる
2. 適度な余白をつくる
3. ディテールを作り込む
4. デザインされたボタンを使う
5. 住所を自動入力できるようにする
6. エラー表示をわかりやすくする

以下は，サンプルで作成したフォームの完成版です。

今回は，それぞれのポイントが，どのようにサンプルのフォームで実現されているかを確認していきます。

ポイント1　要素を整列させる

整列はデザインの基本ですが，中でも以下の事柄が大切です。

• 左揃えにするなら文字の左端が揃っていること
• 余白の大きさが統一されていること

サンプルでは，テキストの横に※がある場合とない場合がありますが，テキストの左端がラインで揃うようにしています。実装するにはCSSのclassなどを分ける必要があります。しかし，細かいところまで設計することで，見栄えがぐっと違ってきます。

ポイント2　適度な余白をつくる

余白があまりなく窮屈なフォームだと，ユーザーに心理的負荷をかけるだけでなく，入力しづらいフォームとなってしまいます。フォームの設計において注意したい余白には2つのポイントがあります。

1つ目はtd要素の余白です。フォームをテーブルで作る場合，td要素の余白を取りましょう。

2つ目はinput，textarea要素の余白です。input，textarea要素にカーソルを合わせたときの余白を作っておきましょう。ここに余白がないと，窮屈な印象を与えてしまいます。目安として，input，textarea要素に対してpadding:4px程度を指定するといいでしょう。