テキストフィールドとは?入力欄の構成とラベル・エラー表示のデザイン

テキストフィールドの基本

まずは、テキストフィールドがどんな部品で、どんなパーツと状態を持っているのかを押さえましょう。

テキストフィールドとは

テキストフィールドとは、名前やメールアドレスのように、利用者が自由に文字を入力するための1行の入力欄のことです。

「入力欄」「テキストボックス」とも呼ばれ、デジタル庁デザインシステムでは「インプットテキスト」という名前で、1行以内のテキストを入力する場合に使う部品として紹介されています(インプットテキスト – デジタル庁デザインシステム)。

デジタル庁デザインシステムは、行政機関などのWebサイトやサービスを、誰にとっても使いやすく作るためにデジタル庁が公開しているデザインのルール集です(デジタル庁デザインシステム)。使いやすさやアクセシビリティを踏まえて部品ごとの使い方が定められているので、この記事でもたびたび参考にします。

お問い合わせの本文のように何行も書いてもらう欄は、「テキストエリア」という別の部品として区別するのが一般的です。

選択肢をあらかじめ用意できない情報を受け取れるのがテキストフィールドの強みですが、そのぶん「何を、どんな形で書けばいいか」を見た目で伝えないと、利用者が迷ってしまいます。

テキストフィールドを構成するパーツ

テキストフィールドは、入力する枠だけでなく、その周りに置く文字を含めて1つの部品として考えます。

まずは、パーツがそろったテキストフィールドの見本を見てみましょう。

見本Aと見本Bに出てくるパーツと、それぞれの役割は次のとおりです。

パーツ	見本での例	役割
ラベル	電話番号	何を入力する欄かを示す名前。必ず表示する
必須・任意の表示	※必須	入力しないと送信できない項目かどうかを示す
ヘルプテキスト	半角数字で、ハイフンなしで〜	入力のルールや例を、入力する前に伝える補足文
入力欄(枠)	四角い枠	実際に文字を入力する場所
プレースホルダー	薄い文字の09012345678	入力前だけ枠の中に表示される入力例。入力すると消える(なくてもよい)
エラーメッセージ	＊ハイフン(-)を消して〜	入力に問題があるとき、何がだめでどう直せばよいかを伝える

ヘルプテキストは、デジタル庁デザインシステムでは「サポートテキスト」と呼ばれています。

すべてのパーツが毎回必要なわけではありませんが、ラベルと入力欄の2つは、どんなテキストフィールドにも欠かせない基本のパーツです。

テキストフィールドの状態

テキストフィールドは、利用者の操作に合わせて見た目が変わる部品なので、状態ごとのデザインを用意しておく必要があります。

ここでいう「状態」とは、入力中・エラー・使えないなど、そのときの部品の様子のことです。

テキストフィールドでよく使う状態を並べてみましょう。

フォーカスとは、キーボードの入力を受け付ける対象として、その入力欄が選ばれている状態のことです。

入力欄をクリックやタップしたときだけでなく、キーボードのTabキーで次の欄へ移ったときも、その欄にフォーカスが移り、文字を打ち込める状態になります(枠の中で縦線のカーソルが点滅している状態です)。

入力欄が並ぶフォームでは、どの欄に文字が入るのかが一目で分からないと、別の欄に書き込んでしまうことがあるため、フォーカスの見た目ははっきり変えます。

無効の状態は、ほかの項目を選ぶまで入力できない欄などに使い、「押しても反応しない」ことが伝わるよう、通常の状態とは明らかに違う見た目にします。

テキストフィールドのデザインのコツ

ここからは、テキストフィールドを迷わず入力できるようにするためのデザインのコツを見ていきます。

ポイントは「ラベル」「ヘルプテキスト」「必須の示し方」「幅」「エラー」「枠線」の6つです。

ラベルをプレースホルダーで代用しない

ラベルは入力欄の外に置き、入力中も入力後も、常に見えるようにします。

見た目をすっきりさせようとして、枠の中の薄い文字(プレースホルダー)に「お名前」「メールアドレス」と書き、ラベルを省くデザインを見かけますが、プレースホルダーは文字を入力したとたんに消えてしまうからです。

入力し終わったあとに見直そうとしても、どの欄が何の項目だったのか分からなくなります。

エラーが出て入力し直すときも同じで、項目の多いフォームほど「この欄には何を書くんだっけ」と迷う場面が増えます。すっきり見えるデザインでも、使いやすさを損なうなら選ばない、と考えておきましょう。

