問い合わせや資料請求等の際に入力するフォームは、作り方ひとつで入力完了率は大きく変わると言われています。入力フォームは基本的な情報を入力するだけの箱と思われがちですが、実は奥が深いのです。

ユーザーがストレスを感じることなく最後まで入力完了させるためにはデザイン面での工夫が必要になります。まずは、どのような目的の入力フォームを用意するのかを深堀りした上で、目的に沿った項目を用意します。

さらに、一般的に優れている入力フォームのコツを押さえれば、ユーザーにとって入力しやすく入力完了まで導きやすい入力フォームを作成できます。本稿では、入力フォームを作成する際の13のコツについてご紹介します。

HubSpotならHTMLやCSSの知識がなくても、ドラッグ&ドロップで簡単にフォームが作成可能

入力フォームの作り方

入力フォームを作成する際に、事前に考えておきたいのは以下の3点です。

  • 目的を明確化
  • 入力フォームに入力するユーザーのペルソナを設定
  • 出力イメージを持ちながら入力欄を作成

ユーザーに設定しているゴールまで到達させるのはもちろん、利便性を考慮してデザインを工夫することも大切です。

目的を明確化

まず、入力フォームの目的を確認しましょう。「商品やサービスに関するお問い合わせ」のための入力フォームなのか、「見込み客や顧客を獲得する」ための入力フォームなのか、あるいは「直接商品やサービスの注文を受け付ける」ための入力フォームなのかによって目的は異なります。

商品やサービスに関するお問い合わせ入力フォームであれば、「誰が」「どのような商品やサービス」「どのようなお問い合わせ」なのかをしっかりと把握する必要があります。例えば、お問い合わせであれば、目的はユーザーのお問い合わせ内容を正確に把握し、回答するための情報を取得することです。

一方、資料請求や見積もり請求など、見込み客や顧客を獲得することを目的とする入力フォームの場合には、「商品やサービスに関するお問い合わせ」に比べて具体的な項目を決めて入力してもらう必要があります。例えば、資料請求が目的の入力フォームで紙の資料をユーザーに郵送する場合、郵便番号と住所の入力が必須です。

このように、目的によって入力フォームの作り方は大きく変わるため、入力フォーム作りに入る前に作成する入力フォームの目的を明確にしておきましょう。

入力フォームに入力するユーザーのペルソナを設定

入力フォームに入力するターゲット層のペルソナを明確にしておくようにしましょう。商品やサービスを購入したいのか、資料請求や見積り依頼をしたいのか、年齢は何歳くらいか、女性と男性のどちらの割合が多そうなのかなど、入力フォームに入力するユーザーのペルソナをイメージしておきましょう。

入力フォームに入力するユーザーによっては、取得すべき情報も変わってきます。会社員が会社でツール導入を検討するための問い合わせや資料請求を行うための入力フォームであれば、場合によっては会社名や部署名を入力してもらう必要もあります。

出力イメージを持ちながら入力欄を作成

入力フォームに入力してもらった情報を最終的にチェックするのは、Webサイトの運営者やマーケティング担当者など入力フォームを作成した人とは異なる担当者になる場合もあります。

せっかく入力フォームを作成して入力してもらっても、入力フォームに入力された情報を確認した際に次のアクションに必要な情報が足りていなかったり、入力時のエラーが修正されていなかったりして、ユーザーの情報を正確に集められなくては意味がありません。

入力された情報が出力された際のイメージをしっかりと持った上で、入力欄を作成するようにしてください。

入力フォームはデザインが重要?

入力フォームを設置すれば、あとは放っておけばユーザーがお問い合わせや資料請求をしてくれる、というわけではありません。

ユーザーは極端に多い入力項目を見たり、入力フォームへの入力作業中にストレスを感じたら、その場で離脱してしまうからです。

せっかく途中まで入力フォームに入力をしてくれたとしても、最終的に離脱してしまえばサービスの購入や資料請求、見込み客の獲得を逃すことになってしまいます。

どんなに良いWebサイトを作っても、使いやすいデザインの入力フォームを作らなければ成果に結びつかないのです。そのため、ユーザーにとって極力不便がなくストレスを感じないユーザーライクな入力フォームをデザインすることが重要になります。

入力フォームのデザインするときの13のコツ

実際に入力フォームを作成する際の13のコツは以下の通りです。

  1. 入力させる情報は最小限に
  2. 入力フォームは縦一列に配置
  3. チェックボックスを縦一列に配列
  4. 項目名や設問はラベルで表示
  5. 完了までのステップを表示
  6. CTAは「どんなアクションにつながるか」が分かる表現に
  7. エラー表示はインラインで表示
  8. ヘルプテキストはデフォルトで表示
  9. 入力フォームの幅を適切に設定
  10. 入力完了されたことを視覚的に表示
  11. 任意の項目はマーカーではなく「任意」と表示
  12. 項目の「必須」「任意」を明確に表示
  13. 情報をグループ化

ここからはそれぞれの詳細について確認してみましょう。

1. 入力させる情報は最小限に

b→dash概要資料 | LISKUL DL | 資料ダウンロードサイト

入力する項目が増えるとユーザーは離脱しやすくなります。

ユーザーが「時間がかかりそうで面倒だ」と感じたり、初めて訪れたサイトに個人情報を入力するのに心理的抵抗があったりする場合があります。

マーケティング担当者としては見込み客を獲得できると意識すると細かい情報を入れたくなりますが、必須項目は極力減らして、まずはユーザーに入力完了してもらうことを優先させましょう。

例えば、メールマガジンの登録であれば住所の記載は必要ないかもしれません。
ユーザーの心理も踏まえた上で、不要な項目がないか確認しておきましょう。

2. 入力フォームは縦一列に配置

産地直結の東都生協|おいしさを試そうキャンペーン

入力フォームは上から下へスクロールする導線に沿って設計すると利用しやすくなります。また、スマートフォンは画面が小さいこともあり縦一列配置は必須です。

入力フォームのデザインが2カラム構成で左右に分かれているケースを例に挙げましょう。入力項目が2カラムだと下以外に左右に視線移動する必要が生じるため、視線の動きが複雑になることでユーザーはストレスを感じて離脱しやすくなります。

3. チェックボックスを縦一列に配列

資料請求(お客さま情報の入力) | ライフネット生命保険

入力フォームを縦一列に配置する際にはチェックボックスも縦に並べましょう。1スクロール内にチェック項目が収まっていると比較しやすく、ユーザーのストレスを軽減できます。

4. 項目名や設問はラベルで表示

入力フォームのプレースホルダを使ってはいけない – U-Site

スペース省略のために、住所や電話番号などの項目のラベルの情報をテキストボックス内に表示されるプレースホルダテキストとして利用している場合があります。

しかし、ユーザーがテキストボックスになにか値を入力するとプレースホルダテキストの文字は消えてしまいます。そのため、入力例や入力のヒントの説明以外ではプレースホルダテキストを利用しないようにして、項目名や設問はラベルで表示させましょう。

5. 完了までのステップを表示

資料請求|モード学園

入力フォームのページが複数ある場合、画面上部に入力の流れが把握できる内容を表示させましょう。

ユーザーが「あとどれくらい入力すればいいのか」がひと目で分かり、入力完了までのモチベーションを上げられます。

6. CTAは「どんなアクションにつながるか」が分かる表現に

住まい情報入力 | ネットで一括見積もり【LIFULL引越し(旧HOME'S引越し)】

入力フォームの入力完了後はそれぞれ会員登録や購入などのページに遷移します。

CTA(Call-To-Action)となるボタンには「無料登録する」「購入する」など、入力完了後に具体的に何が起こるのか示すと、ユーザーがスムーズに入力完了まで進めやすくなります。

フォームの入力完了時に押すボタンに特典の内容などユーザーに分かりやすいメリットを入れるのも効果的です。

7. エラー表示はインラインで表示

アコム | インターネットからのお申し込み

入力ミスがあった場合にはエラー内容を対象項目のすぐ近くに表示するのが一般的です。

また、すべての項目を入力し終わった後ではなく、入力したその場で気付いてもらうことで、入力完了後に該当の項目まで遡って修正する手間を減らせます。

8. ヘルプテキストはデフォルトで表示

会員規定への同意 | SOMPO Park

ヘルプテキストは「全角で入力」など、入力フォームに入力する形式を指し示したりヒントを与えたりするものです。

ポップアップ表示にしているとクリックする手間が掛かるので、最初から表示させておくのが好ましいです。

9. 入力フォームの幅を適切に設定

アパート経営・賃貸経営・不動産投資セミナー| シノケン

ユーザーにとって視認性が良く、違和感を感じないデザインにするためには、入力フォーム全体の幅や各項目の幅も工夫する必要があります。

特にスマートフォンでは、入力項目のスペースが狭いと入力しづらく押し間違えが発生することもあります。

パソコンで入力フォームを作成するのであれば、スマートフォンでも視認性に問題がないかどうかを確認しましょう。

また、項目そのものも郵便番号や電話番号など、入力する文字数が決まっている場合はピッタリと収まる幅に調整しておくとより分かりやすいです。

10. 入力完了されたことを視覚的に表示

EFO(エントリーフォーム最適化)ツール|【GORILLA EFO】「2019年最新版」

入力が完了した項目が視覚的に確認できると、入力完了までのユーザーのモチベーションが上がります。

入力完了後に項目の背景色が変わったり、入力した項目にチェックが入るような仕様があると分かりやすいです。

11. 任意の項目はマーカーではなく「任意」と表示

EFO(エントリーフォーム最適化)ツール|【GORILLA EFO】「2019年最新版」

入力項目の必須・任意の箇所に「*」と記号だけ入力されている場合がありますが、ひと目で何を表しているのか理解できないため「必須」や「任意」のように入力条件をラベル部分に記載しましょう。

12. 項目の「必須」「任意」を明確に表示

EFO(エントリーフォーム最適化)ツール|【GORILLA EFO】「2019年最新版」

入力完了し、フォーム下部のCTAを押したタイミングで未入力の欄に「この項目は必須です」とエラーメッセージが表示されるようでは、ユーザーのストレスになります。

必須なのか任意なのか、各項目ごとに記載したり項目の縁取りの色を変えたりしてユーザーがひと目で分かるように設定しておきましょう。

13. 情報をグループ化

資料請求(お客さま情報の入力) | ライフネット生命保険

住所や電話番号などの個人情報、セミナーの日程や購入する商品の選択など、関連する情報ごとに入力項目がまとまっていると、ユーザーの入力もスムーズになります。

まとめ:ユーザーにとってストレスの少ない入力フォームを作ろう

入力フォームは、最適化されると会員登録や購入などのコンバージョンは達成されやすくなります。

入力フォームを作成・改善する際には、目的を意識してユーザーにとって使いやすいかどうか考えることが重要です。

入力フォームの入力項目は商品・サービスの種類によってさまざまですが、コンバージョン率を向上させるために「ユーザーの入力ストレスを極限まで軽減する」という考え方は共通しています。

入力フォーム画面まで到達しているユーザーは商品やサービスへの関心度が高いため、画面から離脱させてしまうのはとてももったいないことです。

離脱率の少ない入力フォームにするための13のコツは、デザインする上で必ず押えておきたいポイントです。今回ご紹介した13のコツを実践して、ユーザーをゴールまで到達させられる入力フォームをデザインしてみましょう。

HubSpotならHTMLやCSSの知識がなくても、ドラッグ&ドロップで簡単にフォームが作成可能

元記事発行日: 2020年2月11日、最終更新日: 2020年2月12日

トピック::

フォーム