【LWR × Design】脱・Salesforce感！Styling Hooks を使ってサイトのデザインを自由に操る方法

この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。

Experience Cloud で構築されたサイトを見て、「あ、これ Salesforce で作ったな」と一瞬で気づいてしまうことはありませんか？その原因の多くは、Salesforce 標準のデザインシステム (SLDS) のスタイルがそのまま適用されていることにあります。

もちろん、SLDS はアクセシビリティや統一感において優れたシステムです。しかしながら企業のブランディングや独自の世界観（Brand Identity）を表現しようとしたとき、その「強すぎるデフォルト」が足枷になることも事実です。

特に次世代の LWR (Lightning Web Runtime) サイトにおいては、我々開発者はピクセル単位でのデザインコントロール権を手にしています。この記事では、モダンなWeb標準技術と Salesforce 独自の Styling Hooks を駆使して、「Salesforceっぽさ」を払拭し、洗練された UI/UX を実現するための戦略を解説します。

なぜ「脱・Salesforce感」が必要なのか（UXの視点）
デザインの階層構造：どこにCSSを書くべきか？
【核心】Styling Hooks の魔術
1. Bad Pattern (やってはいけない例)
2. Good Pattern (Styling Hooks)
[UI/UX Tips] 待ち時間を「体験」に変えるスケルトンスクリーン
まとめ：エンジニアもデザインを語ろう
参考URL

なぜ「脱・Salesforce感」が必要なのか（UXの視点）

ユーザー体験（UX）において、「違和感」は最大のノイズです。企業のコーポレートサイトからポータルに遷移した瞬間、フォントが変わり、ボタンの角丸が変わり、使用される色が「Salesforceブルー」になってしまうと、ユーザーは無意識に「別システムに飛ばされた」という不安を抱きます。

シームレスな体験を提供するためには、Experience Cloud 側をコーポレートサイトのデザインガイドラインに極限まで近づける必要があります。そして、それを実現する技術的土台が Styling Hooks (CSS カスタムプロパティ) です。

デザインの階層構造：どこにCSSを書くべきか？

LWRサイトでスタイルを適用する場所は大きく3つあります。これらを適切に使い分けることが、メンテナンス可能なデザイン設計の第一歩です。

テーマパネル (No-Code)
- ビルダー左側の「テーマ」設定。
- 基本色やフォントファミリーはここで設定します。これがサイト全体の root 変数になります。
ヘッドマークアップ (Global CSS)
- 「設定」>「詳細」>「ヘッドマークアップ」内の <style> タグ。
- サイト全体に影響する共通クラス（ユーティリティクラス）や、サードパーティ製ライブラリのCSSはここに書きます。
LWC コンポーネント (Scoped CSS)
- 各コンポーネントの .css ファイル。
- Shadow DOM のカプセル化により、ここに書いたスタイルは外部に漏れません。

DXforce Point for Developers

DOM の壁

LWRサイトでは、各コンポーネントが Shadow DOM によって強力に隔離されています。そのため、ヘッドマークアップ（グローバルCSS）から div { color: red; } と書いても、LWCの中身には適用されません。この「壁」を越えてスタイルを適用する唯一の正攻法が、次項の Styling Hooks です。

【核心】Styling Hooks の魔術

これまでの Aura サイト開発では、標準コンポーネントのデザインを変えるために !important を乱用してスタイルを無理やり上書きする「アンチパターン」が横行していました。これは Salesforce 本体のバージョンアップで崩れる原因となります。

LWR および最新の LWC では、Styling Hooks と呼ばれる CSS 変数（Custom Properties）を上書きする手法が公式に推奨されています。

DXforce Point for Developers

コードを書く前に

LWRサイトでは、ビルダーの標準機能で「コンポーネントごとのCSSクラス指定」や「マージン・パディングの調整」が可能になっています。

lwc:if や Styling Hooks を使うのは、あくまで標準機能では実現できない「コンポーネント内部の微細なスタイル変更」や「動的な制御」が必要な場合に限定しましょう。基本は標準機能（No-Code）、こだわりたい箇所はHooks（Pro-Code）という使い分けが、開発工数を抑えるコツです。

Bad Pattern (やってはいけない例)

/* CSS */
/* 非推奨：Salesforceの内部クラスを直接上書きしているため、将来的に破損する可能性があります */
.slds-button_brand {
    background-color: #E20074 !important;
    border-radius: 0 !important;
}

