この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
前回までは全体的なデザインレイアウトのご紹介をしましたが、今回はもう少し掘り下げたデザインのご紹介をします。
今回は、はじめに入力フォームのデザインTipsのまとめのご紹介と、フォーム参考となるサイトをご紹介します。
フォームデザインTipsまとめ
Tips1.クリーン&シンプルを目指しましょう。
- スクリーンサイズを基本として、スクロールするほどの多量な欄はなるべく避けましょう。
- 余計な情報表示は避け、必要最低限の情報表示を心がけましょう。
- 入力部分の背景は、なるべくホワイトスペースにしましょう。
- フォームの並びは、複雑な並びは避け、縦一列に整列させるのが望ましいでしょう。
- ユーザーの入力の手間の省略可のため、選択可能なチェックボックスやラジオボタン、コンボボックスを使用するのが望ましいでしょう。
提供元：Twitter：login
Tips2.フォント使いに注意しましょう。
- タイトルフォントは大きいサイズでボールドを使用して、他のフォントより目立たせましょう。また、フォーム内ラベルもボールドが望ましいでしょう。
- 背景のコントラストカラーを使用しましょう。
- フォーム内フォントサイズは、11ピクセル以上が望ましいでしょう。
- タイトル以外のラベルボールドで、背景のコントラストカラーを使用しましょう。
提供元：Campaign Monitor:Create An Account
Tips3.自然な色使いを心がけましょう。
- 使用しているロゴと統一させるのが望ましいでしょう。ハデな色使いは避けましょう。
- 全体のトーンバランスを考慮し、一般的に5色までが望ましいでしょう。
- 柔らかく、親近感のある色みが望ましいでしょう。
提供元：WordPress:login
Tips4.分かりやすい誘導を心がけましょう。
- このフォームに入力する必要性を明確にしましょう。
- テキストインプット内にウォーターマーク（※1）を採用するのが望ましいでしょう。
- 小文字で説明コメントを隣接することも親切です。
- 入力ミス、未入力時には、直後にアラートを表示しましょう。アラートの内容説明も忘れずに。
提供元：楽天：会員登録
Tips5.適切なボタン表示を目指しましょう。
- 表示される熟語のラベルは、約2～3語までが望ましいでしょう。
- 大きめのボタンとラベルを使用しましょう。
- キャンセルボタンは必ずしも必要ではありません。
- 主要な要素はボタンに、サブはリンクにしましょう。
提供元：eふれんず：会員の登録
最後に、美しいフォームサンプルが紹介されているサイトをご紹介します。
フォームデザインTipsまとめ
Blog Comment Form Design Showcase | Smiley Cat Web Design：comment form showcase
比較的シンプルで見やすいフォームが紹介されています。
Pattern Tap：FORMS
一般的に親しまれているフォームや、ユニークなフォームデザインが多数紹介されています。
BLOG DESIGN BLOG：37 Ways to Design the Comments Form
安定感のあるシンプルなフォームデザインが紹介されています。
Smashing Magazine:Web Form Design: Modern Solutions and Creative Ideas
基本をおさえつつ、ユニークなフォームデザインが紹介されています。
※1.ウォーターマーク：一般的に入力例が透かしの状態の表示