【SWELL】よくある質問のデザインレイアウト集

いろいろなクライアントさんのWEBサイトをSWELLで作っているとできるだけデザインを同じにしたくないってことありますよね!

このページではよくある質問ページに使えるデザインレイアウトを集めてみました。

目次

よくある質問に使えるデザインレイアウト(QAブロック)

まずはSWELLにもともと入っているQAブロック。(見やすくするために2カラムで表示しています)
QAの文字の形や色も変えることも可能。

QAブロック(シンプル)

QAブロック(線あり)

QAブロック(ブロック)

QAブロック(ストライプ)

よくある質問に使えるデザインレイアウト(アコーディオン)

アコーディオンを使ったよくある質問のパターン。回答を常に出しておくこともできるし閉じておくこともできる。

アコーディオン(デフォルト)

アコーディオン(シンプル)

アコーディオン(囲い枠)

アコーディオン(メインカラー)

アコーディオンを常に開いた場合

アコーディオン(デフォルト)

ここに質問をいれるここに質問をいれるここに質問をいれるここに質問をいれる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

ここに質問をいれるここに質問をいれるここに質問をいれるここに質問をいれる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

アコーディオン(シンプル)

ここに質問をいれるここに質問をいれるここに質問をいれるここに質問をいれる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

ここに質問をいれるここに質問をいれるここに質問をいれるここに質問をいれる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

アコーディオンの矢印のデザインも選べる

矢印アイコン1

矢印アイコン2

矢印アイコン3

よくある質問に使えるデザインレイアウト(キャプションボックス)

ここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

ここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

ここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

ここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

ここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

よくある質問に使えるデザインレイアウト(説明リスト)

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

Q.ここに質問を入れるここに質問を入れるここに質問を入れるここに質問を入れる

ここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れるここに回答を入れる

質問文の前にWEBアイコンいれてもデザイン力アップ

SWELLで使えるアイコン一覧の中の?を質問の前に入れても個性がアップしていいですよね!

入れ方は

またはと入れるだけ

まとめ

意外とよくある質問に使えそうなデザインがあることがわかりました!

よくある質問ページのデザインの参考になれば幸いです^^

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SWELLでサイトのカスタマイズが大好きです!SWELLのすごさをもっと色々な人に広めたい♪

目次