FAQ-003 公開  更新

カテゴリ分け型 FAQ

質問を「お申し込み」「料金・お支払い」のようなカテゴリに分け、選んだカテゴリの質問だけを表示するFAQの設計です。
質問の数が多くても、自分に関係するカテゴリから探せます。
カテゴリの中はアコーディオンで開閉し、「すべて」を選べば全カテゴリをまとめて見渡せるので、探し方の違う人にも対応できます。

ワイヤーフレーム(PC)

カテゴリ分け型 FAQ PC版ワイヤーフレーム

ワイヤーフレーム(SP)

カテゴリ分け型 FAQ SP版ワイヤーフレーム

SP版の特徴

  1. カテゴリは横スクロールで固定:狭い画面でも1行に収め、スクロールしてもカテゴリを切り替えられるよう、上部に固定しています。
  2. 選んだカテゴリを見える位置に:横に長いカテゴリの列でも、選んだものが画面の外に隠れないよう自動でずらしています。
  3. 続きがあることを見せる:右端のカテゴリを少し切って見せ、横にスクロールできることが分かるようにしています。
  4. ほかのカテゴリへの入口を下にも:一覧を読み終えた位置から、別のカテゴリにそのまま移れるようにしています。

採用前の判断ポイント

向いているケース

  • 質問の数が多く、内容ごとにまとまりがある
  • 申し込み前、料金、契約、サポートなど、読み手が知りたい分野が分かれている
  • カテゴリの分け方を、読み手の言葉で決められる
  • サービスサイトのFAQページ、会員・契約のあるサービス、ECのお問い合わせ前ページなど

向かないケース

  • 質問が少なく、分ける必要がない(全文表示型やアコーディオン型が向きます)
  • 1つの質問が複数のカテゴリにまたがることが多い(どこに入っているか分からず、探しにくくなります)
  • 読み手が自分の知りたいことを言葉で探したい(入力した言葉で絞り込む検索型が向きます)

このワイヤーの特徴

自分に関係するカテゴリから探せる

質問が多いFAQでは、一覧を上から読んで探すのは手間がかかります。
カテゴリで分けることで、「料金のことを知りたい」のように、自分の目的に近いところから探し始められます。

件数が見え、どこに質問が多いかが分かる

カテゴリのボタンに件数を添えると、どのカテゴリにどれだけ質問があるのかが先に分かります。探す前に全体の量を見通せ、目当てのカテゴリを選びやすくなります。

「すべて」を初期表示にし、ページ内検索でも見つかる

カテゴリで絞り込んだ状態から始めると、ほかのカテゴリの質問はページに表示されず、ページ内検索で見つかりません。
初期表示を「すべて」にすることで、カテゴリから探す人だけでなく、ブラウザのページ内検索を使って言葉から探す人にも対応できます。

URLでカテゴリと質問を直接開ける

カテゴリや個別の質問に直接アクセスできるURLを持たせることで、「料金についてはこちら」「この質問を確認してください」といった案内がしやすくなります。
個別の質問のURLでアクセスした場合は、その質問が入っているカテゴリを自動で選択してから質問を開きます。

SPでは、カテゴリを上部に固定した横スクロールにする

SPでは、カテゴリの切り替えを1行の横スクロールにして画面上部に固定し、選んだカテゴリを見える位置まで自動でずらしています。下まで読み進めても、カテゴリをすぐに切り替えられます。

制作時のよくある失敗

カテゴリ名が社内の言葉になっている

「受注前」「契約管理」のような社内の分類をそのままカテゴリ名にすると、読み手はどこを見ればよいか分かりません。
「お申し込み」「料金・お支払い」など、読み手の言葉で名付けます。

1つの質問を複数のカテゴリに入れている

同じ質問が複数のカテゴリに出てくると、読み手は違う内容かと迷い、更新するときにも片方だけ直し忘れが起きます。
質問は1つのカテゴリに入れ、関連するカテゴリには「ほかのカテゴリも見る」でつなぎます。

最初から1つのカテゴリに絞り込んでいる

初期表示で1つのカテゴリだけを見せると、ほかのカテゴリの質問がページに表示されず、ページ内検索でも見つかりません。
初期表示は「すべて」にします。

カテゴリが多すぎる

カテゴリを細かく分けすぎると、どこに入っているかを探すこと自体が手間になります。
1カテゴリに数問しかない状態が続く場合は、まとめ直します。

SPでカテゴリがすべて見えず、続きがあることが分からない

SPで横スクロールにしたとき、端のカテゴリがきれいに収まっていると、ほかにカテゴリがあることに気づかれません。
右端を少し切って見せるか、続きがあることを示す印を付けます。

よくある質問

カテゴリはいくつくらいがいいですか?

質問の数によって変わるため、一律の決まりはありません。
1つのカテゴリに数問以上が入る分け方をひとつの目安にし、1〜2問しかないカテゴリが多い場合は、まとめ直すことを検討します。

絞り込みと、見出しへのページ内リンクは、どちらがいいですか?

ボタンで絞り込む形は、質問が多くても画面がすっきりします。
すべて表示したまま、カテゴリの見出しへページ内リンクで移動する形は、ページ内検索で探しやすくなります。
この型では、初期表示を「すべて」にした絞り込みにすることで、両方の良さを取り入れています。

1つの質問が複数のカテゴリに関係する場合はどうすればいいですか?

いちばん関係の深いカテゴリに入れ、ほかのカテゴリからは「ほかのカテゴリも見る」や回答内のリンクでつなぎます。
同じ質問を複数の場所に置くと、更新のときに直し忘れが起きやすくなります。

キーワードで探せるようにしたほうがいいですか?

質問の数がさらに多い場合や、読み手が自分の言葉で探したい場合は、キーワードで絞り込む形(検索型)も検討します。
カテゴリ分けと組み合わせることもできます。

同じパーツのPattern

FAQの型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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