問い合わせや資料請求をするために欠かせない入力フォーム。顧客との接点を簡単に作り出せる一方で、「入力すべき項目数が多い」「エラー内容が分かりづらい」といった要因一つでページからの離脱につながってしまいます。

→ダウンロード: 顧客満足度アンケート作成に役立つ無料テンプレート5選

入力フォームのデザインを考えるうえでもっとも重要なのはユーザビリティです。ユーザビリティの高い入力フォームを作成するには、ステップ表示やエラー内容のインライン表記といった、デザイン面での工夫が大切です。

本記事では、入力フォームをデザインするときの17のコツを解説します。

顧客満足度アンケート作成に役立つテンプレート5選

なぜ入力フォームでデザインを重視するべきなのか?

なぜ入力フォームでデザインを重視するべきなのか?

まず、入力フォームにおけるデザインの重要性を確認しておきましょう。ちなみに、ここで言及するデザインとは、色使いや装飾だけを指すものではありません。質問項目の配置方法や質問内容など、ユーザビリティを左右する要素全般を指すものです。

仮にユーザーが入力フォームまで辿り着いたとしても、必ずしも入力をすべて完了してもらえるわけではありません。極端に多い入力項目を見たり、入力フォームへの入力作業中にストレスを感じたりしたら、ユーザーはその場で離脱してしまいます。

入力フォームを利用するということは、ユーザーが自社の製品やサービスにある程度関心を持っている証拠です。そのため、入力途中での離脱は企業の機会損失につながってしまいます。また、ユーザー自身も目的を達成できないことになるため、企業とユーザー双方にとってメリットがありません。

入力フォームは極力不便がなくストレスを感じないユーザーライクなデザインにすることが重要です。
 

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

入力フォームをデザインする際には、外してはならない黄金ルールがあります。ここからは、入力フォームをデザインするときの17のコツを1つずつ解説します。

  1. 入力してもらう情報は最小限に
  2. 入力フォームは縦一列に配置
  3. チェックボックスを縦一列に配置
  4. 項目名や設問はラベルで表示
  5. 完了までのステップを表示
  6. CTAは「どんなアクションにつながるか」が分かる表現に
  7. エラー表示はインラインで表示
  8. ヘルプテキストはデフォルトで表示
  9. 入力フォームの幅を適切に設定
  10. 入力完了されたことを視覚的に表示
  11. 任意の項目はマーカーではなく「任意」と表示
  12. 項目の「必須」「任意」を明確に表示
  13. オートコンプリート機能を活用する
  14. 情報をグループ化
  15. モバイル、スマホ対応を考える
  16. 一度自分で使ってUIを確認
  17. EFOで検証と改善を繰り返す
     

1. 入力してもらう情報は最小限に

1. 入力してもらう情報は最小限に

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

入力する項目が増えると手続き完了までに多大な労力と時間を必要とするため、ユーザーの離脱率が高まります。入力フォームから見込み客を創出したいマーケティング担当者の視点になると、細かい情報を含めたくなるものですが、必須項目は極力減らし、まずはユーザーに入力完了してもらうことを優先させましょう。

たとえば、メールマガジンの登録フォームであれば、会社名や会社の所在地といった情報は省き、メールアドレスのみに項目を絞り込むのも方法の一つです。
 

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

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

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

入力フォームを縦一列に配置することで、画面を上から下へ自然な導線でスクロールできます。特に画面の小さいスマートフォンの入力フォームは、配列が増えると文字が見えづらくなるため、縦一列配置の対応は必須です。

次のように、工夫次第で縦二列でも画面にすっきりと収まる場合もあります。

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

フォームが縦二列の場合でも画面の横幅に合うようなら、フォーム全体を一目で確認できるメリットがあります。フォームを設置する環境に合わせて柔軟にカラム構成を考えましょう。
 

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

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

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

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

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

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

