Webフォームを運用する中で、CV数や入力内容の品質に課題を感じているならば、その原因はフォームの設計にあるかもしれません。この記事では、WebフォームのCV数と品質を左右する入力画面の設計のポイントについて詳しく解説します。

フォームをカンタンに作成できるツールはクライゼルをご利用ください。

WebフォームのUI基礎ポイント

まずはCVRを高めるために抑えておきたいWebフォームの設計の基礎からお伝えしましょう。

データ収集目的外の入力項目・任意項目を置かない

第一のポイントは、そのフォームで必ずしも必要としない項目は削除することです。入力項目が増えれば、ユーザーの手間や心理的負担が増え、CVRは下がっていきます。

入力フォーマットを置きデータの質を守る

2つ目のポイントは、入力例を記載することで、ユーザーが入力内容に迷わない状態を作ることです。「お問い合わせ内容」の項目などのように入力の自由度の高い項目は、「何を書けば良いのか」とユーザーを戸惑わせかねません。

プレイスホルダーに具体例を明記して、ユーザーがテンポ良く入力完了まで進めるよう工夫をしましょう。

入力データのエラーをその場で分かりやすく表示する

入力内容に誤りがある場合には、まとめてではなく項目ごとにエラー内容を表示し、すぐ修正できるようにしましょう。その方が心理的負担も少なく、修正もスムーズです。

フォームページ自体に離脱要因となるリンクを設置しない

フォームページでは、とにかく送信完了へと誘導するように設計し、離脱の要因となるリンクは設置しないのが鉄則です。

「戻る」ボタンを設置する場合でも「送信」ボタンとは並列にせず、またヘッダーやフッターのリンクも表示しない方が望ましいでしょう。

スマホからの入力が多いWebフォーム入力画面設計の注意点

BtoC向けだけでなく、BtoB向けでもスマホからの入力には十分に配慮しておく必要があります。ここでは、スマホ画面での設計のポイントを4つお伝えします。

レイアウトは1カラムにて複数展開をしない

目線が上から下へと一直線で流れるように、1カラムでデザインし、項目を横に並べないようにしましょう。そうすることで見落としがないだけでなく、入力欄が左側に揃うため入力時の操作もしやすくなります。

入力フィールドの高さ・タッチポイントは48ピクセル以上にする

入力欄やボタンなど、指でタップさせるポイントは、大人の指の大きさを考え48ピクセル以上に設計しておくようにしましょう。

フォントサイズは16ptを目安に文意で増減をつける

フォームに記載するテキストのフォントサイズは、多くのポータルサイトなどに合わせて16ptを目安にすると良いでしょう。

iPhoneのSafariのブラウザでは、フォームのフォントサイズが16pt未満だとタップした際に自動でズームされる仕様になっていることにも注意が必要です。

入力項目によって最適なキーパッドを表示する

例えば、郵便番号や電話番号など、間違いなく数字を入力する項目であれば、タップした際に数字のキーパッドが表示された方がユーザーの負担が少なくスムーズです。

このような工夫で、ユーザーの入力のしやすさは格段に変化し、CVRにも影響を与えます。

フォームはユーザーが使うものだからこそ、細やかな配慮と設計の力が試されます。

そこで重要になるのが、フォーム作成ツールのカスタマイズ性です。フォームを簡単に作成できる操作性と自由に設計ができるカスタマイズ性を備えたツールを選定すると良いでしょう。

月額１万円のクライゼルライトプラン登場！

公官庁導入実績多数のWebフォームなら「クライゼル」

次へ進むボタンのアンカーテキストこそ工夫をする

LPのCTAボタンと同様に、フォームのボタンはアンカーテキストにもこだわりたいところです。例えば「次へ」という表現だと、次のページに何があるのかもわからず、誘導役としては不十分と言えます。

「確認画面へ」「資料をダウンロードする」

といった表記にすることで、入力は全て完了した旨と、次に何かあるかを明確に伝えることができ、ユーザーも安心してクリックできるようになります。

備考文を用いてWebフォームの入力画面を洗練させる

次に、フォーム入力時に接客の役割を果たす備考文の上手な活用の仕方を伝授します。

入力項目の上下に展開する備考文はフォントに工夫をする

各入力項目の周囲に配置する備考文は、見やすく・わかりやすく、そしてうるさくなり過ぎないようにフォントの色やサイズ、下線などで工夫しましょう。

備考文にて何に使う情報かをユーザーに明示する

一見してなんのためにその情報が必要なのかわからない入力項目がある場合、「ログインできなくなった際に必要です」など、備考文でその必要性を説明するのも一つの手です。理由がわかれば、ユーザーも入力しやすくなります。

どのように書き込むのかをユーザーに明示する

「半角英数字の組み合わせ、6〜10桁」「コピーからの貼り付けはできません」のように、どのように入力すればいいかを明示するのが備考文の大きな役割です。説明を加えておくことで、不要なエラーを防ぎ、スムーズな入力を促します。

データの取り扱い安全性についてはプライバシーポリシーのリンクで証明する

個人情報保護に配慮したデータの取り扱いなどについては、補足文で記載するには長文になるため、ユーザビリティを損なう恐れがあります。プライバシーポリシーの詳細は別ページに記載するなどして、入力のしやすさ・わかりやすさを第一に設計しましょう。

CV数に直結するからこそ、EFOが重要

Webフォームの設計はCV数に直結するため、継続的に検証・改善し、EFO（入力フォーム最適化）に取り組むことが大切です。

フォームの離脱率は平均で50%近くにのぼるとされており、離脱が多い場合には70〜80%にのぼるとも言われます。

フォーム作成ツールで、確認画面や送信完了画面への遷移率を確認するなどしてまずは現状を把握し、項目の数やラベルの表示方法、アンカーテキストの工夫など細やかな改善を続けていきましょう。

専用のWebフォーム作成ツールを活用することで広がる施策の幅

クオリティの高いWebフォームを作成するなら、Webフォーム作成の専用ツールを導入するのが効果的です。ここではWebフォーム作成ツールを導入するメリットを3つ紹介します。

初手から完成度の高いWebフォームを簡単に実装できる

1つ目のメリットは、簡単に完成度の高いWebフォームを実装できる点です。スマホでのユーザビリティなど、抑えておきたいポイントを初めからクリアできるアドバンテージは非常に大きいと言えます。

フォームの入力データの品質担保のバリデーション機能がついている

フォーム作成ツールの多くは、入力ミスを防ぐためのバリデーション（入力チェック）機能が搭載しています。

カナや数字などの入力形式や文字数などの基本的なチェック機能が備わっているため、ユーザー側にとっても入力がしやすく、企業側にとってもデータの品質を担保しやすくなっています。

データの安全な保持

Webフォームは個人情報を扱うことが多いため、セキュリティの担保も重要な課題です。

フォーム作成ツールの多くは、安全にデータを格納できるセキュリティも備わっているため、安心して運用することが可能です。

カンタンにWebフォームを作成するなら、クライゼル

1,000社以上に導入されているフォーム作成ツールの「クライゼル」は、ユーザビリティとカスタマイズ性に優れており、誰でも簡単に完成度の高いWebフォームを作成することが可能です。

さらにサービス開始以来、情報漏洩事故0の堅牢なセキュリティで、大切なデータを安全に運用できます。高品質なフォーム作成ツールをお探しの方は、ぜひクライゼルをご活用ください。

高いデザインのカスタマイズ性と

公官庁導入実績多数のWebフォームなら「クライゼル」