第2回　アクションを起こしてもらえるフォームのポイントは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ポイント3　ディテールを作り込む

フォームの背景色をべた塗りにしたり、ラインの色に気を使わないと、ありきたりのデザインになってしまいます。以下の2点に気をつけると、繊細な立体感を表現することができます。

明度の高いラインをうまく使う

th要素にあたるフォームの見出しにグレーの背景色を使っていますが、border-topとborder-leftに白のラインを指定します。これにより、光が当たっているような、立体感のあるデザインにできます。

input、textarea要素に背景画像を指定する

光を意識すると、浮き上がったところと沈み込んだところが出てきます。そこで、入力箇所は沈み込んだように見せられる色を上手に使うといいでしょう。

具体的には、上から下方向に明度が高くなるグラデーションを用いることで実現できます。

ポイント4　デザインされたボタンを使う

ボタンはOS標準のものではなく、画像にするとデザイン性が増すでしょう。以下のように、inputのtypeにsubmitではなく、imageを指定してください。

<input type="image" value="submit" src="/img/btn_confirm.png" alt="送信内容を確認" />

ポイント5　住所を自動入力できるようにする

フォームには住所入力をするケースがよくありますが、ユーザーに郵便番号・都道府県・市区町村をすべて入力させるのはあまり親切とはいえません。郵便番号を入力した時点で都道府県・市区町村が自動入力されると、とても使いやすいフォームになります。

住所の自動入力には様々な方法がありますが、Ajaxを使うと画面遷移やポップアップ表示の必要がなく便利です。

Kawa.netさんのAjaxZip 2.0は、反応のいい、優れたAjaxライブラリです。ライセンスもMITとなっており、個人利用・商用利用を問わず、自由に利用できるため、住所の自動入力ライブラリを探している方は、一度見てみてはいかがでしょうか（なお、ソース中の著作権表示は変更不可となっています⁠）⁠。

ポイント6　エラー表示をわかりやすくする

エラー表示はきちんと設計しないと、ユーザーにかなりの負荷をかけてしまいます。重要なのは「わかりやすさ」と「ユーザーに気づいてもらうスピード」の2つです。

まず、エラー画面への画面遷移はしない方がいいでしょう。エラー画面へ遷移して、戻って、という手間を省くためです。

また、フォームの上部にまとめてエラーが表示されるサイトをまだ見かけますが、エラー箇所のそばにエラー表示するのが望ましいでしょう。フォーム上部に複数の項目のエラーがまとめて表示されると、ユーザーにとってはどの項目にエラーがあるのかがわかりにくい上、スクロールしてエラーを確認 → 修正するという手間がかかってしまうためです。

どこがエラーなのかがはっきりわかり、どう直せばいいのかがユーザーにちゃんと伝わるように、エラー文言にも気を配るべきです。たとえば、以下のようにわかりやすく表記しましょう。

inputの必須入力の場合　→　入力してください
ドロップダウンメニューの必須入力の場合　→　選択してください
メールアドレスのバリデートの場合　→　正しい形式で入力してください

サンプル全体のソースを見てみる

最後に、今回サンプルで作ったフォームのXHTML/CSSソースをご紹介しておきます。

XHTMLソース

