よくある質問（FAQ）を8つの型に分け、AIへの指示文・動く見本・コードを載せています。
FAQはどの型を選ぶか
FAQ の型は、質問の数と、読み手がどう探すかで決めます。10問くらいまでなら一覧で足り、20を超えると種類分けや検索が要ります。答えが状況によって変わる質問が多いなら、選択肢で案内する形が合います。まずは問い合わせで実際に多い質問を数え、その数から型を選びます。
| こんなとき | 向いている型 |
|---|---|
| 質問が5〜15個で、一覧から探してもらう | アコーディオン型 |
| 質問が10個以下で、答えも短い | 全文表示型 |
| 答えがやや長く、質問の一覧から目当ての答えへ飛ばしたい | 目次ジャンプ型 |
| 質問が20を超え、注文・支払いなど話題が分かれる | カテゴリ分け型 |
| 質問が多く、言葉で探す人が多い | 検索型 |
| 状況によって答えが変わり、問い合わせの前に案内したい | ステップ案内型 |
| どの答えが伝わっていないかを調べて直したい | 回答評価型（ほかの型と組み合わせる） |
| 答えで解決しなかった人を、迷わず問い合わせ窓口へ案内したい | 問い合わせ誘導つき型（ほかの型と組み合わせる） |
カテゴリ分け型と検索型は、上に検索の入力欄、下に種類のタブ、という形で組み合わせることがよくあります。回答評価型は答えの下に、問い合わせ誘導つき型は FAQ の最後に付け足す形で、どの型にも使えます。
どの型でも守ること
- 質問は読み手の言葉で書く。社内で通じる呼び方は避け、お客さまが問い合わせのときに口にした言い方をそのまま使います。「配送料について」と書くより「送料はいくらですか？」と書いたほうが、目当ての質問に気づいてもらえます。
- 答えの1文目で結論を書く。「できます」「できません」「550円です」のように先に答え、条件や手順はそのあとに書きます。
- 開閉は button か details で作る。
divにclickを付けるだけでは、キーボードで開けず、読み上げソフトにも開閉の状態が伝わりません。buttonならaria-expandedとaria-controlsを付けます。 - 解決しないときの行き先を置く。FAQ の最後や答えの下に、問い合わせフォームへのリンクを置き、行き止まりにしません。
- 構造化データを入れるなら、画面の文とそろえる。
FAQPageに書く質問と答えは、画面に見えている文と一字一句そろえます。なお、検索結果に質問と答えをそのまま出す表示（リッチリザルト）は、2023年8月から Google が対象を絞り、よく知られた政府や医療機関のサイトでしか出さなくなっています。
よくある質問 (FAQ)
問い合わせで実際に多い質問から、まず10問前後を載せます。思いつく質問を並べて数を増やすより、よく聞かれる質問の答えを確かにするほうが、問い合わせは減ります。20問を超えたら、カテゴリ分け型や検索型で探しやすくします。
FAQ では、開いたものをそのまま残す作りが向いています。答えを2つ見くらべたい人や、前に開いた答えへ戻って読み直したい人がいるためです。それに、上の答えが勝手に閉じると、そのぶん画面が動いて、いま読んでいた行がどこかへ行ってしまいます。
答えの文を HTML に書いておき、表示だけを切り替える作りにします。開いたときに JavaScript で答えを取りに行く作りにすると、検索エンジンにもブラウザのページ内検索にも見つけてもらえないことがあります。ここに載せた見本は、どれも答えを HTML に書いています。
入れる場合は、画面に見えている質問と答えと同じ文を書きます。検索結果に質問と答えを並べる表示は、2023年8月から Google がよく知られた政府や医療機関のサイトに限っており、一般のサイトではこの表示を目当てに入れても出てきません。