この記事では、お問い合わせフォームをデザインから作成する際の「考え方」と「ポイント」について解説していきます。
お問い合わせフォームは「ContactForm7」などのWordPressのプラグインを使用することで簡単に設置できるようになりました。
ただ、お問い合わせフォームをデザインから作るとなると、なかなか難しい作業と感じます。
難しいと感じがちなお問合せフォームですが、デザインする上でのポイントを意識することによって、使いやすく綺麗なフォームを簡単に作成できます。
目次
お問い合わせフォームについて学ぼう
まずはお問い合わせフォームについて、簡単にイメージを膨らませていきましょう。
お問い合わせフォームとは
お問い合わせフォームとは、Webサイトを閲覧した方からお問い合わせをいただくために設置されるWebフォームです。
別名で「コンタクトフォーム」とも呼ばれます。
「お問い合わせ」はWebサイトのゴールの１つ
お客様から「お問い合わせ」をいただくことは「集客」を達成するために必要な要素です。
なので、お問い合せフォームはWebサイトのゴールの１つとも言える大切な役割を担っているのです。
- お仕事の依頼
- 見積もり相談
- イベントの予約
上記の例などのように、Webサイト上からお問い合わせをいただくことで、 お客様との接点を持つことができます。
お問い合わせフォームは使いやすさが大切
お問い合わせフォームをデザインする上で大切なことは「使いやすさ」です。
お問い合わせフォームは、最終的にWebサイトを訪問していただいているお客様に使っていただくことになります。
なので、お問い合わせフォームは使っていただく人に配慮したものをデザインする必要があるのです。
お問い合わせフォームのデザイン作成時のポイント
次に、お問い合わせフォームをデザインする際に意識するべきポイントを紹介していきます。
お問い合わせフォームのデザインで意識するポイントはたくさんあります。
今回はその中でも基本的な知識について触れていきましょう。
入力項目を絞る
まずは、入力項目を絞りましょう。
任意入力の箇所はなるべく減らし、必須の項目のみ入力していただくようにしましょう。
ただし、必須の項目が多すぎてもいけません。
入力項目が多いとユーザーはそれだけで入力の手間となります。
- 本当に今集めなければいけない情報か
- 項目数が多くなっていないか
上記の２点はデザインの作成を始める前に注意して確認しておきましょう。
入力項目が多すぎると、ユーザーが面倒くささを感じてしまい、お問い合わせをしていただけなくなってしまうのです。
見出しと入力欄は縦に配置する
見出しと入力欄は縦に配置するようにします。
横一列に配置するよりも、上から順々に見出しと入力欄を見ることができます。
ユーザーの目線の動きを意識する
ここでのポイントは、ユーザーの目線の動きを意識することです。
画像の例より、縦に積み重ねるレイアウトの方が、視線の動きが少ないことが確認できるかと思います。
ユーザーの視線の動きを少なくすることで、混乱させることを防ぎ、情報量を少なく認識させることができるのです。
入力項目を縦に配置する
先ほどのユーザーの視線の理由から、入力項目同士も縦に配置します。
上から順々に入力していけば良いと感じるので、ユーザーが入力しやすくなります。
仮に、横一列に並べると画面が圧迫され情報量が多いように感じてしまい、入力する順序がわかりにくくなってしまうのです。
入力項目ごとに余白をあける
お問い合わせフォーム作成時にも、忘れてはいけないものが余白です。
余白を広く開けておくことで、ユーザーに対して情報量を少なく感じさせることができます。
情報のグループとしても認識できるようになるので、情報の整理もしやすくなります。
近接の法則
余白の使い方については、デザイン４原則の「近接の法則」で解説しています。
以下の記事も合わせてご覧いただけると幸いです。
選択する数によって入力欄を選ぶ
ユーザーに入力していただきたい項目数によって、フォームの入力欄を変える必要があります。
入力欄の種類によっては、複数選択が不可な入力欄も存在します。
複数の項目をユーザーに選択していただく際には、以下の違いに注意しておきましょう。
入力する手間を考える
入力欄を選ぶ際には、ユーザーの入力の手間も考えられるとさらに良いです。
上記の画像の例では、ラジオボタンとフルダウンメニューで項目を選択しています。
それぞれの入力欄の操作の違いに注目してみましょう。
- プルダウンメニュー：２クリックで入力が完了する
- ラジオボタン：１クリックで入力が完了する
上記の違いをイメージできれば大丈夫です。
入力欄によっては、操作の違いが出てきます。
入力例は欄外に添える
入力例はプレイスホルダーを使わずに、欄外に添えておきましょう。
入力欄にテキストを記述する際には、プレイスホルダーは入力例が消えてしまいます。
つまり、記入例を途中で確認したくなった際に確認できなくなってしまうのです。
プレイスホルダーを使わずに、入力例自体を欄外に添えておくことで消える心配はありません。
ユーザーにとって入力しやすい状態になるので、入力例はできるだけ見える状態にしておきましょう。
プレイスホルダーの復習
プレイスホルダーは以下の記事で登場しました。 復習には以下の記事をご確認いただけると幸いです。
必須項目は具体的に明記する
必須項目は具体的に明記しておきましょう。
「※」や「*」を使用して、必須項目を表す場合があります。
しかし、記号だけでは意図が伝わらない場合があるので、直接「必須」と書いておきましょう。
プライバシーポリシーの同意チェックを設置する
必須項目は具体的に明記しておきましょう。
お問い合わせフォームでは、お客様のお名前やメールアドレスなどの個人情報を扱うことになります。
作成するサイトにプライバシーポリシーページがある場合には、そちらの規約に同意するためのボタンを設置しましょう。
ボタンは送信ボタンのみ配置する
ボタンは送信ボタンのみ配置するようにしましょう。
送信ボタンの横に「キャンセル」などのボタンをおく必要ありません。
コンタクトフォームを設置するページでは、できるだけ他のページに離脱しないようにリンクを極限にまで減らすようにします。
送信ボタンのテキストは具体的にする
送信ボタンのテキストは具体的なものにしましょう。
送信ボタンのテキストは、次のアクションがどんなものなのかが明確になるようにしましょう。
- 確認ページへ移動する
- メッセージを送信する
などのように、ただ「Submit」「送信」「次へ」などのようなテキストを使わないことがポイントです。
参考デザインを見ながら実際に作ってみよう
ここまでで、お問い合わせフォームをデザインする「考え方」や「ポイント」を紹介してきました。
- 使いやすさを意識すること
- 情報量を少なくすること
- 使う人の視点に立つこと
まとめると上記の項目が意識できていれば大丈夫です。
今回の記事の内容は、お問い合わせフォームを使いやすくするための一例になります。
お問い合わせフォームをデザインするときは、今回の記事の内容を意識して作成してみましょう。
参考サイトをみながら、お問い合わせフォームを実際に作ってみることで知識が定着させてください。
