---
title: "店舗のテーマ"
slug: "storefront-themes"
abstract: "デザインプロセスで使用できるテーマの概要:ワイヤーフレームテーマ、ストアフロントモックアップテーマ、ストアフロントブランドテーマなど。"
---
# 店舗のテーマ

テーマはストアフロントの見た目や雰囲気を定義し、サイトの機能やコンテンツとは別に作成できます。テーマにはCSS、JavaScript、画像、フォントが含まれます。ストアフロントにはデザインプロセスで使えるテーマがいくつか付属しており、新しいテーマを作成する際のインスピレーションにもなります。 [サイトを作成する](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/create-a-commerce-tenant-and-site.html "Create a Commerce tenant and site")際にはテーマを選択しなければなりません。ただし、サイト作成後いつでも [別のテーマを割り当て](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/en/assign-a-theme-to-a-component.html) ることは可能です。

このトピックでは、SXAとストアフロントに含まれる各テーマの意図された用途について説明します。異なるテーマに対して、Sitecoreは情報アーキテクチャ、機能、ナビゲーションの計画から始まり、コンテンツ付きのモックアップを作成し、最後にブランドテーマ付きのストアフロントを作成するデザインプロセスをサポートします。

> !注SXAとSXA Storefrontは、Wireframeテーマ、Storefrontモックアップテーマ、Storefront Brandedテーマを組み合わせて使えます。より複雑な機能を提供するには、[コマースベースのテーマ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/using-the-commerce-base-themes.html "Using the commerce base themes")を使いましょう。

> !警告SXAストアフロントソリューションに付属するテーマは変更しないでください。 [推奨されるベストプラクティス](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/recommendations--working-with-themes.html)に従ってください。テーマの変更は、ソリューションの更新時に上書きされる可能性があります。

## ストアフロントブランドのテーマ

ストアフロント・ブランデッドのテーマは、デザインエージェンシーによって作成された最終デザインの一例です。ブランドの印象と雰囲気を持ち、会社の店舗で新しいブランドテーマを作成する際のインスピレーションとなります。

例えば、Storefront Brandedテーマの登録レンダリングは、エクスペリエンスエディターで次のように表示されます:

![The Registration rendering with the Storefront Branded theme in the Experience Editor.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/171C18D4E5414BBE927372B5C5FA6F24.png)

ストアフロントブランドテーマによる登録レンダリングは、ライブのストアフロントテンプレートサイト上で以下の通りです:

![The Registration rendering with the Storefront Branded theme in the Storefront template.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/C324438F3CA649EFB7856B52540E9963.png)

## カスタムテーマ

新しいコマースサイトを作成する際には、新しいテーマを作成することができます。新しいテーマにはコマースレンダリングのサポートが含まれています。サポートにはレイアウトは含まれず、コンポーネントのスタイリングも最小限です。カスタムテーマはワイヤーフレームテーマとして使うこともできますし、変更することも可能です。

例えば、スタイル化されていないカスタムテーマでの登録レンダリングは次のようになります:

![The Registration rendering with an un-styled custom theme.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/D5DE088DB76A4FB9B33A7A0E159D217C.png)

テーマにはすべての構成要素[Sassファイル](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/style-sxa-sites-with-sass.html) が含まれています(一部のファイルは空です)。これにより [、Creative Exchange](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/change-a-site-design-using-creative-exchange.html)を使ってテーマをエクスポートしやすくなります。

## ワイヤーフレームテーマ

ワイヤーフレームテーマは、新しいサイトの設計を始める際に通常使うテーマです。情報アーキテクチャ、ビジネス目標、ユーザーフロー、主要なユーザビリティの問題に取り組む際には、このテーマを使うことが多いです。この段階では、内部レビューや反復のために同僚とサイトを共有することもあります。

> !注ストアフロントはSXAに付属するワイヤーフレームテーマを完全にはサポートしていません。

## ストアフロントモックアップテーマ

> !注モックアップテーマは廃止されており、そのためテーマ名に「非推奨」が付加されています。コンテンツエディターでこれらを閲覧するには、*sitecore/Media Library/Themes/Storefront deprecated*フォルダに移動します。ただし、新しいサイトを作成する際にはこれらのテーマを引き続き使用できます。

ストアフロントモックアップテーマは、テキスト、ラベル、画像などのコンテンツでサイトを更新し始める際に使うテーマの例です。

SXAはコンテンツとプレゼンテーションを分離しやすくし、あなたと同僚がコンテンツとデザインを並行して作業できるようにします。つまり、情報アーキテクチャやユーザーフローが決まったら、すぐにサイトへのコンテンツ追加を始めることができます。

ストアフロントのモックアップテーマはグレースケールのテーマで、サイトにより完成度の高い印象を与えていますが、明らかに最終デザインではありません。

通常、サイトの全体デザインが形作られ始める段階で、モックアップテーマを反復的に作成します。会社のデザイナーや外部のデザインエージェンシーは、モックアップテーマを出発点として最終的なブランドテーマを作成します。

SXA Storefrontには2つのモックアップテーマがあります。商品画像付きストアフロントモックアップテーマはカタログのオリジナル画像を表示し、ストアフロントモックアップ(モック画像付き)テーマは商品画像の代わりに一般的なグレースケール画像を表示します。

例えば、いずれのストアフロントモックアップテーマでも登録レンダリングは、エクスペリエンスエディターで次のように表示されます:

![The Registration rendering with either Storefront Mock-up theme in the Experience Editor.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/5202EB33ED1A4EC9AFD7F8615EA5CC98.png)