商品やサービスの問い合わせには、新規顧客数増加や顧客満足度の向上などにつながる重要な役割があります。問い合わせページにアクセスしたユーザーが実際に問い合わせを行う確率は問い合わせフォームのデザインによって変わります。ユーザーが手軽に入力して問い合わせできるデザインを構築する必要があります。この記事では、問い合わせフォームをデザインするコツを解説します。
問い合わせフォームのデザインが重要な理由
問い合わせフォームは、ユーザーが商品やサービスについて興味を持ち、企業に質問をしたいときなどに使用するフォームです。もし入力フォームのデザインが使いにくければ、ユーザーが途中で問い合わせをやめてしまうかもしれません。
対して入力フォームが使いやすいデザインであれば、ユーザーが気軽に商品の問い合わせを行えます。そのため、ユーザーからの問い合わせや資料請求の数を増加させるためには、問い合わせフォームのデザインが重要です。新規顧客の獲得機会を得るためにも、ユーザーとのつながりを深められる問い合わせフォームは使いやすいデザインを取り入れておくことが大切です。
入力完了率が高いフォームの特徴
入力完了率が高いフォームは、入力に手間や時間がかからない、内容が分かりやすい、操作しやすいなどの特徴があります。ユーザーに負担がかからず入力しやすいフォームを作成すると、入力完了率の向上が期待できます。
手間や時間がかからない
全ての入力項目を埋めるために手間や時間がかかる問い合わせフォームの場合、ユーザーが途中で離脱する確率が高くなるため注意が必要です。入力項目が多いほど企業側はより詳細なデータを収集できます。しかし、ユーザーにとっては多くの個人情報を入力しなければならないため、最後まで入力することに抵抗を感じる人が増えてしまいます。
さらに、問い合わせ内容に関係のない質問にいろいろ答えなければならないフォームは、時間もかかるためユーザーの離脱につながります。また、入力ボックスが細かく分かれている、項目を何度も移動して入力する必要があるフォームはユーザーから面倒に思われるかもしれません。
内容がわかりやすい
問い合わせフォームの内容がわかりやすいことも重要なポイントです。質問の文章がわかりにくい、文字が小さく読みにくい、入力する項目の配置が悪い場合は、ユーザーがフォームを理解しにくい状態です。質問が理解しやすく見やすいなど、誰にとってもわかりやすいフォームを作成すると、最後まで入力されやすくなります。
操作しやすい
ユーザーが操作しにくいと感じるフォームになっていないかどうかも、気をつける必要があります。自社が取り扱いやすいフォームかどうかではなく、ユーザーにとっての使いやすさが重要です。フォームのデザインはユーザー目線で作成する必要があります。
ユーザーが簡単に入力できるように自動入力機能の導入もおすすめです。ドロップダウンの利用、SNSやGoogleとの連携などを活用すると、ユーザーが楽に入力できます。
「手間や時間がかからない」問い合わせフォームをデザインするコツ
手間や時間がかからないフォームを作成するためには、入力項目数を抑えたり、入力中にリアルタイムでエラーを表示したりなどの工夫をする必要があります。自動入力やキーボードの自動切換えなど、手軽な入力を可能にするコツをおさえてデザインしましょう。
入力項目を最小限に抑える
入力フォームは、項目数が増えるほどユーザーが入力を面倒に感じやすくなります。ひとつひとつの項目に入力しなければならないため、入力完了までに長い時間がかかる問題もあります。そのため、ユーザーが商品の問い合わせをする気をなくさないためにも、入力項目の数は最小限に抑えるのがポイントです。
「お名前」や「電話番号」、「メールアドレス」、問い合わせ内容を記載する「自由記述欄」は問い合わせ対応を行う上で必須の基本情報であるため入れる必要はあります。さらに「問い合わせの種類」「商品/サービス」など、問い合わせ対応をスムーズに行うための項目も入れてもらうことは、ユーザーにもサポート担当者にとってもメリットがあるため、問題ないでしょう。
ただ、問い合わせに不要な「メールアドレス確認欄」「住所」「ふりがな」などは必須の情報ではなく、なかったとしても問い合わせ対応に大きな影響はありません。電話番号や住所などは項目に追加するケースもありますが、その場合はユーザーの負担を減らすために、任意入力にしておくのがおすすめです。
リアルタイムでエラーを表示する
入力を間違えた場合のエラー表示は、リアルタイムで表示される設定にする必要があります。
入力が全て完了したあとにエラーが発生するフォームでは、エラーが出てから入力ミスが生じている場所を探したり、消えた項目全てを入力し直したりしなければなりません。リアルタイムでエラーが出る場合はすぐに修正でき順当に入力を進められるため、エラー発生後にかかる手間を軽減できます。
エラー表示は、入力項目に気づきやすい目立つ表示にすることが大切です。入力ミスが発生した際すぐにポップアップ式のメッセージが表示される、ミスが生じている入力項目は背景色が赤く変化するなど、パッと見てわかる工夫が取り入れられていると修正しやすいというメリットがあります。
「※印の必須項目が入力されていません」「半角で入力してください」「文字数が不足しています」など入力ミスの場所や内容が把握できるメッセージを表示させ、入力ミスにすぐ気づき修正できる状態にすることが大事です。
自動入力できる
入力項目が自動で埋められる箇所は、自動入力機能を導入し、ユーザーが入力する文字量を減らし、負担を軽減しましょう。自動入力機能は現在では多くのフォームで利用されている機能のひとつです。とくに文字数が多い住所入力などの項目では、郵便番号を入力するだけで住所が自動入力される機能が使われています。また、氏名を入力する際にフリガナが自動入力される機能も、わざわざ入力する手間を省けます。ユーザーは自動入力されたフリガナが間違えているときだけ修正すればよいため、フリガナに対して自動入力機能を導入することも効果的です。
キーボードを自動で切り替える
スマートフォンでは、基本的に入力項目の内容に適したキーボードが表示されます。問い合わせフォームにスマートフォンやタブレットからの入力がある場合、キーボードのtype属性を自動で切り替える機能を活用すると、ユーザーの入力が楽になります。スマートフォンのキーボードは8種類あるため、自動で切り替えられると入力時の手間を軽減できます。
キーボードの種類には、通常のテキスト入力（text）、メールアドレス（email）、電話番号（tel）、URL（url）、日付（date）、日付と時刻（datetime）、年月（month）などがあります。入力項目に適したキーボードへの自動切り替えには、inputのtype属性の記述が必要です。氏名、メールアドレス、日付など、入力項目の内容に適した記述をすることで、わざわざ手動で数字やテキストなどの切り替えをする必要なくスムーズな入力が可能です。
入力する目的や利点を明示する
フォームに入力して問い合わせをする目的や、問い合わせをしたあとのメリットなどが明示されると、ユーザーのモチベーション低下を防げます。単純な問い合わせだけでなく資料請求の申し込みを行うフォームを作成する場合には、「フォームを入力すると詳しい資料が手に入ります」との明示が効果的です。商品に興味を持っているユーザーへ上手にアピールできると、入力完了率が増加します。
問い合わせフォームの場合、入力して問い合わせをした際のメリットが「気になることや不明な点への回答」のため、その点をアピールするとよいでしょう。「商品（サービス）の不明な点にお答えします」「商品に関する事なら何でもお気軽にお問い合わせください」など、どんな質問にも適切に答えることなどをアピールしましょう。
「内容がわかりやすい」問い合わせフォームをデザインするコツ
問い合わせフォームの内容をわかりやすくするためには、必須項目と任意項目をわかりやすく表示する、入力項目の残数を表示する、項目の並び順を最適化するなどの方法があります。理解しやすい内容であれば、ユーザーは楽に入力できます。
必須項目と任意項目をわかりやすく表示する
入力項目を必須と任意のどちらかがわかるように表示することで、入力のしやすさを向上させられます。
必須項目を勘違いして入力しないまま送信してしまうと、エラーが発生してあちこち修正しなければなりません。このようなケースではユーザーが離脱しやすくなるため、項目の表示には注意が必要です。必ず入力しなければならない氏名やメールアドレスなどは、項目名の横に「必須」と明示しておくと、入力の必要性がはっきりわかります。
「必須」の場合は入力漏れを防いで目立たせる必要があるため、それぞれの項目に赤い色などで囲んだ「必須」の文字を表示させて明確にします。必須項目に対し※印などをつけただけで必須入力項目とする方法では、その項目が必須項目かどうかがわかりにくいためおすすめできません。
必須項目の残数を表示する
入力項目のなかでも必ず入力しなければならない必須項目の未入力分がどのくらい残っているか、その残数表示もフォームに入れたい項目のひとつです。入力完了まであとどれくらいかかるのかわからない状態では、入力がまだ長く続くかもしれないと感じてユーザーが離脱してしまうかもしれません。
入力完了までの質問数が画面に表示されていれば、あとどれくらいのプロセスで入力が完了するか確認しながら進められます。残っている質問数を見ながら入力できれば完了までのプロセスがわかるため、残りの入力量に不安を感じることなくユーザーは入力を続けられます。
入力完了までのフロー図の準備もおすすめです。「1.お問い合わせ内容の入力」「2.ユーザー情報入力」「3.入力完了」などのわかりやすいフロー図を作成し、フロー図の上で現在の入力状況を確認できるとユーザーのモチベーション維持につながります。入力中に「入力完了まであと1項目」「現在1/3ステップ」などの案内表示が出ると、ユーザーの離脱率を下げられます。
項目の並び順を最適化する
フォームでは入力順に統一性がある方がわかりやすさがアップします。できるだけユーザーの離脱を防ぐには、ユーザーが違和感を覚えることのないよう、項目の並び順を最適化しなければなりません。
フォームには必須項目などの重要な項目から順に配置するので、氏名、連絡先などの入力項目が最初に表示されるケースが一般的です。ユーザーが戸惑ってしまうようなわかりにくいレイアウトを避けるためにも、基本的な並び順で項目をまとめる必要があります。
項目を並べる順番は、項目を種類別にグループでまとめてから、配置もグループごとに行うとわかりやすくなります。氏名・会社名・メールアドレス・生年月日・性別などの「個人情報」グループから、ID・パスワードなど会員登録する場合の「登録情報」、アンケート・備考といった「その他の情報」など、グループごとに入力項目を配置することがおすすめです。
フォームの最初には、氏名や会社名などの項目、また、問い合わせ内容などを単純な選択肢から選択するだけの配置にし、その後メールアドレスや生年月日、ID・パスワード、それからアンケートや備考を並べるのが一般的です。
CTAをわかりやすく表示する
フォーム上で全ての項目を入力後、次の行動を促す「資料請求はこちら」「お問い合わせ」などのテキストが明記されているボタンのことをCTA（Call-to-Action）と呼びます。CTAは日本語では「行動喚起」のことで、Web上で商品購入、資料請求、問い合わせ、会員登録などを行うときに設置されます。
ユーザーがフォームに入力したとしても、そのあとでCTAをクリックしないと実際の問い合わせにはつながりません。ユーザーが最後にCTAをクリックして問い合わせまで完了するためには、ユーザーをCTAに上手に誘導する必要があります。
CTAへの誘導率を向上させるには、CTAがどこにあるかがすぐわかりクリックしやすい状態になっていることが大切です。誰もがすぐに見つけられる大きさや目を引く色にするとよいでしょう。入力後にCTAがすぐにユーザーの目に入ると、そのまま問い合わせに進める確率が向上します。
また、CTAの設置場所を工夫することもユーザーの離脱防止に効果的です。CTAは、一般的にWebページのヘッダー・フッター、サイドバー、コンテンツの間や直後、LPのファーストビューなどに設置されます。フォームの場合は、入力が完了してからすぐユーザーの目に入るように項目の直後などがおすすめです。入力完了後に視線が流れやすい画面中央や画面右下などを意識して設置場所を工夫すると、問い合わせを最後まで終えられます。
「操作しやすい」問い合わせフォームをデザインするコツ
問い合わせフォームの操作性を向上させるには、ターゲットに合わせた入力欄の設置、レスポンシブ対応が重要です。ユーザーが簡単に操作できるデザインのコツをおさえることでも、問い合わせ件数の増加が期待できます。
ターゲットに合わせた入力欄を設置する
入力欄が多いと入力するたびに移動する手間が増え、ユーザーが面倒に感じる場合があります。そのような問題を無くすためにも、入力欄はできるだけ分割せずにまとめることがおすすめです。名前、メールアドレス、電話番号など、問い合わせフォームの入力欄には分割されているケースもありますが、ターゲットによっては分割しない方がいい場合もあります。
名前の入力欄は基本的には苗字と名前を分けない形が好ましいでしょう。ところが、珍しい漢字を使った名前や難しい読み方をする漢字を使用した名前では、正しい読み方がわかりにくいという問題があります。名前の読み間違いを防ぐには氏名欄に区切りをつけた方がいい場合もあるため、ターゲットの傾向に合わせて入力欄を分割するかどうか検討することが大切です。
住所入力も、入力欄の分割が必要なケースのひとつです。住所は都道府県から建物名まで入力すると文字数が長くなりやすいため、住所によってはスマートフォンでは住所入力欄の内容が画面からはみ出してしまいます。パソコンの画面では全て見えていても、スマートフォンでは見えない部分が発生するため、入力や修正がスムーズにできません。スマートフォンからの入力がある場合、住所入力欄は「建物名」の入力欄を追加するなど分割しての設置が適しています。
レスポンシブ対応させる
パソコンやスマートフォン、タブレットなど、あらゆるデバイスで利用してもレイアウトが崩れないレスポンシブ対応は、現在では欠かせない機能です。スマートフォンやタブレットなど、どのデバイスからでも閲覧でき、入力しやすいフォームを作成していないと、操作性の悪さから入力を続けられないかもしれません。
レスポンシブ対応は、ひとつのHTMLページでCSSを切り替えることで見え方を変える方法です。デバイスに合わせて自動で画面サイズや入力欄のサイズが調整されます。レスポンシブ対応によりパソコン用とモバイル用のURLを一本化できるため、メンテナンス性が向上するなどのメリットも期待できます。
Zendeskなら手軽に問い合わせフォームを設置できる
Zendeskは、世界11万社以上の企業で導入されているカスタマーサービスソフトウェアです。教育業界、金融、医療、製造、小売り、ソフトウェア業界など、さまざまな業界のカスタマーサポートに採用されています。
Zendeskなら顧客が気軽に問い合わせができるフォームを簡単に設置できます。用意されているテンプレートを利用して簡単に作ることができ、デザインや入力項目の配置、項目の追加などをカスタマイズできます。Webページとして表示させられるだけでなく、Webページの右下に表示されるように「ウィジェット」とよばれる小窓に設置することもできます。「問い合わせ」や「商品」のカテゴリーを選択できるようにし、入力される項目を動的に変更することも可能です。
まとめ
問い合わせフォームのデザインは、ユーザーが商品やサービスに興味を持って問い合わせを行う際などに使用されます。ユーザーとの重要なつながりを維持するために、入力完了率を高めるデザインにする必要があります。フォームはユーザー目線で入力に手間や時間がかからない、質問や入力順などの内容がわかりやすい、操作性が高いものを作ることが大切です。
Zendeskの問い合わせフォームを使用すると、ユーザーが使いやすいフォームを簡単に作れます。ぜひ無料トライアルでZendeskをお試しください。
