オブジェクト：FAQ

概要 #

FAQオブジェクトは、「よくある質問（Frequently Asked Questions）」を視覚的かつ整理された形で掲載するためのパーツです。
質問と回答のセットを折りたたみ形式で表示でき、閲覧者は必要な情報だけを簡単に確認できます。
デザインスタイル（アイコン形式、スイッチ形式など）を選ぶことで、ページの雰囲気や用途に合わせた表示が可能です。
商品説明ページ、サポート情報、ガイドページなどで、ユーザーの疑問や不安を事前に解消する手段として有効です。

FAQの説明 #

FAQオブジェクトの追加方法 #

ページ内に「よくある質問」や「補足説明」を掲載したい場合は、以下の手順でFAQオブジェクトを追加します。

1. 画面左側のメニューから 「オブジェクト」 セクションを開きます。
2. 一覧の中から 「FAQ」 オブジェクトを見つけます（吹き出しが2つ重なったアイコン）。
3. 「FAQ」オブジェクトをクリック、またはキャンバス上の任意の場所へドラッグ＆ドロップします。

FAQオブジェクトは、製品の詳細補足、よくある質問の整理、ユーザーの疑問解消などに役立ちます。

  #

FAQの選択画面の説明 #

FAQスタイルの選択画面について #

FAQオブジェクトをキャンバス上にドラッグ＆ドロップすると、自動的にスタイル選択画面（FAQ選択）が開きます。
この画面では、FAQ表示の見た目や動きに応じたデザインテンプレートを選択できます。

• アイコンスタイル： 質問アイコン付きのFAQブロック
• スイッチスタイル1〜4： 折りたたみ形式でFAQを表示。デザインが異なる4タイプ
• ベーシックスタイル： シンプルな表示形式で、背景色を使ったFAQ表示

スタイルを選択すると、キャンバス上にそのFAQテンプレートが挿入され、すぐに編集できます。
目的やデザインに合わせて最適なスタイルを選びましょう。

FAQの設定項目説明 #

FAQオブジェクトの設定項目について #

FAQオブジェクトを選択すると、右側の設定パネルに以下の項目が表示されます。
これらの設定を通じて、表示内容や色合いを自由に調整できます。

1. タイトル
   各FAQの質問文を入力します。
   編集アイコン（✎）をクリックすると質問と回答を編集できます。
   ゴミ箱アイコン（🗑）でその項目を削除、「＋項目を追加」で新しいFAQを追加できます。
2. メインカラー
   強調表示部分に使われる基本のカラーを設定します。
   カラーコードを直接入力するか、カラーパレットで選択します。
3. サブカラー
   回答エリアやアクセント部分の背景色として使用される補助色です。
   メインカラーと組み合わせて、視認性やデザイン性を高めることができます。

この他にも「フォント」「デザイン」「レイアウト」「表示設定」「その他」などのタブから詳細設定が可能です。

操作説明 #

FAQを挿入したい位置へドラッグ&ドロップで貼り付けることができます。

FAQを選択すると右上にサブメニューが表示されます。

1. クリックしながらドラッグ&ドロップで任意の場所へ移動できます。
2. FAQを複製します。
3. FAQを削除します。
4. ブロックに保存します。

FAQ #

1. 各項目の順序を変更したり内容の編集ができます。
2. FAQのメインカラーを設定します。
3. FAQのサブカラーを設定します。

アイコン #

1. アイコンを選択します。
2. アイコンカラーを選択します。
3. アイコンのサイズを設定します。

フォント #

1. フォント設定を変更したいテキストを選択します。
2. フォント形式を設定します。
3. フォントを選択します。
4. テキストカラーを選択します。
5. テキスト背景カラーを選択します。
6. フォントサイズを設定します。
7. 行間を設定します。
8. 文字間を設定します。
9. 配置を選択します。

デザイン #

デザインの項目を変更することでFAQのデザインを変更できます。

1. 背景を画像、単色、グラデーションの3つから選択できます。
2. 背景設定で選択した背景情報がレイヤーとして表示されます。
3. ボーダー設定はなし、実線、点線の3つから選択でき、線の太さを設定することができます。
4. ボーダーコーナーはボーダーの丸みを設定できます。
5. シャドウ設定ではインナー、ドロップ、テキストの3つから選択でき、それぞれシャドウの詳細な設定ができます。

レイアウト #

レイアウトの項目を変更することでFAQのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 横幅を固定から、最小、最大とそれぞれ設定できます。
3. 高さを固定から、最小、最大とそれぞれ設定できます。
4. 水平方向の項目を変更することでFAQの水平方向の配置を変更できます。
5. 垂直方向の項目を変更することでFAQの垂直方向の配置を変更できます。
6. Z-indexを設定することでFAQの重なり順を設定することができます。

表示設定 #

表示設定を変更することでFAQを表示したり非表示にする条件を設定できます。

1. レスポンシブの項目を変更することでデスクトップのみやモバイルのみに表示することができます。
2. アンカーリンクを設定することができます。
3. ログインユーザーのみ表示したり、さらにタグで絞りこんで条件表示することができます。

その他 #

1. CSS IDを設定できます。
2. CSS Classを設定できます。
3. メモを書いておくことができます。