NGの見本では、2つめの欄に入っている「taro.yamada」が、ログインIDなのかメールアドレスなのか、入力した本人でさえ確かめようがありません。

OKの見本では、どの欄にも項目名が残っているので、送信する前に安心して見直せます。

MDN(Webの技術資料を公開しているMozillaのサイト)でも、プレースホルダーは入力すると見えなくなるうえ、読み上げソフトで読まれないことがあるとして、ラベルの代わりに使わないよう注意しています(MDN: <input>: 入力欄(フォーム入力)要素)。

プレースホルダーを使う場合は、ラベルとは別に、入力例を見せる補助として控えめに使いましょう。

なお、プレースホルダーの文字も読めないほど薄くすると見落とされるので、背景とのコントラスト(色の明るさの差)が十分にある色にします(コントラストの考え方はコントラスト比とは?で解説しています)。

入力のルールはヘルプテキストで先に伝える

「半角数字のみ」「8文字以上」のような入力のルールは、入力欄のすぐ近くにヘルプテキストとして、入力する前から見える形で書きます。

ルールを書かずにおいて、送信したあとでエラーとして初めて知らせると、利用者は入力をやり直すことになり、手間と不満が増えるからです。

デジタル庁デザインシステムでも、入力の条件や例はサポートテキストで事前に示し、その説明をプレースホルダーに頼らないよう定めています(インプットテキストの使い方 – デジタル庁デザインシステム)。

ヘルプテキストはラベルと入力欄の間か、入力欄のすぐ下に置き、ラベルより一段小さく控えめな色の文字にすると、主役のラベルを邪魔しません。

ラベル・ヘルプテキスト・入力欄はひとまとまりに見えるよう近づけ、次の項目とは広く離すのが基本です(この間隔の取り方はUIコンポーネントの間隔とは?で解説しています)。

必須の項目は文字ではっきり示す

入力しないと送信できない項目には、ラベルの横に「必須」と文字で添えます。

ラベルの色を赤くするだけ、あるいは「*」(アスタリスク)の記号を付けるだけだと、色の見分けにくい人や、記号の意味を知らない人には伝わらない場合があるからです。

デジタル庁デザインシステムでは、「※必須」「※任意」のように、全角の米印から始めて通常の文字と区別する書き方を採用しています。

「*」を使う場合は、フォームの最初に「*は必須項目です」と説明を書いておきましょう。

必須の項目がほとんどのフォームなら、少ない任意の項目のほうに「任意」と書くやり方もあり、どちらにするかをサイトの中でそろえておくことが大切です。

入力欄の幅は入力する内容の長さに合わせる

入力欄の横幅は、すべて同じにするのではなく、入力してもらう内容の長さに合わせて変えます。

欄の幅は「どれくらいの長さの答えを書けばいいか」のヒントになるため、郵便番号のように短い項目が長い欄になっていると、何を書けばいいのか一瞬迷わせてしまうからです。

デジタル庁デザインシステムでも、入力フィールドの横幅は入力内容にふさわしい長さにするよう定めています。

OKの見本では、郵便番号の欄が短いので、「短い数字を書く欄だ」と入力する前から分かります。

ただし、スマートフォンのように画面の幅が狭い場合は、住所などの長い欄は画面の幅いっぱいに広げ、短い欄だけ幅を抑えるとよいでしょう。

エラーは場所と直し方を文字で伝える

入力に問題があったときは、問題のある入力欄のすぐ近くに、何がだめでどう直せばよいかを文字で表示します。

フォームの一番上に「入力に誤りがあります」とだけ出しても、利用者はどの欄をどう直せばいいのか探し回ることになるからです。

Webのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)の国際的なガイドラインであるWCAG 2.2でも、入力エラーを自動的に見つけた場合は、エラーのある項目を特定し、エラーを文字で説明することを求めています(WCAG 2.2 達成基準3.3.1 エラーの特定・WAIC日本語訳)。

枠を赤くするのは分かりやすい合図ですが、色だけでは色の見分けにくい人に伝わらないため、見本Bのようにエラーメッセージの文字と組み合わせます(色だけに頼らない考え方は色だけに頼らないデザインとは?で解説しています)。

エラーメッセージは「正しく入力してください」ではなく、「ハイフン(-)を消して、数字だけで入力してください」のように、直し方まで具体的に書きましょう。

エラーを出すタイミングにも気を配ります。入力している途中や、欄から離れた直後にエラーを出すと、書き終える前に注意されて煩わしく感じたり、メッセージが出たぶん画面の位置がずれたりします。

