Q&Aをアコーディオン形式にしてみました
弊社ホームページのQ&Aページは非常に長いのです。先ほど概算でカウントしてみますと、 5,283文字ありました。
うーん、長くて全部読む人、もちろんいないです(笑)。
ホームページ制作に関することを書いているのですが、質問をクリックすれば答えの部分に飛ぶ仕様になっていました。
質問が並んでいて、それをクリックすると、
このように同じページ内下部の、回答部分にリンクで移動します。
お客様から自社サイトのQ&Aの質問部分をクリックすると、回答部分が開くようにできないか?とご依頼を受けました。
折りたたみを形式で、ページには質問の部分だけが並んでいるようにしたいというお話があり、その実装のために自社サイトでまずテストをしてみました。
弊社のサイトではパソコンでの閲覧とスマホでの閲覧が半分半分くらいなのですが、そのお客様のサイトではスマホでの閲覧が大半を占めており、小さい画面で質問の一覧が見れてその都度回答が開くような形式の方が見やすいのではないかというご提案をいただいたのです。
そこでどのようなコードを追加記載して行けば、一番シンプルでわかりやすい「よくあるご質問」のページになるかなと試行錯誤してみました。
そんなこんなもあり、現在自社サイトのQ&Aを折りたたみ型にしてみました。
こちらがそのページになります。下記のように、クリックした質問項目の回答が開閉式で表示されます。
この折りたたみ式のQ&Aは、よくスマホ閲覧時の「メニュー」箇所にも使われる形式なのですが、「アコーディオン形式」とも言われています。標準で回答が非表示になっているため、SEO的には悪くなるかもと思い、調査したのですが、隠しテキストのような扱いをどうやら受けていないようです。
Googleが正式にヘルプなどで書いている文面は見つけることができなかったのですが、「アコーディオン形式」でコンテンツを隠しているサイトも、問題無く検索エンジンにインデックスされているようです。テキストが隠れているからといって特に検索エンジン順位操作のペナルティにはならないようです。
これはSEO的にどうのというよりも、実際のユーザーにとって使いやすいかどうかで実装する部分ですので、ユーザビリティの観点から考えてGoogleが判断しているのではないかと推測します。

ということで今回、たくさんのQ&Aがひとつのページに書かれている会社様について、このような実装をして行こうと思います。
Q&Aはたくさん書いてくださいと私もお客様に伝えていますので(私がお客様の代理で書いていくこともあるのですが)、こちらも運営代行の中で適時、そうした方が良さそうなWordPressで制作させていただいたお客様に対しては、「このような形にすることもご検討されてはいかがですか?」と、お伝えしていきたいと考えています。
こんな感じで様々なお客様やお問い合わせの中でいただいた疑問点は、自らのサイトだけでなくクライアントのサイトのユーザビリティの向上にも役立てていくことができますので、本当にありがたいです。
お客様からいただくご提案や色々なご質問で新たな視界が開けていく、そういうことが本当に日々多いと感じるので、できるだけ積極的にお客様とコンタクトを取って行かなければならないと、当たり前ですが再認識しております。
ホームページは制作時に実装していた内容が古くなってきたり、時代の進化とともに新しいデバイスやツールによって便利に進化してくるのがこのIT・Webの世界です。
現在のWordPressではブロックエディタを使えば、難しいCSSの記述を行わなくても、Q&Aのアコーディオンメニューなどもすぐに作れます。例えば下記のプラグインを有効化するだけでアコーディオンメニューが使えます。
およそ4~5年以上前に作られたホームページでは、様々な便利なツールやユーザビリティの向上になるような修正や改善項目が出てくると思います。
時代が便利な方向に進んでいるので、その便利さをあなたのホームページにも実装していくことでお客様や社会の進歩にキャッチアップしていくことになります。
あなたもご自身のサイトで、もっと便利な使い方や見やすい方法がないか?といった視点で常に自社ホームページに関わってみてください。
山口 敦
最新記事 by 山口 敦 (全て見る)
- 制作会社のテーマでアップデートが出来ない場合の対応方法【第240回】 - 2021年1月25日
- 2021年のWordPressのバージョンアップ予定【第239回】 - 2021年1月13日
- 【第23回】ドメインについて③独自ドメインによる運営が推奨される理由「ワードプレス作成講座」 - 2020年11月27日
- 【第22回】ドメインについて②ドメインの取得とネーミング方法「ワードプレス作成講座」 - 2020年11月11日
- 【第21回】ドメインについて①知っておきたいドメインの基礎「ワードプレス作成講座」 - 2020年10月9日
WordPress作成講座の動画一覧
WordPressの作成や運用方法の講座【40代以上初心者向け「ワードプレス作成講座」】をYou Tubeの弊社チャンネル内で開講しております。WordPressに関心のある方はこちらからチャンネル登録(無料)を行っておいてくださいね。
メールフォームはこちら
ご質問だけでも大歓迎!