Webフォーム作成の記事
ARTICLE申込フォームのデザイン作成時のポイント7選
申込フォームのデザインを整えておくことは非常に重要です。申込フォームに不備があると顧客は入力を完了せずにページから離脱してしまい、機会損失に繋がる可能性があるからです。 本記事では、申込フォーム作成時に押さえておくべきポイントなどを徹底解説していきます。
目次
申込フォームのデザインが重要な理由
申込フォームのデザインが重要なのは、CVR（成約率）を向上できる可能性があるからです。
成約率を高められると、商品やサービスの購入に繋がり売上アップに直結する場合もあれば、資料請求などで商品やサービスの認知度を高められることもあるでしょう。
サイト内のコンテンツ内容に注力していたとしても、最終成約に至らなければ売上拡大には結びつきません。
そのため、読者フレンドリーな申込フォームをデザインする必要があるのです。
申込フォームのデザイン作成前に行うべきこと
申込フォームのデザイン作成前に行うべきことは「ゴールの設定」です。
ゴールを設定することは、サイトを立ち上げる上で成功を左右すると言っても過言でないくらい重要になります。
ゴールの設定
まず初めに、サイトのゴール設定を行う必要があります。
なぜなら、ゴールをどのように設定するかで申込フォームに記載すべき文言は変わるからです。
具体的には、下記のような例が挙げられます。
- 商品やサービスに関する”お問い合わせのみ”を受けつけるのか
- 商品やサービスのお問い合わせを受け、販売まで行うのか
- 商品やサービスの販売に特化するのか
販売を行うのであれば、セールスをより意識してデザインする必要があります。
このように、サイトのゴール設定は重要です。
申込フォームのデザイン作成時のポイント7選
申込フォームのデザイン作成時のポイント7選は下記の通りです。
- スマートフォンでのユーザビリティを確認する
- 入力必須項目は必要最低限にする
- 入力例・入力要件は欄外へ記載する
- オートコンプリート機能を実装する
- 申込ボタンは読者目線の文言にする
- 外部サービスと連携して入力作業を簡素化する
- 英語表記する際は大小文字でメリハリをつける
それぞれ順番に解説していきます。
1.スマートフォンでのユーザビリティを確認する
スマートフォン画面のユーザビリティを確認することは重要です。
理由はかんたんで、スマートフォンでウェブサイトを見る読者は非常に多いからです。
申込ボタンの色や大きさ、見栄えの美しさなど公開前にスマートフォンで事前確認しておきましょう。
競合他社の申込フォームを分析して、差別化を検討しても良いかもしれません。
2.入力必須項目は必要最低限にする
入力必須項目は必要最低限にしましょう。
せっかく商品やサービスに関心があっても、申込フォームの入力必須項目が多すぎると離脱される可能性があるからです。
常に「この項目は必須なのか？」という意識を持ちながらデザインしていくと良いでしょう。
合わせて、入力任意項目についてもできる限り減らす意識を持っておくといいかもしれません。
3.入力例・入力要件は欄外へ記載する
入力例・入力要件は欄外へ記載することを心がけましょう。
なぜなら、欄内に記載してしまうと入力しながら例や要件を見れず、読者にストレスを与えてしまうからです。
成約率を向上させるためにも、読者にストレスを与えないよう工夫しましょう。
オートコンプリート機能を実装する
オートコンプリート機能（自動補完）とは、入力途中の読者に対し、過去入力した内容を元に続きの内容を表示する便利な機能のことです。
メールアドレスや住所など、入力に比較的時間のかかる項目に特に効果を発揮する機能です。
オートコンプリート機能を活用して、読者のストレスを最大限減らしましょう。
申込ボタンは読者目線の文言にする
申込ボタンは読者目線の文言にしましょう。
理由は、読者が自分ごととして捉えやすくなり、ボタンをクリックすることでどうなるのかが予測できるからです。
例えば、ボタンの文言が「登録」だけの場合と「申込を完了してセミナーに参加する」と明記されている場合、後者の方がボタンをクリックしてもらいやすいでしょう。
読者を不安にさせないためにも、読者目線の文言にすることは重要です。
外部サービスと連携して入力作業を簡素化する
外部サービスと連携することで、読者の入力作業を簡素化できます。
あなたもGoogle・Facebook・Twitterなどと連携しているウェブサイトを使ったことはありませんか？
氏名やメールアドレス、生年月日などを自動反映してくれると非常に手間が省けますよね。
このような外部サービスとの連携も積極的に活用しましょう。
英語表記する際は大小文字でメリハリをつける
申込フォーム内で英語表記が必要な際は、大小文字を使い分けてメリハリをつけるべきです。
なぜなら、すべて大文字（小文字）だと読者に読みづらい印象を与える可能性があるからです。
具体的には、「EMAIL ADDRESS」よりも「Email Address」と表記した方が読みやすいでしょう。
忘れてはならないのは、できる限り日本語で表記した方が読者フレンドリーだという点です。
海外展開を行うなど、どうしても英語表記が必要な場合を除き、日本語で表記することをおすすめします。
申込フォームのデザインを作成する方法
申込フォームのデザインを作成する方法は下記3つです。
- フォーム作成ツールを使用する
- WordPressのプラグインを使用
- コーディングで自作
それぞれ見ていきましょう。
フォーム作成ツールを使用する
どのCMSを使ってサイトを運営されていても申込フォームを作成できるのが、フォーム作成ツールです。
人気のツールでは、無料で様々な機能を使用できる『Googleフォーム』や、決済機能も同時に導入できる『formzu』などが挙げられます。
どちらもプログラミングなどの専門知識がなくても使え、UIにも優れた良質なツールです。
WordPressのプラグインを使用
WordPressを用いてサイト運営されている場合、プラグインを使用することでかんたんに申込フォームを作成できます。
人気のプラグインでは、国産で利用者が非常に多い『Contact Form 7』や、国産かつユーザーデータの分析機能を兼ね備えた『MW WP Form』などが挙げられます。
これらもプログラミングなどの専門知識がなくても使えます。
ただし、似たような機能のプラグインを導入してしまうと不具合を起こす可能性がありますので、どちらか一つにしましょう。
コーディングで自作
HTMLやCSS、PHPなどの専門知識がある方はコーディングで自作することも可能です。
フォーム作成ツールやプラグインよりも作成に時間はかかるものの、好きなデザインにカスタマイズできるのが最大のメリットと言えるでしょう。
仮に専門的な知識がなくても、クラウドソーシングサービスなどで外注することも可能です。
とにかくデザインにこだわりたい方は、検討するといいかもしれません。
申込フォーム項目一覧【用途別】
申込フォームにどのような項目を設けるべきなのかわからないとお悩みの方向けに、用途別のフォームの項目を紹介します。
- 会員登録の申込フォーム
- 採用ページの申込フォーム
- セミナー・イベントの申込フォーム
- 資料請求の申込フォーム
- サービス加入・購入の申込フォーム
それぞれ見ていきましょう。
会員登録の申込フォーム
会員登録の申込フォームには、次の項目を設置するのが一般的です。
- 名前（ふりがな）
- メールアドレス
- 電話番号
- 生年月日
- パスワード
- メルマガ受信の有無
1～5については、会員登録の情報管理に欠かせない項目です。ユーザー向けの内容にはなりますが、パスワード設定について半角英数字、大文字、記号などを組み合わせてセキュリティ性を高めるように促しておきましょう。
これにより、セキュリティ上のトラブルを回避しやすくなり、ユーザーの満足度向上に繋がります。
またメルマガによる集客・追客を実施している場合には、申込フォームに受信の有無を選べる項目を用意しておくことで、会員に最新情報を届けやすくなります。
採用ページの申込フォーム
求職者が利用する採用ページの申込フォームには、次の項目を設置しましょう。
- 名前（ふりがな）
- メールアドレス
- 電話番号
- 生年月日
- 住所
- 希望職種
- 志望動機
- 資料添付
基本情報の入力はもちろん、募集職種のうちどの職種に就きたいのかを把握するために、希望職種の項目を用意しておくとスムーズに連絡をとれます。また、書類選考の参考に、志望動機を記入する項目を用意することで、採用の判断をしやすくなるでしょう。
併せて、人材採用では履歴書や職務経歴書の提出が欠かせません。郵送による書類提出にこだわりがないのなら、資料をデータ添付できるように設定しておきましょう。
セミナー・イベントの申込フォーム
セミナー・イベントの申込フォームは、次の項目を設定しておくことで管理が楽になります。
- 希望する日時（第1候補、第2候補など）
- 会社名または団体名（個人の申込もあるため任意と記載する）
- 職業
- 名前（ふりがな）
- メールアドレス
- 電話番号
- 住所
- 意見や質問
また、セミナーやイベント開催における費用を前払い制とする際には、申込フォームに決済機能を用意しましょう。
資料請求の申込フォーム
サービス・製品の資料請求のために申込フォームを用意したいなら、次の項目が欠かせません。
- 請求する資料（複数ある場合はプルダウンで選択式にする）
- 資料の送付方法（PDFまたは郵送）
- 名前（ふりがな）
- メールアドレス
- 会社名・団体名・個人名
- 職業・役職
また資料請求の申込フォームを用意する際には、どのような人物・企業から申込がきているのかを集計するために、職業や役職の項目を用意しましょう。申込者の傾向を分析することで、次のサービス展開や資料作成に活かせます。
サービス加入・購入の申込フォーム
サービス加入や購入のための申込フォームには、次の項目を用意してください。
- 名前（ふりがな）
- メールアドレス
- 電話番号
- 住所
- 希望コースや時間帯など
- 支払い方法
- 意見や質問
上記のうち、希望コースや時間帯、支払い方法については申込者を混乱させないために、金額を明記したり、詳しい時間帯を掲載したりと、わかりやすさを意識しましょう。わかりづらい申込フォームは離脱の原因になるので注意が必要です。
申込フォームのデザイン完成後はセキュリティ対策も忘れずに
申込フォームのデザイン完成後は、セキュリティ対策を行うことも重要です。
なぜなら、申込フォームには読者の個人情報が多く記載されており、仮に個人情報漏えいなどに繋がるとサイトの信頼性を著しく低下させる可能性があるからです。
世界中で利用者の多いWordPressを例にすると、プラグインを使用することで手軽にセキュリティ対策を行えます。
具体的には、インストール/有効化すると最低限のセキュリティ対策を行える『SiteGuard WP Plugin』や、高度なセキュリティ対策を行える『Wordfence』が人気です。
サイトの信頼性、ひいては自社の信頼性を損なわないためにもセキュリティ対策は行っておくといいでしょう。
常時SSL化も重要
常時SSL化とは、サイト全体をhttps化（通信を暗号化）することを意味します。
仮に常時SSL化されていない場合、ハッカーなどの第三者にブラウザとサーバー間の通信データを盗聴・改ざんされ、サイバー攻撃を受ける危険性があります。
また、今後サイトでSEO対策を行っていく場合にも常時SSL化は重要な指針になります。（参照：Googleセントラルブログ）
常時SSL化を行うには、サーバー会社で手続きする必要があります。
契約中のサーバー会社のホームページを確認してください。
申請や応募受付の電子化・システム化ならWebフォーム作成システム「SPIRAL®」
当社のご提供する 「Webフォーム作成システムSPIRAL®」は、かんたん操作で自由自在にフォーム作成が行える定額制のWebフォーム作成システムです。 申請や応募の受付だけでなく、その後のステータス管理や応募者用マイページ作成など、受付から管理までをWebシステム化することができます。
受付フォームは画像やPDFなどのアップロードにも対応。拡張子指定や容量制限、入力制限もできるので、自社の要件にあったフォームを構築することができます。また、デザインはテンプレートからの選択の他、HTML、CSS、JavaScriptを利用してカスタマイズも可能です。
申請者用・管理者様にそれぞれマイページを作成し、ステータス管理や申請内容の情報変更をWeb上で行うこともできます。
書類申請、出願・公募受付、補助金・助成金申請、契約加入・更新受付、キャンペーン受付、問い合わせ受付など様々な業界・用途・シーンで延べ11,000社以上のご利用実績がございます。
サービスの詳細については「Webフォーム作成システムSPIRAL®」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。
まとめ
本記事では、申込フォームのデザインが重要な理由やデザイン作成前に行うべきこと、作成時のポイントや作成方法などを解説しました。
繰り返しですが、申込フォームのデザインを整えることで売上拡大に繋がる可能性が高いです。
改めて、デザイン作成時に意識すべきポイント7選は以下の通りです。
- スマートフォンでのユーザビリティを確認する
- 入力必須項目は必要最低限にする
- 入力例・入力要件は欄外へ記載する
- オートコンプリート機能を実装する
- 申込ボタンは読者目線の文言にする
- 外部サービスと連携して入力作業を簡素化する
- 英語表記する際は大小文字でメリハリをつける
これらを意識しつつ、フォーム完了率の最大化を目指しましょう。