デジタル庁デザインシステムでも、エラーは送信ボタンを押したときか押したあとに表示するのが望ましいとしています(インプットテキストの使い方 – デジタル庁デザインシステム)。

枠線は背景とはっきり区別できる濃さにする

入力欄の枠線は、背景との差がはっきり分かる濃さにして、「ここに入力できる」と一目で分かるようにします。

枠線をごく薄い灰色にすると上品には見えますが、入力欄がどこにあるのか分かりにくくなり、明るい場所でスマホを見ると枠がほとんど消えてしまうからです。

WCAG 2.2では、入力欄の枠のように部品を見分けるために必要な線や形は、隣り合う色とのコントラスト比を3:1以上にすることを求めています(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。

コントラスト比とは、2つの色の明るさの差を「3:1」のように数値で表したもので、数字が大きいほど差がはっきりします。選んだ色が基準を満たしているかは、色のコードを入れると比を計算してくれるコントラストチェッカーで確かめられます(確かめ方は色のアクセシビリティとは?で解説しています)。

NGの見本は、わざと読みにくくした見本で、枠線もプレースホルダーも背景に溶け込み、どこからどこまでが入力欄なのかがぼやけています。

OKの見本は、枠線を背景との差がはっきり分かる濃さの灰色にしたことで、入力欄の範囲がはっきりしています。

コーディングするときの要素

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、「ラベルと入力欄はセットで1つの部品」という考え方だけ押さえておけば十分です。

HTMLでは、入力欄を<input>要素、ラベルを<label>要素で作り、for属性とid属性で両者を結び付けます。

<label for="tel">電話番号 ※必須</label>
<p id="tel-help">半角数字で、ハイフンなしで入力してください</p>
<input type="tel" id="tel" name="tel" required aria-describedby="tel-help">

ラベルと入力欄を結び付けておくと、ラベルを押しても入力欄が選ばれるようになり、読み上げソフトでも項目名が読まれます(MDN: <label>: ラベル要素)。

type="tel"のように入力の種類を指定すると、スマートフォンでは数字を入力しやすいキーボードが表示されるなど、入力の手間を減らせます。

実践のポイント

テキストフィールドで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• デザインカンプ(完成見本の画像)で、入力前の状態しか作らないことがあります。
  入力済み・フォーカス・エラーの状態も作っておかないと、実装の段階で見た目がばらばらになります。
• 入力欄の文字を小さくしすぎたり、枠の内側の余白を詰めすぎたりして、入力しにくくなることがあります。
  入力欄の中の文字も本文と同じくらいの大きさにし、指で押しやすい高さを確保しましょう。
• ラベルが上の入力欄と下の入力欄のちょうど中間にあり、どちらの項目名なのか迷わせることがあります。
  ラベルは自分の入力欄のすぐ近くに置きましょう(近いもの同士がまとまって見える性質は近接の原則とは?で解説しています)。
• エラーメッセージを、入力欄から離れた画面の上部にだけ表示してしまうことがあります。
  まとめて表示する場合も、各入力欄のそばにも理由を出すと、どこを直せばよいかがすぐ分かります。

よくある質問

• Q. ラベルは入力欄の上と左、どちらに置けばいい?
  A. 迷ったら上に置くのがおすすめです。
  上に置くと、ラベルが長くても入力欄の幅を削らずに済み、スマートフォンの狭い画面でもそのまま使えます。
  デジタル庁デザインシステムでも、ラベルは入力フィールドの上に左寄せで置く形が基本になっています。
• Q. プレースホルダーは使わないほうがいい?
  A. 使うこと自体は問題ありませんが、ラベルやヘルプテキストの代わりにはしないでください。
  入力すると消えてしまうので、消えても困らない「入力例」程度の内容にとどめましょう。
• Q. テキストフィールドとテキストエリアは何が違う?
  A. テキストフィールドは1行の入力、テキストエリアは複数行の入力に使います。
  お問い合わせ内容や自己紹介のように長い文章を書いてもらう欄は、何行か書けそうだと分かる高さのテキストエリアにしましょう。

まとめ

テキストフィールドとは、利用者が自由に文字を入力する1行の入力欄のことで、ラベル・ヘルプテキスト・入力欄・エラーメッセージなどのパーツで構成されます。

ラベルはプレースホルダーで代用せず常に見えるように置き、入力のルールは先に伝え、幅は内容の長さに合わせ、エラーは場所と直し方を文字で示すことがポイントです。

まずは、よく使うサービスの会員登録フォームを開き、ラベルが入力後も見えているか、エラーが文字で説明されているかを確かめてみてください。