faq_012
BiND Pressを使ったQ&Aです。質問を定期的に増やしていくような時に便利です。色はDRESSから簡単に変更できます。
faq_011
ページレイアウトでサイド＋メインを選択している時のデザインです。サイドをスティッキーブロックに設定して質問を固定し、選択された回答のブロックに移動して表示される設定にしています。回答文章が長くなるような時に便利です。色はDRESSから簡単に変更できます。
faq_010
左右違いブロックで、左にタイトル、右に質問と回答というレイアウトです。質問は小見出し、回答は本文で、それぞれに余白や横線などを設定しています。
色はDRESSから簡単に変更できます。
faq_009
faq_008のアレンジ版。色はDRESSから簡単に変更できます。
faq_008
質問（タイトル）に色を設定し、Qも丸型で背景色を設定したfaq_007のアレンジ版。色はDRESSから簡単に変更できます。
faq_007
質問・回答ごとに「分割」を入れて、カラムに対して枠線などを設定しています。質問はタイトル、回答は本文の設定で、Q,Aのマークは自動的に付与されます。色はDRESSから簡単に変更できます。
faq_006
質問をカテゴリー事にアコーディオンブロック別けて、カテゴリー内の質問・回答は小見出しと本文で設定してあります。Qを小見出し、Aを本文としてDRESSで設定済み。Q,Aのマークは自動的に付与されます。また、色はDRESSから簡単に変更できます。
faq_005
Qを大見出し、Aを本文としてDRESSで設定済み。Q,Aのマークは自動的に付与されます。また、色はDRESSから簡単に変更できます。
faq_004
faq_002からアコーディオンバーの背景色をなくしたアレンジ版。（アコーディオンブロック）
faq_003
faq_002から+ −マークを削除したアレンジ版。（アコーディオンブロック）
faq_002
質問部分をクリックすると回答が開く、アコーディオン形式のFAQデザインです。回答を閉じた状態では質問だけがコンパクトに並ぶため、質問項目が多い場合でもページが縦に長くなりすぎず、必要な回答を選んで読んでもらえます。
質問の先頭には「Q」を表示し、右端には開閉状態を示すアイコンを配置。これらはbefore／after要素を利用しているため、BiNDup上では質問文と回答文を入力するだけでFAQとして整った表示になります。開閉アイコンにはFont Awesomeを使用しており、閉じているときと開いているときでアイコンが切り替わるように設定されています。
デザインは、質問の「Q」を文字だけで見せるシンプルなタイプに加えて、「Q」を四角い背景色で囲んだバリエーションも用意。DRESSから文字色や背景色などを変更できるため、サイトのイメージカラーに合わせた調整も可能です。
質問数が多いFAQをすっきり整理して掲載したい場合に使いやすいBlockDesignです。サービス内容、料金、申込み方法、利用上の注意など、複数の質問と回答をまとめる「よくある質問」ページはもちろん、ページの途中に数項目だけQ&Aを設けたい場合にも利用できます。
faq_001
質問と回答をシンプルに縦に並べた、スタンダードなFAQデザインです。質問を「タイトル」、回答を「本文」として入力するだけで、それぞれの先頭に「Q.」「A.」がbefore要素で自動表示されるため、BiNDup上では通常どおり文章を入力するだけでQ&A形式に整います。
質問の「Q.」と質問文はブルー、回答の「A.」は赤系のアクセントカラーを使い、装飾を抑えながら質問と回答を視覚的に区別。回答部分はインデントを設定しているため、文章が複数行になっても「A.」の下に文字が回り込まず、長めの回答でも読みやすく表示できます。
DRESSでは、質問・回答それぞれの文字色や文字サイズ、「Q.」「A.」の色や背景、余白などを変更できるため、サイト全体の配色や雰囲気に合わせたカスタマイズも可能です。
アコーディオンで開閉するタイプではなく、質問と回答を最初からすべて表示するシンプルなFAQなので、質問数がそれほど多くなく、回答内容まで一覧で読んでもらいたい「よくある質問」ページや、サービス・料金・利用方法などのQ&Aに使いやすいBlockDesignです。
