効果的なフォームを作成するために欠かせない10のポイント

　フォームは、Webサイトで目標達成（コンバージョン）するための最終ステップであり、とても重要な役割を果たしています。しかしながら、フォーム入力には手間と時間が掛かり、ユーザーにとって決して楽しい作業ではありません。どのようなフォームを作成すれば、迷うことなく、スムーズにフォームを入力してもらえるでしょうか？

　本記事では、効果的なフォームを作成するために、確認しておくべき10のポイントをご紹介します。フォームの最適化に取り組んでいる方は、ぜひ参考にしてみてください。

基本的なフォームの構成要素

　まずは、基本的なフォームの構成要素を確認しておきましょう。一般的にフォームは、以下の6つの要素から成り立っています。

なぜフォームが重要なのか？

　その答えを端的に言えば、優れたフォームはコンバージョンを増加させるからです。優れたフォームとは、ユーザーにとって、理解しやすく、入力しやすいフォームです。フォーム入力のストレスが少ないため、ユーザーの満足度を高め、コンバージョンに直接影響します。

　一方、使い勝手の悪いフォームは、フォーム入力のストレスが高いため、フォームからの離脱や、ユーザーの不満につながりやすく、コンバージョンや売上の低下につながる可能性が高くなります。

　Webサイトを訪れたユーザーを、1人でも多くの顧客へと変えるためには、優れたフォームを作成することがとても重要なのです。

フォーム作成で確認すべき10のポイント

1. フォームのタイトルは分かりやすく

　フォームには、分かりやすいタイトルをつけるべきです。何のフォームであるかが明確で、そのフォームを送信したら、何が起きるのかが瞬時に理解できるタイトルであれば、ユーザーはスムーズにフォームの入力に進むことができるでしょう。

　逆に、タイトルの無いフォームや、曖昧な表現のタイトルがつけられたフォームは、ユーザーに不安を感じさせ、フォームの入力に進むことを躊躇させてしまう可能性があります。

　タイトルだけでは不十分だと感じる場合は、タイトルの下に補足テキストや注意書きを表示するのも良い方法です。

2. 入力しやすい項目から並べる

　人は、小さなステップを順に踏むと、最後までやり遂げたいという心理になると言われています。そのため、フォームの入力項目に関しても、入力しやすい簡単なものから並べることが推奨されています。

　一般的に、名前やメールアドレスなどの入力しやすい項目から並べて、その後に、住所、お問い合わせ内容、といった入力に時間の掛かる項目を並べるようにします。住所が名前より先に並んでいたり、いきなりクレジットカード情報の入力を求めるような違和感を感じさせる並べ方は避けましょう。

　それぞれのフォームによって、最適な項目の並び順は異なります。皆さんの作成しているフォーム項目を洗い出し、ユーザーが最もスムーズに入力ができると思う並び順を検討してみてください。

3. ラベル名は短く簡潔に

　ラベルは、ユーザーが入力エリアの目的を瞬時に理解できるように、短い文字数で簡潔なラベル名を付けましょう。文章のような長いラベル名や、短過ぎて目的が伝わらないラベル名は避けてください。

　また、ラベルと入力エリアを別々に見る必要がないように、ラベルは入力エリアの上部に配置することをお勧めします。視線を移動する回数が減るため、入力完了までの時間が短縮されます。特にモバイルデバイスは、画面の横幅が狭いため、ラベルは上部に配置するようにしましょう。

○ラベル上部配置の例

△ラベル左配置の例

※ラベルの左配置は、フォームの縦幅をなるべく短く抑えたい場合などには有効です。

4. 入力エリアのサイズは適切に

　入力エリアのサイズは、ユーザーが入力する文字数を想定したサイズにするべきです。

　例えば、メールアドレスの入力エリアが極端に短かったり、お問い合わせ内容の入力エリアが1行だったらどうでしょう。ユーザーにとって、非常に入力し難いフォームになってしまうでしょう。

△不適切なサイズの入力エリア例

　入力エリアのサイズは、ユーザーにどれぐらいの文字数を入力する必要があるのかを知らせる役目もあります。適切なサイズで作成された入力エリアは、ユーザーをスムーズな入力へと誘導してくれるでしょう。

5. 入力中のフォームを目立たせる

　複数の入力エリアを持つフォームの場合、ユーザーがフォームの中で迷子にならないように、編集中の入力エリアを目立たせる工夫をすると良いでしょう。

　具体的には、編集中の入力エリアのボーダーカラーや背景色を変えて、入力エリアを目立たせます。入力中のエリアが一目で分かるため、ユーザーは情報の入力に集中でき、エラーにも気付きやすくなります。

○編集中の入力エリアを目立たせた例

　このテクニックは、CSSのカスタマイズができるフォームであれば、簡単にボーダーカラーや、背景色を変更することができます

CSS記述例

textarea:focus,
input:focus {
　background-color:#fff8dc;
　border: solid 2px #666;
　box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}

6. 名前と電話番号の入力エリアは1つにまとめる

　入力エリアの数は、ユーザーの操作が極力少なくて済むように、必要最低限にとどめるべきだと言われています。

