ウェブフォームは、電話でのお問い合わせよりも気軽にでき、今ではお問い合わせだけではなく、採用エントリーや資料請求など、さまざまな場面で利用されています。フォームページは見るだけのページとは異なり、氏名や連絡先情報を入力するといったユーザーの操作が発生します。そのため、ユーザビリティを意識した細かな配慮が必要になります。

項目名の配置とレスポンシブ

「氏名」「ふりがな」「住所」などの項目名は、入力欄との位置関係が横並びと縦並びの２パターンがあります。特に横並びにする場合は、スマートフォンなどの狭い画面で表示する際にレイアウトの崩れが起きやすいため、レスポンシブ対応に注意が必要です。

横幅が狭い画面で表示するときは、項目名と入力欄を縦並びに切り替えるなどレイアウトを工夫しましょう。

入力欄は必要な場合だけ分ける

名前の入力欄が「氏」と「名」に分かれていたり、住所の入力欄も「都道府県」「市区町村」「町名番地」「建物名」の４つの欄に分かれているものがあります。

入力欄を分けると、ユーザーは入力のたびにキーボードとマウスを持ち替えなければならなくなるため、手間やストレスを感じさせる可能性があります。

フォームを送信したり集計するシステムの都合上、必要があって分かれている場合もありますが、特に理由がない場合は１つの入力欄にまとめましょう。

必須か任意かを見分けられるマークを付ける

入力が必須か任意かを見分けるためのバッジを付けましょう。フォーム全体を見たときにひと目でわかるよう、目立つ色を使うことが多いです。英語圏のウェブフォームでは「＊」（アスタリスク）が使われていることが多い印象ですが、これだけではどんな意味があるのかが分りにくいため、日本語ではっきり「必須」と表記するとよいでしょう。

入力のルールを明記する

メールアドレスやパスワードなどの誤入力を特に避けたいものは、確認のためユーザーに２度入力させる場合があります。この場合、同じサイズの入力欄が縦に２つ並ぶことが多いですが、２度めの入力欄に説明がなければ、何のための入力欄かが伝わらず、入力を見過ごされてしまいます。ユーザーに再入力用の欄だとわかるよう、「確認のためもう一度入力してください」などと補足を付けると分かりやすいでしょう。

また、フォームのデータを送受信するサーバーや、サイト運営者側の集計の都合で、入力するテキストに細かなルールがある場合もあります。例えば、住所は番地まで全角入力、電話番号はすべて半角数字、ハイフンを付ける・付けないなどのルールが設けられます。不備があると間違い探しや修正に負担が生じてしまうため、このようなルールもあらかじめ補足をして知らせる必要があります。

送信・戻るボタンの位置関係

戻るボタンと送信ボタンの位置関係も重要です。
ブラウザの戻るボタンと進むボタンは一般的に、左側が１つ前のページに戻る、右側が１つ後のページに進むためのボタンになっています。このことから、左に配置されたものは過去の状態へ、右に配置されたものは未来の状態へ遷移するイメージがあるため、フォームにおいても左側に「戻る」、右側に「送信する」の配置でボタンを置くのが最適です。

また、「戻る」ボタンは最初のフォーム画面には表示されないため、設計し損ねる可能性があります。「確認画面へ」ボタンや「送信」ボタンとは反対の動きをするボタンになるので、色やサイズなどで差をつけ、異なる役割をもつボタンだとひと目で分かるように設計しましょう。

プライバシーポリシーへの同意確認

フォームを入力する時、最後に「プライバシーポリシーをご一読いただき、同意のうえ送信してください」といった文章を見かけることがあるかと思います。これは個人情報保護法という法律により、個人情報を収集される側の人が、収集する側の個人情報の取り扱い方法に同意しなくてはならないために設ける項目です。

チェックボックスを付け、同意したことを明確にするタイプもあれば、「送信ボタン」を押した時点で同意したとみなすタイプもあります。どのような仕組みで同意してもらうかを事前に確認しておくと、デザインやレイアウトの制作もスムーズになります。

中小企業でも独自のプライバシーポリシーが必要

今では個人情報を１件でも取り扱うすべての企業が個人情報保護法の対象ですが、実は2016年の法改正までは個人情報の取り扱いが5,000件未満の事業者は対象外でした。法改正されて数年経った現在でも、どのように制定したらいいのかが分からない事業者もおり、WEBフォーム制作時に急ごしらえで作る場合もあるようです。

プライバシーポリシーはその企業が、どんな個人情報を収集し、どのように取り扱い、保管するのかを明文化したものです。インターネットで検索すると雛形やフォーマットがいくつかヒットしますが、企業ごとに個人情報への対応は必ず異なります。

安易に雛形をそのまま使用せず、その企業が十分に検討した独自のプライバシーポリシーを掲載しましょう。