> 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/settings.md).

# デザイン設定

genser サイトのデザイン要素を設定するページです。

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FayxwpFiJpqzujTusY7Nr%2Fimage.png?alt=media&amp;token=7e6b4cc5-4190-4b6b-9203-fdf7e37ba63e" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
デザイン設定を保存すると、変更内容が即座にサイトへ反映されます。サイトが公開状態の場合はご注意ください。
{% endhint %}

{% hint style="info" %}
**genser は、サイトごとに画面モードが1つに決まっています。** 同じ設定値でも、スプリットビューとチャットビューでは表示される位置が異なるため、以下の表示例はモードごとのタブに分けています。

ご利用のサイトがどちらのモードかは、画面下部の **\[プレビュー]** から **Chat** 画面でご確認いただけます。（4. プレビュー参照）
{% endhint %}

***

## **1. ブランド情報** <a href="#id-1" id="id-1"></a>

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2Fmz2ALUBIgjhEIi4V2szW%2Fimage.png?alt=media&amp;token=e4ea382a-b7c1-459b-b8ec-5a8f5c69d3ab" alt=""><figcaption></figcaption></figure>

### **1-1. ブランド名** <a href="#id-1-1" id="id-1-1"></a>

ブランドを識別する名称です。

{% hint style="warning" %}
ブランド名は初回保存後、最大**3回**まで変更できます。3回を使い切ると、以降の変更はできません。慎重に設定してください。
{% endhint %}

* **重複確認:** ブランド名は他のブランドと重複できません。入力後は必ず **\[重複確認]** をクリックして確認してください。
* **入力規則:** `_` と絵文字を除き、最大20文字まで入力できます。

{% hint style="info" %}
**チャットビューには、ブランド名がそのまま表示される箇所はありません。** メインページと回答の上には**エージェント名**が表示されます。エージェント名を「ブランド名と同じ」に設定している場合は、その箇所にブランド名が表示されます。（3-1. エージェント名参照）
{% endhint %}

***

### **1-2. ロゴ画像** <a href="#id-1-2" id="id-1-2"></a>

サイト全体に表示されるブランドロゴです。

{% tabs %}
{% tab title="スプリットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>ヘッダー</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FMlzAbxjnVA1DUYUtA4PX%2Fja-brand-EQBIBAYDKRElFVr8oiR3.png?alt=media" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}

