SWELLのQ&Aはアコーディオンにすべき？実装とSEOの最適解

こんにちは。hakubi code 代表のてらだです。

SWELLを使っていて「Q&A（よくある質問）」を作るとき、アコーディオンでスッキリ折りたたむべきか、それともFAQブロックで見せるべきか、悩みますよね。
特に、アコーディオンにして中身を隠してしまうとSEO的に不利になるんじゃないか、とか、構造化データはどうなるの？といった不安も出てくるはず。
実は私も、クライアントワークでこの「SWELLにおけるQ&Aの最適解」については何度も検証してきました。

結論から言うと、目的によって使い分けるのが正解です。この記事では、SWELLの機能を最大限に活かした実装方法と、プロ視点でのSEO戦略について解説していきます。

• アコーディオンブロックとFAQブロックの決定的な違い
• 目的に合わせた正しい使い分けの基準
• 検索順位を上げるための設定ポイント
• プロ直伝のデザインカスタマイズ術

SWELLのQ&Aをアコーディオンで実装する基礎

まずは、SWELL標準機能である「アコーディオンブロック」と「FAQブロック」の基本的な仕様と、それぞれの強みを理解しましょう。ここを間違うと、後から修正するのが大変になります。

アコーディオンブロックの基本の使い方

SWELLの「アコーディオンブロック」は、任意のコンテンツを折りたたんで表示できる非常に便利な機能です。Q&Aページを作る際、回答部分が長文になったり、画像や動画を含めたい場合には、このブロックが最適です。

使い方はシンプルです。エディターで「アコーディオン」と検索してブロックを配置し、「ラベル（質問）」と「中身（回答）」を入力するだけ。このブロックの最大の特徴は、中身のエリアに「段落」や「画像」、「リスト」など、他のあらゆるブロックを自由に入れられる点です。

ここがポイント
回答部分にYouTube動画やGoogleマップを埋め込みたい場合は、迷わずアコーディオンブロックを選びましょう。FAQブロックではテキスト中心の表現になりますが、アコーディオンならリッチなコンテンツを提供できます。

FAQブロックのデザインパターン設定

一方で、「FAQブロック」はQ&Aを表示することに特化したブロックです。こちらは標準では「開閉機能（アコーディオン）」がついていません。その代わり、質問（Q）と回答（A）の構造が明確で、デザインのパターンも豊富に用意されています。

設定パネルから以下のスタイルを選べます。

• シンプル：テキストのみのデフォルトデザイン
• 線あり：線で区切られただけのミニマルなデザイン
• ボックス：QとAがセットで枠に囲まれるデザイン
• ストライプ：背景色が交互に変わるデザイン

さらに、QとAのアイコンの形（円、四角、角丸）や色も自由に変えられます。サイトの雰囲気に合わせて調整できるのが嬉しいですね。

アコーディオンの開閉状態を制御する

アコーディオンブロックを使う場合、「ページを開いたときに最初から開いておくかどうか」を設定できます。これはUX（ユーザー体験）に大きく関わる部分です。

設定はサイドバーの「デフォルトで開いておく」というトグルスイッチをONにするだけ。例えば、ユーザーが必ず知りたいであろう「最重要の質問」だけは初期状態で開いておき、補足的な質問は閉じておく、といったメリハリをつけるのがおすすめです。

全ての項目を閉じておくと、ユーザーはクリックしないと情報を得られません。逆に全て開いておくと、スクロールが長くなりすぎます。このバランス感覚が、見やすいQ&Aページを作るコツです。

FAQを折りたたみ表示にする方法とリスク

ここが多くのSWELLユーザーが直面する壁です。「FAQブロックのデザインで、アコーディオンのように開閉させたい」という要望をよく耳にします。

しかし、プロのマークアップエンジニアとしての結論をお伝えすると、「FAQブロックは無理にアコーディオン化せず、開いたまま使うのがSEO的・技術的に正解」です。ご質問の通り、SEO的には「これくらい（標準のまま）」の方がリスクが低いのです。

ネット上にはJavaScriptを追加して無理やりFAQブロックを開閉させるカスタマイズ情報もありますが、私は以下の理由から推奨していません。

もし、どうしても「見た目をスッキリさせたい（折りたたみ機能が必須）」かつ「構造化データも欲しい」という場合は、「アコーディオンブロック」で作成し、構造化データだけを手動（またはプラグイン）で追加するという方法が、最も安全で確実な解決策になります。

アイコンデザインで失敗しないための鉄則

アコーディオンブロックのデザインについて、「CSSでアイコンを変えたい」という相談をよく受けますが、プロとしての回答は「標準設定を使い倒すのが一番きれい」です。

