アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
この記事では、SWELLのFAQブロックの基本的な使い方から5つのカスタム設定まで詳しく解説します。
SWELLのFAQブロックを使えば、プログラミング知識がなくても、読者にとって見やすい「Q&A」が作れます。
構造化データを出力することでクリック率の向上にもつなげることができます。
この記事を読んで実践すれば、簡単に「よくある質問」が作成できるようになりますよ！
ではさっそく始めましょう。
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLでFAQブロックを使うメリット
SWELLのFAQブロックを使うと、次のようなメリットがあります。
それぞれ詳しく見ていきましょう。
よくある質問（FAQ）を簡単に作成できる
SWELLのFAQブロックなら、プログラミング知識は一切不要です。
ブロックを選んで質問と回答を入力するだけで、整ったデザインのQ&Aセクションが完成。
例えば以下のような質問と回答を、数クリックで見やすく配置できます。
HTMLやCSSを学ぶ時間を記事執筆に充てられるので、ブログ初心者には特に嬉しい機能ですね。
豊富なデザインから選ぶことができる
FAQブロックには4種類のスタイルが用意されています。
シンプル、線あり、ボックス、ストライプの中から、あなたのサイトの雰囲気に合わせて選べます。
【シンプル】
- 質問1
-
回答1
- 質問2
-
回答2
【線あり】
- 質問1
-
回答1
- 質問2
-
回答2
【ボックス】
- 質問1
-
回答1
- 質問2
-
回答2
【ストライプ】
- 質問1
-
回答1
- 質問2
-
回答2
さらにアイコンの形（四角・角丸・丸）や色も自由に変更できます。
- 質問1
-
回答1
- 質問2
-
回答2
- スタイル
-
4種類（シンプル、線あり、ボックス、ストライプ）から選択
- 形
-
3種類（四角、角丸、丸形）から選択
- 色
-
3種類（テキスト色、メインカラー、カスタムカラー）から選べ、それぞれ塗りつぶすかどうかが選べる
「なんだか素人っぽいな…」と感じることのない、プロっぽい見た目に仕上げられますよ。
構造化データを出力できる
SWELLではワンクリックでこの設定を有効にでき、検索結果にQ&Aがアコーディオン形式で表示される可能性が高まります。
Q&Aがアコーディオン形式で表示されると通常の検索結果より目立つため、クリック率の向上が期待できます。
他のサイトと差をつけたい方には、ぜひ活用してほしい機能です。
質問部分（Ｑ）を見出しにできる
FAQの質問部分を見出しタグ（h2やh3など）に設定できます。
この設定をすると、記事の目次にQ&A内容が表示されるようになります。
読者は「自分の知りたい質問はどこにあるかな？」と目次から探せるので、ページ内をスムーズに移動できますね。
また、Googleの検索エンジンにも記事の構成が伝わりやすくなり、SEO面でもプラスに働きますよ。
SWELLのFAQブロックの基本的な使い方
FAQブロックは、4つのステップで設置できます。
手順は以下の通りです。
投稿画面左上の「+」ボタンをクリックして「FAQ」を選択しましょう。
FAQブロックが表示されたら、「Q」と「A」それぞれの枠内をクリックしてテキストを入力します。
質問部分（Q）にはテキストのみ入力でき、回答部分（A）には画像やリストなど他のブロックも配置できます。
例えば「商品の返品について教えてください」という質問に対して、画像を挿入し条件を箇条書きで答えることも可能です。
FAQブロックを挿入すると2組のQ&Aが挿入されます。
Q&Aを2組だけでなく3組以上設置したい場合は、FAQブロック下部の「+」ボタンをクリックしてください。
クリックするたびに新しいQ&Aセットが追加されますよ。
「よくある質問」としては、3〜5個程度にまとめるのが読みやすい分量です。
必要な数だけ追加して、それぞれに質問と回答を入力しましょう。
FAQブロック全体を選択してください。するとサイドバーに設定項目が表示されます。
FAQブロックのスタイルや色、形を選択していきましょう。
ブロック全体を選択する方法は2つあります。
①ブロック右上の「親ブロックを選択」ボタンを選択
②画面下の階層ナビゲーションの「FAQ」をクリック
アッフィー「親グループを選択」ボタンは表示されない場合もあるので、階層ナビゲーションの「FAQ」をクリックするのがおすすめ！
なお、FAQブロックを挿入する時短テクニックとして、段落ブロックに「/FAQ」または「/Q&A」と入力する方法もあります。
「/」および「FAQ」「Q&A」は半角で入力しましょう。
アッフィーこの「/」（スラッシュ）の操作は便利なので覚えておきましょう。
SWELLのFAQブロックの5つのカスタム設定
FAQブロックを選択すると、右側のサイドバーに設定項目が表示されます。
この5つの設定を使いこなすことで、サイトの雰囲気に合わせたデザインや、SEO対策まで行えます。
特にアイコンの色については変更可能のなで、どこで設定できるかも確認しておきましょう。
それぞれ見ていきましょう。
スタイルを設定する
スタイル設定では、FAQブロック全体のデザインを4種類から選べます。
- 「シンプル」
-
線のない基本形です
- 「線あり」
-
各Q&Aを区切る線が入ります
- 「ボックス」
-
Q&Aを囲む枠が表示されます
- 「ストライプ」
-
質問部分に薄いグレー背景が付きます
編集画面にプレビューが表示されるので、確認しながら設定しましょう。
【シンプル】
- 質問1
-
回答1
- 質問2
-
回答2
【線あり】
- 質問1
-
回答1
- 質問2
-
回答2
【ボックス】
- 質問1
-
回答1
- 質問2
-
回答2
【ストライプ】
- 質問1
-
回答1
- 質問2
-
回答2
構造化データを出力する
構造化データとは？
構造化データとは、ウェブページの内容や意味を検索エンジンに正確に伝えるための、HTML内に記述するデータ形式です。
なぜ設定が必要なのでしょうか。
それは、検索エンジンが文章だけではページの内容や文脈を完全に理解できないためです。
例えば、同じ「Apple」という単語だけでは果物なのか企業名なのか、判別ができない場合もありますよね。
構造化データは、Googleにサイトの説明書を渡すようなものです。
ページの内容を明確に伝えることで、検索エンジンからの評価向上が期待できますよ。
構造化データを出力するメリット
構造化データを出力すると以下のようなメリットがあります。
- クリック率の向上につながる
-
リッチリザルト（レビューの星評価、商品価格、レシピの調理時間など）として表示され、クリック率の向上につながります。
- 検索順位の向上に寄与する
-
コンテンツの関連性が正確に伝わることで、適切な検索キーワードでの評価が高まり、検索順位の上昇につながります。
- サイト情報が正しく認識される
-
検索キーワードと記事内容の関連性が明確になり、検索エンジンにサイトの情報を正確に伝えられます。
特にデメリットはないので、基本的にはオンにしておくことをおすすめします。
タイトルのHTMLタグを設定する
この設定では、質問部分（Q）を見出しタグにするか選べます。
例えばh3に設定すると、FAQの質問が記事の目次に表示されるようになります。
読者は目次から知りたい質問へ直接ジャンプできるので便利ですね。
見出しにしたくない場合は「dt」のままで大丈夫です。
アイコンの形を設定する
Q&Aの横に表示されるアイコンの形を、四角・角丸・丸形の3種類から選べます。
【四角】
- 質問1
-
回答1
- 質問2
-
回答2
【角丸】
【丸形】
四角はきっちりとした印象、丸形は柔らかく親しみやすい印象を与えます。
アッフィーわたしは角丸を使うことが多いです
アイコンの色を設定する
アイコンの色は、「Q」と「A」でそれぞれ設定できます。
「テキスト色」「メインカラー」「カスタムカラー」の3種類から選ぶことができ、さらに枠線のみか塗りつぶしかも選択可能です。
（補足1）アイコンのカスタムカラーを変更する
アイコンのカスタムカラーは以下の手順で変更することができます。
WordPress管理画面で「SWELL設定」⇒「エディター設定」の順にクリックしてください。
エディター設定画面が表示されたら、「カラーセット」タブをクリックしましょう。
カラーセットタブをクリックしたら、そのまま下へスクロールし「Q&A設定」を探します。
①「Q」または「A」の「色を選択」をクリックします
②カラーコードを入力する、またはカラーピッカーを移動してカスタムカラーを変更しましょう。
カラーピッカーを使って色を決めるのは難しいので、「こんな色がいいな」と思う色のカラーコードを調べて入力する方法がおすすめです。
カラーコードを調べるなら、Google Chromeの拡張機能「Color Picker for Chrome」を使いましょう！
クリックすると開きます／
「Color Picker for Chrome」を使ってカラーコードを調べる手順はこちら
ChromeウェブストアーからColor Picker for Chromeのページを開きましょう。
ページが開いたら右上にある「Chromeに追加」ボタンをクリックしてください。
「Color Picker for Chrome」を追加するか確認されますので、「拡張機能を追加」をクリックします。
すると、「Color Picker for Chrome」が追加されました、とのコメントが表示されます。
これで「Color Picker for Chrome」の導入は完了です。
導入したらよく使う拡張機能としてお気に入りに固定しておきましょう。
下の画像のように、拡張機能ボタン⇒固定ボタンの順にクリックしてください。
固定すると、Chrome上部にあるツールバーに常時表示されるようになります。
カラーピッカーを使う時は、webサイトを開いた状態で①拡張機能をクリックして表示される、②「PICK COLOR」をクリックしてください。
「PICK COLOR」をクリックすると、カーソル付近が虫眼鏡のように拡大されます。
調べたい箇所にカーソルをおいてクリックしてください。
クリックすると、下図のようにカラーコードが表示されます。
これをコピーすれば、カラーコードのコピーは完了です。
（補足2）アイコンのテキスト色とメインカラーの設定場所
FAQブロックのアイコンカラーはカスタムカラーのほか、テキスト色とメインカラーも選べます。
テキスト色とメインカラーが、どこで設定されているのかを確認しておきましょう。
まず、WordPress管理画面から「外観」⇒「カスタマイズ」の順にクリックしてください。
続いて、「サイト全体設定」⇒「基本カラー」の順にクリックしましょう。
すると、基本カラーの設定画面が表示されます。
メインカラーとテキスト色はここで設定できます。
SWELLのFAQブロックに関するよくある質問
FAQブロックを使う際に、多くの方が疑問に感じるポイントをまとめました。
順番に見ていきましょう。
構造化データは有効化した方がいいですか？
はい、基本的には有効化をおすすめします。
構造化データをオンにすると、Google検索結果にQ&Aがアコーディオン形式で表示される可能性が高まるからです。
通常の検索結果より目立つため、クリック率の向上が期待できますよ。
構造化データが正しく出力されていることを確認する方法は？
Googleが提供する「リッチリザルトテスト」を使えば確認できます。
テストページにあなたの記事URLを入力して「URLをテスト」をクリックするだけです。
数秒待ちましょう。「よくある質問」が表示されていれば正しく設定できています。
もし表示されない場合は、FAQブロックの設定で構造化データがオンになっているか再確認してみましょう。
構造化データは検索順位に影響はありますか？
構造化データ自体は、検索順位に直接影響を与えません。
Googleの公式ドキュメントでも、構造化データがランキング要因ではないと明言されています。
ページに構造化データの問題がある場合は、手動による対策が実施される可能性があります。構造化データに関する手動による対策が実施されると、ページがリッチリザルトとして表示されなくなります。ただし、Google ウェブ検索でのページの掲載順位には影響しません。手動による対策がとられたかどうかを確認するには、Search Console の手動による対策レポートを開いてください。
引用：構造化データに関する一般的なガイドライン
ただし、不適切な使い方をすると手動ペナルティの対象になるリスクがあることに注意しましょう。
よくある質問が目次に反映されないのはなぜ？
目次を作成する階層の設定を「h2」以上としている場合に、FAQブロックのタイトルのHTMLタグを「h3」にしていると目次として表示されません。
目次を作成する階層の設定を変更する手順は、以下の通りです。
WordPress管理画面の「外観」⇒「カスタマイズ」の順にクリックしてください。
「投稿・固定ページ」⇒「目次」の順にクリックしてください。
左のメニューをスクロールダウンして、「どの階層の見出しまで抽出するか」を探しましょう。
「どの階層の見出しまで抽出するか」を「h3」へ変更すれば、質問「Q」部分が目次として表示されますよ。
設定を変更したら、「公開」をクリックして変更を保存してくださいね。
FAQブロックのカスタムカラーを変更したいのですが…
FAQブロックのカスタムカラーは、WordPress管理画面から変更できます。
「SWELL設定」⇒「エディター設定」⇒「カラーセット」⇒「Q&A設定」と進んでください。
ここでQ側とA側のアイコンカラーを自由に設定できます。
詳細は「（補足1）アイコンのカスタムカラーを変更する」で紹介していますよ。
SWELLのFAQブロックで読者満足度とSEO効果を同時に高めよう！
今回は、SWELLのFAQブロックの使い方からカスタム設定まで解説しました。
本記事の内容は以下のとおりです。
FAQブロックの構造化データを出力すれば、Googleの検索結果で「よくある質問」のリッチリザルトを表示することも可能です。
「読者の疑問を先回りして解決したい」という方は、今回紹介した方法を参考にFAQブロックを活用してみてください。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、FAQ形式の構造化データを出力できるSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
