【2020年最新事例付き】入力フォーム作成の際に注意したい12のポイント

入力フォームをデザインする際に参考にしたい、Nielsen Norman が過去に公開している10のベストプラクティスに独自のポイントを2つ加えた12個のポイントについて解説しています。

えそらLLC 2020/6/30 12:37 UX／CX | 解説／ノウハウ

0 1 0

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

生活様式が見直される中、Eコマース市場が伸びていることに代表されるように、オンラインでの商品やサービスの販売・申し込みは生活者にとっての重要性を増しています。
ユーザーとなる方とのコンタクトポイントである新規登録や申し込みのための入力フォームは特に重要です。購入したり検討を進めようとしたりしているユーザーを、フォームの不備のせいで逃したくはないものですよね。

今回は、より使いやすい入力フォームをデザインするために注意したい12のポイントについて、良い例については実例を交えながら紹介します。

※本記事は、Nielsen Norman が過去に公開している10のベストプラクティスに独自のポイントを2つ加え、いくつかの業種に対してそれぞれ2～3のサイトやアプリの新規登録／申し込みフォームをベンチマークした結果に基づいて記載しています。

Website Forms Usability: Top 10 Recommendations | Nielsen Norman Group
※日本語訳記事：https://u-site.jp/alertbox/web-form-design

この記事は、コンバージョン獲得に強いデザインコンサルティング会社
えそらLLCにより掲載されました。

入力フォームを作る上で注意したい12のポイント

1. 可能な限り項目数を減らす

悪い例では登録には直接関係しない情報も取得 — 良い例：PayPay（アプリ） – 初回入力に必要な情報がかなり絞られています。

新規登録や申し込みの段階で必ずしも必要でない項目や、わざわざユーザーが入力する必要のない項目は削除しましょう。登録後に別途取得するなどの工夫ができるかもしれません。特に「任意」となる項目はこれに該当する可能性があります。

2. 関連のあるラベルと入力欄はグループ化する

悪い例では、ラベルと入力欄が等間隔で続いている。また、氏名や住所に関する情報はひとまとまりで見えた方が、何の入力が求められているのか視覚的に判断しやすい — 良い例：出前館（サイト） – ラベルは入力欄のすぐ左上に、氏名や住所など関連のある項目は間隔を狭くしてグループに見えるようにしています。

ラベルと入力欄は等間隔に並べず、入力欄のすぐ近くにラベルを設置したり、視覚的にグループであることが分かるようにしましょう。対応する入力欄の特定が困難だと、ユーザーは入力に通常よりも時間を要し、離脱に繋がってしまうこともあります。

3. レイアウトは1カラムにする

悪い例では、論理的に関連の薄い項目が2カラムで構成されている — 良い例：ZOZOTOWN（アプリ） – 論理的に関連のある項目は横並びにした上で、全体は1カラムで構成されています。

入力フォームは下に縦に進んでいくことが自然な動きのため、論理的に関連の無い項目を複数カラムに分けてレイアウトするのは避けましょう。
今回はスマホのサイトやアプリを対象としたため、この項目で良くない例のような構成をしているアプリやサイトは見当たりませんでしたが、PCでのデザインを行う際などには注意しましょう。

4. 文脈に沿った一般的な順序で並べる

悪い例では、登録に必須な情報の方を後から入力するようになっている — 良い例：UNIQLO（アプリ） – 登録に必要な情報を先に入力させた後、属性に関する情報を取得するような順序で並んでいる。

上の良くない例では、新規登録のフォームに入力しようとしているのにも関わらず、まず「性別」や「生年月日」を入力するようになっています。多くのサービスでは「メールアドレス」と「パスワード」を提供すれば、登録は完了できるという期待があるため、これから登録をしようとしているユーザーの期待には沿っていないかもしれません。
そのように考えると、「郵便番号」の位置も、敢えてメールアドレスとパスワードの間に設置するのには違和感があります。