使いやすいスマホの入力フォームを作成するポイントは？作成・運用にオススメのツールも紹介
<この記事でわかること>
- 使いやすい入力フォームを作成できれば、コンバージョン（会員登録や資料請求など）に必要なフォームへ記入する直前で離脱されるリスクを減らせる。
- スマホの入力フォーム作成前に、利用目的や質問のカテゴリ分け、順番などを決めておく。とくに利用目的を定めておくと、必要な質問内容や深掘りすべき項目などを適切に判断できる。
- 実際に入力フォームを作成する際は、「レスポンシブデザインで設定する」「入力項目に合わせキーパッドが自動で切り替わるよう設定する」「リアルタイムでエラーメッセージを表示する」などのポイントを意識する。
- フォーム入力完了後にネクストアクションを促す仕掛けを設定する。たとえば「サンクスメールで回答者限定クーポンを配布する」「オウンドメディアや動画チャンネルのリンクを貼る」などのイメージ。
「スムーズにフォームから入力できるか？」というのは、自社が目指すコンバージョン（会員登録や初回購入など）を達成するうえで欠かせない部分です。たとえば「広告のキャッチコピーがターゲットに刺さり多くのユーザーがLPへ遷移した」という場合も、最後の入力フォームが使いにくくユーザーへストレスを与えてしまうと、ゴール目前で離脱されるかもしれません。
こうした自社の機会損失を防ぐためにも、ユーザーがスムーズに入力できるフォームを設計しましょう。
具体的には、利用目的を定めたうえで以下のポイントを意識することが大切です。
- レスポンシブデザインで設定する
- 入力項目に合わせキーパッドが自動で切り替わるよう設定する
- プルダウン形式を活用する
- 「入力欄・ボタン・文字サイズ」を適切な大きさに設定する
- 「質問欄」と「回答欄」を上下に配置する
- 記入例を示しておく
- リアルタイムでエラーメッセージを表示する
- フォームの読み込み速度を速める
本記事では、スマホの入力フォームを使いやすく設計する重要性や作成時のポイントなどを解説します。
<目次>
使いやすい入力フォームを作る重要性
入力フォームというのは、単に情報を記入するだけのツールではありません。入力フォームの使い勝手が悪いと、以下のように企業へ大きな機会損失をもたらすリスクがあります。
- 広告でLPを見て会員登録フォームまで到達したが、入力欄が小さすぎてストレスを感じ離脱する
- 資料請求フォームに入力していたが、項目数が多すぎて離脱する
- Webサイトはオシャレだが、登録フォームがスマホ対応になっておらずギャップを感じ離脱する
- ウェビナーに参加したかったが、登録時の入力項目が多く面倒になり離脱する
どんなに広告のキャッチコピーが優れていたりLPの訴求メッセージがユーザーへ刺さったりしても、最終的なフォーム入力まで完了されなければ、ゴールに至るまでの施策はほとんど意味を持ちません。
自社が目指すコンバージョン直前でホットな見込み顧客などを取り逃さないためにも、入力フォームの使いやすさを適宜改善することが大切です。
スマホの入力フォームを作成する前に設計すべきポイント
入力フォームを作成する前に、まず以下のポイントを設計しましょう。
- 入力フォームの利用目的を定める
- 質問のカテゴリ分けや順番を意識する
- 入力項目数を減らせるよう工夫する
- テキスト入力の手間を減らせるよう工夫する
入力フォームの利用目的を定める
入力フォームは、以下のようにさまざまなシーンで活用できます。
- サービスの利用登録
- 商品購入
- メルマガ登録
- 資料請求
- セミナー申し込み
- 見積もりの依頼フォーム
- 顧客満足度調査
- イベントの事後アンケート
- 公式ホームページのお問い合わせフォーム
入力フォームの作成前に、上記のような利用目的を決めておくことで「どんな項目を入れるべきか？」「深掘り質問するフォームはどのくらい入れるべきか？」などを適切に判断できます。
たとえば「メルマガ登録」であれば、見込み顧客へ大きな手間をかけることを避けるため、ひとまずメールアドレスが入力できればOKです。一方で「お客様アンケート」の場合、今後の商品改善にいかせるよう、より丁寧に顧客の声を深掘りする必要があります。そのため、必要に応じ自由記述欄を設計することが必要です。
質問のカテゴリ分けや順番を意識する
質問項目は、可能な限り同じカテゴリ同士でまとめましょう。質問内容のテーマが頻繁に変わると、顧客の混乱を招きストレスを与えてしまい、離脱の原因になるかもしれません。
具体的には、以下のようにカテゴライズしつつまとめるイメージを持ちましょう。
- 個人情報に関する項目
- 商品の満足度に関する項目
- スタッフ対応に関する項目
- 契約プランに関する項目
- 料金に関する項目
- 今後の改善要望に関する項目
また、重要度が高い質問はなるべく先に表示しましょう。重要度が高い項目を必須項目に設定して先に掲示し、後半に任意の質問をまとめることで、仮に離脱が起きても最低限必要な情報を収集できます。
入力項目数を減らせるよう工夫する
フォーム全体の入力項目が多いと、顧客が途中で面倒に感じ離脱されるリスクがあります。とくにスマホの場合は指先のみを使って入力するため、どうしても負担が集中しがちです。せっかく興味を持って入力フォームまで到達した顧客を、項目数の多さで逃してしまうのは企業にとって大きな機会損失です。
そのため、フォームの利用目的から逆算して本当に必要な項目に絞りまとめましょう。
テキスト入力の手間を減らせるよう工夫する
スマホでは指1本でフォームへ入力するため、パソコンより手への負担が大きくなりがちです。そのため、自由記述欄や短文テキストを入力する欄が多いと、ユーザーにストレスがかかり離脱の原因になるかもしれません。
手への負担を抑えるためにも、可能な限りプルダウンなどの「クリックだけで答えられる形式」を採用しましょう。
たとえば、以下のような項目なら事前にプルダウンなどで選択肢を用意しやすいでしょう。
- 性別
- 年代
- 日付を聞く項目（生年月日や購入日、登録年など）
- 都道府県や市区町村
- 問い合わせの理由
- 業種、職種、業態
スマホの入力フォームを作成する際のポイント
入力フォームを作成する際は、以下のポイントを押さえましょう。
- レスポンシブデザインで設定する
- 入力項目に合わせキーパッドが自動で切り替わるよう設定する
- プルダウン形式を活用する
- 「入力欄・ボタン・文字サイズ」を適切な大きさに設定する
- 「質問欄」と「回答欄」を上下に配置する
- 記入例を示しておく
- リアルタイムでエラーメッセージを表示する
- フォームの読み込み速度を速める
レスポンシブデザインで設定する
入力フォームは、必ずレスポンシブデザイン（デバイスに合わせ画面のデザインを自動で最適化すること）で設定しましょう。スマホで表示した際に画面が崩れていると、回答時に大きなストレスを与えます。とくにスマホ利用がほぼ浸透している現代において、スマホ表示対応していないフォームでは、顧客へかなりの違和感を与えかねません。
「今の時代にスマホ対応していない」と思われると不信感につながるケースもあるため、必ずレスポンシブで設定しましょう。
入力項目に合わせキーパッドが自動で切り替わるよう設定する
入力項目に合わせて、自動で適切なキーパッドが表示されるよう設定しましょう。たとえば、電話番号入力項目では「数字のキーパッド」、生年月日の入力項目では「日付を選べるキーパッド」といったイメージです。こうした切り替えを設定しておけば、ユーザーの回答の負担を減らして離脱率を下げ、コンバージョンにつなげられる可能性が高まります。
設定する際は、以下のコードを記述することが一般的です。
| コード | 概要 |
|---|---|
| input type = “text” | 標準的なキーパッドを表示する |
| input type = “email” | 標準キーパッドに加え、メールアドレスに必要な「＠」「.com」などを表示する |
| input type = “tel” | 電話番号に必要な「0～9」「-」のキーパッドを表示する |
| input type = “number” | 数字と記号のキーパッドを表示する |
| input type = “date” | 日付を選択する |
| input type = “datetime” | 日付と時間を選択する |
| input type = “month” | 月と年を選択する |
| input type = “password” | 入力した文字を隠す |
プルダウン形式を活用する
選択肢の数が多い場合は、以下のようにプルダウンで回答を表示しましょう。
選択肢が多い質問で一般的なラジオボタンを使うと、パッと見で威圧感があるだけでなく、「多くの選択肢から選ばないといけない」というストレスを与えます。また、スマホの小さい画面で縦に長い選択肢が続くと、視認性も落ちるでしょう。
さらに、生年月日のように細かい数値を入力する場面でプルダウンを活用すれば、誤入力を防ぎ正確な情報を集めやすくなります。
「入力欄・ボタン・文字サイズ」を適切な大きさに設定する
「入力欄・ボタン・文字サイズ」を適切な大きさに設定すると、スマホを操作した際にスムーズに指でタップできます。「入力欄やボタンが指より小さすぎてタップしにくい」「文字が小さすぎて質問を読み取りにくい」といったストレスを解消できれば、ストレスなく入力を続けてもらえるでしょう。
具体的には、それぞれ以下のサイズに設定することがオススメです。
- 入力欄：48ピクセル以上
- ボタン：48ピクセル以上
- 文字サイズ：16pt以上
入力欄については、文字の2倍程度の大きさを目安に設定してもよいでしょう。また、ボタンについては、色を付けたり背景との境目に影を入れたりすると、ユーザーが迷わず視認できます。
「質問欄」と「回答欄」を上下に配置する
質問欄と回答欄については、以下のように質問欄と回答欄が上下に並ぶよう設定しましょう。
質問欄と回答欄が縦に流れるよう配置することで、画面が小さいスマホでも視認性を低下させず、上から下へスムーズに読み流せます。
「質問欄が左：回答欄が右」というように設定すると、入力欄が窮屈になったり不自然な位置で改行が入ったりするため、ご注意ください。
記入例を示しておく
以下のように、入力欄の上部などに記入例を書いておきましょう。
記入例があれば、ユーザーが「”株式会社”の入力は必要か？」「全角と半角のどちらか？」などを視覚的に即座に判断できます。
リアルタイムでエラーメッセージを表示する
エラーメッセージについては、必ずリアルタイム（＝ユーザーが記入ミスを起こしたタイミング）に表示しましょう。全項目を入力した後にエラーメッセージが表示されると、ミスした箇所を探す手間が発生しユーザーにストレスを与えます。
エラー箇所については、「フォームが自動的に赤くなる」というように一目で判断できるよう工夫しましょう。
エラー箇所を表示する際は、以下のように理由を添えておくと修正方法を一発で判断できます。
- ふりがなはカタカナで入力してください
- 住所は郵便番号から記入してください
- 半角で入力してください
修正方法がわからず何度もエラーが出てしまうと、ユーザーが離脱する原因になるため注意しましょう。
たとえば、以下のようなイメージで表示することが理想です。
フォームの読み込み速度を速める
「ページを開くまでに時間がかかる」「フォームの次のページへ移行するまでが遅い」といったフォームは、ユーザーへ大きなストレスを与え離脱の原因になりかねません。そのため「不要な質問項目を削除する」「画像を圧縮して使う」「サーバの応答速度を向上させる」などを意識しながら、スムーズにフォームを読み込ませましょう。
その他、細かい部分で入力の負担を軽減する
上記以外にも、以下のように細かい部分まで意識すると、顧客の入力の負担を軽減できます。
- 電話番号や郵便番号の「-（ハイフン）」を入力する必要がないフォームを作る
- 郵便番号を入力すると自動で住所が記入されるようにする
- 回答者が優先度を判断しやすいよう、各質問に「必須or任意」を明記する
- 「半角／全角」「ひらがな／カタカナ」などを自動変換できるようにする
- スマホ1〜2回スクロールして完了できる程度の質問数に抑える
- ユーザーが普段使うアカウント（各種SNSやGoogleアカウントなど）でログインできるようにする
フォーム入力完了後にネクストアクションを促す仕掛けを設定することが大切！
上記で解説したように、ユーザーがストレスなく入力できるフォームを作成し最後まで記入してもらうことで、会員登録や問い合わせなどの目的を達成しやすくなります。より目的へつなげやすくするには、入力後の顧客へネクストアクションを促す仕掛けを設計することが大切です。
具体的には、以下のようなイメージで設計するとよいでしょう。
- サンクスメールで回答者限定クーポンなどの特典を配布し次回購入を促す
- オウンドメディアや動画チャンネルのリンクを貼って視聴を促す
- ECサイトで購入を完了した顧客へ、好みをもとにオススメ商品を表示する
- 資料請求した顧客へ特別セミナーの案内を表示する
会員登録時や商品購入時などにフォーム入力した顧客は、すでに自社に興味を持っていることはもちろん、購買意欲が維持されているかもしれません。そうした顧客をネクストアクションにつなげることで、より高い成果を達成できます。
入力フォーム自体は無料ツールでも十分効果的に作成・運用可能
上記で解説したポイントを押さえた入力フォームは、無料ツールでもある程度は作成・運用できます。たとえばGoogleフォームの場合、特別な知識は不要で項目をカスタマイズし手軽にサイトへ埋め込めるため、初めてフォームを運用する企業でも安心です。
また、入力完了後の確認メッセージを編集できるため、たとえばセミナーの案内を入れたり自社メディアのリンクを貼ったりといった形で、ある程度ネクストアクションまでつなげやすいでしょう。設定次第ではメールアドレスも収集できます。
高度なフォーム作成・運用のハードルは高い
このように無料ツールでも、一般的な範囲でなら十分使いやすいフォームを作成し運用できます。
しかし「リアルタイムでフォーム経由のコンバージョン数をチェックしたい」「項目ごとのエラー率を洗い出し離脱ポイントをチェックしたい」などの複雑な運用を実施したい場合、なかなかハードルが高いかもしれません。
こうした高度な運用ができない場合、フォームの改善点を洗い出すことも難しくなり「どうすればコンバージョンするフォームを作れるか？」という部分は設計しにくくなるでしょう。
また、上記で解説したように無料ツールでも「入力完了後の表示メッセージを変更する」などは可能なため、ある程度はネクストアクションを促す導線を設計できます。しかし、たとえば「HTMLメールをカスタマイズしてメッセージを配信する」といった運用は難しいため、どうしても施策の幅に制限が出てしまうでしょう。
CRMシステムならより高度なフォーム作成・運用が実現できる！
上記のように、より高度なフォーム作成・運用を実現したいのであれば、CRMシステムの利用をご検討ください。
まず「CRM」とは、顧客のニーズにマッチしたフォローを提供して満足度を高め、長期的な信頼関係を構築するというビジネス上の考え方のことです。そして、このCRMの考え方を現場で実現するツールが「CRMシステム」です。
基本的にCRMシステムには、幅広い項目の顧客情報を一元管理できる機能が備わっています。管理項目の例は、以下の通りです。
- 顧客の基本情報（氏名・年齢・性別など）
- 連絡先（電話番号・メールアドレス）
- 商品の購入履歴
- 問い合わせ履歴
- 店舗での接客履歴
- 商談履歴
- セミナーや展示会で交換した名刺情報
上記のような幅広い顧客情報を分析しニーズを洗い出すことで、「初回購入後は使い方に不安を抱えているから使用のコツに関するメールを送ろう」「リピーターには〜〜という特徴があるので、同じ特徴に該当する見込み顧客へアプローチできる施策を設計しよう」といったイメージで適切な取り組みを進められます。
CRMシステムの具体的な機能や利用のメリットなどは、以下の記事をご覧ください。
そしてCRMシステムの中には、入力フォーム作成機能が搭載されているツールもあります。CRMシステムのフォーム作成機能であれば、新規登録やリマインダー、更新登録など、直感的な操作で自社の目的に合わせた項目を手軽に設計可能です。また、自社のブランドイメージに合わせたデザインカスタマイズも実行できます。
各フォームの登録数やアクセス数、離脱率、エラー原因などをリアルタイムで確認できるツールもあるため、コンバージョンを妨害している要因を特定し、より最適な入力項目を作る際の手助けとなるでしょう。
CRMシステムなら入力フォームの集計結果と紐付けて運用できる！
さらにCRMシステムの場合、「ツール上で管理している顧客情報」と「入力フォームの集計結果」を統合できます。入力フォームの結果を自動的に一元管理することで、集計データを別の施策へ応用できるでしょう。
たとえば「自社に興味を持っている顧客をデータベースから抽出し試供品の利用を提案したい」という場合で考えます。入力フォーム経由で取得した「資料請求時の個人情報」「ウェビナー申し込み時の入力情報」などのデータも抽出対象となるため、より幅広い見込み顧客をピックアップし、適切にターゲットを絞って施策を実行可能です。
また、入力フォームが既存の顧客情報のデータベースと別で保管されていると、連携の手間がかかります。そうした手間をかけず、入力フォーム経由で取得した顧客情報を別の施策へ応用できるのはCRMシステムならではの魅力です。
CRMシステム「Synergy!」なら高度なフォーム作成・運用を実現！
弊社が提供するCRMシステム「Synergy!」にも、上記で解説した高度なフォーム作成や運用を実現できる機能が搭載されています。具体的には以下の通りです。
- リアルタイムで各フォームの登録数やアクセス数、エラー原因などを把握できる
- ブランドイメージに合わせてフォームのデザインをカスタマイズできる
- HTMLメールで作成したサンキューメールを送信できる
- 回答の集計結果をまとめて回答数や回答率を一覧表示できる
さらに、フォームのコンバージョン率アップを実現できるよう、ABテスト機能や導線解析機能なども充実しています。このようにフォーム作成だけでなく、入力率アップに向けた改善までつなげられる仕組みが整っているため、フォーム離脱による機会損失を極力防ぎたい企業におすすめです。
希望者には、オフラインでの操作セミナーや専属トレーナーによるマンツーマンサポートも提供しています。そのため「自社のニーズに合わせて手厚いフォローを受けながら運用したい」という企業も、ぜひご検討ください。
スマホからスムーズに入力できるフォームを作成し自社の目的を達成しよう
スマホの入力フォームを使いやすく設計することで、ユーザーが途中離脱するリスクを減らし、最終的なコンバージョンを達成しやすくなります。
スマホの入力フォームを作成する際は、利用目的や質問のカテゴリ分けなどを設計したうえで、以下のポイントを意識しましょう。
-
- レスポンシブデザインで設定する
- 入力項目に合わせキーパッドが自動で切り替わるよう設定する
- プルダウン形式を活用する
- 「入力欄・ボタン・文字サイズ」を適切な大きさに設定する
- 「質問欄」と「回答欄」を上下に配置する
- 記入例を示しておく
- リアルタイムでエラーメッセージを表示する
- フォームの読み込み速度を速める
他にも、郵便番号を入力すると自動で住所が記入できるようにしたりスクロール回数を抑えられる質問数に設定したりできると、よりスムーズに記入してもらえるでしょう。
入力フォームを作成する際は、無料ツールやCRMシステムなどのツールを活用することが一般的です。とくにCRMシステムであれば、入力フォームの集計結果を顧客情報と紐付けて一元管理できるため、別のマーケティング施策へも応用しやすくなります。
弊社が提供するCRMシステム「Synergy!」であれば、リアルタイムでフォームのエラー原因を把握したり、高度なHTMLメールを活用し入力完了後にネクストアクションを促したりなどが可能です。「Synergy!」の具体的な製品機能については、ぜひ以下のフォームから資料をダウンロードしてご確認ください。
CRMシステム「Synergy!」の特長が機能別でわかる資料です！
「Synergy!」の具体的な製品機能については、ぜひ以下のフォームから資料をダウンロードしてご確認ください。
関連情報
※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。