<div id="contact_table">
  <div class="comment"><span class="necessary">※</span>は必須項目です</div>
  <form action="/index.php" method="post" onsubmit="return _FORM.validate(this);">
    <table id="contact_table" width="636" border="0" cellspacing="0">
      <tr>
        <td class="formLeft"><span class="necessary">※</span>お名前</td>
        <td class="formRight"><input type="text" name="formName" id="formName" value="" class="inputStyle" />
          <p class="error" id="error_message_formName" style="display:none;">入力してください。</p></td>
      </tr>
      <tr>
        <td class="formLeft"><span class="necessary">※</span>メールアドレス</td>
        <td class="formRight"><input type="text" name="formMail" id="formMail" value="" class="inputStyle" />
          <p class="error" id="error_message_formMail" style="display:none;">入力してください。</p></td>
      </tr>
      <tr>
        <td class="formLeft"><span class="necessary">※</span>お電話番号</td>
        <td class="formRight"><input type="text" maxlength="4" name="formTell01" id="formTell01" value="" class="inputStyle-s" />
          &nbsp;<span class="hyphen">-</span>&nbsp;
          <input type="text" maxlength="4" name="formTell02" id="formTell02" value="" class="inputStyle-s" />
          &nbsp;<span class="hyphen">-</span>&nbsp;
          <input type="text" maxlength="4" name="formTell03" id="formTell03" value="" class="inputStyle-s" />
          <p class="error" id="error_message_formTell" style="display:none;">入力してください</p></td>
      </tr>
      <tr>
        <td class="formLeft nomark">お問い合わせ詳細</td>
        <td class="formRight"><textarea name="comments" id="comments" rows="10" cols="50" class="textAreaStyle"></textarea></td>
      </tr>
    </table>
    <div id="btnarea">
      <input class="roll" type="image" value="submit" src="img/btn_confirm.png" alt="送信内容を確認" />
    </div>
  </form>
</div>

CSSソース

#contact_table {
	margin:10px auto 39px auto;
	width:600px;
}
#contact_table p {
	margin:20px 0 16px 0;
}
#contact_table .comment {
	text-align:right;
	display:block;
	margin:0 13px 7px 0;
}
#contact_table .comment span {
	color:#ff0000;
}
#contact_table #btnarea {
	text-align:center;
}
table {
	border-spacing: 0;
	border-collapse:separate;
	margin-bottom:26px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #ccc;
	border-right:none;
	border-bottom:none;
}
table td {
	text-align: left;
	border-style: solid;
	border-width: 1px;
	border-color: #fff #ccc #ccc #fff;
	padding: 20px 10px 20px 10px;
}
.hyphen {
	/position:relative;
	/top:-7px;
}
.bgwhite {
	background-color:#fff;
	border-color: #fff #fff #ccc #fff;
}
.formLeft {
	background-color:#ebebeb;
	width:145px;
}
.inputStyle {
	font-size: 12px;
	color: #666;
	padding: 6px;
	width:400px;
	border:1px solid #ccc;
	background:url(img/bg_input.png) repeat-x top #fff;
}
.inputStyle-s {
	font-size: 12px;
	color: #666;
	padding: 6px;
	width:80px;
	border:1px solid #ccc;
	background:url(img/bg_input.png) repeat-x top #fff;
}
.textAreaStyle {
	font-size: 12px;
	background:url(img/bg_textarea.png) repeat-x top #fff;
	color: #666;
	border:1px solid #ccc;
	padding: 4px;
	line-height: 150%;
	width:400px;
}
.label_padding {
	margin:10px 0 0 0;
	padding:0;
	display:block;
}
.nomark {
	padding:0 0 0 22px;
}
.dropdown {
	border-right: #999 1px solid;
	border-top: #999 1px solid;
	font-size: 12px;
	border-left: #999 1px solid;
	color: #333;
	border-bottom: #999 1px solid;
	
}
.necessary{
	color: #c00;	
}
#btnarea {
	text-align:center;
}

今後は「より動きのある、反応の速いフォーム」を

今後はよりインタラクティブな、動きのあるフォームが増えてくるのではないかと思います。例えば、Ajaxを使って、オーバーレイで表示されるフォームです。

ユーザーにとってはページのリロードもわずらわしいものです。ローダーを使ったり、エラーメッセージがアニメーションしたり、入力完了するとオーバーレイ表示が消えたりするようなフォームを作れば、ひとつ上の使いやすさを実現できます。

入力のしやすさだけでなく、気持ちよさを意識したフォームについて考えてみてはいかがでしょうか。

今回解説したサンプルファイルがダウンロードできます。

サンプルファイル（サンプルコードおよび画像3点/8KB）

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

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

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

ポイント3 ディテールを作り込む