その場で編集できるオリジナルのFAQページ例を紹介します。ネイティブのアコーディオン、グループ分けと検索に対応したFAQ、アクセシブルな開閉パターン、そして2026年時点でFAQPageマークアップに何ができるのかを解説します。
役に立つFAQページは、顧客から実際に寄せられる質問にトピック別に答え、各回答の最初の1文で答えを示します。スクリプトなしで動くアコーディオンにはネイティブのdetails要素とsummary要素を使い、質問が20個程度を超えたら検索を追加し、手順が必要な回答ではより詳しいヘルプへリンクしましょう。
質問の数に合わせたFAQレイアウトの選び方
FAQの事例集の多くは、他社のヘルプセンターを紹介しているだけです。ここでは架空のお店を題材に、各レイアウトを素のHTMLで作り、実際に動く検索デモも用意しました。構造をコピーして、自分の顧客の質問で埋めてください。
顧客からの実際の質問、短く率直な回答、利用者がサービスについて考える流れに合ったトピック分け、そして答えが見つからないときの問い合わせ手段です。同じ新しい質問が2回届いたら、そのたびに更新しましょう。
ほとんどのサイトでは表示されません。Googleは2023年にFAQのリッチリザルトを著名な政府機関や医療関連のサイトに限定し、ドキュメントによれば、この機能は2026年5月7日からGoogle検索に表示されなくなります。マークアップ自体は有効なschema.orgなので、表示中のコンテンツと一致している場合にだけ残しておきましょう。
各質問と回答をdetails要素で囲み、質問をsummaryの中に入れます。開閉とキーボード操作はブラウザーが処理してくれます。各detailsに同じname属性を付けると排他的なグループになり、1つを開くと他が閉じます。
両方です。商品ページに配送の質問を載せるように、決断を妨げる2〜3個の質問は対象のすぐそばに置き、すべての質問はフッターからリンクする1つのFAQページにまとめておきましょう。
各質問には本物のbuttonを使い、回答の状態に合わせてaria-expandedをtrueかfalseに設定し、必要に応じてaria-controlsで回答を指し示します。そうすればWAI-ARIAのディスクロージャーパターンにあるとおり、EnterキーとSpaceキーで開閉できます。
detailsとsummaryにはスクリプトが不要です。共通のname属性により、別の回答を開くと開いていた回答が閉じます。
見出しがあれば、知りたいトピックにすぐ移動できます。最後の行は、答えが見つからないときの逃げ道になります。
質問が数個しかないなら、回答を隠してもクリックが増えるだけで利点はありません。定義リストを使えば、質問と回答の組が保たれます。
ページに同じ言葉で表示されている質問だけを含めましょう。ほとんどのサイトでは、これによってGoogleでの検索結果の見た目が変わることはもうありません。
「ヴィーガン」「予約金」「配達」などの単語を入力してみてください。入力に合わせて一覧が絞り込まれ、該当する回答の数が表示されます。長いFAQもこうすれば使いやすさを保てます。
ご注文
ほとんどのケーキは5日前、段重ねのケーキは2週間前までにご注文ください。
ご注文
はい、受け取りの48時間前まで変更できます。確認メールにご返信ください。
ご注文
はい、平日の午前9時から午後3時まで承っています。
配達
はい、店舗から8マイル以内であれば、決済画面に表示される一律料金で配達します。
配達
営業日は毎日午前7時30分から受け取りが可能です。
配達
ドライバーからお電話した後、ご注文の品は店舗に持ち帰り、店頭でのお受け取りとなります。
食事制限
はい。ただし小麦と同じ厨房で焼いているため、セリアック病の方には適していません。
食事制限
3種類のケーキがヴィーガン対応で、メニューに表示しています。
食事制限
すべてのラベルにアレルゲンを記載しており、スタッフが一覧表をお見せすることもできます。
お支払い
主要なデビットカードとクレジットカードすべてに加え、スマートフォン決済もご利用いただけます。
お支払い
お祝い用のケーキは、ご注文時に50パーセントの予約金が必要です。
お支払い
受け取りの72時間以上前にキャンセルされた場合、予約金は全額返金いたします。
ベーカリーのFAQを検索
トピックで絞り込み
すべて
{n}件の回答が一致
{n}件の回答が一致
一致するものがありません。実際のFAQでは、ここに問い合わせ先へのリンクを表示しましょう。
無料で始める · クレジットカード不要