【ノーコード】CSS不要！サイトの「色」と「フォント」を3分でカスタマイズする方法

Experience Cloud でサイトを作成した直後、画面が「青色」一色でがっかりしたことはありませんか？ これは Salesforce の標準カラーですが、企業のブランドサイトや会員ポータルとして公開するには、やはり自社のコーポレートカラーに合わせたいものです。

「色を変えるには CSS（スタイルシート）を書かないといけないの？」 いいえ、その必要はありません。

最新の LWR サイトでは、管理画面の「テーマパネル」を操作するだけで、サイト全体の色やフォントを一瞬で、しかもノーコードで変更できます。 この記事では、あなたのサイトを「Salesforceの借り物」から「自社のブランドサイト」へと変身させる、最初の一歩を解説します。

なぜ「テーマ設定」から始めるのか？

個別のボタンや背景の色を一つずつ変えていくのは、非常に効率が悪く、デザインの統一感を損なう原因になります。 まずはサイト全体の「基本ルール（テーマ）」を決めてしまうのが、最短ルートです。

• 統一感: ボタン、リンク、アイコンの色が一括で揃います。
• メンテナンス性: 後で「やっぱ赤色にしたい」となった時も、一箇所変えるだけで済みます。

CSSを書くのは、このテーマ設定で手が届かない細かい部分だけにする。これが鉄則です。

「テーマパネル」を開いてみよう

それでは早速設定しましょう。エクスペリエンスビルダーを開いてください。

画面の左端にあるメニューバーに、絵筆🖌️のアイコンがあります。これが「テーマ (Theme)」パネルです。 クリックすると、デザインに関する設定項目がずらりと表示されます。

「色 (Colors)」を変更する

テーマパネルの中にある 「色 (Colors)」 セクションを展開します。 ここで設定した色が、サイト内のあらゆるコンポーネントに自動的に適用されます。

• ブランド (Brand) / プライマリ:
  • サイトの「主役」となる色です。アクションボタン（保存、送信など）やリンク文字に使われます。
  • 会社のロゴに使われている一番目立つ色を設定するのがおすすめです。
• アクセント (Accent) / セカンダリ:
  • サイトの「脇役」となる色です。強調したい部分や、補助的なボタンに使われます。

カラーピッカーで選ぶこともできますが、自社のコーポレートカラーが決まっている場合は、HEXコード（例: #005FB2） を直接入力すると確実です。

「フォント」を変更する

次に、「テキスト」 セクションを展開します。 文字の形（書体）は、サイトの印象を大きく左右します。

• ヘッダー (Headings): 記事のタイトルなどに使われます。
• パラグラフ (Body): 通常の文章に使われます。

【推奨設定】 デフォルトのフォントでも表示はされますが、日本語のサイトとして読みやすく、美しいデザインにするなら 「Noto Sans JP」 が断然おすすめです。LWRサイトでは、この高品質なフォントが標準で利用可能です。

変に装飾的な欧文フォントを選ぶと、日本語が表示されたときにガタガタに見えてしまうことがあるので注意しましょう。

【重要】変更を「公開」する

ビルダー上で色が変わって満足してはいけません。 右上の [公開 (Publish)] ボタンを押さない限り、実際のユーザーには古い青色のまま見えています。

1. 色とフォントが決まったら、[公開] をクリック。
2. 完了メールが届いたら、別のブラウザやシークレットウィンドウなどでサイトを開き、変更が反映されているか確認しましょう。

裏側では何が起きている？

エンジニアの方へ。

まとめ

• サイトを作ったら、まずは「テーマパネル」へ直行する。
• 「ブランドカラー」と「テキスト（フォント）」を設定する。
• 最後に必ず「公開」する。

たったこれだけで、サイトのクオリティは劇的に向上します。

次回は、サイトの顔である 「ロゴ画像」 の設定と、意外と忘れがちな 「ファビコン（ブラウザタブのアイコン）」 の変更方法について解説します。お楽しみに！