フォーム・入力
入力フィールド
Input Field
入力フィールドとは、ユーザーが名前やメールアドレスなどの値を書き込む要素で、ラベル・入力エリア・補助テキストで構成されます。
状態
定義
入力フィールドは、ユーザーが名前やメールアドレスといった値を自分で書き込む要素です。 見た目は四角い枠がひとつあるだけに見えますが、実際には何を書く欄なのかを伝えるラベル、 値を受け取る入力エリア、そして入力形式やエラーを案内する補助テキストとエラーメッセージが ひとつのセットとして一緒に動きます。さらに入力フィールドは、まだ何も操作していない通常の状態、 カーソルが入ったフォーカス状態、値が正しくないエラー状態、操作できない無効状態など、 いくつもの状態を行き来します。そしてその状態ごとに枠線の色や背景が少しずつ変わることで、 ユーザーは今この欄で何が起きているのかを目で見てすぐに理解できるようになります。
なぜ重要か
入力フィールドは、フォームの中でユーザーと最も頻繁に触れ合う場所です。ここで少しでも迷わせると、 ユーザーは何をどう書けばいいのか分からず手が止まり、会員登録や決済のような大事な流れが そこで途切れてしまいます。逆にラベルがはっきりして状態が明確なら、ユーザーは安心して値を 埋めていけます。特にエラー状態をきちんと設計すると、何がなぜ間違っているのかをその場で伝えられるので、 同じミスを繰り返して疲れてしまうのを防げます。また入力フィールドはフォームの中で最も数が多い要素なので、 ここで決めたラベルの位置や余白のルールが画面全体の印象を左右します。結局のところ、 入力フィールドの完成度がフォーム全体の成功率を決めるので、画面の中で最も丁寧に整えるべき 要素のひとつなのです。
よくある間違い
- ラベルをなくして placeholder だけで代用してしまうケースです。placeholder は入力を始めた 瞬間に消えてしまうため、半分ほど書いたところでこの欄が何だったのか分からなくなってしまいます。 ラベルは常に見えるように、上か横に固定しておくのが安全です。
- フォーカスやエラー、無効といった状態を設計せず、通常の見た目ひとつだけを作ってしまうことです。 値が間違っていても何の表示もなければ、ユーザーは何がいけないのか知る手がかりがなく、 同じ画面をさまよい続けた末に諦めてしまいます。
- 必須項目と任意項目を区別して伝えないことです。どこまで必ず埋めればいいのか分からないと、 ユーザーは要らない欄まで抱えて悩んだり、逆に必須の欄を空けたまま送信してエラーに ぶつかったりします。
実務のヒント
- 通常・フォーカス・エラー・無効の四つの状態を、最初から一緒に設計しましょう。ラベルは常に 見えるようにしておき、placeholder は例となる値のように補助的な用途だけに使えば、 どの状態でも何を書く欄なのかがぶれません。
- エラーメッセージは欄のすぐ下に置き、何がなぜ間違っているのかを具体的に書きましょう。 「無効な値」とだけ言うのではなく「メールアドレスに @ が抜けています」のように伝えれば、 ユーザーはすぐに直せます。
- キーボードの種類や入力形式を、フィールドの性格に合わせて指定しましょう。数字の欄には 数字のキーパッドが、メールの欄には @ のあるキーボードが出れば、モバイルでの入力が 目に見えて楽になります。