Good Pattern (Styling Hooks)

/* CSS */
/* 推奨：CSS変数を上書きすることで、安全にデザインを変更できます */
:host {
    /* ブランドカラーを上書き（企業カラーのピンク色へ） */
    --slds-c-button-brand-color-background: #E20074;
    --slds-c-button-brand-color-border: #E20074;
    
    /* ボタンの角丸を0にしてシャープな印象にする */
    --slds-c-button-radius-border: 0;
}

このように変数を定義するだけで、そのコンポーネント配下のすべての標準ボタンが、安全かつ美しく指定の色に変わります。

DXforce Point for Developers

利用可能なフック（変数名）は、Lightning Design System (SLDS) の公式ドキュメントで “Styling Hooks” と検索すると網羅されています。

[UI/UX Tips] 待ち時間を「体験」に変えるスケルトンスクリーン

データの読み込み中、画面中央でグルグル回る「スピナー」を見せられることほど、ユーザーにとって退屈な時間はありません。

最近のモダンな Web アプリケーションでは、スケルトンスクリーン (Skeleton Screen) が主流です。コンテンツの枠組みだけを先に薄いグレーで表示し、「読み込みが進んでいる感」を演出する手法です。

LWC での実装は非常にシンプルです。lwc:if を使用して制御します。

実装イメージ (HTML)

<!-- html -->
<template>
    <div class="container">
        <template lwc:if={isLoading}>
            <div class="skeleton-wrapper">
                <div class="skeleton-header"></div>
                <div class="skeleton-line"></div>
                <div class="skeleton-line"></div>
                <div class="skeleton-line short"></div>
            </div>
        </template>

        <template lwc:else>
            <div class="content-wrapper fade-in">
                <h1>{recordTitle}</h1>
                <p>{recordDescription}</p>
            </div>
        </template>
    </div>
</template>

実装イメージ（JavaScript）

/* JavaScript */
/**
 * @description スケルトンスクリーンのデモ用コンポーネント
 */
import { LightningElement } from 'lwc';

export default class SkeletonScreenExample extends LightningElement {
    // 読み込み状態フラグ
    isLoading = true;
    
    recordTitle;
    recordDescription;

    connectedCallback() {
        this.fetchData();
    }

    /**
     * データ取得をシミュレーションするメソッド
     */
    fetchData() {
        // 2秒間の遅延を発生させる
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        setTimeout(() => {
            this.recordTitle = 'Experience Cloud デザイン戦略';
            this.recordDescription = 'Styling Hooks を活用して、ブランドの世界観を表現する方法を学びます。CSS変数を使うことで、LWRサイトのデザインを安全かつ柔軟にカスタマイズできます。';
            
            this.isLoading = false;
        }, 2000);
    }
}

DXforce Point for Developers

JavaScript 側では、isLoading という変数を定義し、初期値を true にしておきます。

データの取得（Apex呼び出しや @wire）が完了したタイミングで this.isLoading = false; とすることで、HTML 側の lwc:if / lwc:else が反応し、スケルトン表示から実際のコンテンツへと瞬時に、かつ滑らかに切り替わります。

実装イメージ (CSS)

/* CSS */
/* コンテナ全体の余白 */
.container {
    padding: 1.5rem;
    background-color: white;
    border-radius: 0.25rem;
    /* 動作確認用に枠線をつけても良いですが、本番では不要です */
    /* border: 1px solid #ddd; */
}

/* シマー（きらめき）アニメーションの定義 */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* スケルトンの共通スタイル */
.skeleton-header, .skeleton-line {
    /* 背景のグラデーション（少し濃い目に調整して視認性を向上） */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    
    /* アニメーション適用 */
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
    
    /* 【重要】中身が空のdivを表示させるために高さと幅を指定 */
    width: 100%; 
    margin-bottom: 12px;
}

/* ヘッダー用（高さを大きく、幅を少し短く） */
.skeleton-header {
    height: 32px; /* 見出しのような高さ */
    width: 60%;
    margin-bottom: 24px;
}

/* 本文用（テキスト行のような高さ） */
.skeleton-line {
    height: 16px;
}

/* 最後の行を短くして文章っぽく見せる */
.skeleton-line.short {
    width: 80%;
}

/* 【演出】読み込み完了時にフワッと表示させる */
.fade-in {
    animation: fadein 0.5s ease-in;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}