---
title: "ウォークスルー:メールキャンペーン用のストアフロントランディングページ作成"
slug: "walkthrough--creating-a-storefront-landing-page-for-an-email-campaign"
abstract: "商品ページの作成方法を学び、自動メールキャンペーンで商品を宣伝する方法を学びましょう。"
---
# ウォークスルー:メールキャンペーン用のストアフロントランディングページ作成

このウォークスルーでは、キャンペーンランディングページをストアフロントに追加する手順を案内します。ページを作成し、更新情報をストアフロントに公開した後、特定の商品を宣伝する [自動メールキャンペーン](https://doc.sitecore.com/xp/en/users/exm/100/email-experience-manager/create-an-email-campaign.html) にURLを含めることができます。

このウォークスルーでは、以下の方法を説明します:

-   ランディングページを作成する
-   ストアフロントページを構築

> !注このウォークスルーに従うには、店舗サイトを作成する際にHabitatカタログを含める必要があります。

## ランディングページを作成する

この手順では、新しいページを作成してストアフロントサイトに追加します。このページは、顧客が送信したURLをクリックした際に見えるストアフロント商品ページを作成するために使われます。これはEmail Experience Managerの自動化メールキャンペーンの一環です。

ランディングページを作成するには:

1.  コンテンツエディターで*sitecore/Content///Home*へ行ってください。
    
2.  *Home*アイテムを右クリックして「**挿入**、**ページ**」をクリックします。
    
3.  **メッセージ**ダイアログボックスでページ名を入力してください。例えば*fridge-campaign*のように、**OK**をクリックします。
    
    ページ名はストアフロントのURLで使われます。例えば、*fridge-campaign*は www.storefront.com/fridge-campaignになります。
    
4.  新しく作成したページを右クリックし、**エクスペリエンスエディター**をクリックしてください。
    
5.  リボンの**Experience Accelerator**タブの**Look & Feel**セクションで「 **Pick Page Design**」をクリックしてください。
    
6.  表示されるダイアログボックスの **ページデザイン** リストで、「 **デフォルトコマースページ** 」をクリックして **「OK」**をクリックします。
    
7.  リボンの上で「 **保存**」をクリックします。
    

## ストアフロントページを作成する

この手順では、プロモーションしたい冷蔵庫の詳細と画像を含むエクスペリエンスエディターを使ってストアフロントページを作成します。

ストアフロントページを作成するには:

1.  アプリケーションウィンドウの右側で矢印をクリックすると **ツールボックス**を開きます。
    
2.  **Commerce Catalog**セクションから、**Catalog Item Container**コンポーネントをページにドラッグします。
    
3.  **カタログアイテムコンテナ**ツールバーで「**その他」→「コンポーネントプロパティ編集**」を選択します。
    
4.  General, Data Sourceセクションで「Browse」をクリックし、「*Home/Catalogs/Habitat\_Master/Departments/Appliances*」に行き、「**Habitat Viva 4-Door 22」を選択してください。立方フィート冷蔵庫(Cubic Foot Refrigerator)とアイスメーカーを**選び、「**OK」**をクリックします。
    
5.  **「OK**」をクリックして**「コントロールプロパティ」**ダイアログボックスを閉じます。
    
    カタログアイテムコンテナレンダリングは、カタログレンダリング群のデータソースとして製品アイテムを設定します。コンテナレンダリング内に追加されたすべてのカタログレンダリングは、選択した製品コンテキストを使用します。これにより、製品コンテキストが利用できないページに商品情報を表示できます。
    
6.  **ページ構造**セクションから、**スプリッター(列)**コンポーネントをページにドラッグして、情報を2つの列に整理します。
    
7.  **Commerce Catalog**セクションからProduct **Images**コンポーネントをコンテナの左列にドラッグします。
    
8.  **Commerce Catalog**セクションから、以下のコンポーネントをコンテナの右列にドラッグしてください:
    
    -   製品情報
    -   製品在庫
    -   製品バリアント
    -   製品価格の構成要素
    
    いずれの場合も、「関連コンテンツ選択」ダイアログボックスで、同じ名前の既存のコンテンツをクリックして「OK」をクリックします。
    
9.  **Commerce Cart**セクションから「**Add to Cart**」コンポーネントをページにドラッグし、変更を保存します。
    
    ランディングページの表示はエクスペリエンスエディターでこんな感じです。
    
    ![The landing page displayed in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/100/sitecore-experience-commerce/images/WalkthroughPageLayout.png)
    
10.  **ホーム**タブで「**公開**」をクリックし、「**アイテム公開**」ダイアログボックスで**「スマート・パブリッシュ**」を選択し、「**公開**」をクリックします。「**OK**」をクリックして進めます。
     
     ライブストアフロントではURLを使ってページにアクセスし、このような見た目になります。
     
     ![The landing page on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/100/sitecore-experience-commerce/images/WalkthroughPageLayout2.png)
     

> !ヒントメールキャンペーンのランディングページ作成方法については、Discover Sitecoreチャンネルで公開されている [動画](https://www.youtube.com/watch?v=f4v3vht_A9k) をご覧ください。