※本記事にはプロモーションが含まれます。
質問をクリックして回答を開く見た目を作りたいとき、「FAQブロック」と「アコーディオンブロック」のどちらを使うか迷いやすいものです。
選ぶ基準は見た目ではなく、そこへ入れる情報の意味です。
先に結論をいうと、質問と回答の組ならFAQ、必要な人だけ読む補足ならアコーディオンが基本です。
必ず読んでほしい結論や申込条件は、開閉ブロックの中だけに置かず、本文にも短く表示します。
確認範囲：2026年9月4日、SWELL 2.19.0の編集画面へFAQとアコーディオンを挿入して確認しました。FAQの構造化データ出力は検証していません。
まずは役割の違いを一覧で確認し、その後に作り方と失敗例を見ていきます。
結論：質問への回答はFAQ、任意の補足はアコーディオン
| 判断軸 | FAQブロック | アコーディオンブロック |
|---|---|---|
| 情報の形 | 質問と回答 | タイトルと開閉する内容 |
| 読者の期待 | 問いへの答えを探す | 必要な補足だけ開く |
| 向く例 | 料金、利用条件、よくあるつまずき | 詳細手順、長い注記、補足例 |
| 開閉 | 表示設定を実機で確認 | タップ・クリックで開閉 |
| 避けたい使い方 | すべての本文をFAQ化 | 重要な結論を閉じたままにする |
SWELL公式は、FAQブロックをQ&A形式のコンテンツ用、アコーディオンを開閉可能なコンテンツ用として紹介しています。
「開いたときに格好よい」だけで決めると、重要な回答が隠れます。読者が必ず読むべき結論は、開閉の外にも短く書いてください。
FAQブロックが向く場面
FAQブロックは、読者の問いがそのまま見出しになり、対応する答えを短く返せるときに向きます。
- 契約前によく出る質問
- 機能の対応可否
- 設定で迷いやすい点
- 記事本文を読んだ後に残る確認事項
質問文は、読者が検索や会話で使う言葉に近づけます。「その他」や「補足」のような曖昧なラベルは、一覧で見たときに選べません。
回答は先頭の1文で結論を示し、その後に条件や例外を続けます。本文で説明済みの内容を同じ長さで繰り返すなら、FAQではなく該当セクションへの内部リンクが適切です。
以下は、編集画面に質問と回答を1件入れた実例です。この表示では回答を開く操作はなく、QとAが同時に見えます。「FAQなら閉じている」とは考えず、実際の表示を確認してください。
アコーディオンが向く場面
アコーディオンは、全員が読む必要はないものの、必要な人には詳しく見せたい情報を畳む用途に向きます。
公式マニュアルでは、ブロック追加から「アコーディオン」を選ぶか、ブロックキーワードから呼び出せます。項目はタイトルとコンテンツで構成され、追加ボタンで増やせます。
親ブロックを選ぶと、スタイルと開閉アイコンを設定できます。デザインを決める前に、閉じた状態のタイトルだけで内容を判断できるかを確認してください。
重要な注意や申込条件は、アコーディオンの中だけに置かないようにします。読まれないまま行動される可能性があるため、必須条件は本文へ出し、補足だけを畳みます。
下は実際に開閉できるSWELLアコーディオンの表示例です。タイトルを選ぶと補足が現れます。閉じた状態でも何が書かれているか分かるタイトルを付けてください。
補足の表示例を開く
補足を開きました。読者全員に必要な料金・契約条件は、この閉じた領域だけに置かず本文にも表示します。
Q&Aを作る手順
Q&Aを作る手順
-
STEP 01記事内で読者が迷う質問を本文から抽出します
-
STEP 02質問と回答の組ならFAQ補足情報ならアコーディオンを選びます
-
STEP 031項目へ1つの問いだけを入れます
-
STEP 04回答の先頭に結論を書き条件と例外を分けます
-
STEP 05同じ内容が本文と重複していないか確認します
-
STEP 06スマホでタイトルの折り返しと開閉操作を確認します
FAQを記事の最後へ機械的に足す必要はありません。本文だけで疑問が解消していれば、FAQが0件でも問題はありません。
一方、比較記事や申込記事では、対象外条件やキャンセル方法など本文の流れから外れやすい質問が残ります。その場合は少数のFAQが役立ちます。
読みにくくなる失敗を避ける
・回答が数画面ある：本文のH2へ昇格し、FAQは要約とリンクにする。
・全項目が閉じている：重要な結論を開閉外へ出す。
・FAQと本文が同じ：どちらかを削り、情報の正本を1か所にする。
・アコーディオンが連続する：短い導入や補足を挟み、閉じた箱だけの画面にしない。
・スタイルを混在させる：記事内の役割ごとに一貫させる。
FAQとアコーディオンを同じ記事で使うこと自体は問題ではありません。ただし、同じ問いを両方へ重複させないことが条件です。
公開前に確認する項目
FAQ／アコーディオン公開前チェック
0 / 8 完了
長いQ&A記事では、目次に拾う見出し階層も見直します。FAQ項目をH2・H3へ重複させず、目次は本文の骨格に限定してください。
SWELLのブロックを役割で選ぶ
SWELLにはFAQとアコーディオン以外にも、手順、説明リスト、キャプション付きブロックがあります。
装飾名から選ぶより、「質問へ答える」「工程を示す」「補足を畳む」のように読者の行動から選ぶと、同じ箱の連続を防げます。
SWELLを利用中の方は、質問への回答をFAQ、任意の補足をアコーディオンとして使い分けてください。
関連する設定は、長いQ&A記事の目次設定で確認できます。
SWELLをまだ利用していない方へ
FAQやアコーディオンを追加プラグインなしで使いたい方は、その機能だけで17,600円を払うべきか、Cocoonとの違いを含めて判断できます。
