お問い合わせフォームのデザインで悩まれている方は、フォームのデザイン最適化を通してもっとコンバージョン率を高めていきたいと考えている方が多いかと思います。専門的な用語ではEntry Form Optimisation と書いてEFO（入力フォーム最適化）と略して呼ばれる分野の話になります。

世の中にはEFOについてのノウハウも多く、「お問い合わせフォームの項目数は可能なかぎり少なくする」とか「郵便番号を入力したら、住所の一部が自動で入力されるようにした方が良い」とか、いろんなアドバイスが飛び交っています。

何となく良さそうなアドバイスなので、思わず1つずつ目についたところからお問い合わせフォームを改善したくなる気持ちは分かります。ただ、その前に「そもそもEFO(入力フォーム最適化)とは」「ユーザーがお問い合わせフォームから離脱する理由」をおさえておくことで、自社にとってより良いフォームデザインの最適化案が見つけやすくなります。

本記事がその理解の一助になれば幸いですが、一方で、お問い合わせフォームのデザインを修正するためにはHTMLやCSSなどの知識が必要になります。そこで「専門知識がなくて不安」という方にも安心してお使いいただける便利なツールも文中でご紹介しますので、ぜひ参考にしていただけたらと思います。

EFO(入力フォーム最適化)とは

1-1.EFO（入力フォーム最適化）とは

読んで字の如くになりますが、EFOとはお問い合わせフォーム（エントリーフォーム）を最適化していくことです。

EFOの意味自体が重要であるというよりも、なぜEFOという考え方が重要なのかを知ることの方がポイントになります。それをコンバージョンとユーザビリティという観点で次にご説明していきます。

1-2.EFO（入力フォーム最適化）が重要な理由

一般的にお問い合わせフォームを設置する理由は、その名前の通りユーザーからのお問い合わせを受け付けるためです。これは単純な質問フォームであることもあれば、会員申し込みフォームのこともあります。あるいは資料請求のこともあるなど目的は多様です。

つまり、お問い合わせフォームそれ自体はプロセスであり、結果はお問い合わせ数（あるいは会員申し込み数や資料請求数）であるはずです。よって、このプロセスである入力フォームに欠陥があると、結果としての各種数字が少なくなるという関係性になります。

入力フォームを最適化することが重要なのは、まさにこの因果関係があるからです。理屈で考えると理解できますが、世の中の多くのお問い合わせフォームは最適化がなされないまま放置されていることも少なくありません。

1-3.入力フォームから離脱する理由

ユーザーが入力フォームから離脱してしまう理由は無数にありますが、それをあえて一言でまとめるなら「ユーザー体験の質が悪い」という言葉に集約されます。皆さんも実際にこれまでのフォーム入力で経験されたことが一度ならずあるはずです。

例えば、何か商品を購入しようと初めて訪れたECサイトで住所を入力したときなど。郵便番号を入力したにも関わらず、次の都道府県の項目に移るとまた1から手入力で住所を入力させられたとき。郵便番号を入力するとき、「○丁目の前までは自動で入力してくれたらいいのに･･･」と煩わしさを感じたことはありませんか。

また、生年月日やカード情報の入力など、入力内容が「英数字のみ」とあらかじめ予測できる項目にも関わらず、スマートフォンでの入力時に自動で数字入力のキーボードに切り替わらなくて面倒だと感じたことはありませんか。

こういった、入力時の小さなストレス（質の悪いユーザー体験）がきっかけでユーザーの離脱につながっていきます。

CVRを高めるお問い合わせのフォームのデザイン

CVR（お問い合わせフォームの回答率）を高めるフォームのデザインとは、自社で提供しているフォームをユーザーの観点で見直すことから始めます。入力時の何がユーザー体験を損ねているのか。

その本質的な部分を無視して、「離脱防止のポップアップを出現させる」といったHowばかりを追求しても問題は解決されません。

以上を踏まえて大きく3つの観点に分類し、それぞれにおけるお問い合わせフォームの改善案を説明していきたいと思います。

1. 入力の手間
2. 入力項目の分かりやすさ（理解）
3. 入力項目の見やすさ（視認）

2-1. 入力の手間を減らすようフォームデザインを工夫

入力項目数を絞る
例えばですが、資料請求のお問い合わせフォームに「自宅の電話番号」や「性別」などの項目が含まれていたら削るなど。資料請求後のアクション時に電話番号や性別が本当に必要であれば、当然削る必要はありません。

そうでなければフォーム全体の項目数を絞り、簡潔に入力が完了するように作り直します。多くの情報を得たい気持ちはわかりますが、入力項目が少ないほど煩わしさがなくなり、入力完了につながりやすくなります。

住所やふりがなを自動入力させる
郵便番号を入力したら自動で住所が入力されるように設定します。そうすれば、残りの住所は番地やマンション名だけですむので、入力の手間を減らすことができます。また、氏名の入力（漢字部分）を記入したら、ふりがなを自動入力させることで、入力の工程を1つ減らすことができるのも良い改善案です。

半角全角を自動変換
全角の指定がある入力項目で、半角数字を入れるとエラーになる場合は手間に感じます。自社のデータベースの運用目的上、特定の数字を全角（半角）で持ちたいという気持ちは分かりますが、それを入力時にユーザーに強いるのはおすすめできません。

例えば、入力欄にカーソルをのせると自動で半角になったり、半角全角どちらで入力しても自動で自社が望む形式に変換されたりすれば、ユーザーにとっての煩わしさが減ります。

キャンセル・クリアボタンを置かない
キャンセルボタンやクリアボタンを「送信/確認」ボタンの近くに置くことで、ユーザーが誤クリックしてしまう可能性があります。誤クリックするともう一度0から入力することになるので（非常に手間になるので）、ユーザーがフォームから離脱する可能性が高くなります。

入力内容に応じたデフォルトの入力フォーム（文字盤）を設定する
電話番号や生年月日やメールアドレスなど、あらかじめ入力内容の文字形式が想定できる場合は、内容に応じた入力項目の種類を設定しておくことで誤入力を防げます。

2-2. 入力項目が分かりやすいフォームデザインの工夫（理解）

リアルタイムで入力エラーを指摘する
特殊文字の入力や未入力の検知をしたら、リアルタイムでエラーを指摘しましょう。そうすることで、どの項目を入力し直せば良いのか分かりやすくなります。

また、なぜエラーなのかが提示されているとより親切です。「未入力です」や「使用できない特殊文字が含まれています」など。エラーの理由が分かると、再入力までの思考の流れがスムーズになります。

記入例を記載する
入力欄の下部や入力欄の中に記入例を記載し、どんな内容を入力したらいいのかユーザーがすぐに理解できるようにしましょう。項目名だけではイメージしにくくても、記入例があることでスムーズに入力できます。

入力完了までのステップを示す
自社ビジネスの都合上、どうしてもお問い合わせフォームの入力項目が長くなるケースもあるかと思います。その場合、入力から完了までのステップを分かりやすく表示させましょう。

ユーザーは終わりが見えない作業に対しては不安と苦痛を感じ、離脱につながりやすくなります。完了までのステップと進捗を適宜理解してもらうことで、それらのストレスを軽減させることができます。

2-3. 入力項目が見やすいフォームデザインの工夫（視認）

必須項目は記号ではなく文字で明示
必須項目には「※」などの記号は使用せず、「必須項目」ときちんと文字で明示しましょう。そうすることで入力項目に対してどんなアクションをすればよいかがユーザーにしっかり伝わるため、入力漏れを減らせます。

CTAボタンは目立たせ、目的がわかりやすいものにする
入力完了後にどのボタンを押せばいいのかが迷いなく分かるよう、CTAはしっかり目立たせましょう。たまに、「送信」ボタンの色がグレーになっているサイトを見かけますが、非常に見づらいと感じます。

また「資料をダウンロードする」や「申し込む」など、ボタン押下時の目的がよく分かる表現にしておくことで、見やすさがグッと改善されます。

スマホに対応させる
お問い合わせフォームだけスマホ対応されていないサイトはほぼ無いと言えます。よって、厳密にはお問い合わせフォームのスマホ対応という話ではなく、サイト全体に影響範囲がある改善案となります。

今でもスマホ対応されていないサイトを見かけますが、やはりそういったサイトのお問い合わせフォームは非常に見づらいです。ユーザー体験を大きく損なうので、スマホ対応は強くおすすめします。

お問い合わせフォームのデザイン例

ユーザーがお問い合わせのフォームの入力につまずかないようにするため、いくつかの改善案のポイントをご紹介させていただきました。その上で、お問い合わせフォームが最適化されたフォームデザインの参考例を共有させていただきます。

3-1.デザインにメリハリがあり、入力に迷いがなくシンプルで視認性が高い

https://www.oisix.com/OtameshiTouroku.21013844.htm

項目名に囲みなどのデザインがなく、入力欄が明確で必須項目についてもすぐに分かる。
注文予定の商品が写真付きで掲載され、さらに購入を決めた際の価格も載っているので安心感がある
必須項目を埋めた際にだけ「次の入力へ進む」ボタンが押せるようになっている。

3-2.入力のゴールまでが、ステップの数で明示されていてストレスが少ない

https://www.yanase.co.jp/support/catalog/input1.php

カタログ請求完了までのステップが明示されていて、自分がどのステップにいるのか分かりやすい。
必須項目が明確で、迷いがない。郵便番号を入力すると自動で店舗の候補を示してくれる。

3-3.写真やアイコンなど文字以外のビジュアルが工夫され、直感的に選択しやすい

https://premium-water.net/landing/server/code/lp100_registration

必須項目が明示されていたり、自分が選択した内容に色がついたりしていて色彩にメリハリがありわかりやすい。文字情報だけでなく、写真やアイコンが工夫され、直感的に選択できてストレスが少ない。

3-4.番外編_ツールを活用したフォームの改善事例

冒頭でもお伝えした通り、いざお問い合わせフォームのデザインを修正するときには、HTMLやCSSなどの知識が必要になります。社内にそういったリソースがない企業様のために、ノーコードでフォームを改善できるツールとその事例をご紹介します。

LIFULL HOME'S 住まいの窓口は、来店予約フォームの通過率に課題を抱えていたものの、企画チームで改修技術を持ち合わせていなかったために改善案が実行できないという状況でした。

そこでノーコードでも手軽にサイト改修が施せるKARTE Blocksを利用し、ファーストビューの改善を実施。エンジニアの工数を気にすることなく現場のメンバーですぐに仮説を検証できるようになり、EFOを実現できました。

参考：【アイデアを試す・ABテスト】KARTE Blocks活用事例集

上記の事例と同じように、社内エンジニアのリソースが確保できないという悩みをお持ちの方や、エンジニアの外注も難しいという企業様にはKARTE Blocksはおすすめのノーコードツールです。ABテストの機能を使えば、改善パターンごとの数値比較ができるため、確実に成果に繋げることができます。

まとめ

お問い合わせフォームでは、コンバージョン率を高めるために工夫するポイントがいくつもあることがお分かりいただけましたか。大事なのはそれら1つ1つを無目的に実施するのではなく、自社にとってお問い合わせフォームのデザインはどうあるべきなのかを考えていただくことです。

改めてユーザーにとって「入力の手間が少なく」「分かりやすく」「見やすい」お問い合わせフォームのデザインへと日々改善し続けていってください。