フォームでテキストエリアを使用する際に気をつけたいこと

本日は数あるフォームの項目のなかでも「テキストエリア」に注目して、改善ポイントや注意点を紹介したいと思います。

テキストエリアとは

テキストエリアとは、掲示板のコメント欄のような複数の行にわたって記入するフォームの入力欄のことです。
facebookのテキストエリア
例えばfacebookの投稿欄などもテキストエリアですね。

お問合せフォームや備考欄などで、ユーザーが自由に入力できるよう設けられていることが多いです。

「エフトラEFO」お問合せフォームのテキストエリアの例。

「エフトラEFO」お問合せフォームのテキストエリアの例。

そんなテキストエリアですが、具体的にはどんな点に気をつければ良いのでしょうか。
今回ご紹介するのは下記のとおりです。順番に説明していきましょう。

テキストエリア使用時に気をつけたいこと 目次

  1. なるべく必須にしない
  2. チェックボックスなどで頭出し
  3. 必ず入力例を表示する
  4. デザインで気をつけたい点は、テキストボックスとほぼ共通
  5. テキストエリアの場合、横幅だけでなく、縦幅にも注意
  6. テキストエリアの場合、行間にも注意する

なるべく必須にしない

テキストエリアの最大の特徴、それはオープンクエスチョンであるということです。
はい/いいえなどのような、回答範囲や形式を限定した質問の仕方であるクローズドクエスチョンに対し、「どう思うか?」などのように、制約を設けず答えの幅が相手に委ねられている質問がオープンクエスチョン。

テキストエリアは自由であるぶん、入力の負担は大きくなってしまいます。
そのため、必須にするのではなくなるべく書きたい人のみが記入できるよう「任意項目」として用意すべきです。

チェックボックスなどで頭出し

以前の記事あなたのフォームは大丈夫?ユーザーに戸惑いを与えない設問、5つのチェックポイントの中でも触れていますが、テキストエリアの問いについて、まずはよくある回答をチャックボックスなどで頭出ししておくと、上手く入力のハードルを下げることができます。

頭出ししておく

エフトラEFOのお問合せフォームの例。よくあるお問合せ内容をチェック選択形式にし、フリー入力しなくても問合せが完結できるようになっている

必ず入力例を表示する

テキストエリアには必ず入力例を用意しましょう。
フリー入力欄に例示を表示
テキストエリアは入力の自由度が高いぶん、ユーザーがどう入力していいかわからなかったり、迷ってしまう場面が多くなります。
また、ある程度文章を書くことは頭を使いますから、その分負担も大きくなります。

入力例があれば、そのフォーマットや内容をユーザーは参考にして記入することができ、いくらか負担を減らすことが可能です。

デザインで気をつけたい点は、テキストボックスとほぼ共通

テキストボックス(改行なしのテキスト入力欄)のポイントを紹介した過去記事快適なテキストボックスを作る、たった5つの条件で紹介した以下の5つのポイントは、テキストエリアにおいても有効なチェックポイントです。

  1. 文字サイズが充分な大きさ
  2. 横幅が適切なサイズになっている
  3. まわりに適切な余白がある
  4. 内側にも多少の余白がある
  5. フォーカス中に強調されている

上記の5点のポイントについては詳しくは記事の該当箇所(クリックすると飛びます)をご確認いただければと思います。
本記事ではさらに加えてテキストエリア特有の気をつけたいポイント2点を続けて紹介したいと思います。

テキストエリアの場合、横幅だけでなく、縦幅にも注意

まずはテキストエリアの場合、改行が可能であるためテキストボックスにはなかった縦幅(行数)の概念が登場します。
テキストエリアは何のサイズ指定もしないデフォルト状態では小さく表示されることが多いため、余裕をもった大きさに指定するようにしましょう。

最近のブラウザでは、テキストエリアの右下をドラッグすることで編集領域を自由に拡大することができるものの、
なるべくこのような手間をユーザーをかけさせないよう、あらかじめ適切な大きさにサイジングしておくようにしましょう。

firefoxの例。右下をドラッグするとサイズが自由に変更できるようになっています。

firefoxの例。右下をドラッグするとサイズが寿友に変更できるようになっています。

テキストエリアの場合、行間にも注意する

入力中のテキストの行間にも注意しましょう。
行間が詰まりすぎていると、入力した内容が読みにくく感じるため、適度にスペースをあけるように注意しましょう。

行間狭い場合

行間狭い場合


行間が広い場合

行間が広い場合

まとめ

いかがだったでしょうか。
本日は、フォームでテキストエリアを使う際のポイントを紹介しました。

  1. なるべく必須にしない
  2. チェックボックスなどで頭出し
  3. 必ず入力例を表示する
  4. デザインで気をつけたい点は、テキストボックスとほぼ共通
  5. テキストエリアの場合、横幅だけでなく、縦幅にも注意
  6. テキストエリアの場合、行間にも注意する

ぜひフォーム改善の参考としていただければ幸いです。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です