入力とフォームのUX：ラベル・入力補助・エラーメッセージの基本｜UI・UXデザイン入門 第6回

ラベルと入力欄の基本

NN/gは、Webフォームの使いやすさについて10の推奨事項をまとめています（参考資料2）。その中から、入力欄の作り方に関わるものを中心に見ていきます。

ラベルは入力欄の外に、いつも見えるように置く

最近のデザインでよく見かけるのが、入力欄の中に薄い文字で「お名前」「メールアドレス」と書き、入力を始めると消える形です。この薄い文字をプレースホルダーといいます。見た目はすっきりしますが、NN/gはプレースホルダーをラベルの代わりに使うことに強く注意をうながしています（参考資料3）。主な理由は次のとおりです（図2）。

• 入力を始めると消えてしまうため、長いフォームの途中で「この欄は何だったか」を忘れやすい
• 送信前に見直すとき、どの欄に何を入れたのかを確かめにくい
• エラーが出たとき、ヒントを見直すには一度入力を消さなければならない
• 入力済みの値と見分けがつかず、「もう入力されている」と思って飛ばされることがある
• 文字の色が薄いことが多く、読みにくい。読み上げソフトによっては読み上げられない

対策は、ラベルを入力欄の外（上など）に置き、いつも見えるようにすることです。入力の例や形式の説明が必要なときも、入力欄の中ではなく、欄の外に書きます（参考資料3）。

並べ方とまとまり

• 1列に並べる：入力欄を左右2列に並べると、どの順番で入力すればよいかが分かりにくくなります。基本は縦1列です（参考資料2）。
• 関係のある欄をまとめる：「お届け先」「お支払い方法」のように、関係のある欄を見た目でまとめ、まとまりの間に余白を取ります（参考資料2）。
• 筋の通った順番にする：郵便番号→住所のように、利用者が考える順番に並べます（参考資料2）。
• 入力欄の大きさを中身に合わせる：郵便番号の欄は短く、住所の欄は長く。欄の長さが、入れるべき内容の長さのヒントになります（参考資料2）。
• 欄の数を減らす：本当に必要な情報だけを聞きます。「あとで聞けばよいもの」「なくても困らないもの」は外します（参考資料2）。

選ばせ方：ラジオボタン、チェックボックス、プルダウン

選択肢から選んでもらう欄は、部品の選び方を間違えると、利用者を混乱させます。ヤコブ・ニールセンの解説（参考資料4）をもとに、使い分けを整理します（図3）。

• ラジオボタン（○）：互いに重ならない選択肢から、必ず1つだけ選んでもらうとき。1つを選ぶと、前に選んでいたものは外れます。ニールセンは、ラジオボタンには初めから1つ選ばれた状態（初期値）を用意すべきで、「選ばない」こともあり得るなら「なし」のような選択肢を明示的に加えるよう述べています。
• チェックボックス（□）：選択肢の中からいくつでも（0個でも）選べるとき。それぞれの選択肢は独立しています。
• 単独のチェックボックス：「お知らせメールを受け取る」のように、1つの項目をオン・オフするとき。ラベルは、チェックを入れたときに何が起きるかが分かる、肯定的な言い方にします。
• プルダウン（ドロップダウン）：選択肢の数が多いときに使います。ただし、ニールセンは、すべての選択肢が見えるラジオボタンのほうが、一般にプルダウンより望ましいとしています。

あわせて、ラベルの文字を押しても選べるようにする（ボタンの小さな丸や四角だけでなく）ことも大切です。押せる範囲が広がり、スマートフォンでも操作しやすくなります。

必須と任意、入力の形式を伝える

• 必須と任意を見分けられるようにする：どの欄が必須で、どの欄が任意かを、はっきり示します（参考資料2）。必須の欄が多いなら「任意」の欄に印をつけ、任意の欄が多いなら「必須」の欄に印をつける、と考えると印の数を減らせます。そもそも任意の欄が多いなら、本当に必要かを見直すきっかけにもなります。
• 入力の条件や形式を先に説明する：パスワードの条件（文字数、使える文字など）や、電話番号のハイフンの有無などは、入力する前に見えるように書きます（参考資料2）。エラーになってから初めて条件を知らされるのは、利用者にとって大きなストレスです。
• 入力そのものを助ける：郵便番号を入れたら住所が自動で入る、電話番号の欄ではスマートフォンに数字のキーボードが出る、ブラウザの自動入力が効くようにする、といった工夫で、入力の手間と間違いを減らせます。
• できるだけ、形式の違いを受け入れる：全角と半角、ハイフンの有無などは、システム側で吸収できることが多いものです。利用者に形式を合わせてもらうより、システムが合わせるほうが親切です。

エラーメッセージ：自分で直せるように伝える

どれほど工夫しても、入力の間違いはゼロにはなりません。大事なのは、間違いが起きたときに、利用者が何が問題で、どう直せばよいかをすぐに理解できることです。

国際的なアクセシビリティの指針であるWCAG 2.2でも、入力の間違いが自動で検出された場合には、間違いのある項目を特定し、その内容を文字で利用者に説明すること、入力が必要な箇所にはラベルか説明を用意することが求められています（参考資料5）。

NN/gは、フォームのエラーの出し方について10のガイドラインを示しています（参考資料6）。主なものを、まとめて見てみましょう（図4・図5）。

