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
FAQを内容ごとにまとめて掲載できる、カテゴリー分けに対応したアコーディオン形式のFAQデザインです。「ご予約について」「お支払いについて」などのカテゴリー見出しをクリックすると、そのカテゴリーに含まれる質問と回答がまとめて開閉します。
開いたカテゴリー内では、複数のQ&Aを縦に一覧表示。質問の先頭には「Q.」、回答には「A.」を表示し、質問にはアクセントカラーを設定することで、カテゴリー → 質問 → 回答という情報の階層がわかりやすい構成になっています。質問ごとに開閉するのではなく、カテゴリー単位でまとめて開閉するのがこのデザインの特徴です。
カテゴリー見出しの右端には、開閉状態を示すFont Awesomeのアイコンを配置。閉じた状態と開いた状態でアイコンが切り替わります。開閉アイコンは複数の候補から変更可能で、DRESSのbefore／after要素の設定を変更することで、サイトの雰囲気に合わせた表示にカスタマイズできます。
質問数が多く、内容をカテゴリーごとに整理して見せたいFAQに適したBlockDesignです。予約・料金・サービス内容・利用方法・キャンセルなど、テーマごとに複数の質問がある「よくある質問」ページを、コンパクトで探しやすくまとめたい場合に活用できます。
faq_005
質問と回答をすべて表示した状態で縦に並べる、見やすさとデザイン性を両立したFAQデザインです。アコーディオン形式ではないためクリック操作は必要なく、ページを読み進めながら質問と回答を続けて確認できます。
質問部分は淡い背景色の帯で強調し、その左側に丸で囲んだ「Q」アイコンを配置。回答側にも丸囲みの「A」を表示することで、質問と回答の関係がひと目でわかるようになっています。質問部分には角丸を設定しており、シンプルながら柔らかく親しみやすい印象に仕上げています。
「Q」「A」は文章として入力するのではなくbefore要素で表示しているため、BiNDup上では質問文と回答文を入力するだけでQ&A形式に整います。またDRESSでは、質問部分の背景色や文字色、Q・Aアイコンの色、枠線、サイズ、余白などを細かく調整可能。サイトのブランドカラーに合わせたFAQにカスタマイズできます。
回答を隠さず最初から読んでもらいたいFAQで、質問部分をしっかり目立たせたい場合に適したBlockDesignです。サービス内容や料金、利用方法、医院・店舗の案内など、質問と回答をわかりやすく区切りながら掲載したいページに幅広く利用できます。
faq_004
faq_002からアコーディオンバーの背景色をなくしたアレンジ版。（アコーディオンブロック）
質問部分をクリックすると回答が開く、シンプルなアコーディオン形式のFAQデザインです。回答を閉じた状態では質問だけが一列に並ぶため、質問数が多い場合でもページをコンパクトにまとめられます。
質問の先頭には「Q」を表示し、右端には開閉状態を示す「＋／−」アイコンを配置。質問をクリックして回答を開くと「＋」が「−」に切り替わり、現在開いている項目が視覚的にもわかりやすい設計になっています。各項目は罫線で区切られており、装飾を抑えたすっきりとしたレイアウトです。
「Q」や右端の開閉アイコンはbefore／after要素を利用して表示しているため、BiNDup上では質問文と回答文を入力するだけでFAQとして整います。
faq_003
faq_002から+ −マークを削除したアレンジ版。（アコーディオンブロック）
質問部分をクリックすると回答が開く、シンプルなアコーディオン形式のFAQデザインです。回答を閉じているときは質問だけがすっきりと並ぶため、複数のQ&Aをコンパクトに掲載できます。
質問の先頭には「Q」を表示し、質問部分全体に薄い背景色を設定。faq_002のように右端へ「＋」などの開閉アイコンを表示せず、より装飾を抑えたシンプルな見た目にしているのが特徴です。質問部分をクリックすることで回答が開閉するため、デザインをすっきり見せながら必要な情報だけを読んでもらえます。
開閉アイコンを目立たせず、シンプルなデザインで「よくある質問」を設置したい場合にも使いやすいBlockDesignです。
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です。
