【図解】エントリーフォームUI設計 5つのポイント。よくある失敗例も解説

Webサイトやアプリのエントリーフォーム（入力フォーム）は、一見なんの変哲もないUIコンポーネントに見えます。しかしエントリーフォームは、支払いや登録といったインタラクションに関係する、ビジネスにおいて極めて重要な要素です。

今回はユーザーの利用体験を向上させ、ビジネスを加速させる、エントリーフォームのUI設計ポイントについて解説します。

本記事で紹介する図解では、左に「失敗例」、右に「成功例」を掲載しています。

1. ラベルのデザインを統一する

▲出典：UX Planet

ラベルを配置する際は、位置などのデザインを統一しましょう。

さまざまなデバイスに共通して使いやすいのが、入力欄の左上にラベルを配置するデザインです。

2. 入力欄の間隔をあける

▲出典：UX Planet

入力欄の間隔を近づけすぎたり、入力欄とラベルを離しすぎたりしないように避けましょう。

ゆとりがありつつ、要素がまとまって見える間隔を意識しましょう。

3. 必須項目よりも任意項目を強調する

▲出典：UX Planet

必須項目よりも、任意項目を強調するのがオススメです。

ユーザーの心理的負担を減らせます。

4. 項目をグループ化する

▲出典：UX Planet

入力欄だけでフォームが埋め尽くされていると、ユーザーは圧倒されてしまい、離脱率が高まるリスクがあります。

入力項目を分類してグループ化し、各グループにタイトルをつけましょう。

5. エラーは項目ごとに表示する

▲出典：UX Planet

エラーの際は、どの項目が誤っているのかを明確に伝えましょう。

画像左側のようなデザインだと、どの項目を直せばいいのかが不明確です。

おわりに

エントリーフォームの改善は、コンバージョン、エンゲージメント、売り上げの向上につながります。

エントリーフォームの入力はユーザーにとって楽しい作業ではありません。だからこそUIを改善して、できるだけ負担を減らす努力をしましょう。

（執筆：Vikalp Kaushik　翻訳：Asuka Nakajima　編集：泉　提供元：UX Planet）