FAQ-004 公開  更新

検索型 FAQ

入力した言葉で質問を絞り込むFAQの設計です。
読み手が自分の言葉で探せるため、カテゴリのどこに入っているかが分からない質問にもたどり着けます。
入力のたびに件数を示し、一致した文字を強調し、見つからなかったときには次の行き先を示すことで、探して終わりにならないFAQになります。

ワイヤーフレーム(PC)

検索型 FAQ PC版ワイヤーフレーム

ワイヤーフレーム(SP)

検索型 FAQ SP版ワイヤーフレーム

SP版の特徴

  1. 検索欄はFAQ内で追従:結果を見ながら言葉を変えられるよう、FAQセクションの間だけ検索欄が上に残るようにしています(画面全体には固定しません)。
  2. よく検索される言葉は折り返す:横に収まらない場合は2行に折り返し、指で押しやすい大きさを保っています。
  3. 質問文は折り返して表示:カテゴリ名と重ならないよう、質問文を複数行で表示します。
  4. 0件の案内は全幅に:見つからなかったときに、別の言葉と問い合わせへそのまま進めるようにしています。

採用前の判断ポイント

向いているケース

  • 質問の数が多く、読み手が自分の言葉で探したい
  • 「解約」「領収書」のように、質問の中に出てくる言葉で探されることが多い
  • カテゴリだけでは、どこに入っているか分かりにくい質問がある
  • サービスのヘルプページ、会員向けのサポートページ、質問が数十問あるFAQなど

向かないケース

  • 質問が少なく、一覧で見渡せる(全文表示型やアコーディオン型が向きます)
  • 読み手がどんな言葉で探すか分からない(検索欄だけを置いても、何を入れればよいか迷わせます。選択肢から選んでもらうステップ案内型が向きます)
  • 質問が分野ごとにきれいに分かれている(カテゴリ分け型の方が、選ぶだけで絞り込めます)

このワイヤーの特徴

自分の言葉で探せる

カテゴリで分けても、読み手が「解約」と「退会」のどちらで考えているかまでは分かりません。
入力した言葉で絞り込むことで、読み手が思いついた言葉から、そのまま質問にたどり着けます。

件数が出て、絞り込めているかが分かる

入力しても結果の数が分からないと、うまく探せているのか判断できません。
「『支払い』の検索結果:2件」のように件数を出すことで、入力した言葉が効いているかどうかが、その場で分かります。

一致した文字を強調し、なぜ出たのかが分かる

質問の一覧だけが並ぶと、どこが一致したのかが分かりません。
一致した文字を強調することで、自分の入力とどう関係しているのかが見て分かります。

0件のときに、次の行き先を示せる

「見つかりませんでした」だけで終わると、読み手はそこで行き止まりになります。
別の言葉の例と問い合わせのボタンを出すことで、見つからなかった人も、次の行動に移れます。

SPでは検索欄がFAQ内で追従し、言葉を変えながら探せる

SPでは検索欄を、FAQセクションの間だけ上部に追従させています。結果を見ながら言葉を入れ替えられ、上まで戻る必要がありません。
画面全体に固定しないので、縦の狭さも圧迫しません。

制作時のよくある失敗

最初の画面が検索欄だけになっている

未入力のときに質問を何も表示しないと、何を入れればよいか分からず、そこで離脱されます。
未入力のときは、すべての質問を表示します。

質問文だけを検索の対象にしている

「カード」で探したときに、回答の中に「クレジットカード」と書かれている質問が出てこないと、探せないのと同じです。
回答の文やカテゴリ名も、検索の対象に含めます。

0件のときに「見つかりませんでした」で終わっている

行き止まりになり、問い合わせにもつながりません。
別の言葉の例と、問い合わせの導線を同じ場所に出します。

1文字ごとに画面が切り替わって落ち着かない

入力のたびにすぐ絞り込むと、打っている途中で結果が何度も入れ替わります。
入力が止まってから少し待って絞り込むと、画面が落ち着きます。

検索した結果を共有できない

URLが変わらないと、「この検索結果を見てください」と伝えられません。
検索した言葉をURLに反映しておくと、結果をそのまま共有できます。

よくある質問

よく検索される言葉は、どう決めればいいですか?

サイト内検索の記録や、問い合わせで実際に使われている言葉から選びます。
記録がない場合は、質問の中でよく出てくる言葉(支払い・解約・領収書など)から始め、あとで見直します。

表記のゆれには、どう対応すればいいですか?

「解約」と「退会」のように、読み手が使う言葉が複数ある場合は、質問や回答の中に両方の言葉を書いておく方法が簡単です。
検索の仕組みに読み替えの一覧を持たせる方法もあります。
また、全角・半角、大文字・小文字、余分な空白などは、検索前にそろえておくと取りこぼしを減らせます。

カテゴリ分けと、どちらを選べばいいですか?

質問が分野ごとにきれいに分かれていて、読み手が分野で探すならカテゴリ分け型が向きます。
読み手の言葉がばらつく場合や、質問が数十問ある場合は検索型が向きます。
両方を組み合わせることもできます。

検索結果はページに残したほうがいいですか?

絞り込んだ結果だけを表示すると、ほかの質問はページに表示されず、ブラウザのページ内検索では見つかりません。
未入力のときは全件を表示し、クリアでいつでも全件に戻せるようにしておくと安心です。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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