店舗のテーマ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
テーマはストアフロントの見た目や雰囲気を定義し、サイトの機能やコンテンツとは別に作成できます。テーマにはCSS、JavaScript、画像、フォントが含まれます。ストアフロントにはデザインプロセスで使えるテーマがいくつか付属しており、新しいテーマを作成する際のインスピレーションにもなります。 サイトを作成する際にはテーマを選択しなければなりません。ただし、サイト作成後いつでも 別のテーマを割り当て ることは可能です。
このトピックでは、SXAとストアフロントに含まれる各テーマの意図された用途について説明します。異なるテーマに対して、Sitecoreは情報アーキテクチャ、機能、ナビゲーションの計画から始まり、コンテンツ付きのモックアップを作成し、最後にブランドテーマ付きのストアフロントを作成するデザインプロセスをサポートします。
!注SXAとSXA Storefrontは、Wireframeテーマ、Storefrontモックアップテーマ、Storefront Brandedテーマを組み合わせて使えます。より複雑な機能を提供するには、コマースベースのテーマを使いましょう。
!警告SXAストアフロントソリューションに付属するテーマは変更しないでください。 推奨されるベストプラクティスに従ってください。テーマの変更は、ソリューションの更新時に上書きされる可能性があります。
ストアフロントブランドのテーマ
ストアフロント・ブランデッドのテーマは、デザインエージェンシーによって作成された最終デザインの一例です。ブランドの印象と雰囲気を持ち、会社の店舗で新しいブランドテーマを作成する際のインスピレーションとなります。
例えば、Storefront Brandedテーマの登録レンダリングは、エクスペリエンスエディターで次のように表示されます:
ストアフロントブランドテーマによる登録レンダリングは、ライブのストアフロントテンプレートサイト上で以下の通りです:
カスタムテーマ
新しいコマースサイトを作成する際には、新しいテーマを作成することができます。新しいテーマにはコマースレンダリングのサポートが含まれています。サポートにはレイアウトは含まれず、コンポーネントのスタイリングも最小限です。カスタムテーマはワイヤーフレームテーマとして使うこともできますし、変更することも可能です。
例えば、スタイル化されていないカスタムテーマでの登録レンダリングは次のようになります:
テーマにはすべての構成要素Sassファイル が含まれています(一部のファイルは空です)。これにより 、Creative Exchangeを使ってテーマをエクスポートしやすくなります。
ワイヤーフレームテーマ
ワイヤーフレームテーマは、新しいサイトの設計を始める際に通常使うテーマです。情報アーキテクチャ、ビジネス目標、ユーザーフロー、主要なユーザビリティの問題に取り組む際には、このテーマを使うことが多いです。この段階では、内部レビューや反復のために同僚とサイトを共有することもあります。
!注ストアフロントはSXAに付属するワイヤーフレームテーマを完全にはサポートしていません。
ストアフロントモックアップテーマ
!注モックアップテーマは廃止されており、そのためテーマ名に「非推奨」が付加されています。コンテンツエディターでこれらを閲覧するには、sitecore/Media Library/Themes/Storefront deprecatedフォルダに移動します。ただし、新しいサイトを作成する際にはこれらのテーマを引き続き使用できます。
ストアフロントモックアップテーマは、テキスト、ラベル、画像などのコンテンツでサイトを更新し始める際に使うテーマの例です。
SXAはコンテンツとプレゼンテーションを分離しやすくし、あなたと同僚がコンテンツとデザインを並行して作業できるようにします。つまり、情報アーキテクチャやユーザーフローが決まったら、すぐにサイトへのコンテンツ追加を始めることができます。
ストアフロントのモックアップテーマはグレースケールのテーマで、サイトにより完成度の高い印象を与えていますが、明らかに最終デザインではありません。
通常、サイトの全体デザインが形作られ始める段階で、モックアップテーマを反復的に作成します。会社のデザイナーや外部のデザインエージェンシーは、モックアップテーマを出発点として最終的なブランドテーマを作成します。
SXA Storefrontには2つのモックアップテーマがあります。商品画像付きストアフロントモックアップテーマはカタログのオリジナル画像を表示し、ストアフロントモックアップ(モック画像付き)テーマは商品画像の代わりに一般的なグレースケール画像を表示します。
例えば、いずれのストアフロントモックアップテーマでも登録レンダリングは、エクスペリエンスエディターで次のように表示されます:
