FORM-007 公開  更新

FAQ併設型 フォーム

問い合わせフォームの横に、ご相談の種類や入力した言葉に関係するよくある質問を添えるフォームの設計です。
返信を待たずに解決できることは、その場で答えを見つけてもらえます。
質問は参考として添えるだけにし、入力を妨げず、いつでもそのまま送信できるようにすることで、自己解決と問い合わせのしやすさを両立させます。

ワイヤーフレーム(PC)

FAQ併設型 フォーム PC版ワイヤーフレーム

ワイヤーフレーム(SP)

FAQ併設型 フォーム SP版ワイヤーフレーム

SP版の特徴

  1. 質問の枠は、ご相談の種類の下に:横に並べる余白がないため、種類を選んだすぐ下で関係する質問が目に入るようにしています。
  2. 入力に関係する質問は、入力欄の下に:入力している場所から離れた位置に出すと気づかれないため、入力欄のすぐ下に出しています。
  3. 質問は初めは閉じておく:開いた状態で並べると、フォームが大きく下へ押し下げられるためです。
  4. 選択肢は縦に並べる:狭い画面で横に並べると文字が折り返されるため、1行ずつ押しやすい大きさにしています。

採用前の判断ポイント

向いているケース

  • 同じ内容の問い合わせが多く、よくある質問で答えられるものがある
  • よくある質問のページはあるが、フォームにたどり着いた人に読まれていない
  • ご相談の種類がいくつかに分かれている
  • サービスの問い合わせ、サポート窓口、申し込み前の相談のフォームなど

向かないケース

  • 問い合わせの内容が毎回ちがい、よくある質問で答えられるものが少ない(質問を置いても読まれず、画面が重くなるだけです)
  • ご相談の種類によって、聞く項目そのものを変えたい(条件分岐型が向きます)
  • 項目が少なく、すぐに送れることを優先したい(1ページ完結型が向きます)

このワイヤーの特徴

問い合わせる前に、答えが見つかることがある

料金の目安や制作期間のように、よくある質問ですぐに答えられる内容もあります。ご相談の種類に合わせて関係する質問を並べることで、読み手は返信を待たずに答えを知ることができます。

フォームを離れずに確かめられる

よくある質問のページへ移動すると、入力の途中だったことを忘れたり、フォームに戻れなくなったりします。質問はフォームの横に置き、その場で開いて読めるようにしています。

書いている内容に合った質問が、あとから出てくる

ご相談の種類だけでは、読み手が本当に知りたいことまでは分かりません。お問い合わせ内容に書いた言葉からも、関係しそうな質問を追加で表示しています。

送信の妨げにならない

質問を読まないと送れない作りにすると、急いでいる人や、質問では解決しない人の負担になります。質問はあくまで横に添えるだけにして、いつでもそのまま送信できるようにしています。

SPでは、質問を入力の流れの中に置く

SPでは横に並べる余白がないため、画面の下にまとめると気づかれにくくなります。ご相談の種類のすぐ下に質問を置き、入力した言葉に関係する質問は、入力欄のすぐ下に出しています。

制作時のよくある失敗

質問を読まないと、送信できない作りにする

よくある質問の確認を送信の条件にすると、急いでいる人や、質問では解決しない人が途中でやめてしまうことがあります。
質問は参考として添え、送信はいつでもできるようにします。

質問を開くと、よくある質問のページへ移動してしまう

別のページへ移動すると、入力した内容が消えたり、フォームへ戻る道が分かりにくくなったりします。
質問はその場で開けるようにし、詳しいページは必要な人だけが見られるように、控えめなリンクで置きます。

入力に合わせて、表示やフォーカスが頻繁に動く

1文字入力するたびに質問が入れ替わったり、フォーカスが質問へ移ったりすると、入力の邪魔になります。
入力が止まってから少し待って更新し、フォーカスは入力欄に残したまま、画面の読み上げでは控えめに伝えます。

お問い合わせ内容を、そのまま外部に送って候補を探す

入力した言葉から質問を探す処理で、書きかけのお問い合わせ内容を外部のサービスや記録に残すと、個人情報が意図しない場所に残ることがあります。
候補の検索はできるだけ画面の中で行い、サーバーで行う場合も、送信前の入力内容を残さない作りにします。

質問を開いた数を、そのまま問い合わせが減った数と考える

質問を開いたあとに送信しなかった人が、すべて解決したとは限りません。
ほかの窓口に問い合わせたり、検討をやめたりした可能性もあります。
質問ごとの開かれた数や、送信された問い合わせの内容の変化とあわせて、少しずつ判断します。

よくある質問

よくある質問とフォームは、別のページに分けたほうがよいですか?

よくある質問のページはページとして残しつつ、フォームの横には、ご相談の種類に関係するものだけを数件置く形が扱いやすいです。
すべての質問をフォームに並べると、入力する場所が分かりにくくなります。

フォームに置く質問は、何件くらいがよいですか?

ご相談の種類ごとに、2〜3件が目安です。
実際に届いている問い合わせのうち、回答が決まっていて、読めば解決しやすいものから選びます。
質問では解決しにくい内容は、無理に置かなくてもかまいません。

ご相談の種類で入力欄を変えるフォームとは、どう違いますか?

ご相談の種類に応じて、聞く項目そのものを変えるのが条件分岐型です。
FAQ併設型は、入力欄はそのままにして、横に添える質問だけを変えます。
両方を組み合わせることもできます。

問い合わせが減ったかどうかは、どう確かめればよいですか?

設置する前後で、問い合わせの件数だけでなく、内容の内訳を比べるのが確かめやすい方法です。
よくある質問で答えられる問い合わせの割合が減っていれば、効果の目安になります。
質問を開いた数は、どの質問が読まれているかを知る参考として使います。

同じパーツのPattern

フォームの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開