こんにちは！ ASUE株式会社 広報のN村です。

書きかけのブログがなかなか進まないな、困った……と思ったついでに、今思いついたブログを書き始めます。本当にこんな行き当たりばったりでいいのか？ 盛ってるんだろ？と思われそうですが、本当にそのままやっています。

今回のテーマは「最悪なフォームを作ってみよう！」です。作ったものを、自分で最低限利用に足るところまで直します。それではどうぞ。

最悪なフォームを作ってみた

と、いうことで、最悪なフォームを作ってみました。ダミーなので送信ボタンを押しても実際には何も送られませんが、どの辺が最悪かを体験するためにも適宜触ってみてください。

※ダミーのフォームのため、入力・送信をした場合も内容は送信されません。

さて、ダメな部分はいくつ見つけられたでしょうか？

NGポイント(1) 入力・送信しにくいデザイン

まずはぱっと見の見た目です。なんのcssも使っていなさそうなシンプル（といえば聞こえはいいが）なデザイン。ミニマリストもびっくりですね。

見た目がものすごくシンプルなことは置いておいて、まずは余白がないこと。入力項目名と入力欄、次の項目……それぞれの間に余白がほとんどなく、入力項目とその入力欄のまとまりがわかりにくくなっています。

さらに、各項目の見出しの右に小さく「*」がありますが、このフォームではこれが「必須項目」のようです。これでは小さすぎて目立たず、空欄を作って送信してしまう人も多いでしょう。

続いて、入力欄が小さくなっています。PCだとそこまで気になりませんが、スマートフォンでは指でタップをする必要があるためこのサイズだとクリックがしにくく、ユーザーにとってはストレスになります。

最後に送信ボタンが小さい上に、送信ボタンの左にリセットボタンがあります。ユーザーが入力内容を消してしまったり、うっかり送信ボタンを見落としたり、小さいことでスマートフォンのユーザーが押しにくい可能性も高いです。

以上の点を踏まえて、修正したのがこちら。

※ダミーのフォームのため、入力・送信をした場合も内容は送信されません。

まだまだ直すべきところは多いので、見にくい部分も多いですが最初のフォームよりはかなり見やすくなったかと思います。

NGポイント(2) 項目が多すぎる

フォームは項目が多いほど……特に必須入力の項目が多いほど、ユーザーにとっては負担になります。

フォームの種類・用途によって必要な項目は異なりますが、一般的なお問合せフォームでは、必須項目を名前・メールアドレス・お問合せ内容くらいに留めておくのがベターです。お問い合わせや登録に必要な内容のみに絞る、というのがポイントです。

※ダミーのフォームのため、入力・送信をした場合も内容は送信されません。

本当は項目自体もできるだけ減らしたほうがいいですが、マーケティングの観点からユーザーの属性を知りたい場合や顧客管理用に必要等もあると思うので、適宜必須ではない項目として追加しましょう。今回は他の部分の説明のためにも項目自体は減らさないで続行します。

単なるお問い合わせフォームでいきなり住所等まで細かく入力欄があると、尻込みするユーザーもいるかもしれないので要注意です。属性を知りたい・どうしてこの会社やブランド、商品を知ったのか等のアンケート的な内容については、フォームの最後にまとめておくのがベターだと思います。

NGポイント(3) どう入力する？ 入力欄が適切じゃない

今回作ったフォームのような、入力欄が白く空の状態のものだと項目をどのように入力すべきか迷いませんでしたか？

それは、入力欄の仕様が適切ではなかったからです。

例えば、電話番号。「-」は入力すべきなのか。誕生日はどのように入力すべきなのか。普通にテキストが入力できる状態になっているので、ユーザーは各々好きなように入力できてしまいます。

その他にも、名前や住所等全ての入力欄に入力例がないため、入力しにくいかと思います。なので、placeholderを各入力項目に設定しておくことが好ましいです。また、半角・全角どちらを用いるべきかなどを欄外に記載しても良いですね。

また、今回、性別以外の全ての入力項目が、input[type="text"]で作成されていました。ですが、「お問い合わせの種類」のような項目がテキスト入力だと入力形式を迷いやすいですし、受け取る側としても管理しやすいように自由入力ではなく選択式であることが好ましいと思います。今回は選択肢が少ないため、ラジオボタン(input[type="radio"])にしました。また、その他の電話番号やメールアドレス等の項目も、inputのtype属性を適切なもの（電話番号：type="tel", メールアドレス：type="email", 誕生日などの日付：type="date"）に変更することが好ましいです。デバイスなどの利用状況によってはこれだけで入力モードが適切な状態に変更される可能性があります。

元々選択式になっている性別欄の場合、基本的に選択肢が少ない項目（3つ程度）であり、このように選択肢が少ない場合はセレクトボックス（select）よりもinput[type="radio"]がおすすめです。（selectは選ぶまでに2回クリックする必要あり）

