【紅茶ECサイト制作日誌 Vol.1】「これ本当にExperience Cloud？」LWCゼロで構築する、英国風ECサイトのトップページデザイン術

「Salesforceで作るサイトって、どれも似たようなレイアウトになるよね」
「おしゃれにするには、プロコード（LWC開発）が必須なんでしょ？」

そんな常識を覆すために立ち上げました。ブリティッシュ・ティー専門 ECサイト「The Royal Brew」プロジェクト。

第一弾となる今回は、LWC（Lightning Web Components）による開発を一切行わず、「標準コンポーネント」＋「カスタムCSS」＋「拡張CMS画像」＋「AppExchange」だけで構築したトップページのデザインテクニックを公開します。

コンセプトとデザイン戦略
ホーム画面全体像
実践テクニック①：AppExchange「Flexi-Grid Layout」の活用
実践テクニック②：【データ連携】商品レコード × CMS画像のハイブリッド表示
1. 実装のポイント
実践テクニック③：標準コンポーネント＋カスタムCSSの魔法
実践テクニック④：「画像」で作る波型の境界線
まとめ

コンセプトとデザイン戦略

まず目指したのは、Salesforce特有の「直線的な箱型レイアウト」からの脱却です。
英国王室御用達のような「伝統（Royal）」と、現代的なWebデザインを融合させるため、以下の戦略を立てました。

カラー & フォント: クリーム色 (#FFFFF0) をベースに、高貴なネイビー (#0f1f3d) とゴールド (#c1ab05) を配色。フォントはセリフ体 (Noto Serif JP / CINZEL DECORATIVE) を採用し、優雅さを演出。
有機的な境界線: セクションの区切りに「波型（ウェーブ）」を取り入れ、柔らかさを出す。
AI活用のキャラクター: サイトの案内人として、執事の「セバスチャン」を配置。実はこの執事の画像、Googleの生成AI 「Gemini Nano Banana」 で生成したものです。

ホーム画面全体像

どのようなホーム画面になったのか、ご紹介いたします。

あらためてお伝えすると、この画面は LWC（Lightning Web Components）による開発を一切行わず、「標準コンポーネント」＋「カスタムCSS」＋「拡張CMS画像」＋「AppExchange」だけで構築しています。

実践テクニック①：AppExchange「Flexi-Grid Layout」の活用

標準のグリッドコンポーネントも優秀ですが、もっと自由なレイアウトを実現するために、今回は無料のAppExchangeコンポーネント「Flexi-Grid Layout (LWR)」を採用しました。

標準グリッドでは難しい「列ごとの細かな幅調整」や「ネスト（入れ子）構造」が直感的に行えるため、雑誌のような複雑なレイアウトを組むのに最適です。

ヘッダー / フッターやトップバナーなど、さまざまな領域で使用しています。
PC版 / タブレット版 / モバイル版でレイアウトを柔軟に変更できるので、LWRサイト構築に必須と言えるほどのコンポーネントです。

Flexi-Grid Layout (LWR) のインストールと使い方については以下を参照ください。

【ノーコード】サイトの足元も美しく。「フッター」の編集とコピーライト表記の設定方法

サイトの信頼感を底上げする「フッター」のカスタマイズガイド。LWRビルダーを使ったコピーライトの変更、リンクの追加、詳細なレイアウト指定の方法を解説。

実践テクニック②：【データ連携】商品レコード × CMS画像のハイブリッド表示

「RECOMMEND FOR YOU」セクションに並ぶ商品画像。これらは静的に貼った画像ではなく、Salesforceの「商品 (Product2)」レコードと連動しています。

通常、商品画像を表示するにはB2B Commerceなどのライセンスが必要だったり、複雑な設定が必要だったりしますが、今回は以下のシンプルな工夫で実現しました。

実装のポイント

画像の保存: 商品画像をSalesforce CMS（拡張CMS）にアップロードし、「公開」します。
パスの取得: 公開された画像のURL（相対パス）を取得します（例: /sfsites/c/cms/delivery/media/MC...）。
レコードへの設定: 商品オブジェクトの標準項目 DisplayUrl（表示URL）に、この相対パスを保存します。
表示: ビルダー上で「グリッド」コンポーネントを配置し、その中に「タイル」を配置します。データソースとして「レコードリスト」、オブジェクトに「商品」を選択。タイルの画像部分のソースに {!Item.DisplayUrl} をバインドさせます。

これにより、レコード側のURLを書き換えるだけでサイトの画像も切り替わる、運用しやすい仕組みがノーコードで完成しました。

実践テクニック③：標準コンポーネント＋カスタムCSSの魔法

標準コンポーネントをそのまま置くと「Salesforceっぽさ」が残ります。そこで、「カスタムCSS」の出番です。エクスペリエンスビルダーの「CSSクラス」プロパティとヘッドマークアップ内のCSSを組み合わせることで、見た目と動きを変えています。

バナー画像のスタイル適用
タイルのスタイル適用
バナーのスタイル適用

バナー画像: 元は左側のテキストと右側の画像がきっちりと分けられていました。画像を背景や他の要素に重なっている (Overlap) 状態を作り出すことで、空間に奥行きと動きが出ます。
円形画像: 標準の「バナー」コンポーネントにCSSクラスを付けて、border-radius: 50%; を適用し、紅茶の缶をモダンな丸窓で表現。マウスホバー時にちょっと大きくしながら傾ける動きを追加。
タイル: 標準の「タイル」コンポーネントにCSSクラスを付けて、マウスカーソルを乗せるとふわっと浮く動きを付与。

クリックしてカスタムCSSコードを見る

<style>
    /* ヒーロー画像の位置を調整 */
    .hero-image .image-wrapper {
        margin-top: -105px;
        margin-left: -30px;
    }

    /* ナビゲーションバーを最前部へ */
    .my-navigation-bar {
        position: relative;
        z-index: 100;
    }

    /* おすすめタイルを動かす */
    .recommend-tile {
        transition: all 0.3s ease;
    }
    .recommend-tile:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(15, 31, 61, 0.15);
        border-color: #C5A059;
    }

    /* コレクションを円形に */
    .royal-collection-banner .bannerWrapper {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #C5A059;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
        margin: 0 auto;
        max-width: 250px;
    }

    /* コレクションホバー時に傾ける */
    .royal-collection-banner .bannerWrapper:hover {
        border-color: #0F1F3D;
        box-shadow: 0 15px 30px rgba(15, 31, 61, 0.3);
        transform: scale(1.05) rotate(3deg);align-content
    }
    /* コレクション画像内の文字列表現と位置を調整 */
    .royal-collection-banner .royal-collection-banner-title p {
        letter-spacing: 0.1em !important;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
    }
    .royal-collection-banner-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 82%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }
</style>

LWCを作らなくても、標準コンポーネントに適切なCSSクラスを当てるだけで、デザインの自由度は無限に広がります。