サイト制作

フォームのラベルの付け方｜消えるヒントだけに頼らない入力欄

慈愛妃きづな

2026-10-27

この記事には広告・アフィリエイトリンクが含まれます。

入力欄には目的が分かるラベルを用意し、HTMLでも欄と関連付けます。入力すると消えるヒントだけに頼らず、項目名や必要な説明が分かる状態に。入力途中の画面とキーボード操作も確認します。

入力後も項目の意味が分かるラベルを用意

入力欄の中に薄い文字でメールアドレスと書いてあり、文字を入れると説明が消える。見た目はすっきりしていますが、途中で別の作業をして戻ると、何を入れる場所だったか分かりにくいことがありますよね。

W3CのWAIチュートリアルは、入力欄と適切に関連付けられたラベルを用意する方法を説明しています。ラベルは、目で見て分かるだけでなく、読み上げや音声入力など、別の方法で操作する人にも入力欄の目的を伝えるためのものです。画面に近く置いた文字が、仕組みの上でもつながっているとは限らないんですね。

一般的なHTMLの入力欄では、label要素のfor属性を、対応する入力欄のid属性と同じ値にして関連付けます。例えば欄のidがemailなら、ラベルもfor="email"とします。画面上で近くに文字を置くだけでは、この関係が伝わるとは限りません。

項目名に加え、必須か任意か、必要な入力形式も分かるようにします。入力後に消えるplaceholderは、ラベルの代わりとして使わないようにしましょう。スマートフォンでも説明と欄の対応が追えるかを確認します。

確認するなら、まず自分で途中まで入力し、いったん別の場所を見てから戻ってみます。それでも項目の意味が分かるか。キーボードだけで次の欄へ進めるか。エラーが出たとき、どこを直すか分かるか。見た目が整った画面を眺めるだけでは気づきにくい部分です。

一つの確認だけで、誰にとっても使いやすいと保証はできません。それでも、説明が残ることと、欄の目的が仕組みでも伝わることは、最初の点検にできます。装飾を増やさなくても、分かりやすさは上げられるんですね。入力する人の迷う時間を減らすことも、きちんとしたデザインだと思います。