> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/ja/build/conversation-settings/platform-settings/appearance-settings.md).

# 外観設定

Web チャットウィンドウの外観：ブランドアセット（Logo、アバター、テクニカルサポート Logo、チャットボタンアイコン）、表示設定、ライトテーマとダークテーマの色と効果、および右側のリアルタイムプレビュー。

<mark style="color:blue;">外観設定</mark>では、Web チャットウィンドウの見た目を設定します。タイトルバーの Logo と色、Agent のアバター、メッセージボックスの配色、ユーザーがダークモードに切り替えられるかどうかなどを指定できます。ページは左右 2 列に分かれており、左側に設定項目、右側に<mark style="color:blue;">リアルタイムプレビュー</mark>が表示されます。色を変更するたびにプレビューも更新されるため、保存前に効果を確認できます。これらの設定は Web と内部プラットフォームでのみ利用できます。LINE などのメッセージングプラットフォームのインターフェースは、各プラットフォームによって決まります。

## 一、使用する場面 <a href="#when-to-use" id="when-to-use"></a>

ブランドデザイナーが会社の新しいビジュアルガイドラインを受け取り、公式サイトのカスタマーサポートウィンドウも新しいデザインに変更することになりました。Web プラットフォームの<mark style="color:blue;">外観設定</mark>を開き、新しい Logo とマスコットのアバターをアップロードし、<mark style="color:blue;">テーマカラー</mark>をブランドブルーに、<mark style="color:blue;">タイトル文字色</mark>を白に変更します。さらに、Agent のメッセージボックスの背景をライトグレーに設定します。右側のプレビューに新しい配色がリアルタイムで表示されるため、タイトルバーとメッセージバブルがガイドラインに沿っていることを確認してから<mark style="color:blue;">保存</mark>をクリックします。公式サイトのカスタマーサポートウィンドウは、ページを更新すると新しいスタイルに切り替わり、埋め込みコードを変更する必要はありません。

{% hint style="info" %}
**API と内部プラットフォームでは簡易モードのみ利用できます。** この 2 つのプラットフォームには外部向けの対話ウィンドウがないため、外観設定ページには「<mark style="color:blue;">簡易モード</mark>」の案内のみが表示されます。「API モードと内部モードでは、AI アシスタントのアバターのみ設定が必要で、その他の外観設定は適用されません」と表示され、調整できるのは Agent のアバターだけです。以下の各節の Logo、色、テーマは Web プラットフォームにのみ適用されます。
{% endhint %}

## 二、ブランドアセット <a href="#brand-assets" id="brand-assets"></a>

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-a854efca7eb795ea01581e34e387c2cb55f5e277%2Fplatform-appearance-settings.png?alt=media" alt="外観設定のブランドアセットと表示設定。右側にはリアルタイムプレビューが表示されます"><figcaption><p>外観設定：左側にブランドアセットと表示設定、右側にリアルタイムプレビュー</p></figcaption></figure>

4 つの画像欄では、いずれも<mark style="color:blue;">アップロード</mark>をクリックしてファイルを選択します。アップロード後はプレビューが表示され、削除して再度アップロードすることもできます。

| 項目                 | 表示場所                                                        |
| ------------------ | ----------------------------------------------------------- |
| **Logo**           | ユーザーが Web Chat を起動したときに表示されるロゴ                              |
| **アバター**           | Agent の各メッセージの横に表示されるアバター                                   |
| **テクニカルサポート Logo** | チャットルーム下部のブランドロゴ（「テクニカルサポートロゴを表示」を有効にする必要があります）             |
| **チャットボタンアイコン**    | Web サイトへの埋め込み後、右下に表示されるチャットボタン。アップロードするとデフォルトのアイコンが置き換えられます |

## 三、表示設定 <a href="#display-settings" id="display-settings"></a>

チャットルームに次の要素を表示するかどうかを設定します。

