【Tips】ただただフォーム最適化をまとめたチートシート的なもの

More than 1 year has passed since last update.


概要

主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。

なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください…


ユーザビリティ・アクセシビリティ


分かりやすさ


  • 入力項目は必要最低限にする

  • 項目名は簡潔で短く分かりやすいものにする

  • できる限り入力フィールドの数は最小限にする

  • 一つの項目の入力フィールドを複数に分けない


    • 例:姓名、電話番号、郵便番号など



  • 必須項目は、「*」ではなく「必須」と表示する

  • ラベルやヒント(○文字以上必要です)をplaceholderに設定しない


    • フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする



  • フォーカスした際の入力フィールドのデザインを変える

  • 入力フィールドのサイズは、入力される値に合わせる

  • リアルタイムでチェック出来るバリデーションを実装する

  • エラーメッセージは、上部にすべて表示するのではなく、各項目の近くに表示する

  • エラーメッセージは、以下の点が分かるようなものにする


    • どこがエラーか

    • なぜエラーか

    • どのように修正すれば良いか



  • アクションボタンには、汎用的な言葉ではなく、クリックした時に実行されるアクションを正確に示す


    • 例:×「送信する」 ○「内容を送信する」



  • ページ離脱時にアラートを出す

  • エラー画面には、エラーの項目だけを表示する(作りによるので任意)


使いやすさ


  • 入力するテキストの種類に合わせたキーボードを表示させる

  • Tabキーで次の入力項目にフォーカスされるようにする

  • フォントサイズを16px以上にする


    • フォーカスした際のズームを防ぐため



  • 住所は郵便番号から自動検索出来るようにする

  • リセットボタンは作成しない

  • 半角・全角をどちらも入力可とする

  • タップしやすい入力フィールドやボタンの大きさにする

  • チェック項目はラベルをクリック・タップでもチェックが付くようにする

  • autofocus属性を使用し、ページが読み込まれた段階で一つ目の入力フィールドにフォーカスが当たるようにする(作りによるので任意)


サンプルコード


姓名

<input type="text" name="name" autocomplete="name">


<input type="text" name="family-name" autocomplete="family-name">


<input type="text" name="given-name" autocomplete="given-name">


電話番号

<input type="tel" name="tel" autocomplete="tel">


メールアドレス

<input type="email" name="email" autocomplete="email">


郵便番号

<input type="number" name="postal-code" autocomplete="postal-code">


都道府県

<input type="text" name="address-level1" autocomplete="address-level1">


市区町村

<input type="text" name="address-level2" autocomplete="address-level2">


番地・マンション名(1行目)

<input type="text" name="address-line1" autocomplete="address-line1">


番地・マンション名(2行目)

<input type="text" name="address-line2" autocomplete="address-line2">


会社名

<input type="text" name="organization" autocomplete="organization">


補足


  • type="number" はブラウザ・バージョンごとに挙動が違うため扱いに注意

  • 自動入力を無効にする場合は、autocomplete属性をoffにする

おわり