Q&A(FAQ)をおしゃれにするCSSスニペット10選。よくあるご質問を見やすく！
スタイリッシュなデザインの「よくあるご質問」(FAQ)のCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインは利用者の興味を引き付けます。
ユーザの質問に対する回答を事前に掲載しておいて、問い合わせコストを下げてくれるのがQ&A(FAQ)。多くの利用者を抱えるサイトでは必須の機能と言えるでしょう。
なお、Q&A（Question and Answer）とFAQ（Frequently Asked Questions）は厳密には別ですが、デザインとしては共通しているのでまとめた記事としています。
Q&A（Question and Answer）は「質問と回答」を意味し、一般的に特定のトピックやテーマに関する質問があり、それに対する回答が与えられる形式のコンテンツを指します。
一方、FAQ（Frequently Asked Questions）は「よくある質問」を意味し、特定のトピックや製品、サービスなどに関する一般的な質問とその回答をまとめたものを指します。FAQは一般的にウェブサイトや製品の説明書などに掲載され、ユーザーがよくある疑問や問題を簡単に解決できるようにするためのものです。
つまり、Q&Aは広い意味で質問と回答を指し、FAQはよくある質問とその回答をまとめたものを指します。FAQはQ&Aの一形態として考えることができます。
本記事ではフォームの中でも「Q&A(FAQ)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
Q&A(FAQ)の基本デザイン。シンプルでわかりやすいCSSデザイン例。
シンプルなBootstrapアコーディオンを利用したQ&A(FAQ)
See the Pen
Bootstrap Accordion FAQ by John Fink (@johnfinkdesign)
on CodePen.
Bootstrapデザインのアコーディオンを使った最もシンプルなFAQデザインでしょう。
昔から一番見るタイプのFAQですね。シンプルな下地に右側に「＋」「-」のアイコンだけ付いているので開閉できることがわかりやすいです。
単純＋基本的ですので、どんなウェブサイトにも馴染むかと思います。
シンプルなアコーディオンFAQ
See the Pen
Basic FAQ by Dave Alger (@run-time)
on CodePen.
こちらもシンプルなFAQです。
項目をタップすると、パカっと中身が現れます。アニメーションは、左側のアイコンが少しだけ変化するだけですが、とても見やすいですね。
独立したFAQページだけでなく、コンテンツ内にも入れやすいので、どんな使い方をしてもすっきりまとまったデザインになりそうです。
シンプルなマテリアルデザインのQ&A(FAQ)
See the Pen
Pure CSS Accordion by Dannie Vinther (@dannievinther)
on CodePen.
こちらはマテリアルデザイン風のQ&A(FAQ)。
中身が開くと項目タイトルの色と右側のアイコンが変化します。シンプルですが見やすいQ&A(FAQ)なので、こちらも参考にできそうです。
企業のサイトを見ても、このタイプのQ&A(FAQ)を採用していることが多い印象を受けます。やはり、見やすくて無難なのはこういうデザインなんでしょう。
スタイリッシュなアコーディオンタイプのQ&A(FAQ)
See the Pen
FAQ by Katherine Kato (@kathykato)
on CodePen.
こちらも、中身が開くと項目タイトルの色と右側のアイコンが変化します。
型としては最もシンプルなアコーディオンタイプのFAQなのですが、全体のバランスがとてもスタイリッシュですね。
Q&A(FAQ)の基本デザインとして、最も参考にしたいデザインサンプルです。
動きが洗練！秀逸なカッコいいデザインのQ&A(FAQ)CSSサンプル
タイトル部分を装飾した2段組Q&A(FAQ)
See the Pen
Faq by Baahubali (@baahubali92)
on CodePen.
こちらのQ&A(FAQ)はタイトルの部分を少し装飾したデザインになっています。タイトルの背景と白抜き文字でコントラストになっていますので、質問文が非常に見やすくなっていますね。
また、Q&Aは横2列に段組みになっているのもポイント。レスポンシブなので、スマホだと1段になります。回答文が長文のものが多い場合は選択しにくいデザインなのですが、回答文が短いものが多い場合はスペースを有効活用できて良いですね。
ホバーアニメーションのQ&A(FAQ)
See the Pen
FAQ by Baahubali (@baahubali92)
on CodePen.
デザインとしてはとてもシンプルなFAQです。カードタイプのフラットデザインで、とても見やすいですね。
ポイントは質問項目に番号が振ってある点と、マウスオーバーでホバーアニメーションする点です。
こちらも全体のバランスが良い素敵なデザインサンプルですね。
とても可愛い！背景が面白いQ&A(FAQ)
See the Pen
FAQ Accordion by Solygambas (@solygambas)
on CodePen.
こちらのデザインサンプルは、解答欄が開くとアクティブになり、背景にQAの吹き出しイラストが現れます。とても可愛いデザインのQ&A(FAQ)です。
通常のアコーディオンと異なり、それぞれの質問項目が独立しているので、全て開くこともできます。
シンプルなQ&A(FAQ)でなく、少しアクセントを入れたい場合、背景にイラストやアイコンを使うのは面白いアイデアだと思います。
回答がポップ表示されるQ&A(FAQ)
See the Pen
FAQs Responsive by ioannis pelelis (@gpelelis)
on CodePen.
こちらはアコーディオンタイプのQ&A(FAQ)ではなく、質問項目をタップすると右側に回答がポップされるタイプのQ&A(FAQ)です。
分類毎に回答が表示される場所が固定されているので、限られた固定のスペースを使ってQ&A(FAQ)を実装したい場合に良さそうです。
シンプルなメニュータイプのアコーディオンQ&A(FAQ)
See the Pen
Bootstrap 4.1 FAQ example with tabs and accordions by Morten Sørensen (@moso)
on CodePen.
こちらはメニュータイプのQ&A(FAQ)です。
左のメニューで分類を選択すると、分類毎の質問・回答項目が右側に出てくるデザインになっています。
デザイン自体は非常にシンプルなアコーディオンなのですが、質問項目がたくさんあって分類を設けたい場合に、とても参考になるデザインサンプルなのではないでしょうか。
スタイリッシュなメニュータイプのQ&A(FAQ)
See the Pen
Accordion with pagination by chris maki (@chrisMaki)
on CodePen.
こちらもメニュータイプのQ&A(FAQ)です。
上のメニューで分類を選択すると、分類毎の質問・回答項目が下側に出てくるデザインになっています。
こちらはだいぶ凝ったデザインになっていて、非常にスタイリッシュです！デザインに工夫したQ&A(FAQ)を考えている方には参考になるのではないでしょうか。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
