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

→今すぐチェック: サクッと作れる!フォーム作成無料ツール

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

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

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

お問い合わせフォームのデザイン設計を重視するべき理由

あなたは、大量の入力項目がと並んでいるお問い合わせフォームを見たときに、モチベーションが削がれることはないでしょうか?

よほど問い合わせる内容に興味がある場合を除いて、ほとんどの人が入力する前にお問い合わせフォームを閉じてしまうでしょう。また、入力を始めたとしても、入力途中であきらめてしまう可能性も高くなってしまいます。

ただ作成して設置しておけばコンバージョンにつながるというものではありません。

お問い合わせフォームを作成する際には、ユーザーのモチベーションを落とさないような、負担の少ないよう配慮しなければいけません。

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 個人情報に関する入力項目は極力減らす
  2. 一覧性を重視する
  3. CTAは「どんなアクションにつながるか」が分かる表現にする
  4. エラー表示は該当箇所のすぐ下で表示する
  5. 「*」ではなく「任意項目」「必須項目」と表示する
  6. フォームを極力短くする
  7. 目的を明記する
  8. 送信ボタンをわかりやすく
  9. スマホ対応ができているか確認
     

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

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

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

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

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

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

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

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

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

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

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

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でフォームの長さや幅を調整しましょう。

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

7.目的を明記する

目的を明記する

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

入力完了率を上げるためには、ユーザーが途中で迷わないよう、フォーム入力の目的(入力することで何が得られるか)を明記してくとよいでしょう。

例えば、上記の「簡単フォーム入力で今すぐダウンロード!」という表記は、ぱっと見ただけで、資料をダウンロードするという目的のために、いくつかの入力を行えばよいことがわかります。

お問い合わせフォームで目的を明記する場合には、「3.CTAは「視認性」を重視」に示した対応を同時に行うとより効果的です。
 

8.送信ボタンはできるだけわかりやすく

「3. CTAは「視認性」を重視」でも説明しましたが、ユーザーに入力してもらっても、最後の送信ボタンを押してもらえなければ意味がありません。

そのため、ユーザーが入力完了後にクリックする送信ボタンはわかりやすくしておきましょう。送信ボタンをわかりやすくしておくためには、以下のような方法が効果的です。

  • ボタンを大きくする
  • 色や形を工夫して分かりやすくする
  • 「送信」などのボタンのテキストを大きくする
  • キャンセルボタンやクリアボタンを近くに配置しない

最後のキャンセルボタンやクリアボタンなどは、送信ボタンの近くに配置してしまうと、ユーザーが間違ってクリックしてしまい離脱につながってしまったり、最終的に送信をやめてしまったりする可能性があります。

そのため、どうしても配置しなければならない場合には、送信ボタンからなるべく離れた位置に配置しましょう。

送信ボタンはできるだけわかりやすく

アカウント|hulu
 

送信ボタンとキャンセルボタンを配置している例

送信ボタンとキャンセルボタンを配置している例

メールでのお問い合わせ | サポート・お問い合わせ | ソニー
 

9.スマホ対応ができているか確認

いまやスマートフォンでインターネットを利用する人の割合が全体の8割を超えています。そうした現状を踏まえると、お問い合わせフォームのスマートフォン対応は無視できません。

スマートフォンへの対応を行っていないお問い合わせフォームは、PCで利用することを前提としています。そのため、スマートフォンで利用した場合、非常に見づらかったり入力しづらかったりしてしまいます。

また、スマートフォンは端末ごとに画面の大きさも違うため、場合によってはレイアウトが崩れてしまうなどの不都合もおこります。

このような問題を解消して、お問い合わせフォームをスマートフォンへ最適化させるためには、お問い合わせフォームにレスポンシブデザインを取り入れるとよいでしょう。

なお、当社HubSpot(ハブスポット)のフォーム機能(無料で利用可能)は、デフォルトでレスポンシブデザインに対応しています。
 

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

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

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

GORILLA EFO(情報通信業)

GORILLA EFO(情報通信業)

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

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

LISKUL(情報通信業)

LISKUL(情報通信業)

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

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

LIFELL 引っ越し(不動産業)

LIFELL 引っ越し(不動産業)

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

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

Shinoken(不動産業)

Shinoken(不動産業)

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

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

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

フォーム入力後のサンクスページのデザインも統一

無事にお問い合わせフォームが完成したら、フォーム入力後のサンクスページにもこだわってみましょう。

サンクスページは自社の製品などに興味を持って問い合わせをしてくれたユーザーに表示される画面です。

せっかく獲得した見込み客の自社に対する信頼や好感度を高めるためにも、お問い合わせフォームとサンクスページのデザインは統一しておきましょう。そのためには、常にユーザーライクな視点でデザインすることを心がけなければいけません。

例えば、お問い合わせに対するサンクスページであれば、「いつまでに返信するのか」やお問い合わせ後の流れを記載しておくことで、ユーザーの不安が解消され、信頼にもつながります。

また、サンクスページは売上アップなどにつながる大切なページでもあります。SNSシェアボタンを設置したり、メルマガの購読を促してみたりすることで、さらに大きな成果につなげることができるかもしれません。
 

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

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

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

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

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

 

無料のフォーム作成ツール

 フォーム作成ツール

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

トピック::

フォーム