お問い合わせフォームを作る際にデザインで悩む方は多いでしょう。せっかく時間をかけて作っても、ユーザーに興味を持ってもらえなければ、最終的な成果を意味する「コンバージョン」に結びつくことはありません。
今回はお問い合わせフォームにおけるデザインの重要性を解説します。お問い合わせフォームのデザイン最適化が必要な理由や必要な要素がわかると、ユーザー受けの良いデザインについて理解が深まるでしょう。
カスタマイズ性の高いフォームツールをお探しなら、クライゼルのフォーム作成ツールをご利用ください。
お問い合わせフォームのデザインは最適化すべき？
お問い合わせフォームは、説明書通りに作れば良いものではありません。お問い合わせフォームには必ず利用者が存在します。そのため、「ユーザーフレンドリー」を意識した仕様にする必要があり、そのポイントになるのが「デザインの最適化」です。
例えば、質問項目が羅列されているだけのお問い合わせフォームをイメージしてみましょう。大半の方が入力項目の多さに嫌気が差し、回答する前に諦めてしまいます。仮に興味を持って入力を始めても、だんだんとモチベーションが下がり、離脱してしまう方がほとんどです。
この場合は、デザインの最適化が効果的です。具体的には、質問項目をある程度絞ったり、入力の負担を軽くしたりするだけで、ユーザーも回答しやすくなります。お問い合わせフォームの最適化は、ユーザーのためにも行った方が良い取り組みといえます。
最適なお問い合わせフォームのデザインとは？
企業側がどれだけ完璧なお問い合わせフォームを作成しても、回答者であるユーザーの視点が欠落したフォームでは離脱率が高くなります。お問い合わせフォーム導入の成果を高めるためには、デザインの最適化が欠かせません。次は、最適なお問い合わせフォームのデザインに必要なポイントを紹介します。
設問と入力欄をひとまとめにする
お問い合わせフォームには設問と入力欄がありますが、両者の配置場所は距離が近すぎても遠すぎても良くありません。例えば、設問と入力欄が近すぎると入力箇所を間違ってしまう恐れがあります。一方、極端に離れ過ぎてしまうと両者の関係性がわかりづらくなってしまうでしょう。
そのため設問と入力欄は、一定の距離をあけたワンセットの配置にするのがポイントです。適切な距離に両者を設置すれば見やすさが増し、入力ミスの削減につながります。
エラーメッセージはわかりやすく表示する
お問い合わせフォームに限らず、エラーメッセージから詳しい内容がわからず対応に困った経験がある方は多いでしょう。このケースでも、デザインの最適化が必要です。具体的には、「エラー箇所の明示」と「エラーの理由と修正内容」を表示します。特に、エラー箇所は赤字で表記すると一目でどこが間違えているのかわかり、ユーザーの負担軽減につながります。
CTAボタンの配色は特に目立たせる
お問い合わせフォームの後半には、申し込みをする、資料ダウンロードするなどの行動喚起を意味する「CTAボタン」（CTA＝Call To Action（行動喚起）の略。）が設置されており、実際に企業へのお問い合わせを完了させる重要な役割があります。CTAボタンだけ他の箇所と違う色にして目立たせると、コンバージョン率が高まるでしょう。
それぞれのお問い合わせフォームでベースとなる色が異なるため、CTAボタンの色を考える際は配色に気を配る必要があります。例えば、サイトやロゴが緑色を基調としている場合、CTAボタンを赤色またはオレンジ色にしてみましょう。ユーザーの目にも付きやすくなり、具体的な行動にも結びつけやすくなります。
CTAボタンはわかりやすさを重視する
CTAボタンを設置する際は配色だけでなく、わかりやすさも重視する必要があります。例えば、「送信」と「会員登録する」の2つを比べてみましょう。前者は一見すると簡潔に書かれていてわかりやすそうに見えますが、ボタンを押した後の結果がわかりづらくなっています。その点後者なら、クリック後にどうなるかが一目瞭然で、ユーザーも迷わずに次の行動が取りやすくなるのです。
セキュリティ対策についても記載する
お問い合わせフォームの入力項目にはユーザーの個人情報も含まれるため、セキュリティ対策は必須です。入力フォームには取得済みの個人情報をどのように扱うかを記した「プライバシーポリシー」の明記や、「https（SSLサーバ証明書）」の取得を済ませておきましょう。
ペルソナに合わせた言語表示をする
お問い合わせフォームのデザインが、日本語よりも英語表記に馴染む場合も中にはあるでしょう。しかし、ユーザーの大半が日本人なら言語表示は日本語に統一するのがおすすめです。日本でも英語を学習したり耳にしたりする機会は以前より増えたものの、日常で使う場面はほとんどありません。英語や略語だらけの質問項目ではユーザーの早期離脱につながる場合があるため、ペルソナに即した言語表示をしましょう。
コンパクトな質問項目を意識する
質問項目とページ数が多いお問い合わせフォームは、ユーザーの離脱につながりやすいため、質問項目の見直しが必要です。質問項目数が多い場合は、内容が重複していたり一部不要なものが含まれていたりするケースが考えられます。適宜、内容を削除したりまとめたりしましょう。最終的には、お問い合わせフォーム全体が画面一つに収まるサイズにするのが理想です。
なお、お問い合わせフォームの質問項目については、下記により詳しい内容が記載されています。ぜひ参考にしてみてください。
お問い合わせフォームのデザインに必要なスマホ対策とは？
ユーザーがお問い合わせフォームを利用する際によく使うのは、パソコンとスマホです。特に、スマホからのアクセスは近年増加していることから、スマホ向けの対策は欠かせません。ここでは、ユーザーがスマホからお問い合わせフォームを訪問した際に必要なデザインのポイントを解説します。
入力欄は縦方向に統一する
スマホとパソコンでは、画面操作の方向に違いがあります。スマホは基本的に縦方向にスクロールするのに対し、パソコンでは横画面を使う場合があります。視線の移動が増えると入力ミスや漏れが発生しやすくなるため、この場合は縦画面に統一するのがおすすめです。
入力欄だけでなく、ラジオボタンやチェックボックスを縦方向に統一すると、パソコン向けユーザーの負担の軽減につながります。全体が縦にそろったシンプルな並びにすれば、視認性が高まり、カーソル操作の手間を減らすのに効果的です。
入力する文字が自動で切り替わるようにする
スマホのキーボード画面は小さいため、入力画面ごとに文字を切り替える作業が発生するとユーザーは面倒に感じ、離脱しやすくなります。そのため、入力欄ごとに自動で「ひらがな入力」「英文字」「数字」が自動で切り替わるように設定しておくのがおすすめです。
スマホ向けの間隔やサイズを意識する
スマホ向けのお問い合わせフォームのデザインでは、「間隔」を意識することも重要です。入力欄同士が狭すぎると、次の質問に移るのに時間がかかってしまいます。ラジオボタンやチェックボックスの間隔が近すぎても、選びたい選択肢を押しづらくなり、ユーザーはストレスを感じやすくなるでしょう。同様にボタンサイズが大きすぎたり、小さすぎたりする場合も、ユーザーがお問い合わせフォームから離脱しやすくなります。
スマホ向けのお問い合わせフォームのデザインを考える際は、入力欄やボタンがスマホで本当に使いやすいか、間隔やサイズを意識しながら作成しましょう。
入力欄の分割は最低限に留める
スマホで入力する際は、指先を使って画面をタップするでしょう。タップする回数が必要以上に多かったり、触れる箇所が細かすぎたりすると、ユーザーの負担になります。お問い合わせフォームのデザインを考える際は、入力欄を分割しすぎていないか確認しましょう。例えば、氏名の「姓」と「名」や電話番号、郵便番号はまとめておくのが無難です。
お問い合わせフォームに必要なEFO機能7選
お問い合わせフォームは、デザインの最適化を行うことでユーザーにとって使いやすい理想のフォームに近づけられます。中にはデザインの変更だけで改善されない場合もあり、その際は「EFO機能」で補う必要があります。次は、ユーザーの入力完了率を高めるのに重要なEFO機能を見ていきましょう。
1.住所自動入力機能
郵便番号を入力すれば、住所が自動で入力される機能のことです。ほとんどのお問い合わせフォームに備わっている機能で、ユーザーの入力作業の時間や手間の短縮に一役買っています。ユーザーのことを考えるなら確実に実装しておきたい機能といえるでしょう。
2.入力制限機能
入力する内容に合わせて文字種類が自動で切り替わる機能のことです。特に、半角・全角がよく切り替わるお問い合わせフォームの場合は、手動で文字の種類を切り替える必要があり、かなりの手間になります。ユーザーの負担を減らしたい場合は、「住所自動入力機能」と同様にあった方が良い機能です。
3.リアルタイムバリデーション機能
リアルタイムで入力内容に誤りがないか、必須項目に入力漏れがないかを表示できる機能のことです。入力ミスがあった場合、送信ボタンを押してからエラー表示があると、何かしらの修正が必要になります。修正箇所が多かったり、表示内容が曖昧だったりすると、ユーザーの離脱につながってしまうでしょう。
その点、リアルタイムバリデーション機能があれば、修正を必要な箇所がリアルタイムでわかり、修正作業をせずに済みます。ユーザーの中には修正作業を面倒に感じる方もいるため、少しでも離脱率を下げたい場合に搭載しておきたい機能といえます。
4.エラー表示機能
エラー箇所を赤色で表示して、ユーザーにわかりやすく伝える機能のことです。特に、具体的なエラーの理由や修正箇所を表示できるものだとユーザーの離脱を防ぎやすくなります。
5.必須項目をわかりやすくする機能
お問い合わせフォームの中には「必須項目」と「任意項目」の2つがあり、特に前者は目立たせる必要があります。このとき、必須項目の欄は誰が見てもわかるように工夫できる機能があると便利です。例えば、「*」の印だけでは見落としてしまう可能性があるため、「※必須項目」のように強調して一目で理解できるような工夫をすると、ユーザーにも意図が伝わりやすくなります。
6.レスポンシブ対応機能
表示する画面の大きさを使用している端末に合わせる機能のことです。現代ではパソコンよりもスマホからのお問い合わせ件数が多い傾向です。どちらのユーザーにとっても使いやすいフォームを目指すなら、確実に実装しておきたい機能といえるでしょう。
7.プレースホルダー機能
入力欄の中に入力例を薄い色付きの文字で表示させる機能のことです。具体的な入力内容や説明があると、ユーザーも入力する内容が把握しやすくなります。ただし、補足した内容で縦長のフォームにならないよう注意が必要です。プレースホルダー機能を使えば、スペースの無駄遣いをせずにユーザーに質問の意図を正確に伝えられます。ユーザーフレンドリーを意識したお問い合わせフォームを作りたい方は、ぜひ活用してみましょう。
効果的なお問い合わせフォームのデザイン例
ここまで最適なお問い合わせフォームのデザインについて紹介しましたが、具体的なイメージがわかない方もいるでしょう。ここでは、効果的なお問い合わせフォームのデザイン例として、4つのフォームを紹介します。
各種申し込みフォーム
各種申し込みフォームを作成する際は、「自動メール返信設定」や「画像・ファイル投稿」、「問い合わせ一元管理」などの機能があると便利です。
こちらは、各種申し込みフォームのデザインの一例です。郵便番号入力に基づいた「住所自動入力機能」があり、郵便番号の横には目立つように「ハイフン不要」の記載があります。申請書類の画像も選択式になっており、下には対応しているファイル容量についても書かれているのが特徴です。
ファイルアップロードフォーム
ファイルアップロードフォームの作成には、「写真添付」「ファイル添付」「マルチデバイス対応」などの機能が必要です。
こちらのファイルアップロードフォームは、画像投稿以外には氏名と連絡先だけの非常にシンプルなものです。複数の画像を添付できるように3件までの画像投稿が行える仕様となっています。
サンプルアンケートフォーム
サンプルアンケートフォームの作成には、「複数ページアンケート」「条件分岐」「システム分岐」などの機能が備わっていると良いでしょう。エンジニア養成学校を運営する「ジーズアカデミー様」では、これまで紙で管理していたアンケートや入学願書のWeb化に成功し、入学フローの自動化を実現しています。
サンプルアンケートフォームのデザイン例はこちらの通りです。ラジオボタンやチェックボックスが適宜設置されており、ユーザーが回答しやすくなる工夫が施されています。また、回答にバラつきが見られそうな「現在の検討段階」の箇所を選択式にしている点もポイントです。
採用エントリーフォーム
採用エントリーフォームを作るときには、「ステップフォーム」「システム連携」「多機能」なWebフォームを利用するのがおすすめです。
下記は採用エントリーフォームのデザイン事例です。記入例はプレースホルダーで表示し、必須項目は赤字で表記しています。生年月日はプルダウンで選択でき、郵便番号を入力すれば住所検索機能によって自動で住所が入力される仕組みになっています。
最適なお問い合わせフォーム作成ツールなら「クライゼル」
デザイン性に優れたお問い合わせフォーム作成をするには、さまざまなデザインの要素を取り込む必要があります。そのためには、フォーム作成ツールの選び方が重要です。フォーム作成ツールは、自社デザインが反映できるものを選びましょう。以上の点を踏まえて、おしゃれで効果的なお問い合わせフォームを作成するなら、「クライゼル」の利用がおすすめです。
クライゼルとは、「データベース機能」を軸に「サイト機能」や「メール機能」などの多彩な機能を業務や用途に応じて使い分けられる、高セキュリティのCRMプラットフォームのことです。クライゼルのカスタマイズ性には、以下のような特徴があります。
- HTML、CSS、JavaScriptを駆使すれば、デザインのフルカスタマイズも可能
- 住所自動入力機能が使える
- 入力制限（バリデーション）の設定ができる
クライゼルでは、「スマホ対応フォーム作成」にも対応しているため、スマホとPCの両方で最適なフォーム作成が可能です。「マルチデバイス」「自動振り分け」「レスポンシブ」などの機能が備わっており、資料請求フォームや資料ダウンロードなどの作成もできます。
クライゼルには、「クライゼル」と「クライゼルライト」の2つの料金プランがあり、両者の機能面・費用面の違いは下記をご確認ください。
クライゼル
- 機能面：フル機能が使える（フォーム、メール、会員サイトサービス）
- 費用面：初期費用10万円～、月次費用5万円～
クライゼルライト
- 機能面：フォーム、メールサービスが安価に使える（一部機能制限あり）
- 費用面：初期費用0円、月次費用1万円（固定）
クライゼルのお問い合わせフォームのことをより詳しく知りたい方や、資料請求・お問い合わせをしたい方は、クライゼルサイトをご確認ください。