{% tab title="チャットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>ヘッダー</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FXxrAno7ukwew6b84L6Rd%2Fcv_1-2_logo_main.png?alt=media&amp;token=2e1e778d-cd20-49ba-92cd-e5cac8f909c7" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

#### **アップロード仕様** <a href="#id-1-2-1" id="id-1-2-1"></a>

<table><thead><tr><th width="160">項目</th><th>内容</th></tr></thead><tbody><tr><td>画像構成</td><td>デザインの品質を高めるため、背景が透明なロゴ画像を推奨します。</td></tr><tr><td>ファイル形式</td><td>PNG、SVG 形式のファイルのみアップロードできます。</td></tr><tr><td>ファイルサイズ</td><td>最大 30KB までアップロードできます。</td></tr><tr><td>ファイル数</td><td>1ファイルのみアップロードできます。</td></tr><tr><td>画像比率</td><td>縦横比が 1:1 の画像のみアップロードできます。</td></tr><tr><td>画像サイズ</td><td>縦横ともに 52px 以上の画像のみアップロードできます。推奨サイズは 120×120px です。</td></tr></tbody></table>

***

### **1-3. メインカラー** <a href="#id-1-3" id="id-1-3"></a>

サイト全体の配色トーンを決める基準カラーです。設定したカラーをもとに、明暗10段階のカラースケールが自動生成され、サイト全体に適用されます。

{% hint style="info" %}
メインカラーは HEX コードを直接入力するか、カラーパレットから選択できます。6桁の HEX コードのみ対応しています。
{% endhint %}

{% tabs %}
{% tab title="スプリットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FHLVbgCLnPaKrWiwHy2CB%2Fja-brand-zNHsg2QjpWBdwKgqNmrJ.png?alt=media" alt="" data-size="original"></td></tr><tr><td>チャット画面</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FWg6TrXWTqBdyBkX5hvFu%2Fja-brand-JR6CMp5RJgwiqNFTOXHs.png?alt=media" alt="" data-size="original"></td></tr><tr><td>検索ローディング</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FeKMGxrpzZsdinNi7i0Uc%2Fja-brand-UCH96TGVipejmbFikQvz.png?alt=media" alt="" data-size="original"></td></tr><tr><td>商品カード</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2F5rpz1RdPYy0egzrYUP5o%2Fja-brand-odHXTuKrVUFJD5uY7WRp.png?alt=media" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}

{% tab title="チャットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>チャット画面</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FekXjIVTIVG38YszZgvzm%2Fcv_1-3_color_chat.png?alt=media&amp;token=38d0a9d4-2615-4357-89ff-9cb8f178da8d" alt="" data-size="original"></td></tr><tr><td>検索ローディング</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FxE70LquIZBgiHHvGnHPY%2Fcv_1-3_color_loading.png?alt=media&amp;token=8ca5d855-99de-4276-b5a0-648c8055d1f0" alt="" data-size="original"></td></tr><tr><td>商品カード</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FUsh5xkPUEPieV186KJMo%2Fcv_1-3_color_card.png?alt=media&amp;token=cd2ab19a-b814-4905-9fd7-97e03e5d0332" alt="" data-size="original"></td></tr></tbody></table>

チャットビューのメインページには、メインカラーが適用される要素がありません。
{% endtab %}
{% endtabs %}

***

## **2. メイン検索エリア** <a href="#id-2" id="id-2"></a>

メインページの検索エリアに表示される要素です。

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FWfFb7SiiWn4TVBENkHjC%2Fimage.png?alt=media&amp;token=a7261a14-50fe-4a87-ab4d-07902a484fc6" alt=""><figcaption></figcaption></figure>

### **2-1. タイトル** <a href="#id-2-1" id="id-2-1"></a>

検索エリア上部に表示されるメインテキストです。チャットビューでは、メインページで**最も大きな文字**として表示されます。

{% tabs %}
{% tab title="スプリットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2F8e770rnrhi0EuPiBnXRW%2Fja-brand-J6z8RfTW4MiR7YfS5O5i.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="チャットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FH1tqfRDqc93P1DmyPvvI%2Fcv_2-1_title.png?alt=media&amp;token=d813738c-dc12-43dc-8151-7613b40d71d4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### **2-2. プレースホルダー** <a href="#id-2-2" id="id-2-2"></a>

検索欄に何も入力していない状態で表示される案内テキストです。

{% tabs %}
{% tab title="スプリットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FRCSw7muPTu7GNQ9ogeTV%2Fja-brand-o56ertF6q4sdVAtez7Wk.png?alt=media" alt="" data-size="original"></td></tr><tr><td>チャット画面</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FcOLmXPPcqkPWb5IhxOmc%2Fja-brand-AVMkObMAwJB0Xl9b4tGQ.png?alt=media" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}

{% tab title="チャットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>検索欄</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FqSQFpO8OjnXoRfNBfdoG%2Fcv_2-2_ph_main.png?alt=media&amp;token=55cedfb1-e963-4d64-b447-34c47ec61e37" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### **2-3. おすすめの質問** <a href="#id-2-3" id="id-2-3"></a>

検索エリア下部に表示される推奨質問ボタンです。何を検索すればよいか迷うユーザーが、クリックするだけですぐに検索を始められます。おすすめの質問は最大5件まで追加できます。

{% tabs %}
{% tab title="スプリットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FXhnHzyoSLItcP5hhYAd4%2Fja-brand-mIbmLxXwKgPpVmE5KadM.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="チャットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2Fdlp0JKUOdgoWttMolyDO%2Fcv_2-3_suggestions.png?alt=media&amp;token=3203bf0f-e706-40c0-b9d7-a4b4b00c0cd2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## **3. エージェント** <a href="#id-3" id="id-3"></a>

チャット画面に表示されるチャットボットの名前、プロフィール画像、最初の挨拶を設定します。

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2Fv1GylexgdF78PLz10XsT%2Fimage.png?alt=media&amp;token=b5dd4d5b-5b2b-4b3c-832d-fdc031fd5f06" alt=""><figcaption></figcaption></figure>

### **3-1. エージェント名** <a href="#id-3-1" id="id-3-1"></a>

チャット画面でチャットボットが名乗る名前です。

{% tabs %}
{% tab title="スプリットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FOvLOtUfKcXNDIpFKdeQr%2Fja-brand-EyxFYeCNROvLIOWND7cl.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="チャットビュー" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FQO0jXkmHAhHjCCdr7AhQ%2Fcv_3-1_agent_main.png?alt=media&amp;token=a9931c1b-72d8-4b53-b45d-fd955c69aa32" alt="" data-size="original"></td></tr><tr><td>チャット画面</td><td align="center"><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FOcDeKRGHHADfQyFpWFUi%2Fcv_3-1_agent_chat.png?alt=media&amp;token=8a64af7b-9c17-429d-bc79-e09a3db49253" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

* **ブランド名と同じ（デフォルト）:** 設定したブランド名をそのまま使用します。ブランド名を変更すると、エージェント名も自動的に変更されます。
* **個別設定:** エージェント名を別途設定できます（最大20文字、絵文字不可）。

***

### **3-2. プロフィール画像** <a href="#id-3-2" id="id-3-2"></a>

チャット画面でチャットボットの回答の隣に表示される画像です。

{% tabs %}
{% tab title="スプリットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FFE5FeJzw0FIVgjl6YIvr%2Fja-brand-W5m100pGz7atRZUKHcu7.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="チャットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FCWzEFQUV3XLc2ktaI98a%2Fcv_3-2_profile_chat.png?alt=media&amp;token=840b3d12-3ee7-45f1-b765-0c5e2f4b22ae" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **ロゴ画像と同じ（デフォルト）:** アップロードしたロゴ画像をそのまま使用します。ロゴ画像を変更すると、プロフィール画像も自動的に変更されます。
* **個別設定:** エージェント用の画像を別途アップロードできます\
  （**形式:** JPG、PNG / **サイズ:** 最大 30KB / **比率:** 1:1 / **画像サイズ:** 52px 以上、推奨 120×120px）

***

### **3-3. 最初の挨拶** <a href="#id-3-3" id="id-3-3"></a>

チャット画面に初めて入ったとき、チャットボットがユーザーに送る挨拶メッセージです。

{% tabs %}
{% tab title="スプリットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FtVlKAcOT3fYIAFFmBTph%2Fja-brand-yVvqWujdwYcQY8QueLao.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="チャットビュー" %}

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2Fzc3hbZwGjcMbBtOocf9I%2Fcv_3-3_greeting.png?alt=media&amp;token=2279b7b5-8dd9-4bb8-b178-1b32e29b5d09" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**チャットビューでは、最初の挨拶は2行までしか表示されません。** 3行以上は省略され、表示されません。500文字まで入力できますが、チャットビューをご利用のサイトでは**2行に収まる長さ**で作成してください。
{% endhint %}

***

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

デザイン設定を保存する前に、これまでに入力した設定が実際のサイトにどのように反映されるかを確認できます。画面下部の\[プレビュー]ボタンを押すと、新しいタブで開きます。

プレビュー画面の左上に**プレビューツールバー**があります。ツールバーのボタンを押して画面を切り替えると、各画面に設定がどのように適用されているかを確認できます。プレビューでは、実際の検索やクリックなどは動作しません。画面を切り替える際は、このツールバーをご利用ください。

スプリットビューのサイトのプレビュー画面です。

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2Fr8gabEf2RCd6ttY8C3ax%2Fja-brand-dK2qa4aWyM1QVUSNHpR1.png?alt=media" alt=""><figcaption></figcaption></figure>

チャットビューのサイトのプレビュー画面です。

<figure><img src="https://772261510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F86dnM6gkoFM8SzYGfvaQ%2Fuploads%2FSAOXkWgtvB0RU1PfrXcr%2Fcv_4_preview_main_JA.png?alt=media&amp;token=3e64508f-ebf5-4870-9928-a85cc22811a6" alt=""><figcaption></figcaption></figure>

* **Main:** メインページ
* **Chat:** チャット画面
* **PDP:** 商品詳細ページ

{% hint style="info" %}
プレビューは、デザイン設定の**必須項目をすべて入力する**とご利用いただけます。未入力の項目が一つでもあると、\[プレビュー]ボタンは無効になります。
{% endhint %}

***

## **よくある質問** <a href="#id-5" id="id-5"></a>

<details>

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

メインカラーの入力欄は6桁の HEX コードのみ対応しています。

たとえば `#001689ff` のように透明度（アルファ値）を含む8桁のコードを入力すると、自動的にデフォルト値（`#B043FF`）に戻ります。末尾の `ff` を除いた6桁（`#001689`）で入力してください。

</details>

<details>

<summary><strong>Q. ブランド名を変更しようとしましたが、入力欄がロックされています。</strong></summary>

ブランド名は初回保存後、最大3回まで変更できます。3回を使い切ると以降の変更はできません。変更が必要な場合は、担当者までお問い合わせください。

</details>

<details>

<summary><strong>Q. ロゴが横長のデザインですが、どのようにアップロードすればよいですか？</strong></summary>

正方形のキャンバス（推奨: 120×120px）の中央にロゴを配置した画像を作成してアップロードしてください。背景が透明な PNG 形式を使用すると、サイトのデザインと自然に調和します。

</details>

<details>

<summary><strong>Q.</strong> 保存前に設定内容をプレビューできますか？</summary>

「プレビュー」機能で保存前に確認できます。必須項目をすべて入力したうえでプレビューボタンを押すと、新しいウィンドウ（タブ）で設定が適用された画面を確認できます。詳しくは「4. プレビュー」をご参照ください。

</details>

<details>

<summary><strong>Q. エージェント名を「ブランド名と同じ」に設定した後、ブランド名を変更するとエージェント名も変わりますか？</strong></summary>

はい、自動的に変更されます。プロフィール画像を「ロゴ画像と同じ」に設定している場合も同様で、ロゴ画像を変更するとプロフィール画像も自動的に反映されます。

</details>