本文へ移動

メニュー

テキストエリア概要

スクリーンショット:ラベル、要否ラベル、サポートテキスト、文字数カウンターのパーツで構成されるテキストエリア。

仕様

パーツ

スクリーンショット:テキストエリアを構成する各パーツに、それぞれ①②③④⑤⑥の番号を割り付けている。①はテキストの入力フィールド。②は入力フィールドと対になるテキストの項目ラベル。入力フィールドの上に左寄せで配置。③は赤文字の要否ラベル。項目ラベルの後ろに配置。④はサポートテキスト。ラベルと入力フィールドの間に配置。⑤は文字数カウンター入力フィールドの下に右寄せで配置。⑥は赤文字のエラーテキスト。文字数カウンターの下に左寄せで配置。
  1. 入力フィールド(必須)
  2. 項目ラベル(必須)
  3. 要否ラベル
  4. サポートテキスト
  5. 文字数カウンター
  6. エラーテキスト

使い方

設計の原則

  • 自由入力形式の回答は、利用者にとって負荷の高いものです。例えば、「その他を選んだ方だけご記入ください」等、質問を分割した後の使用を検討してください。
  • ラベルテキストは入力項目を端的に表現してください。入力項目が1つしかなく、その意味を画面タイトルなどで明確に説明できる場合は省略可能です。

良い例

スクリーンショット:「どの機能に問題がありましたか?」というラベルで3択のラジオボタンを提示する質問項目と、「詳しい状況を教えてください」というラベルで100文字以内のテキスト入力を求める質問項目。

質問が分解され、最低限の記述で済む

悪い例

スクリーンショット:「どこに問題があるか教えてください」というラベルで100文字以内のテキスト入力を求める質問項目。

質問がオープンすぎて入力に負荷がかかる

文字数に制限がある場合

入力項目に文字数制限がある場合は、ラベルに最大文字数を具体的に記述しましょう。

最大文字数が、おおむね20文字を超える、もしくは、入力フィールド内でスクロールが必要な文字数以上の場合は、文字数カウンターを合わせて表示することで、入力者が目視で入力した文字数を把握できるようにします。

良い例

スクリーンショット:「困っていることを100文字以内で教えてください」というラベルのテキストエリアで、テキストエリア下部には、エラーテキストとして「*入力できる文字数を超えています」の表示と、赤色に変化した文字数カウンターが配置されている。

ラベルで文字数の制限を明示し、かつ、文字数カウンターを常時表示し、制限を超えた場合は超過文字数を知ることができる。

良い例

スクリーンショット:「困っていることを100文字以内で教えてください」というラベルのエラー状態のテキストエリアで、エラーテキストは「*入力できる文字数を超えています。(入力文字数101文字)」

ラベルで文字数の制限を明示するにとどまっている。
文字数制限をこえた場合はエラーを出す(エラー時、入力済みの文字数が表示されると望ましい)

悪い例

スクリーンショット:「困っていることを教えてください」というラベルのテキストエリアで、エラーテキストは「*入力できる文字数は100文字までです。」

ラベルで文字数の制限を示しておらず、エラーが出てはじめて何文字まで入力できるのかが分かる。

悪い例

スクリーンショット:「困っていることを教えてください」というラベルのテキストエリアで、エラーテキストは「*入力できる文字数を超えています。」

ラベルで文字数の制限を示していないうえに、エラーが出ても何文字まで許容されるのかも分からない。