※本記事にはプロモーションが含まれます。
SWELLでQ&Aを作るなら、その場で読んでほしい回答はFAQ、任意の補足はアコーディオンに分けます。開閉の見た目だけで選ぶと、料金や申込条件まで隠れてしまうためです。まず質問への答えを1文で書き、常に見せる必要があるかを判断してからブロックを選びましょう。
必ず読んでほしい結論や申込条件は、開閉ブロックの中だけに置かず、本文にも短く表示します。
確認範囲：2026年9月4日、SWELL 2.19.0の編集画面へFAQとアコーディオンを挿入して確認しました。FAQの構造化データ出力は検証していません。
まずは役割の違いを一覧で確認し、その後に作り方と失敗例を見ていきます。
FAQは疑問を解消し、アコーディオンは補足を整理する
| 判断軸 | FAQブロック | アコーディオンブロック |
|---|---|---|
| 情報の形 | 質問と回答 | タイトルと開閉する内容 |
| 読者の期待 | 問いへの答えを探す | 必要な補足だけ開く |
| 向く例 | 料金、利用条件、よくあるつまずき | 詳細手順、長い注記、補足例 |
| 開閉 | 表示設定を実機で確認 | タップ・クリックで開閉 |
| 避けたい使い方 | すべての本文をFAQ化 | 重要な結論を閉じたままにする |
SWELL公式は、FAQブロックをQ&A形式のコンテンツ用、アコーディオンを開閉可能なコンテンツ用として紹介しています。
「開いたときに格好よい」だけで決めると、重要な回答が隠れます。読者が必ず読むべき結論は、開閉の外にも短く書いてください。
FAQブロックが向く場面
FAQブロックは、読者の問いがそのまま見出しになり、対応する答えを短く返せるときに向きます。
- 契約前によく出る質問
- 機能の対応可否
- 設定で迷いやすい点
- 記事本文を読んだ後に残る確認事項
質問文には読者が知りたいことをそのまま書きます。「料金について」では回答の範囲が分かりませんが、「月額料金はかかりますか？」なら結論を探せます。料金・契約期間・解約を1問へ詰め込まず分けると、回答も結論→条件→必要な参照先の順で短くできます。
回答は最初の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とアコーディオン以外にも、手順、説明リスト、キャプション付きブロックがあります。
装飾名から選ぶより、「質問へ答える」「工程を示す」「補足を畳む」のように読者の行動から選ぶと、同じ箱の連続を防げます。
仕上げでは、閉じたままでも購入や利用に必要な条件が読めるかを確認してください。FAQは疑問に答え、アコーディオンは必要な人の補足を扱う役割に戻すと、同じ説明の重複も減らせます。実際に開閉し、スマホで回答とリンクまで読めることを確かめて公開しましょう。
関連する設定は、長いQ&A記事の目次設定で確認できます。
SWELLをまだ利用していない方へ
Q&Aを含む記事制作のためにSWELLを検討する方は、CocoonとSWELLの編集機能を比較する記事で、普段の作業がどう変わるか確認できます。FAQ以外にも使う機能と導入費用を合わせて判断しましょう。
