> 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).

# デザイン設定

gelatto ブランド・ショップページと genser サイトのデザイン要素を設定するページです。ご利用の権限によって表示される項目が異なる場合があります。

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

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

***

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

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

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

ブランドを識別する名称です。gelatto ブランド・ショップページのチャット履歴のタグと、商品詳細ページ上部のチャンネル名に使用されます。

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>チャット履歴</td><td align="center"><img src="/files/IwlCf48Vu4vd7zEnvXUE" alt=""></td></tr><tr><td>商品詳細ページ</td><td align="center"><img src="/files/5kqOKzatUPaPgO8KgwUF" alt=""></td></tr></tbody></table>

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

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

***

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

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

{% tabs %}
{% tab title="gelatto ブランド・ショップページ" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="/files/pTFd0lAVrvh0OoOAnoVn" alt=""></td></tr><tr><td>チャット画面</td><td align="center"><img src="/files/aePgtfj81ltJDUOfuQng" alt=""></td></tr><tr><td>商品詳細ページ</td><td align="center"><img src="/files/P5HURp8xJygamXnJiEtf" alt=""></td></tr></tbody></table>
{% endtab %}

{% tab title="genser" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="/files/x1HbHTZu0dWnABZlTh0A" 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="gelatto ブランド・ショップページ" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="/files/mrrBynMcPQfhRa4Nk0sY" alt=""></td></tr><tr><td>チャット履歴</td><td align="center"><img src="/files/box9Xvkwslu8c33bgHi3" alt=""></td></tr><tr><td>チャット画面</td><td align="center"><img src="/files/MchKjyl29Gk5LkQ8Lr7j" alt=""></td></tr><tr><td>検索ローディング</td><td align="center"><img src="/files/4QJ5UsDXMbgrjk3GgQB8" alt=""></td></tr></tbody></table>
{% endtab %}

{% tab title="genser" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="/files/fV7SbvhohrxJ5M0U7uHf" alt="" data-size="original"></td></tr><tr><td>チャット画面</td><td align="center"><img src="/files/JR6CMp5RJgwiqNFTOXHs" alt="" data-size="original"></td></tr><tr><td>検索ローディング</td><td align="center"><img src="/files/UCH96TGVipejmbFikQvz" alt="" data-size="original"></td></tr><tr><td>商品カード</td><td align="center"><img src="/files/odHXTuKrVUFJD5uY7WRp" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

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

ブランド・ショップページのメイン・discovery メインページの検索エリアに表示される要素です。

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

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

検索エリア上部に表示されるメインテキストです。

{% tabs %}
{% tab title="gelatto ブランド・ショップページ" %}

<figure><img src="/files/w6jDYZBPxPTJPcoYqFU2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="genser" %}

<figure><img src="/files/EH39aOaVnsagEWGjf2A5" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

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

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

{% tabs %}
{% tab title="gelatto ブランド・ショップページ" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="/files/mvaXSYNl2Hxn8TzbJizN" alt=""></td></tr><tr><td>チャット画面</td><td align="center"><img src="/files/BkycRolgM23RMhEcgnXm" alt=""></td></tr></tbody></table>
{% endtab %}

{% tab title="genser" %}

<table><thead><tr><th width="160">適用箇所</th><th align="center">表示例</th></tr></thead><tbody><tr><td>メインページ</td><td align="center"><img src="/files/4BYSML4ZbJA5ksSSpShT" alt="" data-size="original"></td></tr><tr><td>チャット画面</td><td align="center"><img src="/files/AVMkObMAwJB0Xl9b4tGQ" 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="gelatto ブランド・ショップページ" %}

<figure><img src="/files/Imh3lq4goRRbfkFlpih5" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="genser" %}

<figure><img src="/files/0xtccXWwQnM9az87EgvF" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

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

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

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

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

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

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

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

***

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

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

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

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

***

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

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

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

***

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

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

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

<figure><img src="/files/6Hcc9ax1D581i7bQ9cwr" 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>

現在プレビュー機能はご利用いただけません。保存すると即座にサイトへ反映されますので、各項目の適用箇所をご確認のうえ、慎重に入力してください。

</details>

<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>