FAQ よくある質問で使われるデザインサンプルとコード

WEBサイトのFAQ、Q&A、よくある質問でよく使われるデザインのサンプルを紹介します。

作成した時のポイントは以下です。

  • 質問がひと目で分かる視認性
  • 質問と回答の違いが明確

スタンダードなアコーディオンFAQ

罫線でデザインをしたスタンダードなアコーディオンFAQです。

特徴

  • レスポンシブ
  • 罫線で区切り
  • アコーディオンはJavascriptを使用
  • Javascriptオフ時は全展開

デモ

See the Pen
FAQ1
by kura (@kuranopen)
on CodePen.

コード

See the Pen
FAQ1
by kura (@kuranopen)
on CodePen.

ボックス型のアコーディオンFAQ

ボックス型のメリハリのあるアコーディオンFAQ。

特徴

  • レスポンシブ
  • ボックスで区切り
  • アコーディオンはJavascriptを使用
  • Javascriptオフ時は全展開

デモ

See the Pen
FAQ2
by kura (@kuranopen)
on CodePen.

コード

See the Pen
FAQ
by kura (@kuranopen)
on CodePen.

おすすめ書籍

  • このエントリーをはてなブックマークに追加

デザイナーのUIメモ帳

Google Map

ヒーローエリア

ラジオボタン

FAQ