Experience Cloudのブランド設定：定義・設計指針・導入メリット3選

みなさん、こんにちは！
Salesforceエンジニアの森川です。
今回のテーマは「Experience Cloudのブランド設定」です。Experience Cloudのブランド設定は、企業のガイドラインをテーマ（色・書体・余白）やロゴ・ヘッダー、ナビゲーション、カスタムドメインに落とし込み、体験全体を“公式品質”に揃えるための基盤です。デジタルエクスペリエンス上でCRMデータと業務プロセスを安全に提供するうえで、信頼、探索しやすさ、運用効率を同時に高める設計として機能します。本稿ではその定義と設計指針を整理し、導入によって得られる実務上のメリットをわかりやすく解説します。

サイトのブランド設定とは？

定義

サイトのブランド設定とは、Experience Builder の テーマ/画像/色/書体/レイアウト と ドメイン/ファビコン/メール差出人 などの外観・表示に関わる要素を、企業のブランドガイドラインに沿って一元管理する設計行為です。
具体的には次の設定群を指します（例）：

• テーマ：色（プライマリ/アクセント/リンク）、書体、角丸、余白、影
• 画像：会社ロゴ、ヘッダー画像、ログイン背景、アイコン（ファビコン）
• レイアウト：ヘッダー/ナビ/フッターの構成、カードやボタンのスタイル
• ドメイン：カスタムドメイン、TLS 証明書、CDN の併用
• メール：通知メールのロゴ/色/テンプレートの整合（From 名・フッター表記）

目的は「見た瞬間に“公式”と伝わる既知性」「迷わず動ける視線誘導」「一箇所変更で全体に波及する運用効率」を同時に実現することです。

ブランド設定のメリット3つ——選定理由が一目で伝わる

① 信頼性の即時獲得と離脱率の低下

要点：ロゴ・色・書体・トーンが企業サイトや製品資料と一致すると、ユーザーはここは正規の窓口だと瞬時に判断します。警戒心が和らぎ、直帰率が下がり、検索や問い合わせなど次の行動に移りやすくなります。
効かせ方のヒント

• ロゴは最小表示でも判読できる比率でアップロード
• ヘッダー画像はテキストが乗る領域のコントラストを十分に
• CTA（例：Ask a Question）は専用色を決め、他用途に流用しない
  計測視点：直帰率／平均滞在時間／CTA クリック率（導入前後で比較）
  落とし穴：装飾過多で本文が読めない → **コントラスト比（本文 4.5:1 以上）**と余白基準を先に決める

② 探索性とコンバージョンの向上（“迷わない”情報設計）

要点：色・余白・アイコンの一貫性は視線誘導を学習させ、認知負荷を下げて自己解決を促進します。主要トピックのカードや検索バー、共通の見出し階層が“どこを見れば良いか”を自然に示し、FAQ 参照率や起票フォーム到達率が上がります。
効かせ方のヒント

• 主要トピックのカード画像を同一トーンで統一（Batteries / Inverters / Solar Panels など）
• ナビ文言は名詞ベースで短く（例：FAQ／手続き／故障診断）
• 検索バーは常時表示、プレースホルダーに検索語の例を入れる
  計測視点：サイト内検索の CTR／無効語率、FAQ 参照率、フォーム到達率
  落とし穴：ページごとに色・ラベルが微妙に違う → デザイン・トークン（色、余白、角丸）を定義し再利用を徹底

③ 運用効率と拡張性（“一箇所の変更が全体に波及”）

要点：テーマとコンポーネントを基準化しておけば、季節改版・多言語・部門別サイトにも短時間で横展開できます。カスタムドメイン＋CDN で配信を最適化しつつ、ブランド差し替えが3クリックで完了する状態をつくるのが理想です。
効かせ方のヒント

• テーマ > 画像 でロゴ/ヘッダーを一元管理（差し替えはテーマ側で）
• ヘッダー/ヒーロー/3カードのレイアウト・テンプレを用意し複製運用
• 通知メールのテンプレもWeb と同配色にそろえ、From 名・フッターを規定
  計測視点：改版の所要時間／影響ページ数／リリース頻度（前期比）
  落とし穴：ページ固有の“付け足しCSS”が増殖 → 追加CSSは1ファイル集中管理＋命名規約（BEM等）で棚卸し可能に

