Webデザイン最新トレンド ~イマドキUIのつくりかた

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

この記事を読むのに必要な時間:およそ 4.5 分

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

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

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

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

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

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

図1 フォームの完成板

フォームの完成板

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

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

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

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

図2 テキスト要素やinput要素など,見えないラインで揃える

画像

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

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

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

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

図3 td要素の余白

td要素の余白

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

図4 input要素の余白

input要素の余白

著者プロフィール

川下城誉(かわしもくにたか;CREAMU)

Web制作・ブランディングを主軸とした(株)CREAMU 代表取締役。海外のWeb情報を紹介するblog「CREAMU」を運営中。

URLhttp://www.creamu.co.jp/

コメント

コメントの記入