デザイン知識の幅を広げる参考サイト vol.3 ~入力フォームデザインTips~

この記事は公開されてから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.ウォーターマーク:一般的に入力例が透かしの状態の表示

Tips参照元: