4 min remaining

Webサイトに設置されるフォームは、商品やサービスへの問い合わせや資料請求、見積り依頼など、ビジネスにおいて重要な役割を担っています。

簡単に手早く入力できなければ、ユーザーは途中で離脱したり、そもそも入力しようとさえしてくれなくなる場合もあります。

フォームを作成したことのない方は「使いやすいフォームを作るのは難しそう」だと感じるかもしれません。実はフォームのデザインを少し改善するだけで、成果を向上させられる可能性があるのです。

本記事では、ユーザーにとって使いやすいフォームデザインを作るコツについて事例付きで解説します。

ドラッグ&ドロップで簡単に作成できる無料フォーム作成ツール

「誰向けの」フォームなのかを明確にする

フォームのデザインはウェブサイト全体のコンバージョン率に大きく影響を与えます。ただ、フォームの最適なデザインはターゲットによって変わります。まずはターゲットは誰なのかを明確にするため、ペルソナ(理想的な顧客像)を作成しましょう。

ペルソナ作成の第一歩は、職業や家族構成などの背景、性別や年齢などのデモグラフィックなデータ、行動特定のパターンを洗い出すことから始まります。

そこからさらにペルソナの目標や課題を設定し、自分たちはどのように課題を解決できるかを明確にしましょう。

以下のページで「ペルソナの作り方」を詳しく解説していますので、ペルソナ設定を行う際には参考にしてみてください。

5分で分かる『ペルソナ』の作り方|現代のマーケティングに欠かせない手法を徹底解説

ペルソナを念頭に置けば、「どのような色味が良いのか」「どのような質問を配置するべきか」など、適切なフォームデザインを設計しやすくなります。
 

離脱を防ぐために最低限押さえておきたい6つの注意点

ペルソナを設計し、ターゲットユーザーを具体的にイメージできたら、彼らに最後まで入力してもらえるフォームデザインについて具体的に考えてみましょう。

作成側としては「このような情報を盛り込むと良いかも」「このようなデザインを入れた方が見やすい」というように、プラスする方向で考えてしまいがちです。しかし、実際は引き算がとても大事です。まずは、「ユーザーにとってストレスがないか?」を考え、どれだけシンプルな設計にできるかを考えてみましょう。

シンプルでわかりやすいフォームデザインを設計する上で気をつけるべきなのは、以下の6つのポイントです。

  1. 個人情報に関する入力項目は極力減らす
  2. 一覧性を重視する
  3. CTAは「どんなアクションにつながるか」が分かる表現にする
  4. エラー表示は該当箇所のすぐ下で表示する
  5. 「*」ではなく「任意項目」「必須項目」と表示する
  6. フォームを極力短くする
     

1.  個人情報に関する入力項目は極力減らす

お問い合わせ内容の入力 | au お問い合わせフォーム | au

初めて訪れたサイトや情報の乏しいサイトに個人情報を入力するのに、抵抗を感じたことはありませんか?個人情報を悪用されたり、望んでいないのにいつの間にか大量のメールや手紙が届くようになってしまうのは避けたいものです。

フォームの目的を明確にした上で、本当にこの情報を取得する必要があるのか精査しましょう。例えばメルマガを購読するフォームの場合、住所や電話番号などを必須で入力する必要はないはずです。
 

2.フォームの一覧性を重視する

ファッション・服飾・美容の専門学校|モード学園(東京・大阪・名古屋・パリ)

フォームが1スクロール内に収まっている、一目で入力量がわかるなど、ユーザーが全体を把握しやすいデザインを心がけましょう。

あとどれだけ入力すれば良いかわからないとモチベーションが下がり、離脱しやすくなります。上の画像のように完了までのステップが示されているとモチベーションが保たれやすく、入力完了率が上がりやすくなります。
 

3. CTAは「視認性」を重視

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

CTA(Call-to-Action)とは次の行動を促すための導線です。フォームの場合、必要項目を記入してもらっても最後のCTA(資料を請求する、問い合わせるなど)をクリックしてもらえなければ意味がありません。誰でも確認できるぐらいの大きさや色のCTAボタンを配置しましょう。
 

