折りたたみ式のQ&Aは、「アコーディオン形式」とも言われています。標準で回答が非表示になっているため、SEO的には悪くなるかもと思い、調査したのですが、隠しテキストのような扱いを受けていないようです。

「アコーディオン形式」でコンテンツを隠しているサイトも、問題無く検索エンジンにインデックスされているようです。テキストが隠れているからといって特に検索エンジン順位操作のペナルティにはなりません。安心して使える機能です。

さて、アコーディオン型のQ&Aとは下記のようなものです。Qが一覧で並んでいて、Qをクリックすると、隠されていたAの部分が開いて回答が表示されます。(下記画像参照)

弊社のQ&Aページにも、質問をクリックすればすぐに回答が開く、アコーディオン方式を導入してみました。

Lightningテーマで使える、有料のG3プラグインを導入していますので、WordPressのブロックエディタから「Pro」の上の方に、「アコーディオン」という機能があります。

この機能を使えば、簡単に、上下2つのブロックの上にQを記載し、下にAを記載すれば、イメージ通りのアコーディオン型Q&Aが簡単にサイトに実装できます。

アコーディオンブロックを選択して、上のスペースにQ、下のスペースにAとなる内容をテキストで記載していくだけです。もちろんリンクの設定もできます。

もちろん、こんな感じで画像や図表を入れたりすることも簡単にできますので、使い勝手が非常に良いのです。

このプラグインを使うまでは、アコーディオンに使える無料プラグインがないかどうか探したりしていたのですが、Lightningのテーマにしてからは、このG3用の有料プラグインを導入すれば、どんどん新しいブロックエディタの機能やWordPressの進化に合わせた開発され、都度実装されます。

年間で1万円弱ほどライセンス料がかかるのですが、事業用のサイトを運営されている方は非常に便利に使えると思います。

下記のように質問が並んでいて、それをクリックすると、薄い赤色の背景色に設定した「A」のブロックが開きます。テキストの色や背景色、スペースなども調整できます。

このように同じページ内で隠れているブロックがクリックで開きます。こちらのページです → https://www.webroad.co.jp/faq/

ちなみに、アコーディオンをするようになったきっかけは、お客様からQ&Aの質問部分をクリックすると、回答部分が開くようにできないか?とご依頼を受けたからです。

コンテンツを折りたたみ形式で、ページには質問の部分だけが並んでいるようにしたいというお話があり、その実装のために自社サイトでまずテストをしてみました。

弊社のサイトではパソコンでの閲覧とスマホでの閲覧が半分半分くらいなのですが、そのお客様のサイトではスマホでの閲覧が大半を占めており、小さい画面で質問の一覧が見れてその都度回答が開くような形式の方が見やすいのではないかというご提案をいただいたのです。

そこでどのようなコードを追加記載して行けば、一番シンプルでわかりやすい「よくあるご質問」のページになるかなと試行錯誤してみました。

数年前まではCSSでコードを書いてアコーディオンを実装していたのですが、プラグインで簡単に設定できる時代になってきましたので、それを活用するほうが時間短縮に繋がります。

セールスレターを書く

Q&Aはたくさん書いてくださいと私もお客様に伝えていますので(私がお客様の代理で書いていくこともあるのですが)、こちらも運営代行の中で適時、そうした方が良さそうなWordPressで制作させていただいたお客様に対しては、「このような形にすることもご検討されてはいかがですか?」と、お伝えしていきたいと考えています。

様々なお客様やお問い合わせの中でいただいた疑問点は、自らのサイトだけでなくクライアントのサイトのユーザビリティの向上にも役立てていくことができますので、本当にありがたいです。

お客様からいただくご提案や色々なご質問で新たな視界が開けていく、そういうことが本当に日々多いと感じるので、できるだけ積極的にお客様とコンタクトを取って行かなければならないと、当たり前ですが再認識しております。

ホームページは制作時に実装していた内容が古くなってきたり、時代の進化とともに新しいデバイスやツールによって便利に進化してくるのがこのIT・Webの世界です。

現在のWordPressではブロックエディタを使えば、既に難しいCSSの記述を行わなくても、Q&Aのアコーディオンメニューなどもすぐに作れます。

一般的に、4~5年以上前に作られたホームページでは、様々な便利なツールやユーザビリティの向上になるような修正や改善項目が出てきます。

時代が便利な方向に進んでいるので、その便利さをあなたのホームページにも実装していくことでお客様や社会の進歩にキャッチアップしていくことになります。

あなたもご自身のサイトで、もっと便利な使い方や見やすい方法がないか?といった視点で常に自社ホームページに関わってみてくださいね。

こちらが最新情報です

01メルマガバックナンバー
もっと楽しむWordPress!HP以外の使い方大公開New!!
WordPress講座
お問い合わせフォームに管理者へメールが届いていない!?
ホームページ制作
物件情報デモサイトを公開!〜自社ホームページでも便利な機能を導入しませんか?〜
Lightningテーマの使い方
【検索・予約・イベントカレンダー】機能体験型デモサイトをオープン!
01メルマガバックナンバー
音声検索に強いウェブサイトへの変革
ホームページ制作
ドメイン・サーバー管理は制作会社にお願いした方がいいの?
ホームページ制作
企業ホームページ立ち上げの際のドメインの決め方
ホームページ制作
ホームページはWordPressで作成した方が良いですか?
Web制作の費用や相場
ホームページ制作会社選び|価格以外はどこで見分けるの?
サイト運営ノウハウ
効果のあるサイト改善「お問い合わせフォーム」の見直し
ホームページ制作
リニューアルが不要になる!簡単にサイト改善できる3項目
WordPress講座
ドメインとサーバー移転の基礎

投稿者プロフィール

山口 敦
山口 敦
2004年頃の会社員時代からブログ作成を始める。ブログ作成が楽しくなり、そのまま趣味が高じて2006年にホームページ制作で起業、2008年に株式会社ウェブロードを設立。現在は、個人・中小事業者のWordPressサイト制作・改善を中心に、Web業界17年の知識と経験を生かして、大型案件のWebディレクターとしても活動中。 プロフィールはこちら

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)