本日は数あるフォームの項目のなかでも「テキストエリア」に注目して、改善ポイントや注意点を紹介したいと思います。
テキストエリアとは
テキストエリアとは、掲示板のコメント欄のような複数の行にわたって記入するフォームの入力欄のことです。
例えばfacebookの投稿欄などもテキストエリアですね。
お問合せフォームや備考欄などで、ユーザーが自由に入力できるよう設けられていることが多いです。
「エフトラEFO」お問合せフォームのテキストエリアの例。
そんなテキストエリアですが、具体的にはどんな点に気をつければ良いのでしょうか。
今回ご紹介するのは下記のとおりです。順番に説明していきましょう。
テキストエリア使用時に気をつけたいこと 目次
- なるべく必須にしない
- チェックボックスなどで頭出し
- 必ず入力例を表示する
- デザインで気をつけたい点は、テキストボックスとほぼ共通
- テキストエリアの場合、横幅だけでなく、縦幅にも注意
- テキストエリアの場合、行間にも注意する
なるべく必須にしない
テキストエリアの最大の特徴、それはオープンクエスチョンであるということです。
はい／いいえなどのような、回答範囲や形式を限定した質問の仕方であるクローズドクエスチョンに対し、「どう思うか？」などのように、制約を設けず答えの幅が相手に委ねられている質問がオープンクエスチョン。
テキストエリアは自由であるぶん、入力の負担は大きくなってしまいます。
そのため、必須にするのではなくなるべく書きたい人のみが記入できるよう「任意項目」として用意すべきです。
チェックボックスなどで頭出し
以前の記事あなたのフォームは大丈夫？ユーザーに戸惑いを与えない設問、５つのチェックポイントの中でも触れていますが、テキストエリアの問いについて、まずはよくある回答をチャックボックスなどで頭出ししておくと、上手く入力のハードルを下げることができます。
エフトラEFOのお問合せフォームの例。よくあるお問合せ内容をチェック選択形式にし、フリー入力しなくても問合せが完結できるようになっている
必ず入力例を表示する
テキストエリアには必ず入力例を用意しましょう。
テキストエリアは入力の自由度が高いぶん、ユーザーがどう入力していいかわからなかったり、迷ってしまう場面が多くなります。
また、ある程度文章を書くことは頭を使いますから、その分負担も大きくなります。
入力例があれば、そのフォーマットや内容をユーザーは参考にして記入することができ、いくらか負担を減らすことが可能です。
デザインで気をつけたい点は、テキストボックスとほぼ共通
テキストボックス（改行なしのテキスト入力欄）のポイントを紹介した過去記事快適なテキストボックスを作る、たった５つの条件で紹介した以下の5つのポイントは、テキストエリアにおいても有効なチェックポイントです。
上記の5点のポイントについては詳しくは記事の該当箇所（クリックすると飛びます）をご確認いただければと思います。
本記事ではさらに加えてテキストエリア特有の気をつけたいポイント2点を続けて紹介したいと思います。
テキストエリアの場合、横幅だけでなく、縦幅にも注意
まずはテキストエリアの場合、改行が可能であるためテキストボックスにはなかった縦幅（行数）の概念が登場します。
テキストエリアは何のサイズ指定もしないデフォルト状態では小さく表示されることが多いため、余裕をもった大きさに指定するようにしましょう。
最近のブラウザでは、テキストエリアの右下をドラッグすることで編集領域を自由に拡大することができるものの、
なるべくこのような手間をユーザーをかけさせないよう、あらかじめ適切な大きさにサイジングしておくようにしましょう。
firefoxの例。右下をドラッグするとサイズが寿友に変更できるようになっています。
テキストエリアの場合、行間にも注意する
入力中のテキストの行間にも注意しましょう。
行間が詰まりすぎていると、入力した内容が読みにくく感じるため、適度にスペースをあけるように注意しましょう。
行間狭い場合
行間が広い場合
まとめ
いかがだったでしょうか。
本日は、フォームでテキストエリアを使う際のポイントを紹介しました。
- なるべく必須にしない
- チェックボックスなどで頭出し
- 必ず入力例を表示する
- デザインで気をつけたい点は、テキストボックスとほぼ共通
- テキストエリアの場合、横幅だけでなく、縦幅にも注意
- テキストエリアの場合、行間にも注意する
ぜひフォーム改善の参考としていただければ幸いです。
