【第428回】 Agentforce ： 拡張チャット（v1 / v2）のブランディング設定
前回の記事では、サービスエージェントや有人チャットで使用される チャットウィンドウ において、顧客体験を向上させるための、さまざまなカスタマイズ設定について解説しました。
それに続く本記事では、チャットウィンドウ のブランディング設定について解説したいと思います。
ブランディング設定は、「設定」＞「組み込みサービスリリース」から作成済みの組み込みサービスを選択して、右上に表示される「ブランディング」から設定が可能です。
※ 設定を保存した後には、必ず右上の「公開」をクリックしてください。
カラー
本記事の例は、わざと目立つ配色にして分かりやすくしています。
色を変更するには、ドロップダウンをクリックして カラーピッカーをスクロールするか、「#」フィールドに 16 進数のカラーコードを直接入力することができます。
① チャットボタンと招待
背景：「チャットボタン」と「自動招待」ポップアップの背景
テキスト：「v2 のボタン」と「自動招待」ポップアップ上のテキスト
招待解除ボタン：「自動招待」ポップアップの ✕ マーク
※ v2 には招待機能がないので、招待解除ボタンの設定はありません
※ 自動招待のポップアップは、有効化している場合のみ表示されます。
② ヘッダー
背景：ヘッダーの背景
テキスト：ヘッダーテキスト、最小化 ボタン、メニューアイコン
③ AI エージェントとサービス担当者
こちらはエージェント側の本文吹き出し部分の設定です。
背景：メッセージ、アバター、イニシャルサムネイルの背景の色
テキスト：AI エージェント側のテキストの色
リンク：AI エージェント側のリンクテキストの色
④ エンドユーザー
こちらは顧客側の本文吹き出し部分の設定です。
背景：エンドユーザー側のメッセージとサムネイルの背景の色
テキスト：エンドユーザー側のテキストの色
リンク：エンドユーザー側のリンクテキストの色
⑤ 会話本文
テキスト：システムで挿入されるテキストの色や、エンドユーザー（顧客）が入力する本文のテキストの色
※事前チャットに関しても、この入力するテキストの色が関連します。
⑥ フッター
アイコン：添付、絵文字、送信アイコンの色
ヘッダー：アンダーラインの色
フッター：枠の色
※ v2 の場合、フッターの枠の色は変更されず「黒」となる認識です。
⑦ 引用
背景：ソースタイトル部分のハイライト背景の色
テキスト：引用元リンクのタイトルテキストの色
※ Citation（引用）は、回答時に表示されるソースリンク部分のデザイン設定です。利用する機能や構成によっては表示されない場合があります。
⑧ バッジとボタン
開始ボタン：事前チャットの開始ボタンの色など
バッジ：スレッド内の最新メッセージへ進むバッジなどの色
※ v2 にはバッジの表示機能がないので設定はありません
フォント
（v1・v2 共に利用可能）
チャットでは、以下の 定義済みフォントのいずれかを使用できます。
Arial 、Salesforce Sans、Georgia、Palatino Linotype、Times New Roman、 Arial Black、Comic Sans MS、 Impact、Lucida Sans Unicode、Tacoma、Trebuchet MS、Veranda、Courier New、Lucida Console
カスタムフォントを使用する場合
独自のカスタムフォントを利用することも可能です。
使用したいフォントを 静的リソースとしてアップロードします。
「フォント」ドロップダウンメニューから 「カスタムフォント」を選択します。
表示される 「カスタムフォントファミリー名」フィールドに、アップロードした静的リソースの 名前を入力します。
フォントサイズ
「フォントサイズ」フィールドで、以下のいずれかを選択できます。
小
中
大
以下は、Palatino Linotype を使用して 3 種類のフォントサイズを適用した場合のそれぞれのサイズ例です。（左から、小・中・大）
画像
事前に画像ホスティングサービスを使用して、画像を URL に変換する必要があります。その後、「画像」セクションに URL を追加します。
① サービス担当者のアバター
（v1・v2 共に利用可能）
サービス担当者側のメッセージバブルの左側に表示されます。有人チャットエージェントの場合はこちらです。
② ボットと AI エージェントのアバター
（v1・v2 共に利用可能）
ボットまたは AI エージェントによって開始されたテキストメッセージバブルの左側に表示されます。AI エージェントの場合はこちらです。
③ ロゴ
（v1・v2 共に利用可能）
チャットヘッダーに表示されます。
④ チャットボタン
（v1 のみ利用可能）
チャットボタンに表示されます。アニメーション GIF にも対応しています。
※ v2 のチャットボタンに表示されている「Ask Me Anything」の多言語化設定は、カスタムラベルのメニューから変更できます。
もし、すぐにテストを行いたい場合は、以下のリンクをクリックして、サンプル画像をご利用ください。なお、利用を開始する前に、設定 ＞ 信頼済み URL へ https://image.s12.sfmc-content.com を登録してください。登録しないと画像がチャットに表示されません。
サービス担当者のアバター
ボットと AI エージェントのアバター
ロゴ
チャットボタン
チャットウィンドウのサイズ
（v1・v2 共に利用可能）
幅（Width）と高さ（Height）を個別に指定してカスタマイズできます。
これにより、デフォルトではややコンパクトなチャットウィンドウを、用途に応じて広く表示することが可能です。
デフォルトサイズ
v1：320 ピクセル（幅）× 480 ピクセル（高さ）
v2：480 ピクセル（幅）× 673 ピクセル（高さ）最小サイズ
80 ピクセル（幅）× 120 ピクセル（高さ）最大サイズ
制限なし
また、幅と高さを独立して設定できるため、縦長・横長など表示比率の変更も可能です。Web サイトのレイアウトやデバイスサイズに合わせて、最適なサイズに調整してください。
いかがでしたでしょうか。
チャットウィンドウのブランディング設定は、単なる見た目の調整にとどまらず、ユーザーに安心感や一貫したブランド体験を提供するための重要な要素です。
カラーやフォント、アイコン、ロゴといった細かな設定を調整することで、Web サイトやサービス全体のトーンと自然に統一されたチャット体験を実現できます。
一方で、すべてを作り込みすぎる必要はありません。まずは ヘッダー・メッセージバブル・チャットボタン といった、ユーザーの目に入りやすいポイントから調整するだけでも、印象は大きく変わります。
Agentforce をこれから導入する方も、すでに運用している方も、「正しく動く」だけでなく「どう見えるか」「どう感じられるか」という観点で、ぜひ一度ブランディング設定を見直してみてください。
今回は以上です。