引用元:無料説明会予約|ヒューマンアカデミー

プレースホルダテキストとは、入力欄にあらかじめ表示される文章のことです。スペース省略のため、項目のラベル部分に住所や電話番号など入力すべき情報の例をプレースホルダテキストとして利用している場合があります。

プレースホルダテキストがあると入力内容が一目で確認できて便利ですが、入力欄に文字を記載するとプレースホルダテキストの内容が消えてしまいます。そのため、入力例や入力のヒントの説明以外ではプレースホルダテキストを利用しないようにして、項目名や設問はラベルで表示させましょう。
 

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

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

引用元:資料請求|モード学園

入力フォームのページが複数ある場合、現在のページが分かるよう画面上部に「ステップ表示」を設定しましょう。「あとどれくらい入力すれば良いのか」という目安が確認できるようになり、入力完了までのモチベーションを高められます。
 

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

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

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

フォームへの入力が完了した後は、会員登録や購入などを行うページに遷移します。CTA(Call-To-Action/行動喚起)となるボタンには「次へ」といった抽象的な案内ではなく、「無料で会員登録する」「商品を購入する」など、入力完了後に具体的に何が起こるのか示すと、ユーザーが入力完了まで進む動機付けになります

LIFULL引越しの例では、CTAボタンに「条件に該当する引越し会社を検索する」と記載されており、ボタンをクリックした後のアクションが非常に具体的です。特典の内容やプレゼントなどユーザーに分かりやすいメリットを入れるのも良いでしょう。
 

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

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

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

情報を記載中に入力ミスがあった場合、エラー内容は入力欄のすぐ近くに表示しましょう。

入力フォームによっては、CTAボタンを押した後にエラー内容一覧が表示されるタイプもありますが、再びエラー対象の入力欄まで戻らなければならず手間がかかります。エラー内容をインラインで表示することで、ユーザーが情報を記載した直後に誤りに気付けます
 

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

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

引用元:会員規定への同意 | SOMPO Park

「全角で入力してください」といったヘルプテキストは、フォーム上に記載しておきましょう。ヘルプテキストをポップアップ表示にしている場合、クリックする手間がかかってしまうためです。
 

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

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

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

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

特にスマートフォンの場合、入力項目のスペースが狭いと入力しづらく、押し間違いが発生することがあります。パソコンから入力フォームを作成するのであれば、必ずスマホサイトから視認性の検証を行い、適切な幅が設定されているかを確認しておきましょう。
 

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

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

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

入力フォームには、入力が完了したことを視覚的に表示するアシスト機能があると便利です。参考画像では、未入力の項目は背景がピンク色に塗りつぶされ、入力が完了すると色が白くなり、さらにチェックマークが表示されています。このように入力が完了した項目が視覚的に確認できると、入力完了までのユーザーのモチベーションが高まります。
 

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

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

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

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

任意項目についても「任意」と表記することをおすすめします。任意項目が一目で分かると省略できる項目が明確になり、CTAボタンに辿り着くまでの時間を短縮できます。
 

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

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

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

必須項目や任意項目は、差が分かりやすいようにデザインを工夫しましょう。参考画像のように任意項目はグレーのラベルを使い、必須項目は目立ちやすい赤やピンクのラベルを使うと効果的です。
 

13. オートコンプリート機能を活用する

13. オートコンプリート機能を活用する

引用元:新規申し込み|au Online Shop

オートコンプリートとは、入力候補を予測して表示させる機能です。入力履歴を基に氏名やメールアドレス、電話番号などの候補を表示させるほか、郵便番号を入力するだけで住所を自動入力できる場合もあります。メールアドレスや住所といった入力に時間がかかるような項目は、できるだけオートコンプリート機能を搭載するようにしましょう。
 

14. 情報をグループ化

14. 情報をグループ化

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