　名前の入力エリアは、「姓」と「名」2つの入力エリアに分けずに、「名前」という1つの入力エリアにしましょう。同様に電話番号の入力エリアについても、3つの入力エリアに分けずに、1つの入力エリアにまとめましょう。

○1つの入力エリアにまとめた例

△複数の入力エリアに分割した例

　複数の入力エリアに分けることで、ユーザーの操作は確実に増えます。名前と電話番号を5つの入力エリアに分けた場合（名前に2つ、電話番号に3つ）、ユーザーは5回入力エリアをクリック（またはタップ）しなければならないことになります。

7. 電話番号の入力は敷居が高いと心得る

　近年、連絡手段としてメールやSNSを使う人が増えたため、電話番号を教えることに抵抗を感じる人が増えています。フォームで電話番号を簡単に聞いてしまいがちですが、電話番号の入力エリアは安易に追加すべきではありません。

　例えば、メールマガジンの登録フォームに電話番号の入力エリアがあったら、ユーザーはどう思うでしょうか？「電話が掛かってくるかも…」という不安を抱いたユーザーは、フォームから離脱する可能性があります。

　必ずしも電話番号が必要ではないと判断できる場合は、電話番号の入力を省略したり、任意の入力項目にしてみてください。ユーザーの負担を減らすことで、フォーム完了率の改善につながります。

8. セレクトボックスは最小限にする

　セレクトボックス（プルダウン、ドロップダウンとも呼ばれる）は、選択肢が隠れてしまい、選択肢を選ぶのに2回クリック（またはタップ）する必要があります。選択項目が多い場合などは、器用なマウス操作が必要な場合もあり、フォームの入力操作を鈍らせる場合があります。

　可能であれば、セレクトボックスの代わりに、チェックボックスや、ラジオボタンを使用した方が、ユーザーの負担が少なく、フォームの入力スピードも速くなります。

　選択肢が6個以下の場合は、ラジオボタンの使用を検討し、複数選択の場合は、チェックボックスの使用を検討してみてください。

9. デフォルト値の設定は避ける

　フォームの入力エリアには、あらかじめデフォルト値を設定しておくことができます。一見、ユーザーの入力の手間を減らしているようにも見えますが、デフォルト値の設定には注意が必要です。

　ユーザーは、すでに入力済みの項目をそのままにして（デフォルト値のままにして）フォームを送信する場合があります。送信結果を受け取った側は、それが正しく選択されたものなのか、デフォルト値のままなのかを知ることはできません。時にそれがトラブルやクレームにつながることもあります。

　入力エリアでユーザーの大部分が同じ値を選択すると思われる場合を除いて、デフォルト値の設定は避けた方が良いでしょう。

10. CTAボタンのデザインは重要

　フォームのCTAボタンとは、フォームの送信ボタンのことです。CTAボタンのデザインは、ユーザーがフォームを送信するかどうかに影響するため非常に重要です。

ボタンのサイズ

　CTAボタンのサイズは、小さ過ぎても、大き過ぎてもいけません。小さい過ぎると見落とされてしまう危険性がありますし、大き過ぎると押し付けがましい印象を与えてしまう可能性があります。

　CTAボタンのサイズの決め方は、まずはWebサイト全体のデザインをよく観察してください。他にCTAボタンがある場合はそれも参考にします。

　次に、フォーム全体の横幅サイズに合わせて、最も自然に見えて、クリックしやすいボタンサイズ（横幅と縦幅）を検討してみてください。

ボタンの色

　ボタンの色についても、Webサイト全体のデザインをよく観察し、ブランドカラーや強調色として使用されている色をボタンにも使用すると自然に見えます。他にCTAボタンがある場合は、色を合わせても良いでしょう。

　また、CSSを使用して、ボタンのマウスオーバー時や、クリック時の色合いを変えることも効果的です。視覚的にボタンをクリックしたことが明確になりますので、押し忘れや、重複クリックを防止する効果もあります。

ボタンのテキスト

　ボタンに「送信する」「こちらをクリック」のようなテキストが表示されている場合、そのボタンをクリックした後に、一体何が起きるのか…少し不安に感じるユーザーがいるかもしれません。

　ボタンに表示するテキストは、例えば、「資料請求を申し込む」「プレゼントに応募する」「今すぐダウンロードする」などのように、ボタンをクリックしたらどうなるかが具体的にイメージできるテキストを表示すると良いでしょう。

　また、ボタンのサイズや色に合わせて、読みやすいフォントサイズ、フォントカラー、フォントフェイスを使用することも大切です。

まとめ

　いかがでしたでしょうか。最適なフォームの形は、それぞれのフォームごとに異なり、また正解も１つではありません。大切なことは、ビジネスの目標を達成するために必要なフォーム項目が揃っていること、そしてユーザーにとって、理解しやすく、入力しやすいフォームを作成することです。

　本記事でご紹介したフォーム作成のポイントを参考にしながら、皆さまのWebサイトに設置されているフォームの最適化に取り組んでみてください。

　また、以下の記事でも、フォーム作成に欠かせない5つのポイントをご紹介しています。本記事では取り上げていないポイントを解説しています。あわせてチェックしてみてください。