徹底図解入力フォームのデザイン・UXを高める15の方法

サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。本記事では、入力フォームデザインのUXを高める15のルールをご紹介します。

ポップインサイトでは、ユーザーリサーチのファクトにもとづいたWEBサイト改善を支援しています。WEBサイト・入力フォームのUX改善に課題がある方はお気軽にご相談ください。
UXデザイン/UXリサーチについて相談する＞＞
サービス紹介資料の無料ダウンロードはこちら＞＞

※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。
翻訳元記事：Design Better Forms (2016/7/5)
著者：Andrew Coyle

1 入力フォームのUXを高める15のルール
2 その情報、ユーザがわざわざ入力する必要ありますか？
3 フォームデザインにも楽しさを

入力フォームのUXを高める15のルール

【無料ダウンロード】UI改善の基礎

4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します（全45ページ）。ぜひUIの改善にご活用ください。

UI改善の基礎を見てみる＞＞

1.フォームは縦一列配置にする

入力は通常、垂直方向が自然です。
入力行が横に複数列配置されると、ユーザは入力しづらく感じます。

2.ラベルは入力データの上に配置する

入力欄のラベルは、左横よりもデータの上に配置したほうが、入力完了率がはるかに高くなります。また、モバイル上でレイアウトが崩れにくくなります。

ただし、変数オプションのある大量のデータを入力するフォームの場合は、左配置のラベルがおすすめです。ラベルを上部に配置する場合より行数が少なくなり、一度に入力しやすくなります。

3.ラベルと入力データはグループ化する

ラベルと入力データは寄せて配置しましょう。フィールド間には十分な間隔をあけることも忘れずに。そうすればユーザーが混乱せずにすみます。

『15.関連情報ごとにグループ化を』もあわせて読むと、より理解が深まりますよ！

【PR：無料ダウンロード】UI改善の基礎＞＞
4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します（全45ページ）

4.すべて大文字での表記は避ける

大文字だけの表記は読みづらく入力がしにくいです。

そもそも、日本人向けのサイト・アプリでは、英語表記より日本語表記の方が直感的に分かりやすいのが当然です。デザイン性を優先して英語表記を必要以上に増やすことは原則避けましょう。

5. 選択肢が5個以下ならすべて表示する

ドロップダウン（プルダウン）リストは、隠れている選択肢を表示するために1回、選択するために1回、と2回のクリック／タップが必要です。
選択肢が5以下の場合は、全ての選択肢をひと目でわかるように配置しましょう。
選択肢が非常に多い場合（25以上）は、ドロップダウンメニューの中に予測検索機能を組み込みましょう。

6.プレースホルダテキストをラベルとして使わない

プレースホルダテキストとは、ユーザがテキストを入力するまでの間、入力フィールド内に表示されている説明文のことです。

このプレースホルダテキストをラベルとして使用することで、スペースを最適化できると考えがちですが、それは誤りです。

何の情報を書き込むべきだったか入力中に確認することができないため、入力内容をチェックしたり、エラーが出た時に書き直したりしにくくなります。特に、視覚にハンディキャップを抱えるユーザや認知症患者にとってUXを著しく損なうなど、ユーザビリティの観点で多くの問題があります。
（出典：“Placeholders in Form Fields Are Harmful” by Katie Sherwin from Nielsen Norman Group）

7.チェックボックスは縦に配列する

複数の項目を選択させる場合には「チェックボックス」（四角のボックス）が使用されます。ひとつの項目のみを選択させる場合は、「ラジオボタン」（丸いボタン）が使用されます。

チェックボックス、ラジオボタン、いずれも縦に配列することでチェックしたかどうかの視認性がよくなり、入力しやすくなります。

8.CTAは、「どんなアクションにつながるか」が分かる表現にする

CTA（Call To Action）とは、サイトを訪れたユーザを具体的な行動に導くボタンやリンクを指します。

CTAは、どんなアクションを起こすのかがはっきりわかる表現にしましょう。
例えば、『送信する』よりも『登録する』の方が、具体的に何が起こるかユーザにとってわかりやすい表現です。

9.エラー表示はインラインで

エラーになっている箇所とその原因は、インラインでユーザに示しましょう。

10.入力途中でのリアルタイムアラートは使わない

パスワードやユーザネームの作成中や、文字数制限のあるメッセージなどの入力の途中で「無効なアドレスです」「文字数が超過しています」などのリアルタイムアラート（バリデーション）を出さないようにしましょう。ただし、アラートを出すことがユーザーのメリットになる場合を除きます。

11.ヘルプテキストは表示する

基本的なヘルプテキストはできるだけ表示しましょう。
ヘルプテキストの内容が込み入っている場合は、重要事項だけでもいいので入力データの横に配置します。

12.プロセスを進めるためのアクションと、そうでないアクションをわけて提示する

ユーザに次にとってほしいアクションのためのボタン（「登録する」）を、とってほしくないアクションのボタン（「キャンセルする」）より目立たせるかどうかについては、意見が分かれます。

※次に起こしてもらいたいアクションを明確にすることで、離脱原因となるユーザーの迷いを減らせるという考え方もあります。

13.入力フォームの幅を適切に

入力項目の長さとフィールドの幅をそろえます。
電話番号や郵便番号など、入力する桁数が決まっている場合はこのルールを適用しましょう。

14.「*」ではなく「任意」と表示する

「入力必須」を「*」のようなマーカーで示すことがありますが、この「*」が何を意味するか、ユーザが必ずしも理解するとは限りません。「*」の代わりに、入力が任意のフィールドには「任意」と明記しましょう。

15.関連情報ごとにグループ化を

多くの項目を一気に見せられるとユーザはフォームの長さに圧倒されます。
関連する項目ごとにグループ化することで、ユーザはフォームの内容をより早く理解することができます。

無料DL｜UI改善の基礎

4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します（全45ページ）。ぜひUIの改善にご活用ください。

その情報、ユーザがわざわざ入力する必要ありますか？

「任意入力」の項目は、項目自体を削除し、他の方法でデータを集めることができないかを検討しましょう。
推測が可能な項目ではないか、別の機会で聞けばよい項目ではないか、それとも完全に無くしてしまってよい項目か、ということを常に自問しましょう。

データエントリーは自動化の一途をたどっています。例えば、モバイル機器やウェアラブル機器は、ユーザが無意識のうちに膨大なデータを集めています。入力フォームを作成する際には、チャットボットのような会話型UIやSMS、メール、音声入力、OCRによる文字の読み取り、現在地認識機能、指紋認証や生態認証などの活用も検討してみましょう。