フォームの使いやすさやデザイン性を向上させる33の方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。これまで何回かに分けてWEBフォーム関連の記事を書いてきましたが【フォームの使いやすさやデザイン性を向上させる33の方法】として区切りを付けます。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。これはWEBに関わる者にとって非常に重要な項目です。使いやすさと書くとユーザビリティ等のキーワードが思い浮かびますが、ここではそれら前段階の長いお話はにお任せしてスキップしますのでご了承ください。実装してみたいTipsがありましたらどんどん試していただければ幸いです。今後フォーム関連の記事が溜まり次第、ここに追加していきますね。

基本編

  1. ラベルをつける
  2. テキストを大きめに設定
  3. 余白で入力欄を大きめに設定
  4. 必須項目はと明示する
  5. サブミットボタン(送信ボタン)にカーソル指定
  6. サブミットボタンを画像にする
  7. :focusを使って入力中をサジェスト
  8. 自動入力を活用する

発展編

  1. フォーム内に記入例を表示させる
  2. liやtr、tdの背景色を交互に付ける
  3. 選択値で連動するプルダウンを実装する
  4. 選択値で連動するプルダウンを実装する(多数)
  5. 現在入力中の文字数を表示する
  6. 残り文字数を表示する
  7. ファイルアップロードを画像ボタンに変更する(IE9〜)
  8. CSS3でフォームを見栄え良くする
  9. かっこいいフォームを自動生成してくれるジェネレーター【Form builder.】
  10. ログインフォーム等を常にウィンドウ中央の最前面に配置させる
  11. 全角英数文字を英数半角に自動変換
  12. チェックボックスのデザインを変更する
  13. ラジオボタンのデザインを変更する
  14. プルダウンのデザインを変更する
  15. 日付選択にカレンダーを利用する
  16. 入力中に候補を表示する
  17. エンターで勝手に送信しないようにする

番外編

  1. 【42選】かっこ良くて面白い!参考になるコンタクトフォームデザインたち
  2. ヘルプを設置する
  3. jQueryでバリデーション実現する
  4. 【10選 】jQueryを使ってselectフォームをかっこ良く装飾するプラグイン
  5. HTML5 x-webkit-speechを使って音声入力に対応する

その他

  1. ユーザーテストを実施する
  2. javascriptが切れている時には警告を表示する
  3. 必要に応じてブラウザごとの表示切り替えを実装する