個人情報の入力や購入商品の選択など、特定のカテゴリーごとにグループ化を行うとフォーム全体が見やすくなります。参考画像では、「ユーザーの属性」や「連絡先」、「保険に関する質問」などのグループごとに枠を区切っています。
 

15.モバイル、スマホ対応を考える

SEOツールを提供するドイツ企業のSISTRIXの調査(英語)によると、日本の検索ユーザーの内、スマートフォンから検索を実行するユーザーは全体の75.1%を占めます。そのため、入力フォームをデザインする際にモバイル対応は必須です。

モバイル端末は、モデルによって画面の大きさが異なります。各端末に最適なレイアウトで入力フォームを表示させるためには、レスポンシブデザインを取り入れると良いでしょう。レスポンシブデザインを導入することで、画面の幅に応じて最適なレイアウトが自動的に表示されるようになります。

なお、当社HubSpotが提供するフォーム作成ツールは無料で使用可能で、レスポンシブデザインにも対応済みです。パソコンやスマートフォン、タブレットなどあらゆるデバイスでの表示を自動的に最適化します。
 

16.一度自分で使ってUIを確認

一連のデザインが完成したら、必ず自分で入力フォームを使ってUIを確認しましょう

フォーム入力を完結してもらうためには、ユーザーの入力ストレスを極限まで軽減しなければなりません。実際に自分で入力フォームを使ってみることで、入力しづらい箇所や見づらい箇所など、ユーザーがストレスを抱えやすいポイントを見つけられます。

また、スマートフォンやタブレットなどの実機を使って入力フォームを表示させるのも効果的です。フォームのデザインをするときには気付かなかった表示のズレや不具合などが発見できるかもしれません。

当社HubSpotのフォーム作成ツールでは、各端末でのプレビューを簡単に確認できます。
 

17.EFOで検証と改善を繰り返す

入力フォームのデザインが完了した後はEFOを実施し、さらに良いフォームになるよう改善を行いましょう。

EFOとは、ユーザーが使いやすい入力フォームになるよう最適化する施策です。実際にフォームを運用するなかでクリック率やコンバージョン数などの効果を検証し、細かい要素を修正して改善を繰り返します

EFOについては以下の記事で詳しく解説しています。入力フォームを改善する具体的な施策や事例などを知りたい方は、ぜひ記事をご覧ください。

入力フォーム作成の3ステップ

入力フォーム作成の3ステップ

入力フォームは次の3ステップで作成します。

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

それぞれのステップごとに入力フォームの作成方法を解説します。
 

1.目的を明確化

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

  • 商品やサービスに関するお問い合わせ

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

  • 資料請求や見積もり請求などで見込み客や顧客を獲得する

    お問い合わせフォームに比べて具体的な情報を入力してもらう必要がある。たとえば紙の資料をユーザーに郵送する場合には、郵便番号と住所の情報が必須。複数の資料がある場合には、そのユーザーに合った資料を送付できるよう会社名や所属部署などを入力してもらう。

  • 直接商品やサービスの注文を受け付ける

    さらに詳細な情報入力が必要。住所や電話番号はもちろん、ユーザーが求めているものを知るために商品の色やサイズ、発送時期といった項目が必須。数多くの情報を入力する場合が多いため、必須項目の明確化やオートコンプリートなど手間を省ける工夫が必要となる。

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

2.入力フォームを利用するユーザーのペルソナを設定

フォームに入力するターゲット層のペルソナを明確にしておきましょう。ターゲットとなるユーザーの年齢は何歳くらいか、女性と男性のどちらの割合が多いかなど、ユーザーの属性や興味関心を基にイメージを膨らませます。

ペルソナが必要な理由は、フォームを利用するユーザーの属性や興味関心により取得すべき情報が変わってくるからです。たとえば、「複数のMAツールを検討している企業の購買担当者」がターゲットだとすると、問い合わせフォームや資料請求フォームには会社名や社内メールアドレスを入力してもらう必要があります。
 

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

