Storefront のテーマ

概要

ワイヤーフレーム テーマ、Storefront モックアップ テーマ、Storefront ブランド テーマなど、デザイン プロセスで使用できるテーマの概要。

テーマは、ストアフロントのルック アンド フィールを定義するもので、サイトの機能やコンテンツとは別に作成できます。テーマには、CSS、JavaScript、画像、およびフォントが含まれています。Storefront には、デザイン プロセスで使用できるいくつかのテーマが付属しています。または、サイトの新しいテーマを作成するときに、それらからインスピレーションが得られる可能性があります。サイトを作成するときは、テーマを選択する必要があります。ただし、サイトの作成後にいつでも別のテーマを割り当てることができます。

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

注記

SXA と SXA Storefront には、ワイヤーフレーム テーマ、Storefront モックアップ テーマ、および Storefront ブランド テーマが付属しています。より複雑な機能を提供するには、Commerce ベースのテーマを使用します。

警告

SXA Storefront ソリューションで提供されるテーマを変更しないでください。また、推奨されるベスト プラクティスに従ってください。ソリューションが更新されると、テーマに対する変更が上書きされる場合があります。

Storefront ブランド テーマは、デザイン エージェンシーが作成する最終的なデザインの例です。ブランドのルック アンド フィールを持ち、会社のストアフロント用に新しいブランド テーマを作成するときのインスピレーションとして使用できます。

たとえば、エクスペリエンス エディターでは、Storefront ブランド テーマを使用した登録レンダリングは次のようになります。

エクスペリエンス エディターでの Storefront ブランド テーマを使用した登録レンダリング。

ライブ Storefront テンプレート サイトでは、Storefront ブランド テーマを使用した登録レンダリングは次のようになります。

Storefront テンプレートでの Storefront ブランド テーマを使用した登録レンダリング。

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

たとえば、スタイルが設定されていないカスタム テーマを使用した登録レンダリングは次のようになります。

スタイルが設定されていないカスタム テーマを使用した登録レンダリング。

このテーマには、すべてのコンポーネント Sass ファイルが含まれています (一部のファイルは空です)。このため、Creative Exchange を使用してテーマを簡単にエクスポートできます。

ワイヤーフレーム テーマは、通常、新しいサイトのデザインを開始するときに使用するテーマです。このテーマは、情報アーキテクチャ、ビジネス目標、ユーザー フロー、および主要な使いやすさの問題に取り組んでいるときに使用することが多く、このステージでは、社内レビューと反復のためにサイトを同僚と共有する場合があります。

注記

Storefront では、SXA に付属するワイヤーフレーム テーマは完全にはサポートされていません。

注記

モックアップ テーマは廃止されたため、テーマ名に "非推奨" と記載されています。コンテンツ エディターでそれらを参照するには、sitecore/Media Library/Themes/Storefront deprecated フォルダーに移動します。ただし、新しいサイトを作成するとき、これらのテーマを引き続き使用できます。

Storefront モックアップ テーマは、テキスト、ラベル、画像などのコンテンツでサイトの更新を開始するときに使用するテーマのタイプの例です。

SXA を使用すると、コンテンツをプレゼンテーションから簡単に分離できるため、コンテンツとデザインに並行して取り組むことができます。つまり、情報アーキテクチャとユーザー フローが決まれば、すぐにサイトへのコンテンツの追加を開始できます。

Storefront モックアップ テーマはグレースケールのテーマであり、最終的なデザインではありませんが、サイトに完成品に近い外観を持たせることができます。

通常、サイトの全体的なデザインが具体化し始めると、反復プロセスでモックアップ テーマを作成します。会社のデザイナーまたは外部のデザイン エージェンシーは、モックアップ テーマを出発点として使用して、最終的なブランド テーマを作成します。

SXA Storefront には 2 つのモックアップ テーマが付属しています。商品画像を持つ Storefront モックアップ テーマでは、カタログの元の画像が表示され、モック画像を持つ Storefront モックアップ テーマでは、商品画像の代わりに一般的なグレースケール画像が表示されます。

たとえば、エクスペリエンス エディターでは、Storefront モックアップ テーマのどちらかを使用した登録レンダリングは次のようになります。

エクスペリエンス エディターでの Storefront モックアップ テーマのどちらかを使用した登録レンダリング。