手順概要

サイトをビルダーで開く

目的：編集対象サイトのビルダーを起動する。
操作：

• 右上の歯車 → 設定

• 左検索で デジタルエクスペリエンス → すべてのサイト → 対象行の ビルダー

確認：サイトの ステータス と URL を再確認。

テーマと画像を設定

目的：ブランドを視覚に反映する。
操作：

• ビルダー左の 鉛筆 → テーマ

• テーマ > 画像 を開き、
  • 会社のロゴ に UrsaMajorLogo.png
  • ヘッダー画像 に Sunrise.jpg をアップロード

• コツ：
  • ロゴは小さくても判読できる比率。
  • ヘッダーは文字と重なる領域を暗すぎ/明るすぎにしない。
    失敗例：縦横比が合わずトリミングで崩れる → 画像側で余白と比率を調整。

ホームの見出し・サイドバーを整える

目的：来訪者が5秒で「何ができるサイトか」を理解できる導線にする。
操作：

• 左上 ページ構造 → コンテンツヘッダー > 見出し を選択
  • タイトル：Welcome to Ursa Major Solar’s Customer Site!
  • バナーテキスト：Find solutions, ask questions, and contact support.

• 主要部サイドバー > 評価ランキング表
  • タイトル：Customer Leaderboard、必要に応じて表示件数/ヘルプテキスト設定

• サイドバー > トレンドトピック
  • タイトル：Hot Right Now、トピック数=5、必要なら「トピックを使用しているユーザー数を表示」をON
    注意：トレンド表示には 公開記事にトピック付与 が必要。ヒットしなければ記事側を点検。

主要トピックの画像を登録

目的：トップの「カード」を視認性よく。
操作：コンテンツ管理 > 主要トピック

• Batteries に SolarBatteries.jpg

• Inverters に SolarInverter.jpg

• Solar Panels に SolarPanels.jpg

• 反映を確認するため ビルダーに戻る

チェック：3枚を横並びにしたときの色味/明度/トリミングの統一。

デバイス別プレビュー

目的：Phone/Tablet/Desktop で崩れを事前に検出。
操作：右上 ビューモードで切替

• Phone：見出しの改行/ボタンのタップ領域/カード間隔

• Tablet → Desktop：横並びの高さ揃え/ヘッダーの詰まり
  Tips：見出しは 1–2 行に収めると視認性が上がる。

公開（Publish）と説明の記録

目的：変更を配信（CDN）に反映し、履歴を残す。
操作：

• 右上 公開→ ダイアログで 公開URL を確認し、

• 公開の説明に要点を一文で記載（例：主要トピック画像と見出しを更新）→ 公開

• 公開中ダイアログ。完了後 了解。
  メモ：CDN/ブラウザキャッシュにより反映にラグが出る場合あり。プライベートウィンドウで確認すると早い。

サイトの有効化（Activate）

目的：サイト自体を利用可能に切替。通知メールが送信される場合あり。
操作：

• 左上メニュー → ワークスペース > 管理

• 有効化 → ダイアログ OK

• 画面上部の 「設定が正常に保存されました」 を確認
  注意：有効化前に ゲスト最小権限 と メンバー割当 の確認を必ず。

まとめ

いかがでしたでしょうか。

Experience Cloudのブランド設定は、見た目を整える作業ではなく、企業の基準をテーマや画像、レイアウト、ドメイン、通知メールに一貫して実装する運用設計です。

テンプレートとExperience Builderにより非エンジニアでも統一感のあるサイトを短期間で構築でき、Service CloudやKnowledgeと連携することでセルフサービスの質を高められます。

ブランドを基盤に据えることで、到達直後に公式性を伝え、ユーザーが迷わず目的の情報や手続きに進める導線が確立し、改版や多拠点展開も少ない手間で行えます。

管理者は公開前に権限や可視性を点検し、公開後は行動データをもとに調整を続けることで、デジタルエクスペリエンスを“見た目以上の成果”につなげていくことができます。

お問い合わせ

現在Salesforceを効果的に活用できていない企業様や、これからSalesforceの導入を検討している企業様で、設定や運用、保守に関するサポートが必要な場合は、ぜひお気軽にご相談くださいませ！