入力フォームをデザインする際は、あらかじめ出力イメージを持ちながら各項目を作成しましょう。ときにはフォームに入力された情報を確認した際、次のアクションに必要な情報が足りていないといったケースも起こり得ます。

可能であれば、最終チェックの担当者をフォーム作成者とは別に設定し、フィードバックをもらいながら改善すると良いでしょう。
 

入力フォームを作成するための3つの方法

入力フォームを一からデザインするには、以下のような3つの方法があります。

  • コーディングでフォームを自作する
  • WordPressのプラグインを活用する
  • フォーム作成ツールを利用する

それぞれの作成方法にはメリットとデメリットがあるため、特徴をよく理解して最適な方法を採用しましょう。
 

コーディングでフォームを自作する

HTMLやCSS、PHPなどコーディングによってフォームのレイアウトやデザインを作成する方法です。プログラミングやコーディングの高度な知識が求められるものの、自分が意図した通りのデザインが完成します。社内に必要なリソースが整っている場合に最適です。ただし、一からプログラミングやコーディングの知識を学ぼうとすると時間がかかるため、その場合は以下2通りの方法をおすすめします。
 

WordPressのプラグインを活用する

すでにWordPressを導入しており、そのサイトにフォームを設置している場合には、プラグインを活用してみましょう。WordPressでは、「Contact Form 7」や「MW WP Form」といった無料でフォームを作成できるプラグインが利用できます。プログラミングの知識がなくても利用できるのが利点です。
 

フォーム作成ツールを利用する

プログラミングを行えるリソースが不足しており、なおかつWordPressを導入していない場合には、フォーム作成ツールを活用してみましょう。プログラミングの知識が要らず、WordPressのプラグインよりも使いやすいものが多いため、フォーム作成に不慣れな方におすすめです。豊富な機能を搭載した有料ツールが多いものの、中には無料ツールや無料プランを展開するサービスもあります。
 

簡単にフォームを作成できるおすすめツール

簡単にフォームを作成できるおすすめツール

無料で利用できるおすすめのフォーム作成ツールは、以下の3つです。いずれも豊富な機能を搭載しており、UIにも優れています。

  • Google フォーム
  • HubSpot CRM
  • formrun

ほかにも無料のフォーム作成ツールを検討したい方は、以下の記事をご覧ください。この記事では11種類の無料ツールを取り上げ、それぞれのメリットやデメリット、料金プランなどを詳しく解説しています。

Google フォームのデザインをカスタマイズする方法

数ある無料フォーム作成ツールの中でも、特におすすめなのがGoogle フォームです。Googleアカウントがあれば、誰でも簡単にフォームを作成できます。また、Googleスプレッドシートと連携することで、回答結果を自動的に集計できる点も魅力です。

Google フォームでは、管理画面からデザインの変更や機能の追加を行えるため、プログラミングの知識や技術はいりません。カスタマイズできる範囲は限られていますが、手軽にフォームのデザインを変更できます。

Google フォームのカスタマイズ方法については、以下の記事で詳しく解説しています。Google フォームを活用して、新たにフォームをデザインしたい方は参考にしてください。

ユーザーにとってストレスの少ない入力フォームデザインを作ろう

入力フォーム画面まで到達したユーザーは商品やサービスに対する関心度が高く、フォームからの離脱は機会損失につながります。ユーザーライクな入力フォームを構築することで、ユーザーの期待値を下げることなくスムーズに問い合わせや資料請求などに結び付けられます。

入力フォームをデザインする際は、ステップ表示やエラー内容のインライン表記といった改善策が効果的です。今回お伝えしたフォームデザインの17のコツを踏まえたうえで、ユーザー目線を意識して入力フォームを作成しましょう。

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

 

顧客満足度アンケート作成に役立つテンプレート5選

 顧客満足度アンケート作成に役立つテンプレート5選

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

トピック::

フォーム