サイト内検索 AND OR

HOME→ナビゲーション編→その入力フォームは大丈夫？

その入力フォームは大丈夫？

ショッピングカートやお問い合わせ、アンケートなどでは欠かせない入力フォーム。しかし、使いづらいものも多々見受けられます。以下のような使いづらい入力フォームは、訪問者に嫌がられ、入力フォームを設置した目的を達成できない原因になります。 入力項目が多すぎる

細かい入力制限がある

入力内容に合っていない入力方法

どの入力項目に対応しているかわかりづらい

どれが必須入力項目なのかわかりづらい

入力方法がわかりづらい

デフォルトで入力されている値が誘導的・強要的

送信とキャンセルを間違えやすい

ボタンのラベルとアクションの不一致

1つずつしかエラーを返さない

エラーメッセージが高飛車

エラーになった後で戻ると、入力した項目が全部消える

送信したことを後悔させてしまう

ちゃんと送信できているか不安になる

返信がいつになるのかわからない

メールフォーム以外の問い合わせ手段がない せっかく入力フォームを設置するのですから、気分よく、目的を達成してもらいものですね。良い入力フォームを作るためのポイントを説明します。

入力項目は必要最小限に

その入力項目が本当に必要であればまだいいのですが、「なぜこの項目を入力しなければいけないのか？」という疑問が湧いてくるようなものはダメです。あと、アンケートであるなら調査目的もあった方がよいです。 フォーム設置側としてはついついあれもこれもと項目を増やしがちですが、入力フォームを使う目的を達成するのに必要最小限の項目数にしましょう。 なお、個人情報を収集する際は、プライバシーポリシーに関する文書をサイト内に置き、入力フォームのページからリンクを張って参照してもらう形をとるとよいです。

入力制限は最小限に

あるところでは半角英数字、別のところでは全角カタカナといったように、いちいちIMEのON/OFFを切り替えたり、ファンクションキーで文字種を切り替えるのは面倒です。ある程度パソコン操作になれていても面倒な操作です。初心者だと、現在、どの文字種で入力が行われているのかが把握できていなかったり、文字種の変換方法がわからないといったことも考えられるでしょう。 パスワードやID、ふりがな等でどうしても一定の文字種で入力して欲しい場面があるかとは思います。その場合は、入力する前にその旨を説明しましょう。これはアクセシビリティ上の配慮のためです。 また、サーバサイドスクリプト側で制御できる場合は積極的に活用していきましょう。（特にふりがな部分）

適切な入力方法を選ぶ

フォームの入力部品にはそれぞれ適・不適な場面があります。以下の表を参考にして下さい。

各フォーム入力部品の適・不適 入力部品 使うのに適している場面 使うのに適さない場面 単行テキストボックス 短い内容の入力 長い内容の入力

選択肢からの選択 複数行テキストボックス 長い内容の入力 短い内容の入力

選択肢からの選択 ラジオボタン 複数選択肢から必ず1つだけ選択する

選択肢が7個程度まで

入力用スペースが十分に取れる 選択肢を設けていない場合

複数選択肢から複数選択可能

入力用スペースが十分に取れない チェックボックス 複数選択肢から複数選択可能

チェックを入れることで二者択一の選択をする

選択肢が10個程度までで入力用スペースが十分に取れる 選択肢を設けていない

複数選択肢から1つだけ選択する

入力用スペースが十分に取れない プルダウンメニュー（単数） 選択肢の内容が予測でき、かつ必ず1つだけ選択する

入力用スペースを節約する 選択肢を設けていない

複数選択肢から複数選択可能

選択肢の内容が予測できない

選択肢が多すぎる プルダウンメニュー（複数） 選択肢の内容が予測でき、かつ複数選択可能

入力用スペースを節約する 選択肢を設けていない

複数選択肢から1つだけ選択する

選択肢の内容が予測できない

選択肢が多すぎる

入力部品と対応するラベルを明確にする