無理にCSSでアイコンをこねくり回すと、スマホ表示でズレたり、タップ領域がおかしくなったりと、百害あって一利なしです。SWELL標準の「スタイル設定」だけで十分プロっぽい見た目は作れます。

推奨の設定パターン

• シンプルに見せたい時：スタイル「シンプル」× アイコン「山括弧」
  → 今風のモダンなWebデザインに合います。
• しっかり読ませたい時：スタイル「囲い枠」× アイコン「三角」
  → 昔ながらのUIで、年配のユーザーでも「ここが開く」と直感的に分かります。

「カスタマイズ＝コードを書くこと」ではありません。「用意された機能を適切に選び、サイト全体のトンマナを崩さないこと」こそが、SWELLを使いこなす最大のテクニックです。無駄なCSSは書かず、コンテンツの中身に時間を使いましょう。

SWELLのQ&AとアコーディオンのSEO戦略

「見た目」の話の次は、ウェブサイト運営で最も重要な「SEO（検索エンジン最適化）」の観点から解説します。実は、どっちのブロックを使うかで検索結果への表示が変わってくるんです。

FAQブロックで構造化データを出力

私がFAQブロックを強く推す最大の理由がこれです。SWELLのFAQブロックには、「構造化データを出力する」という最強の機能が備わっています。

ブロック設定のサイドバーにある「構造化データを出力する」にチェックを入れるだけで、Google検索エンジンに対して「このページにはQ&Aがありますよ」と機械的に伝えるJSON-LDコードを自動生成してくれます。これがうまくいくと、検索結果の画面でタイトルの下にQ&Aがアコーディオン形式で表示される（リッチリザルト）ことがあります。

検索結果での専有面積が増え、クリック率が大幅に向上する可能性があるため、SEOでの集客を狙うQ&A記事なら、アコーディオンブロックではなくFAQブロックを使うのが鉄則です。

構造化データ用プラグインの必要性

通常、WordPressで構造化データを実装しようとすると、専用のプラグインを入れたり、複雑なコードを書いたりする必要があります。しかし、SWELLユーザーならそれは不要です。

SWELLはテーマ自体がSEOに最適化されており、このFAQブロックのように必要な機能が内包されています。プラグインを減らすことはサイトの表示速度向上にもつながるので、SEO的にもプラスに働きます。

SWELLで不要になるプラグインについては、以下の記事でも詳しく解説しているので、ぜひチェックしてみてください。

FAQブロックのデザインは「読みやすさ」に振り切る

「FAQブロックでもアコーディオンのような見た目にしたい」と、開閉しないのに「＋」アイコンをCSSでつけるカスタマイズを見かけますが、これは絶対にNGです。

ユーザーは「＋」を見ると「クリックしたら開くんだな」と期待します。しかし、押しても反応しなければ、「壊れている」「使いにくい」と不信感を抱くだけです。

FAQブロックを使う（＝開閉機能を捨てる）と決めたなら、中途半端にアコーディオンに寄せず、「見やすいリスト」としてデザインするのが正解です。SWELL標準の「ボックス」スタイルや「ストライプ」スタイルを選び、質問と回答の区切りを明確にするだけで、十分に読みやすく、信頼性の高いQ&Aセクションになります。

モバイルSEOとアコーディオンの関係

「アコーディオンで隠したテキストは、Googleに評価されないのでは？」という質問をよく受けますが、これに対する回答は「心配無用」です。

Googleはモバイルファーストインデックス（MFI）への移行に伴い、「モバイル端末でのユーザビリティを向上させるためにタブやアコーディオンでコンテンツを隠すことは問題ない」とし、隠れているコンテンツもインデックス（評価）の対象にすると明言しています。

スマホの狭い画面で全てのテキストを表示させて延々とスクロールさせるよりも、アコーディオンで整理されている方がユーザーにとって親切ですよね。Googleはユーザー体験を最優先するので、安心してアコーディオンを使ってください。

この点については、Google検索セントラルのドキュメントなどでも、モバイルフレンドリーな設計の一環として言及されています。

（出典：Google検索セントラル『モバイルサイトとモバイル ファースト インデックスに関するおすすめの方法』）

SWELLのQ&Aアコーディオン活用のまとめ

最後に、SWELLでのQ&A実装の選び方をまとめます。

優先順位	推奨ブロック	理由
SEO（検索流入）重視	FAQブロック	構造化データで検索結果での露出を増やせるため。
UX（見やすさ）重視	アコーディオンブロック	長文や画像を隠して、スッキリ見せることができるため。
両立させたい場合（上級者向）	アコーディオン + 手動構造化データ	UXを優先しつつ、プラグイン等で構造化データを補う方法。

このように、目的によって使い分けるのがプロのやり方です。あなたのサイトの目的に合わせて、ベストな方を選んでみてくださいね。