Webサイトやアプリケーションを開発する現場では、登録画面やお問い合わせ画面など、「入力フォーム」のUIを検討する機会が往々にしてあるでしょう。
今回は、そんな入力フォームにおいて「必須項目」および「任意項目」を明示するための代表的なデザインをメリット・デメリットとともにご紹介します！
ちなみにどのデザインを採用すべきかについては、フォームの目的や登録内容などコンテクストに応じて最適解が異なってくるため、あくまで検討段階のヒントとして本記事をご活用いただければ幸いです。
（以下、図版ではスマートフォンの画面サイズにおける入力フォームを例にご紹介しています）
[手法1] 必須項目にのみラベルを設ける
代表的な手法として、入力必須であることを強調したラベルが挙げられます。
ラベルには、ユーザーの目に確実に留まるよう警告色に近いカラーがしばしば使用されます。
再入力のエラーを避けるために、必須項目をしっかりと明示する理にかなったデザインと言えるでしょう。
一方で、画面内で何度も反復されると視覚的に威圧感を与えてしまうという点も懸念されます。
そのため、UIのシンプルさを重視する場合には不向きかもしれません。
[手法2] 任意項目にのみラベルを設ける
[手法1]の対となる手法として、任意ラベルのみを用いたUIが挙げられます。
一般的に入力フォームは「必須項目」が大半を占めるケースが多いため、逆に任意項目のみを明示することで情報量を抑えたスッキリとした印象が生まれます。
ただし、ページのファーストビューに任意項目が含まれない場合は、ユーザーがスクロールをしなければルールを認知できないなど推奨されていない面もあります。
また、必須項目がユーザーにとって重要な情報であり、強調しなければならない場合にも任意ラベルのみのデザインは避けた方がよいでしょう。
[手法3] 必須項目にアスタリスクを用いる
フォーム画面では、項目名に「*（アスタリスク）」を付けることで入力必須であることを示すデザインも広く知られています。
スペースを要さないのでページのデザインを阻害することもなく、全体的な見やすさにも繋がります。
しかし記号である以上、スクリーンリーダーでは「必須」と読み上げるように設定するなど、アクセシビリティには配慮しておかなければなりません。
まとめ
以上、入力フォームにおける必須項目・任意項目のデザインについて代表例を取り上げてみました。
上記に挙げられたデザインを活用する際は、フォームの項目数や入力内容も踏まえて、適用した際のメリット・デメリットを比較しながら検討していけばよいでしょう。
最終的にはプロトタイプを作成し、ユーザー目線で入力フォームを検証すればデザイン改善のヒントにつながるかもしれません。
弊社商品においても、ユーザーの皆様が使いやすい入力フォームを設計できるよう、引き続きユーザビリティに配慮したUIデザインに取り組んでまいります！
