よくある質問（FAQ）など、文章量が多いコンテンツをスッキリ見せるのに最適な、「切り替えウィジェット」の設定方法を解説します。アコーディオンのようにクリックで開閉でき、スマホ表示でもページが縦に間延びしない便利なウィジェットです。
なぜFAQには「切り替え」ウィジェットが最適なのか？
質問と回答をすべて最初から表示してしまうと、ページが長くなりすぎて閲覧者が目的の情報を見つけにくくなります。
「切り替え」ウィジェットを使えば、質問文だけをリスト状に並べ、ユーザーがクリックした時だけ回答がスッと開くUIを簡単に作れます。これにより、限られたスペースに多くの情報を整理して配置でき、モバイル端末での読みやすさも劇的に向上します。
「切り替え」ウィジェットを使えば、質問文だけをリスト状に並べ、ユーザーがクリックした時だけ回答がスッと開くUIを簡単に作れます。これにより、限られたスペースに多くの情報を整理して配置でき、モバイル端末での読みやすさも劇的に向上します。
「アコーディオン」ウィジェットとの決定的な違い
Elementorには名前そのままの「アコーディオン」ウィジェットもありますが、FAQを作る場合は「切り替え」がよく使われます。
- 「アコーディオン」ウィジェット：新しい項目を開くと、他の項目が自動で閉じる（常に1つしか開かない仕様）。
- 「切り替え」ウィジェット：複数の項目を同時に開いたままにできる。デフォルトはすべて閉じた状態。
閲覧者が「3つ目の質問と5つ目の質問の回答を見比べたい」と思った時、自由に複数開いておける「切り替え」ウィジェットの方が、FAQにおいては親切な設計になります。
クリックで開閉するFAQの作り方とデザイン調整
設定は非常にシンプルです。
- ウィジェット検索から「切り替え」を配置します。
- コンテンツタブで項目を追加し、「タイトル（質問文）」と「説明（回答文）」を入力します。
- アイコンライブラリから、開閉を表すアイコン（＋や▼など）を選びます。
- スタイルタブで枠線の太さや色を整えます。回答部分の背景色を薄いグレーなどに設定すると、質問と回答の区切りが視覚的にわかりやすくなります。
まとめ
- 情報を隠して配置することで、ページの無駄な間延びを防ぐ。
- FAQには、複数同時に開ける「切り替え」を使うのがセオリー。
- 枠線やアイコンを整えるだけで、洗練されたプロのUIが完成する。
長くなりがちなQ&Aや補足説明も、このウィジェットを活用すれば驚くほどスマートにまとまります。
閲覧者の知りたい情報だけをピンポイントで届けるために、ぜひ取り入れてみてください。
閲覧者の知りたい情報だけをピンポイントで届けるために、ぜひ取り入れてみてください。
