> For the complete documentation index, see [llms.txt](https://help.genser.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.genser.ai/ja/design/widget.md).

# ウィジェット・デザイン設定

ウィジェット・デザイン は、ブランドの自社ECサイトにAI対話型検索をすぐに導入できる小型ウィジェットです。ウィジェットのデザインとオーバーレイ画面を自由に設定し、準備が整ったら公開に切り替えてサイトに表示することができます。

<figure><img src="/files/fR3u5UKyxSvoCHrsIAyX" alt=""><figcaption></figcaption></figure>

***

## **1. 公開/非公開**

ページ上部のトグルで、ウィジェット・デザインの表示/非表示を設定します。

<figure><img src="/files/g8hkEgdQZoH2z0aPQJFH" alt=""><figcaption></figcaption></figure>

* **非公開（デフォルト）：** サイトにウィジェット・デザインが表示されません。デザインを自由に設定し、プレビューで確認できます。
* **公開：** スクリプトがインストールされているサイトにウィジェット・デザインが表示されます。

公開に切り替えるには、**\[デザイン設定]** が完了している必要があります。公開後にウィジェット・デザインが正常に表示されるには、genser ウィジェット・デザイン スクリプトがインストールされている必要があります。インストールの有無は自動で確認されないため、[**\[スクリプトガイド\]**](https://help.genser.ai/ja/developers/script-guide/genser-discovery-mini) を参照してご自身でご確認ください。

{% hint style="warning" %}
公開状態の場合、デザインの変更内容が即時反映されるためご注意ください。
{% endhint %}

***

## **2. ウィジェットデザイン設定**

訪問者の画面に表示されるウィジェットの外観と位置を設定します。まずウィジェットタイプを選択してから、詳細項目を設定してください。

<figure><img src="/files/lb15S1b4NpNNaIMQYpvC" alt=""><figcaption></figcaption></figure>

デザイン設定エリア上部の **\[デフォルトにリセット]** ボタンをクリックすると、ウィジェットとオーバーレイのすべての設定がデフォルト値に戻ります。デフォルトにリセット後は以前の設定値を復元できないため、ご注意ください。

### **2-1. ウィジェットタイプ**

右側のドロップダウンから **基本** または **カスタム** を選択します。

<figure><img src="/files/kfAWamyK0jY4t6zXgGlB" alt=""><figcaption></figcaption></figure>

* **基本（デフォルト）：** genser が提供するウィジェット（円形・ドロワー型・ボトムバー型）を使用します。タイプを選択し、詳細項目を設定してください。
* **カスタム：** 自社モールに直接設定したウィジェット要素にオーバーレイを連携します。**\[スクリプトガイド]** を確認して、ウィジェット要素にオーバーレイを連携してください。

{% hint style="warning" %}
カスタムウィジェットを使用する場合、ウィジェットのプレビューはサポートされません。
{% endhint %}

{% tabs %}
{% tab title="円形" %}
画面の隅に円形ボタンとして表示されます。クリックするとオーバーレイが開きます。

<figure><img src="/files/4TQd4dVhfggRl0EKoFZR" alt=""><figcaption></figcaption></figure>

#### **アイコン**

* **ロゴ画像と同一：** \[デザイン設定 > ロゴ画像]にアップロードされた画像が自動的に適用されます。以降ロゴ画像を変更すると、ウィジェットアイコンも同時に変更されます。
* **カスタム設定：** 別途画像をアップロードできます。
  * **アップロード規格**

    | 項目      | 説明                                       |
    | ------- | ---------------------------------------- |
    | 画像構成    | デザイン最適化のため、背景のない画像を推奨します。                |
    | ファイル形式  | PNG、SVG形式のファイルのみアップロードできます。              |
    | ファイルサイズ | 最大30KBまでアップロードできます。                      |
    | ファイル数   | 最大1ファイルまでアップロードできます。                     |
    | アスペクト比  | 縦横比が1:1の場合のみアップロードできます。                  |
    | 画像サイズ   | 縦横96px以上の場合のみアップロードでき、推奨サイズは200×200pxです。 |

#### **背景色**

背景色を設定します。HEXコードを直接入力するか、パレットから選択できます。

{% hint style="info" %}
不正なHEXコードを入力したり、入力値をすべて削除してクリックを解除すると、デフォルト値に自動復元されます。

* **不正なコード例：** `123456`（#なし）、`12#3456`（#位置エラー）、`#12G45Z`（16進数以外の文字を含む）
  {% endhint %}

#### **サイズ**

ウィジェットのサイズを32\~96pxで設定できます。

#### **表示位置**

* **基準位置：** ウィジェットを画面のどの位置に固定するかを選択します。デフォルトはBR（右下）で、選択した位置によってオフセットの測定基準と設定範囲が変わります。

  | 基準位置               | オフセット測定基準              | デフォルト値                   | 設定範囲                                    |
  | ------------------ | ---------------------- | ------------------------ | --------------------------------------- |
  | コーナー (TL/TR/BL/BR) | 選択したコーナー端からウィジェットまでの距離 | <p>X: 24</p><p>Y: 24</p> | 0\~100px                                |
  | 上端/下端 (T/B)        | 画面横方向の中心点からウィジェットまでの距離 | <p>X: 0</p><p>Y: 24</p>  | <p>X: -100~~100px</p><p>Y: 0~~100px</p> |
  | 左端/右端 (L/R)        | 画面縦方向の中心点からウィジェットまでの距離 | <p>X: 24</p><p>Y: 0</p>  | <p>X: 0~~100px</p><p>Y: -100~~100px</p> |
* **オフセット：** 基準位置からウィジェットまでの距離を表す値です。Xは左右、Yは上下方向の移動を意味します。例えばBR（右下）でX: 24、Y: 24に設定すると、画面右下のコーナーから左に24px、上に24px離れた位置にウィジェットが表示されます。
* **Z-Index：** ウェブページ上の要素が重なる際にどちらを前面に表示するかを決める順序値です。数値が大きいほど他の要素より前面に表示されます。ウィジェットがサイトの他の要素に隠れてしまう場合は、Z-Indexをより大きい値に設定してください。

#### **スタイル**

* **角丸：** 0\~99%の範囲でボタンのコーナーの丸みを設定します。
* **シャドウ：** On/Offを設定できます。デフォルトはOffで、Onにすると以下の項目を調整できます。

  | 項目    | 説明                              | デフォルト値                 | 範囲          |
  | ----- | ------------------------------- | ---------------------- | ----------- |
  | カラー   | シャドウの色（HEX）と不透明度（%）を設定します。      | #000000, 20%           | —           |
  | オフセット | ウィジェットからシャドウが離れるX・Y方向の距離です。     | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | ブラー   | シャドウの境界がどれくらいぼけるかを調整します。        | 16px                   | 0\~50px     |
  | スプレッド | シャドウがウィジェットよりどれくらい広く広がるかを調整します。 | 0px                    | 0\~30px     |

{% endtab %}

{% tab title="ドロワー型" %}
画面の端に縦方向のタブ形式で表示されます。デフォルトの位置は画面右中央です。

<figure><img src="/files/qfEuEeJJv49Qd2BeAT4n" alt=""><figcaption></figcaption></figure>

#### **アイコン**

* **ロゴ画像と同一：** \[デザイン設定 > ロゴ画像]にアップロードされた画像が自動的に適用されます。以降ロゴ画像を変更すると、ウィジェットアイコンも同時に変更されます。
* **カスタム設定：** 別途画像をアップロードできます。
  * **アップロード規格**

    | 項目      | 説明                                       |
    | ------- | ---------------------------------------- |
    | 画像構成    | デザイン最適化のため、背景のない画像を推奨します。                |
    | ファイル形式  | PNG、SVG形式のファイルのみアップロードできます。              |
    | ファイルサイズ | 最大30KBまでアップロードできます。                      |
    | ファイル数   | 最大1ファイルまでアップロードできます。                     |
    | アスペクト比  | 縦横比が1:1の場合のみアップロードできます。                  |
    | 画像サイズ   | 縦横96px以上の場合のみアップロードでき、推奨サイズは200×200pxです。 |

#### **タイトル**

ウィジェットに表示するテキストをOn/Offします。Onに設定するとテキスト入力フィールドが表示されます。

{% hint style="info" %}
アイコンとタイトルのいずれか一方は必ずOnにする必要があります。両方をオフにしようとするとガイドメッセージが表示されます。
{% endhint %}

#### **背景色**

背景色を設定します。HEXコードを直接入力するか、パレットから選択できます。

{% hint style="info" %}
不正なHEXコードを入力したり、入力値をすべて削除してクリックを解除すると、デフォルト値に自動復元されます。

* **不正なコード例：** `123456`（#なし）、`12#3456`（#位置エラー）、`#12G45Z`（16進数以外の文字を含む）
  {% endhint %}

#### **サイズ**

* **幅：** 32\~80pxで設定できます。（デフォルト：40px）
* **高さ：** 自動/固定で切り替えられます。
  * **自動：** アイコン・タイトルの設定に応じて自動調整されます。
  * **固定：** 32\~320pxで直接設定できます。（デフォルト：96px）

#### **表示位置**

* **基準位置：** ウィジェットを画面の左（L）または右（R）に固定する位置を選択します。デフォルトはR（右）です。
* **オフセット：** Y軸オフセットで上下位置のみ調整できます。

  | オフセット測定基準              | デフォルト値 | 設定範囲        |
  | ---------------------- | ------ | ----------- |
  | 画面縦方向の中心点からウィジェットまでの距離 | Y: 0   | -100\~100px |
* **Z-Index：** ウェブページ上の要素が重なる際にどちらを前面に表示するかを決める順序値です。数値が大きいほど他の要素より前面に表示されます。ウィジェットがサイトの他の要素に隠れてしまう場合は、Z-Indexをより大きい値に設定してください。

#### **スタイル**

* **角丸：** 0\~32pxの範囲でボタンのコーナーの丸みを設定します。
* **シャドウ：** On/Offを設定できます。デフォルトはOffで、Onにすると以下の項目を調整できます。

  | 項目    | 説明                              | デフォルト値                 | 範囲          |
  | ----- | ------------------------------- | ---------------------- | ----------- |
  | カラー   | シャドウの色（HEX）と不透明度（%）を設定します。      | #000000, 20%           | —           |
  | オフセット | ウィジェットからシャドウが離れるX・Y方向の距離です。     | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | ブラー   | シャドウの境界がどれくらいぼけるかを調整します。        | 16px                   | 0\~50px     |
  | スプレッド | シャドウがウィジェットよりどれくらい広く広がるかを調整します。 | 0px                    | 0\~30px     |

{% endtab %}

{% tab title="下部バー型" %}
画面下部に横方向のボタン形式で表示されます。アイコン・テキスト・矢印を組み合わせてCTA（Call to Action）として活用できます。

<figure><img src="/files/NEk3jyeldsIOCK9Kpx5A" alt=""><figcaption></figcaption></figure>

#### **アイコン**

* **ロゴ画像と同一：** \[デザイン設定 > ロゴ画像]にアップロードされた画像が自動的に適用されます。以降ロゴ画像を変更すると、ウィジェットアイコンも同時に変更されます。
* **カスタム設定：** 別途画像をアップロードできます。
  * **アップロード規格**

    | 項目      | 説明                                       |
    | ------- | ---------------------------------------- |
    | 画像構成    | デザイン最適化のため、背景のない画像を推奨します。                |
    | ファイル形式  | PNG、SVG形式のファイルのみアップロードできます。              |
    | ファイルサイズ | 最大30KBまでアップロードできます。                      |
    | ファイル数   | 最大1ファイルまでアップロードできます。                     |
    | アスペクト比  | 縦横比が1:1の場合のみアップロードできます。                  |
    | 画像サイズ   | 縦横96px以上の場合のみアップロードでき、推奨サイズは200×200pxです。 |

#### **タイトル**

ボタンに表示するテキストをOn/Offします。Onに設定すると以下の項目が表示されます。

* **テキスト：** 最大8文字まで入力できます。
* **テキストカラー：** HEXコードを直接入力するか、パレットから選択します。

#### **矢印**

ボタン右側に表示する矢印をOn/Offします。Onに設定すると以下の項目が表示されます。

* **アイコン：** デフォルトで提供されるアイコンを使用するか、直接画像をアップロードできます。
* **カラー：** HEXコードを直接入力するか、パレットから選択します。
* **カスタム設定 アップロード規格**

  | 項目      | 説明                                       |
  | ------- | ---------------------------------------- |
  | 画像構成    | デザイン最適化のため、背景のない画像を推奨します。                |
  | ファイル形式  | PNG、SVG形式のファイルのみアップロードできます。              |
  | ファイルサイズ | 最大30KBまでアップロードできます。                      |
  | ファイル数   | 最大1ファイルまでアップロードできます。                     |
  | アスペクト比  | 縦横比が1:1の場合のみアップロードできます。                  |
  | 画像サイズ   | 縦横96px以上の場合のみアップロードでき、推奨サイズは200×200pxです。 |

{% hint style="info" %}
アイコン・タイトル・矢印のいずれか一つは必ずOnにする必要があります。すべてをオフにしようとするとガイドメッセージが表示されます。
{% endhint %}

#### **背景色**

背景色を設定します。HEXコードを直接入力するか、パレットから選択できます。

{% hint style="info" %}
不正なHEXコードを入力したり、入力値をすべて削除してクリックを解除すると、デフォルト値に自動復元されます。

* **不正なコード例：** `123456`（#なし）、`12#3456`（#位置エラー）、`#12G45Z`（16進数以外の文字を含む）
  {% endhint %}

#### **サイズ**

* **幅：** 自動/固定で切り替えられます。
  * **自動：** アイコン・タイトル・矢印の設定に応じて自動調整されます。
  * **固定：** 48\~640pxで直接設定できます。（デフォルト：320px）
* **高さ：** 40\~64pxで設定できます。（デフォルト：48px）

#### **表示位置**

* **基準位置：** 画面下部中央に固定されます。
* **オフセット：** X/Yオフセットで位置を微調整できます。

  | オフセット測定基準                 | デフォルト値 | 設定範囲        |
  | ------------------------- | ------ | ----------- |
  | 画面横方向の中心点からウィジェットまでの距離（X） | 0      | -100\~100px |
  | 画面下端からウィジェットまでの距離（Y）      | 0      | -100\~100px |
* **Z-Index：** ウェブページ上の要素が重なる際にどちらを前面に表示するかを決める順序値です。数値が大きいほど他の要素より前面に表示されます。ウィジェットがサイトの他の要素に隠れてしまう場合は、Z-Indexをより大きい値に設定してください。

#### **スタイル**

* **角丸：** 0\~32pxの範囲でボタンのコーナーの丸みを設定します。左右を独立して設定することもできます。
* **シャドウ：** On/Offを設定できます。デフォルトはOffで、Onにすると以下の項目を調整できます。

  | 項目    | 説明                              | デフォルト値                 | 範囲          |
  | ----- | ------------------------------- | ---------------------- | ----------- |
  | カラー   | シャドウの色（HEX）と不透明度（%）を設定します。      | #000000, 20%           | —           |
  | オフセット | ウィジェットからシャドウが離れるX・Y方向の距離です。     | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | ブラー   | シャドウの境界がどれくらいぼけるかを調整します。        | 16px                   | 0\~50px     |
  | スプレッド | シャドウがウィジェットよりどれくらい広く広がるかを調整します。 | 0px                    | 0\~30px     |

{% endtab %}
{% endtabs %}

***

## **3. オーバーレイデザイン設定**

ウィジェットをクリックしたときに開くオーバーレイ画面のデザインを設定します。

<figure><img src="/files/gqOpsulrarKy0QXZMRSx" alt=""><figcaption></figcaption></figure>

### **3-1. オーバーレイタイプ**

オーバーレイが開く方式を選択します。ポップオーバー・ドロワー・フルビューをそれぞれOn/Offで有効化でき、最低一つは必ず有効化されている必要があります。

{% tabs %}
{% tab title="ポップオーバー" %}
画面上にウィンドウ形式でオーバーレイが表示されます。9方向の基準点を選択して、画面のどこにでも表示できます。

<figure><img src="/files/jjGZDHgFPV3PAgY6zoOp" alt=""><figcaption></figcaption></figure>

#### **サイズ**

数値を直接入力し、単位を選択できます。

{% hint style="info" %}
**px / dvw / dvh 単位について**

* **px：** 固定ピクセルサイズです。画面サイズに関わらず常に同じサイズで表示されます。
* **dvw：** 現在の画面幅の%です。例えば90dvwは画面幅の90%を意味します。
* **dvh：** 現在の画面高さの%です。例えば90dvhは画面高さの90%を意味します。

<mark style="color:$primary;">dvw/dvhを使用すると、モバイル・タブレット・デスクトップなど様々な画面サイズに自動的に合わせて調整されます。</mark>
{% endhint %}

* **PC**

  | 項目 | デフォルト値（単位別）                  | 選択可能な単位             | 設定範囲                              |
  | -- | ---------------------------- | ------------------- | --------------------------------- |
  | 幅  | <p>px: 760</p><p>dvw: 90</p> | <p>px</p><p>dvw</p> | <p>px: 制限なし</p><p>dvw: 0\~100</p> |
  | 高さ | <p>px: 600</p><p>dvh: 90</p> | <p>px</p><p>dvh</p> | <p>px: 制限なし</p><p>dvh: 0\~100</p> |
* **モバイル**

  | 項目 | デフォルト値（単位別）                  | 選択可能な単位             | 設定範囲                              |
  | -- | ---------------------------- | ------------------- | --------------------------------- |
  | 幅  | <p>dvw: 90</p><p>px: 360</p> | <p>dvw</p><p>px</p> | <p>dvw: 0\~100</p><p>px: 制限なし</p> |
  | 高さ | <p>dvh: 90</p><p>px: 540</p> | <p>dvh</p><p>px</p> | <p>dvh: 0\~100</p><p>px: 制限なし</p> |

#### **表示位置**

* **基準位置：** デフォルトはBR（右下）で、選択した位置によってオフセットの測定基準と設定範囲が変わります。

  | 基準位置               | オフセット測定基準              | デフォルト値                   | 設定範囲                                               |
  | ------------------ | ---------------------- | ------------------------ | -------------------------------------------------- |
  | コーナー (TL/TR/BL/BR) | 選択したコーナー端からオーバーレイまでの距離 | <p>X: 24</p><p>Y: 24</p> | <p>X: 0~~100px</p><p>Y: 0~~100px</p>               |
  | 中央 (C)             | 画面中心点からオーバーレイまでの距離     | <p>X: 0</p><p>Y: 0</p>   | <p>X: -100~~100px</p><p>Y: -100~~100px</p>         |
  | 上端/下端 (T/B)        | 画面横方向の中心点からオーバーレイまでの距離 | <p>X: 0</p><p>Y: 24</p>  | <p>X: -100~~100<del>px</del></p><p>Y: 0~~100px</p> |
  | 左端/右端 (L/R)        | 画面縦方向の中心点からオーバーレイまでの距離 | <p>X: 24</p><p>Y: 0</p>  | <p>X: 0~~100px</p><p>Y: -100~~100px</p>            |
* **オフセット：** 基準位置からオーバーレイまでの距離を表す値です。スライダーまたは数値の直接入力で設定できます。

#### **スタイル**

* **角丸：** オーバーレイウィンドウのコーナーの丸みを設定します。（デフォルト：16px、範囲：0\~32px）
* **シャドウ：** On/Offを設定できます。デフォルトはONで、Onにすると以下の項目を調整できます。

  | 項目    | 説明                              | デフォルト値                 | 範囲          |
  | ----- | ------------------------------- | ---------------------- | ----------- |
  | カラー   | シャドウの色（HEX）と不透明度（%）を設定します。      | #000000, 20%           | —           |
  | オフセット | オーバーレイからシャドウが離れるX・Y方向の距離です。     | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | ブラー   | シャドウの境界がどれくらいぼけるかを調整します。        | 16px                   | 0\~50px     |
  | スプレッド | シャドウがオーバーレイよりどれくらい広く広がるかを調整します。 | 0px                    | 0\~30px     |

{% endtab %}

{% tab title="ドロワー" %}
画面の左側または右側からスライドしてオーバーレイが表示されます。

<figure><img src="/files/sfFWhrXbaXJ6i25Ay3bC" alt=""><figcaption></figcaption></figure>

#### **サイズ**

幅は直接入力し、単位を選択できます。高さは常に画面全体の高さ（100dvh）に自動固定され、変更できません。

{% hint style="info" %}
**px / dvw / dvh 単位について**

* **px：** 固定ピクセルサイズです。画面サイズに関わらず常に同じサイズで表示されます。

* **dvw：** 現在の画面幅の%です。例えば80dvwは画面幅の80%を意味します。

* **dvh：** 現在の画面高さの%です。100dvhは画面全体の高さを意味します。
  {% endhint %}

* **PC**

  | 項目 | デフォルト値（単位別）                  | 選択可能な単位             | 設定範囲                              |
  | -- | ---------------------------- | ------------------- | --------------------------------- |
  | 幅  | <p>px: 420</p><p>dvw: 80</p> | <p>px</p><p>dvw</p> | <p>px: 制限なし</p><p>dvw: 0\~100</p> |
  | 高さ | 100dvh                       | —                   | 自動固定（変更不可）                        |

* **モバイル**

  | 項目 | デフォルト値（単位別）                  | 選択可能な単位             | 設定範囲                              |
  | -- | ---------------------------- | ------------------- | --------------------------------- |
  | 幅  | <p>dvw: 80</p><p>px: 360</p> | <p>dvw</p><p>px</p> | <p>dvw: 0\~100</p><p>px: 制限なし</p> |
  | 高さ | 100dvh                       | —                   | 自動固定（変更不可）                        |

#### **表示位置**

* **基準位置：** オーバーレイを画面の左（L）または右（R）に固定する位置を選択します。デフォルトはR（右）です。

  | 基準位置 | 説明             |
  | ---- | -------------- |
  | L（左） | 画面左側からスライドして開く |
  | R（右） | 画面右側からスライドして開く |
* **オフセット：** ドロワーはオフセット設定なしで、選択した基準位置に固定されます。

#### **スタイル**

* **角丸：** ドロワーがスライドする反対側のコーナーのみに丸みが適用されます。（範囲：0\~32px、デフォルト：0px）
  * **基準位置 R：** 左上・左下コーナーに適用
  * **基準位置 L：** 右上・右下コーナーに適用
* **シャドウ：** On/Offを設定できます。デフォルトはONです。詳細項目の設定は\[ポップオーバー > スタイル > シャドウ]と同様です。
  {% endtab %}

{% tab title="フルビュー" %}
画面全体を覆う形式でオーバーレイが表示されます。

<figure><img src="/files/t62dQdRUcM8I2skGU2oL" alt=""><figcaption></figcaption></figure>

#### **サイズ**

単位はdvw/dvhに固定されており、変更できません。

{% hint style="info" %}
**dvw / dvh 単位について**

* **dvw：** 現在の画面幅の%です。例えば90dvwは画面幅の90%を意味します。
* **dvh：** 現在の画面高さの%です。例えば90dvhは画面高さの90%を意味します。

<mark style="color:$primary;">フルビューは様々な画面サイズに自動的に合わせるため、dvw/dvh単位のみ使用します。</mark>
{% endhint %}

* **PC**

  | 項目 | デフォルト値 | 単位  | 設定範囲   |
  | -- | ------ | --- | ------ |
  | 幅  | 90     | dvw | 0\~100 |
  | 高さ | 90     | dvh | 0\~100 |
* **モバイル**

  | 項目 | デフォルト値 | 単位  | 設定範囲   |
  | -- | ------ | --- | ------ |
  | 幅  | 100    | dvw | 0\~100 |
  | 高さ | 100    | dvh | 0\~100 |

#### **表示位置**

* **基準位置：** 画面中央に固定されます。
* **オフセット：** 中央からの移動距離を微調整できます。スライダーまたは数値の直接入力で設定できます。

  | オフセット | デフォルト値 | 設定範囲        |
  | ----- | ------ | ----------- |
  | X     | 0px    | -100\~100px |
  | Y     | 0px    | -100\~100px |

#### **スタイル**

* **角丸：** オーバーレイウィンドウの四隅のコーナーの丸みを設定します。（デフォルト：16px、範囲：0\~32px）
* **シャドウ：** On/Offを設定できます。デフォルトはONです。詳細項目の設定は\[ポップオーバー > スタイル > シャドウ]と同様です。
  {% endtab %}
  {% endtabs %}

### **3-2. トップバー**

ポップオーバー・ドロワー・フルビューの3つのタイプに共通で適用されるトップバーを設定します。

<figure><img src="/files/RlUtrWkZUL9WMuSa2KSO" alt=""><figcaption></figcaption></figure>

#### **背景色**

トップバーの背景色と不透明度を設定します。HEXコードを直接入力するか、パレットから選択でき、透明度（%）も合わせて調整できます。（デフォルト：#FFFFFF / 100%）

#### **閉じるボタン**

オーバーレイを閉じるボタンのアイコンとスタイルを設定します。

* **アイコン：** デフォルトで提供されるアイコン、または直接アップロードした画像を選択します。カスタム設定を選択した場合は、以下の規格に合った画像をアップロードできます。

  | 項目      | 説明                                       |
  | ------- | ---------------------------------------- |
  | 画像構成    | デザイン最適化のため、背景のない画像を推奨します。                |
  | ファイル形式  | PNG、SVG形式のファイルのみアップロードできます。              |
  | ファイルサイズ | 最大30KBまでアップロードできます。                      |
  | ファイル数   | 最大1ファイルまでアップロードできます。                     |
  | アスペクト比  | 縦横比が1:1の場合のみアップロードできます。                  |
  | 画像サイズ   | 縦横96px以上の場合のみアップロードでき、推奨サイズは200×200pxです。 |
* **アイコンカラー：** 閉じるボタンのアイコンの色を設定します。（デフォルト：#616161）
* **枠線カラー：** 閉じるボタンの枠線表示をOn/Offします。（デフォルト：Off）
  * Onに設定すると、カラー設定が表示されます。（デフォルト：#E0E0E0）

#### **タイプ切替ボタン**

オーバーレイ内でポップオーバー・ドロワー・フルビュー間を切り替えられるボタンです。オーバーレイタイプが2つ以上有効化されている場合にのみ設定できます。

ポップオーバー・ドロワー・フルビューの順序で固定されており、有効化されたタイプのみ選択できます。デフォルトは有効化されたタイプのうち最初の項目が自動的に選択されます。

* **アイコンカラー：** タイプ切替ボタンのアイコンの色を設定します。（デフォルト：#616161）
* **枠線カラー：** タイプ切替ボタンの枠線の色を設定します。（デフォルト：#E0E0E0）
* **ハイライトカラー：** 現在選択されているオーバーレイタイプタブの背景ハイライト色を設定します。（デフォルト：#EBDFFF）
* **デフォルトオーバーレイ：** ウィジェットクリック時に最初に開くオーバーレイタイプを選択します。

***

## **4. プレビュー**

設定画面の右側で、現在設定されているウィジェットとオーバーレイのデザインをリアルタイムで確認できます。

<figure><img src="/files/Ym2ZSv5nvT5VkZgmR0tV" alt=""><figcaption></figcaption></figure>

* **PC / モバイル切替：** 上部ボタンでPCとモバイル画面を切り替えて、各環境での表示を確認できます。
* **オーバーレイタブ：** オーバーレイタブを選択すると、ポップオーバー・ドロワー・フルビューのタブがプレビュー上部に表示されます。タブを選択すると、該当タイプのオーバーレイプレビューを確認できます。

{% hint style="info" %}
プレビューでは、オーバーレイ内のタイプ切替ボタン・閉じるボタンなどのインタラクションは動作しません。

<mark style="color:$primary;">モバイル環境で設定する際、プレビュー領域は非表示になるため、PC環境での設定を推奨します。</mark>
{% endhint %}

***

## **よくあるご質問**

<details>

<summary><strong>Q. 公開に切り替えたのに、ウィジェット・デザインが表示されません。</strong></summary>

サイトにgenser ウィジェット・デザイン スクリプトがインストールされているかご確認ください。スクリプトがインストールされていない場合、公開状態でもウィジェットは表示されません。インストール方法は**スクリプトガイド**をご参照ください。

</details>

<details>

<summary><strong>Q. ドロワー型 / ボトムバー型ですべての要素をオフにしようとしても無効になりません。</strong></summary>

ドロワー型はアイコンとタイトルのいずれか一方、ボトムバー型はアイコン・タイトル・矢印のいずれか一つが必ずOnになっている必要があります。ウィジェットを画面に表示するには、最低一つの要素が必要なためです。

</details>

<details>

<summary><strong>Q. ドロワー型の高さとボトムバー型の幅が自動的に変わるのはなぜですか？</strong></summary>

オンになっている要素（アイコン・タイトル・矢印）に応じて、幅と高さが自動的に計算されます。例えばタイトルをオフにすると幅が縮小し、オンにするとテキストの長さに合わせて自動的に拡張されます。

</details>

<details>

<summary><strong>Q. カラーを入力したのにデフォルト値に戻ってしまいます。</strong></summary>

カラー入力フィールドは、#記号を含む6桁のHEXコードのみサポートします。例えば`#1F1D1B`の形式で入力する必要があります。#なしで入力したり、16進数以外の文字が含まれている場合はデフォルト値に自動復元されます。

</details>

<details>

<summary><strong>Q. デフォルトにリセット後、以前の設定に戻したいです。</strong></summary>

デフォルトへのリセットは元に戻すことができません。リセット前に現在の設定値を別途メモしておくことを推奨します。

</details>