いろいろなクライアントさんのWEBサイトをSWELLで作っているとできるだけデザインを同じにしたくないってことありますよね！
このページではよくある質問ページに使えるデザインレイアウトを集めてみました。
よくある質問に使えるデザインレイアウト（QAブロック）
まずはSWELLにもともと入っているQAブロック。（見やすくするために２カラムで表示しています）
QAの文字の形や色も変えることも可能。
QAブロック（シンプル）
QAブロック（線あり）
QAブロック（ブロック）
QAブロック（ストライプ）
よくある質問に使えるデザインレイアウト（アコーディオン）
アコーディオンを使ったよくある質問のパターン。回答を常に出しておくこともできるし閉じておくこともできる。
アコーディオン（デフォルト）
アコーディオン（シンプル）
アコーディオン（囲い枠）
アコーディオン（メインカラー）
アコーディオンを常に開いた場合
アコーディオン（デフォルト）
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
アコーディオン（シンプル）
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
アコーディオンの矢印のデザインも選べる
矢印アイコン１
矢印アイコン２
矢印アイコン３
よくある質問に使えるデザインレイアウト（キャプションボックス）
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
よくある質問に使えるデザインレイアウト（説明リスト）
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
- Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる
-
ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる
質問文の前にWEBアイコンいれてもデザイン力アップ
SWELLで使えるアイコン一覧の中の？を質問の前に入れても個性がアップしていいですよね！
入れ方は
またはと入れるだけ
まとめ
意外とよくある質問に使えそうなデザインがあることがわかりました！
よくある質問ページのデザインの参考になれば幸いです^^
