ホームページで最も大切なページは何でしょうか？
僕はお問い合わせページだと考えています。
ここ数年、お問い合わせページについて色々と考えてきました。
そして、やっと自分の中で納得のいくお問い合わせページが完成しました。
今後はこのお問い合わせページをベースにWeb制作を行おうと思っています。
今回は、そんなお問い合わせページを本気で作るためのポイントをまとめます。
必要な項目を厳選する
まずは大前提として、お問い合わせフォームの項目を厳選することが大切です。
ポイントは、「本当にこの項目は必要なのか？」をしっかりと考えること。
目的を達成できる範囲で最小項目数で作成しましょう。
なぜなら、入力項目が増えるほど、お問い合わせが億劫になるからです。
特に、電話番号や住所は、お問い合わせ後に聞く形でも良いことも多いです。
お問い合わせフォームのデザイン
お問い合わせフォームのデザインでお問い合わせ数は大きく変わります。
結論、おしゃれなデザインは不要です。
ユーザーが迷わないシンプルなデザインにしましょう。
ここでは、デザインのポイントを何種類か紹介します。
ラベルと入力欄は縦並びに
ラベルと入力欄は縦並びにするのがオススメです。
パソコン入力は、横並びでも問題なく入力することができますが、スマホはキツイ。
スマホは横幅が狭いので、横並びだとかなり使いづらいです。
レスポンシブで対応するのもアリですが、最初から縦並びでデザインした方が管理も楽です。
必須項目にはラベルをつける
お問い合わせフォームには必須項目がありますよね。
この表示はどのようにするのが良いのでしょうか？
結論は、安直に「必須」というラベルをつけるのがオススメです。
デザインを行なっていると、余計なことをしがち。
- 必須項目を「※」で表す
- 色のついた枠で必須項目を表す
などなど…。
一見するとオシャレかもしれませんが、ユーザビリティーの面からはオススメできません。
誰でも一目で分かる「必須」というラベルを付けるのがベターです。
日本人男性の20人に1人、女性の600人に1人は1型色覚、もしくは2型色覚と言われています。つまり、色だけではメッセージがうまく伝わらない可能性があるのです。何かを伝える時は「文字」に頼りましょう。
プレースホルダーの役割を考える
通常、入力欄に薄いグレーで入力を補助する内容を記載しているものをプレースホルダーと言います。
プレースホルダーは便利な反面、使用には注意が必要です。
プレースホルダーは、入力を始めると消えてしまうため、ユーザーの短期記憶に負担がかかってしまうからです。
また、視覚や認知機能に障がいがある人に負担となります。
入力ルール等の文章はプレースホルダーを使わずに、枠外に記載をするのが良いでしょう。
例えば、電話番号でよくプレースホルダーを使いますよね。（000-000-0000など）
しかし、ユーザーとしては、ハイフンの有無を常に確認したいはずです。
「※ハイフンなしで記載ください」とプレースホルダーを使わずに入力欄の外に記載ができるとベターです。
名前入力欄は分ける？
姓名は分けたデザインが良い場合があります。
特に日本人は、難読漢字や、姓名の区切りがわかりにくい名前もあります。
そういう場合は、姓名は分けることも検討すべきです。
当サイトのフォームでは、妙と名で分ける方式を採用しました。
メールアドレスは1列でつくる
メールアドレス入力でたまに見かけるのが、以下のような形式です。
「入力欄」＠「入力欄」
このデザインは入力欄の移動が手間に感じるケースが多く、オススメできません。
＠の前後で分けることはせず、1つの入力欄を用意しましょう。
住所入力のデザイン
住所入力欄は「番地まで」と「建物名」で分けることをオススメします。
パソコンで入力する場合は、1つの入力欄でも困りません。
しかし、スマホの場合は、長い住所は入力欄から見切れてしまうケースも多いです。
スマホユーザーの使い心地を考えるなら、住所の入力欄は分けるべきでしょう。
もしくは、複数行が入力できるテキストエリアにするという手もあります。
実装できるなら、郵便番号から住所の自動入力ができる機能があると良いでしょう。WordPressであれば、専用のプラグインがあります。自分で実装する際は、JavaScriptライブラリのYubinBango.jsが使いやすいです。
送信ボタンのデザイン
送信ボタンと修正ボタンをセットで最後に表示することは多いですよね。
よく見るのが、左右に並べたデザインです。
しかし、意外と押し間違えが多いデザインでもあります。
この場合は、送信ボタンを目立たせて、修正ボタンをテキストにすると押し間違いを防ぐことができます。
もっとフォームにこだわる
上記のポイントを守れば、かなり優秀なフォームになるはずです。
ここからはさらに使い心地を上げたり、ユーザビリティを向上させる方法を紹介します。
エラーメッセージを見直す
ユーザーの間違いを正すエラーメッセージ。
意外と疎かにしている人も多いのではないでしょうか。
エラーメッセージは以下のポイントを意識しましょう。
- 思いやりを持つ
- 専門用語を使わない（誰もが分かる言葉を選ぶ）
- あいまいさを回避する（どんなエラーが起こったのかを具体的に書く）
- ユーザーを責めない（否定的な言葉を使わない。例えば「エラー」「失敗」「問題」「無効」「間違い」「禁止」）
また、エラーメッセージは項目ごとに表示するのがオススメです。
例えば、名前でエラーが起こったら、名前のフォームの真下にエラーメッセージを表示しましょう。
自動補完機能を使う
HTMLのautocomplete属性を指定すると、ブラウザの自動補完機能を使うことができます。
入力項目に合わせて、自動で過去に使った内容を補完することができます。
ユーザーとしても入力の手間が激減するので、設定することをオススメします。
type属性を指定する
inputのtype属性を入力内容に合わせて記述してみましょう。
スマホで入力する際に、自動的に適切なキーボードに切り替えることができます。
- 電話番号 type=”tel”
- URL type=”url”
- 年月 type=”month”
など、何パターンかあるので、調べてみてください。
HTMLでバリデーション
バリデーション（入力規制）はJavaScriptで行うのが一般的です。
しかし、HTMLでも簡易的なバリデーションを作ることもできます。
pattern属性とバリデーション用の正規表現を使う方法です。
これならばJavaScriptに詳しくなくても実装ができるので、バリデーションのハードルを下げることができます。
サンクスページにひと工夫
お問い合わせフォームの送信後に開かれるサンクスページ。
- 「お問い合わせありがとうございました」
- 「トップページへボタン」
こんな簡素なサンクスページが多いのではないでしょうか。
これではページの離脱率が高くなります。
せっかくお問い合わせまでしてくれたので、自身のコンテンツに誘導しましょう。
- ブログ記事
- サービス一覧
- よくある質問
- SNSリンク集
ここら辺をサンクスページに設置すると、自然とサイト全体を回遊してくれます。
ユーザーのファン化にもつながりますし、SEO的にも良い影響を与えるでしょう。
メールフォーム以外も準備を
ここまでメールフォームだけに絞ってきました。
実は、お問い合わせはメール以外にも手段を用意するのがオススメです。
電話や公式LINEなど、相手に合わせて選択肢を用意して提示してあげましょう。
お問い合わせを逃すことを防ぐことができますよ。
もっとフォームを極めるための書籍
本記事を作成するにあたり、色々とWeb制作の本を読み漁りました。
その中でも、お問い合わせフォームで参考になる書籍を2冊紹介します。
1冊目は「ザ・マイクロコピー」です。
ボタン周りの小さなテキストについて書かれた本ですが、お問い合わせフォームの項目も多く非常に参考になります。
これは全Web制作者が読むべき良書です。
2冊目は「現場で使える Webデザインアイデアレシピ」。
Webデザインのアイデアが詰まった一冊です。
お問い合わせフォームのデザインについても深掘りされていて勉強になります。
まとめ：お問い合わせフォームを極める
以上、今回はお問い合わせフォームについて書きました。
ホームページの中でも、ある意味で最も大切なページとも言えるお問い合わせページ。
これを機にじっくり考えてみてはいかがでしょうか？
トレンドや技術は日々変わるので、僕も定期的に見直しながらブラッシュアップしていこうと思います。
最後までお読みいただきありがとうございました。