• 入力欄のすぐそばに出す：エラーは、該当する入力欄の近くに表示します。ページの上部に「入力内容に誤りがあります」とまとめて出すだけでは、どこを直せばよいかが分かりません（まとめの表示は、各欄のそばの表示と組み合わせるならよい）。
• できるだけ、入力のその場で知らせる：送信ボタンを押してから一度に知らせるより、その欄の入力を終えた時点で知らせるほうが、直しやすくなります。ただし、入力の途中で知らせないことが大切です。メールアドレスを打ち始めた瞬間に「形式が正しくありません」と出ると、利用者は責められているように感じます。
• 色だけに頼らない：エラーの欄を赤くするのは分かりやすい方法ですが、色の見え方は人によって違います。アイコンや文字も添えて、色が分からなくても気づけるようにします（第7回のアクセシビリティにもつながります）。
• ツールチップに頼らない：マウスを乗せたときだけ出る小さな吹き出しでエラーを伝えると、気づかれにくくなります。
• 確認のポップアップを多用しない：エラーのたびに画面の中央に窓を出すと、内容を覚えたまま元の欄に戻らなければならず、負担が増えます。
• 同じエラーが続いたら、追加の手助けを出す：何度も同じ欄でエラーになる人には、入力例や詳しい説明を追加で表示します。
• 正しく入力できたことも伝える：パスワードのように条件が複雑な欄では、条件を満たしたことを示すと安心感につながります。

エラーメッセージの書き方

エラーメッセージの文章は、次の3つを入れると、利用者が自分で直せるようになります（図5）。

1. 何が問題か：「電話番号の桁数が足りません」
2. どう直せばよいか：「市外局番から入力してください」
3. 例：「（例：0312345678）」

逆に、避けたいのは次のような書き方です。

• 「エラーコード E102」のように、利用者には意味の分からない番号や専門用語だけを出す
• 「不正な値です」「入力が無効です」のように、利用者を責めているように聞こえる言葉を使う
• 「入力内容を確認してください」のように、どこを、どう直せばよいかが書かれていない

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

業務システムやアプリで、特に気をつけたいこと

Webサイトの問い合わせフォームと違い、業務システムやアプリでは、同じ人が毎日のように入力することがあります。次の点にも気を配ります。

• 途中で保存できるようにする：長い入力の途中で電話がかかってきても、入力した内容が消えないようにします。
• 「リセット」「クリア」ボタンを置かない：NN/gは、入力内容をすべて消すボタンを避けるようすすめています（参考資料2）。押し間違えると、それまでの入力がすべて失われます。
• 長い入力は段階に分け、進み具合を示す：第4回で学んだ「状態を見えるようにする」の考え方で、「全4ステップ中2ステップ目」のように示します。
• キーボードだけでも入力できるようにする：慣れた人は、Tabキーで欄を移動しながら速く入力します。移動の順番が見た目の順番と合っているかを確かめます。
• よく使う値を初期値にする：毎回同じ値を入れることが多い欄は、前回の値やよく使う値を初期値にすると、効率が上がります（ただし、初期値のまま間違って送信されると困る欄では慎重に）。

実務ではこう使う：フォームの点検チェックリスト

既存のフォームを点検するときは、次のチェックリストを使うと、見落としを減らせます（図6）。

実際に自分で入力してみるのはもちろん、第8回で学ぶユーザビリティテストで、初めての人に入力してもらうと、作り手が気づかないつまずきが見つかります。

この回のまとめ

• フォームの負担を減らす4つの考え方は、構造・見通し・分かりやすさ・手助け（NN/g）。
• ラベルは入力欄の外に、いつも見えるように置く。プレースホルダーをラベルの代わりにしない。
• 入力欄は1列に並べ、関係する欄をまとめ、欄の数は最小限にする。必須と任意を見分けられるようにする。
• ラジオボタンは1つだけ選ぶとき、チェックボックスはいくつでも選べるとき。選択肢はなるべくすべて見えるようにする。
• エラーは、入力を終えた時点で欄のそばに、何が問題か・どう直すか・例を、色だけに頼らずに示す。

確認テスト

次回予告

第7回は「アクセシビリティ」です。障害のある人や高齢の人を含め、誰もが使える画面にするための国際的な指針WCAGと、日本のJIS X 8341-3の関係、まず押さえたい基本の確認項目を学びます。

参考資料

1. Huei-Hsin Wang「Few Guesses, More Success: 4 Principles to Reduce Cognitive Load in Forms」Nielsen Norman Group（2025年7月18日） https://www.nngroup.com/articles/4-principles-reduce-cognitive-load/ （確認日：2026年11月12日）
2. Kathryn Whitenton「Website Forms Usability: Top 10 Recommendations」Nielsen Norman Group（2016年5月1日） https://www.nngroup.com/articles/web-form-design/ （確認日：2026年11月12日）
3. Katie Sherwin「Placeholders in Form Fields Are Harmful」Nielsen Norman Group（2014年5月11日） https://www.nngroup.com/articles/form-design-placeholders/ （確認日：2026年11月12日）
4. Jakob Nielsen「Checkboxes vs. Radio Buttons」Nielsen Norman Group（2004年9月26日） https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/ （確認日：2026年11月12日）
5. W3C「Web Content Accessibility Guidelines (WCAG) 2.2」（2024年12月12日 勧告） https://www.w3.org/TR/WCAG22/ （確認日：2026年11月12日）
6. Rachel Krause「10 Design Guidelines for Reporting Errors in Forms」Nielsen Norman Group（2019年2月3日） https://www.nngroup.com/articles/errors-forms-design-guidelines/ （確認日：2026年11月12日）