---
title: "エクスペリエンスエディターでストアフロントを作成する"
slug: "create-a-storefront-in-the-experience-editor"
abstract: "エクスペリエンスエディターへのアクセス方法やアイテムの編集方法。"
---
# エクスペリエンスエディターでストアフロントを作成する

ストアフロントを構築し設計する際には、主に2つのツールを使っています: [コンテンツエディター](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-platform/en/the-content-editor.html) と [エクスペリエンスエディター](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-platform/en/the-experience-editor.html)です。どちらもSitecore Launchpadからアクセスできます。

エクスペリエンスエディターは、リボン上のツールやコマンド、ツール [ボックス](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/the-toolbox.html "The Toolbox")内のレンダリングコンポーネントを使って、ストアフロントの見た目や雰囲気、内容を簡単に変更できるインターフェースです。エクスペリエンスエディターでは、ページ上に表示されるすべてのアイテム(テキスト、グラフィック、ロゴ、リンクなど)を編集できます。

![Toolbox in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ExperienceEditor.png)

エクスペリエンスエディターで作業しているときに、以下のことができます:

-   カタログデータをページ上で直接編集できます。例えば、カテゴリータイトルや商品情報(価格、在庫状況、在庫数を除く)です。
-   関連商品内の商品への画像の関連付けを編集してください。
-   ページ上のほとんどのテキストコンテンツを編集してください。例外として、ヒントテキスト(プレースホルダーまたはウォーターマークテキスト)とツールチップがあり、これらは浮動ツールバーからアクセスできる関連データ項目で編集可能です。
-   検索を実行して検索結果を見てください。
-   Experience **Accelerator**タブのボタンを使って、選択したテーマからグレースケールに[表示](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/view-modes-and-themes.html)モードを変更してください。Storefrontのサイトテンプレートはワイヤーフレームモードを完全にはサポート*していません*。

重要なのは以下の点です:

-   ほとんどのフォームは送信できません。例えば、ログインや登録はそうです。エクスペリエンスエディターで作業すると、Sitecoreユーザーとしてログインしているため、認証や登録は意味がありません。これは住所やプロフィール情報の編集にも当てはまります。
-   商品をショッピングカートに追加することはできません。
-   通常のボタンで注文やチェックアウトのナビゲーションはできません。エクスペリエンスエディターのパンくずから、チェックアウトのページを表すアイテムを手動で選択する必要があります。
-   レンダリングは常に見えるので、選択して編集できます。例えば、メッセージサマリーはライブストアフロントが空のままでは見えません。
-   カタログレンダリングは、コンテキストが有効な場合に実際のカタログデータ、コンテキストが無効な場合にはプレースホルダーデータを表示します。

エクスペリエンスエディターでアイテムを編集するには:

1.  エクスペリエンスエディターにログインし、編集したいページとフィールド [に移動します](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-platform/en/navigate-to-an-item-in-the-experience-editor.html) 。デフォルトでは最終レイアウトを編集しているので、該当するバージョンと言語を選択してください。
    
    異なるバージョンのページ間で共有されているフィールドを編集したい場合は、リボンの**プレゼンテーションタブの**レイアウトグループで「**最終レイアウト**」をクリックし、その後「**共有レイアウト**」をクリックしてください。これによりページの共有レイアウトが読み込まれ、共有コンテンツやバージョン変更されていないコンテンツの編集が可能になります。
    
2.  編集したいフィールドをクリックしてコンテンツを入力してください。選択したフィールドの種類によって、浮動ツールバーに異なるオプションが表示されます。例えば:
    
    -   シンプルなテキストフィールドでは、テキストのみを入力できます。入力したテキストに合わせて自動的にフィールドが拡大します。
    -   画像フィールドには様々な種類のメディアを挿入できます。これにはアニメーション、映画クリップ、音声ファイルなどが含まれます。
3.  フィールドの編集が終わったら、「 **保存」**をクリックします。