| スイッチ                  | 説明                               |
| --------------------- | -------------------------------- |
| **AI アシスタントのアバターを表示** | メッセージに Agent のアバターを表示します         |
| **AI アシスタント名を表示**     | メッセージに Agent の名前を表示します           |
| **テクニカルサポートロゴを表示**    | チャットルーム下部にテクニカルサポートのブランドロゴを表示します |

## 四、テーマモード設定 <a href="#theme-settings" id="theme-settings"></a>

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f049bf23bf90627004a7126d659fe0a27a9fb1f2%2Fplatform-appearance-theme.png?alt=media" alt="テーマモード設定：テーマモード切り替えの有効化、ライトテーマのテーマカラーとメッセージボックスの色"><figcaption><p>テーマモード設定：ライトテーマの色と効果</p></figcaption></figure>

### テーマモード切り替えを有効化 <a href="#theme-toggle" id="theme-toggle"></a>

<mark style="color:blue;">テーマモード切り替えを有効化</mark>をオンにすると、ユーザーはチャットウィンドウでライトテーマとダークテーマを切り替えられます。また、設定ページに<mark style="color:blue;">ダークテーマ</mark>タブが追加され、別の配色を設定できます。オフにすると、ライトテーマのみが使用されます。

### 色と効果 <a href="#colors" id="colors"></a>

ライトテーマ（およびダークテーマ）には、それぞれ次の項目を設定できます。

| セクション                   | 項目                       | 説明                       |
| ----------------------- | ------------------------ | ------------------------ |
| **テーマカラーとナビゲーションバー**    | テーマカラー                   | ボタンやリンクなどの主要な要素とタイトルバーの色 |
|                         | タイトル文字色                  | チャットルームのタイトルバーに表示される文字の色 |
| **AI アシスタントのメッセージボックス** | 背景色、文字色                  | AI の返信バブルの配色             |
|                         | シャドウ効果を有効化、グラデーション効果を有効化 | バブルの視覚効果                 |
| **ユーザーのメッセージボックス**      | 背景色、文字色                  | ユーザーのメッセージバブルの配色         |
|                         | シャドウ効果を有効化、グラデーション効果を有効化 | バブルの視覚効果                 |
| **チャット背景**              | 背景色                      | チャットエリア全体の背景色            |

{% hint style="info" %}
返信待ちの間に表示されるテキストとアニメーション素材はここでは設定しません。[返信待機スタイル](/maiagent-user-guide/ja/build/conversation-settings/platform-settings/loading-display.md)で設定してください。
{% endhint %}

<div align="left"><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-05cb64cb7654a5b0284e7f98cfb881dbcf3de0f5%2F%E6%88%AA%E5%9C%96%202025-07-02%20%E4%B8%8B%E5%8D%885.40.05%20(1)%20(1).png?alt=media" alt="チャットウィンドウでのアバター、カラーテーマ、ダークテーマの表示" width="299"><figcaption><p>アバター、カラーテーマ、ダークテーマの表示例</p></figcaption></figure></div>

## 五、よくある質問 <a href="#faq" id="faq"></a>

### Q：保存後も Web サイトのウィンドウが変わらないのはなぜですか？ <a href="#faq-not-updated" id="faq-not-updated"></a>

ユーザーにページを再読み込みしてもらってください。外観設定はチャットページの読み込み時に反映されるため、すでに開いているウィンドウはリアルタイムでは更新されません。

### Q：ダークテーマの色は別途設定する必要がありますか？ <a href="#faq-dark" id="faq-dark"></a>

はい。<mark style="color:blue;">テーマモード切り替えを有効化</mark>をオンにした後、<mark style="color:blue;">ダークテーマ</mark>タブに切り替えて各項目の色を設定します。変更していない項目には、システムのデフォルトのダークテーマ配色が使用されます。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.maiagent.ai/maiagent-user-guide/ja/build/conversation-settings/platform-settings/appearance-settings.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.