余裕があるのなら入力部品は縦並びのほうがいいです。横並びにするときは、入力部品と対応するラベルが明確になるよう、項目間に空白をもうけるなどしましょう。 また、明示的にLABEL要素で示すのも良い方法です。特に、チェックボックスやラジオボタンで有効です。入力部品だけでなく、ラベルをクリックしても、入力部品が反応します。アクセシビリティ上も良いことです。 LABEL要素で明示する場合にはLABEL要素のfor属性と入力部品のid属性が同じ値になるようにして下さい。例とHTMLソースを出します。 はい

いいえ

<input type="radio" name="yesor" id="yes" checked>

<label for="yes">はい</label><br>

<input type="radio" name="yesor" id="no">

<label for="no">いいえ</label><br> <input type="submit" value="送信">

必須項目は必須と明示する

入力が必須な項目については、入力の前に必須であることを漢字で示して下さい。記号や色だけで必須項目であるのを示すのはアクセシビリティ上よくありません。

入力方法を明示する

電話番号、郵便番号、クレジットカード番号など、ハイフンを入れるのか入れないのかわからない場合があります。入力前に入力例を示しましょう。もしくは、-で区切って入力部分を区切りましょう。

デフォルトとする値には配慮する

アンケートの場合は、中立性を保つようにして下さい。紙面で行うアンケートとは異なり、ラジオボタンで選択する場合はデフォルト値が入っていることが多いですが、（というより、(X)HTMLではラジオボタン群には１つのデフォルト値を選択しておかなければなりません。）誘導的な回答をさせるようなデフォルト値にしないで下さい。 また、会員登録や資料請求などでも、メールマガジンの購読などを強要するような選択肢は慎むべきです。

リセットボタンは不要

入力フォームで入力することを止める場合は、ブラウザを閉じてしまうのが大半です。わざわざ、<input type="reset">のタグを挿入する必要はありません。すなわち、リセットボタンは不要です。 また、入力項目を訂正するために「戻る」などのボタンを付けるときは、「戻る」を先につけて下さい。これはアクセシビリティ上の配慮のためです。

ボタンのラベルと動作は一致させる

ボタンのラベルに書いてあることと、ボタンを押したときの動作は一致させるようにして下さい。「次へ」でいきなり入力完了やメール送信されても困ります。

エラーはまとめて返しましょう

入力エラーとなった場合は、エラーになった部分をまとめて返すようにして下さい。１つ１つ値をチェックしてエラーを返していると、怒られた気分が増していきます。

エラーメッセージは肯定的、かつ丁寧に示す

メッセージは否定形ではなく、肯定形で示すようにして下さい。 たとえば、半角英数字のみとなっている場合に他の文字種が入っていた場合には、「半角英数字で入力されていません。」ではなく、「半角英数字で入力して下さい。」と示すようにしましょう。 また、メッセージの言葉遣いも丁寧にして下さい。ただでさえ、エラーを犯してしまってしょぼくれているところに追い打ちをかけるような真似はダメです。

エラーになった場合には正常な入力値を保持する

エラーになった後で入力画面に戻ると、入力した項目が全部消えるなんていうのは、最悪です。訪問者によっては、「もうええわ！」と拒絶反応を示すことでしょう。 パスワードなどを一部消すのも止めて下さい。新たなエラーの原因になります。私はよくこれで引っかかります。

個人情報はPOSTで送る

FORM要素を使う場合にPOSTメソッドで送るメリットは、URLに送った値が出ないことです。一方、GETで送るとURLに送った値が出てしまいます。URLから個人情報が漏れるようなことがないようにして下さい。

送信ができたら完了メッセージを出そう

フォームの送信ができた場合は、入力してくれた旨を感謝する完了メッセージを出しましょう。無事に送信された旨が訪問者に伝われば安心します。

いつ返信があるのか明記する

特に商用サイトの場合に重要です。いつ品物が届くのか、会員登録が無事に済んだのか等は明記しておきましょう。

メールフォーム以外の手段も用意する

これも商用サイトの場合に重要です。問い合わせをしたいときに、メールフォームだとどこに送られるのかわかりません。電話番号、FAX番号などのインターネット以外での問い合わせ手段やメールアドレスの掲載をしましょう。そうすることで、訪問者のメールフォームに対する不安も緩和されます。

HOMEへ戻る ナビゲーション編目次へ

リンクに関してはご自由にどうぞ。