選択肢が多い場合はセレクトボックス、複数選択する可能性がある場合はチェックボックス（input[type="checkbox"]）など、同じ選択式の場合でも状況に合わせて使いやすいものを選びましょう！

ある程度長文を入力する可能性が高い[お問い合わせの内容]の項目まで、今回input[type="text"]になっています。改行等ができなかったり、入力欄が1行で入力中に内容を確認しにくかったりと不便なので、長文入力が予想される項目ではテキストエリア(textarea)を使用しましょう。

最後に、送信ボタンの文言はフォームの用途等によって適切な文言に変えると良いです。入力内容の確認があるのであれば、「内容を確認する」を入れたり、アンケートへの回答であれば「アンケートに回答する」という文言にするなど、押した後何が起きるか明確にわかるのがベストです。一発で送信されるタイプのフォームでも、「入力内容を送信する」等が好ましいかと思います。

以上を踏まえて修正したフォームがこちら！

※ダミーのフォームのため、入力・送信をした場合も内容は送信されません。

入力例を提示した他にも、電話番号や郵便番号等は全角英数字で入れた場合にも自動で半角英数字に変換するように設定したり、ラジオボタン等のクリックしたい場所はcssでcursor:pointer（これを設定した要素の上にマウスのカーソルを合わせると、矢印じゃなくマジックハンドみたいなアイコンになる）を設定し、感覚的に押せる場所がわかりやすいように設定してあります。

ここまで来るとかなり一般的なフォームっぽくなってきたのではないでしょうか。でもまだまだあります！

NGポイント(4) プライバシーポリシーへの同意項目がない

続いて、こちらのフォームにはよく見かけるあれがありません。そう、プライバシーポリシーへの同意のためのチェックボックスです。

このプライバシーポリシーへの同意取得ですが、厳密には「必須」ではありません。しかし、第三者への情報提供を行う可能性がある場合と要配慮個人情報が含まれる場合は同意の取得が必須となります。なので、基本的には設置しておいた方が無難といえます。（チェックボックス等置かない場合もリンクくらいは貼っておきたい。）

ということで、追加したバージョンがこちら。

※ダミーのフォームのため、入力・送信をした場合も内容は送信されません。

チェックボックスを使用する方法のほかに、「送信ボタンを押した時点で同意したとみなす」という旨を記載する方法などもありますが、適宜選択して使用しましょう。

ちなみに、GDPR（EU域内での個人データ保護を規定するための法律）ではこの同意の取得は認められていないため、GDPRが適用される事業の場合は要注意です！

NGポイント(5) 入力時のアラートが適切ではない

実際にここまでのフォームでいろいろ動きを試してみた方はお気づきかと思いますが、このフォームの入力アラートはユーザーに優しいものではありませんでした。

メールフォームの必須の確認や入力形式のチェックは、送信時ではなくリアルタイムに、どの項目のことかがわかるように記載するのが好ましいです。また、送信ボタンは必須項目が埋まり、メールアドレス等が入力規則に則った状態になった際に押せるのが好ましいです。

※ダミーのフォームのため、入力・送信をした場合も内容は送信されません。
※わたしの能力が低いために微妙に動きが変なところがありますが、今回はスルーしてください。

必須項目を入力しなかったらその場でアラートが表示されたり、必須項目を埋めていない場合は送信ボタンが無効になっていたり、入力・送信で迷わないようになっています。（うまくいってないところがあれわたしの力及ばずポイントです。）

リアルタイムのアラートを表示しないまでも、せめて送信時にどの項目がどのようにダメなのかがわかるようなアラートを表示させるようにしましょう！

まとめ

さて、最初のフォームのNGポイント、どれだけ気付けたでしょうか？

最低限NGポイント(5)まで対応できていれば、一般的なサイトのフォームとして利用できるレベルに到達できているのではないでしょうか。

もし、自社のサイトやLPのフォームでできていない部分があれば（一番のあるあるは項目が多い、だと思います……いろんな事情で減らせないのはわかる）、ぜひ改善してみてください！

また、EFO（フォーム最適化）についてはこちらもどうぞ！

人気シリーズ：LPデザイン道場第四回

 2020年9月8日フォーム最適化できてる？今日から使えるEFOの極意を一挙公開！｜LPデザイン道場 第四回

ASUE株式会社では、メールマガジンやブログでWebマーケティングに関する情報発信を行なっています！ メルマガはほぼ週に1回、ASUE通信の更新情報や気になるアップデート情報、読んでおきたい気になる記事（とおまけのどうでもいい小話）などをお送りしているゆるいメルマガなので、気軽に情報収集したい方はぜひご登録ください！

それではまた、次回のASUE通信でお会いしましょう！