4. エラー項目は視認性を高める

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

入力完了時にエラーが出ただけでもストレスに感じると思います。その上、エラーの場所がすぐに分からないとよりストレスを感じ、離脱しやすくなってしまいます。エラー表示は該当の項目のすぐ近くに設置し、入力枠内の色を変えるなどして視認性を高めておきましょう。
 

5. 必須項目には「*」「※」などの記号ではなく「任意」「必須」と表示する

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

必須と任意の違いがわかりにくいと必須項目を飛ばしてエラーが発生し、ユーザーのモチベーションが下がってしまいます。必須項目を見分けるために「*」「※」などの記号がついているものもありますが、ユーザーによってはそれらが何を表しているのか理解できない場合があります。

一目で必須項目かどうかわかるよう、各項目に「必須」「任意」と表示しておくのが良いでしょう。
 

6. フォームは極力短くする

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

「2. フォームの一覧性を重視する」とも通じますが、できる限りフォームは短く簡潔にしましょう。一般的に、フォームが長ければ長いほど入力するのが面倒に感じてしまいます。

つい少しでも多くの質問を盛り込みたくなってしまいますが、自分たちの都合を優先するほど入力完了率は下がっていくでしょう。

一般的に入力フォームの項目の数は5~10個が適切だと言われています。入力項目を減らすには、まず必須項目を厳選する必要があります。項目を減らすのと同時にフォームが縦に長くならないようにCSSでフォームの長さや幅を調整しましょう。

また、ユーザーに文字を直接入力させるのではなく、プルダウンやラジオボタンで選択するタイプに変えてユーザーの負担を減らすのも有効です。
 

参考にしたいフォームのデザイン例

ここからは、優れたフォームデザインの例をご紹介します。
 

GORILLA EFO(情報通信業)


エントリーフォーム改善ツールの申し込みのためのフォームです。

フォームが1スクロールで収まる長さでゴールとなるCTAが見えているので、ユーザーの入力完了までのモチベーションが保たれやすくなっています。必須と任意が異なる色のラベルで区分けされていて、どこを入力すればいいのか一目で分かりやすくなっています。
 

LISKUL(情報通信業)

Webマーケティングツールの資料請求のためのフォームです。

すべて必須項目ですが、項目が4つのみでシンプルに構成されています。CTAも視認性が高く、目的が明記されており、ユーザーの入力完了率を上げる工夫がされています。
 

LIFELL 引っ越し(不動産業)

引っ越し費用の見積もりのためのフォームです。

プルダウンやラジオボタンを用意して、ユーザーの入力する負担を少なくしています。フォームはさらに下にも項目が続きますが、内容ごとにグループ分けされていたり、必須と任意が分かりやすく色分けされていたりといった工夫が見られます。
 

Shinoken(不動産業)

不動産セミナー申込のためのフォームです。

必須項目が未入力だと背景色の色が変わる工夫がされていて、入力中にエラーにユーザーが入力すべき項目に気づくように工夫されています。また、CTAにも「未入力の必須項目があります」というようにエラー表示されるため、ユーザーの離脱を未然に防いでいます。

以上のフォームからデザインの特徴を参考にし、フォーム改善のヒントにしてみてください。
 

まとめ:ユーザーを起点としたフォームデザインを

フォームをデザインする際は「ユーザーがいかに負担を感じずに入力できるか」が鍵です。

今回ご紹介したフォームデザインのポイントは、多くの人が負担に感じるであろう部分です。この6つを最低限おさえた上で、自分たちのユーザーにとってわかりやすく入力しやすいフォームはどのようなデザインなのか、ペルソナを踏まえた上で検証を重ねましょう。

そもそも、フォーム形式にこだわる必要もないかもしれません。ユーザーによってはチャットボットの方が使いやすい可能性もあります。全てをユーザー起点で考えれば成果に繋がるはずです。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

hubspot_form

元記事発行日: 2020年3月31日、最終更新日: 2020年5月15日

トピック::

フォーム