ストアフロントデザインのベストプラクティスの確認

学習の目的

この単元を完了すると、次のことができるようになります。

• カタログ設定のベストプラクティスを説明する。
  
• ページやカタログのナビゲーションをミラーリングすることが重要な理由を説明する。
  
• クォータの重要性を説明する。
  
• クイックビューのベストプラクティスを 2 つ挙げる。
  
• 「Show in Menu Navigation (メニューナビゲーションに表示)」属性のしくみを説明する。
  

ストアフロントデザインのベストプラクティス

ストアフロントデザインは、マーチャントのオンラインでの成功を左右する可能性があるものです。買い物客の体験に注意を払うことが極めて重要です。顧客の関心事、注意力の持続、モチベーションはその数例にすぎません。マーチャントは、買い物客がどのようにしてサイトを訪れ、どのようにすれば購入し、繰り返し訪問して、その素晴らしい体験を友人や家族に伝えるかを理解する必要があります。

数千件とは言わずとも、数百件もの実装の成功例 (と困難な事例) から導かれた当社のベストプラクティスに従えば、顧客満足度に顕著な変化がもたらされるものと思われます。

この単元では、ストアフロントの次のベストプラクティスについて説明します。

• カタログ構造
  
• ナビゲーション
  
• ストアフロントの特定の種類のページ
  

カタログについては、Trailhead の「Agentforce Commerce for B2C (マーチャンダイザー向け)」モジュールで復習できます。

カタログ

カタログはストアフロントの心臓部です。カタログとは、サイバースペースの市場で販売される商品のセットで、この中から買い物客が商品を選びます。Agentforce Commerce for B2C では、カタログ構造の作成とカタログパフォーマンスの境界の設定に関する複数のベストプラクティスが特定されています。

カタログの設定

Agentforce Commerce for B2C では同じサイトに複数のカタログをサポートしていますが、ストアフロントには一度に 1 つのカタログしか表示されません。ベストプラクティスは、全商品を所有する商品カタログと、商品のサブセットに割り当てられたストアフロントカタログを設定することです。一般に、商品カタログデータは記録システムからインポートされます。

マーチャントが商品とストアフロントのカタログを設定すれば、現在と将来のビジネス要件に対応するカタログ構造を有することになります。要件がシンプルな新参のオンラインマーチャントの場合、最初からこのような分離は必要ないかもしれません。けれども、後々複数のストアフロントを設定し、それぞれに商品カタログから選出した独自の品ぞろえを表示したいと思うかもしれません。

ご存知のとおり、カテゴリによってストアフロントのナビゲーションが容易になります。各サイトに独自のストアフロントカタログを表示する場合、それぞれに異なるカテゴリやサブカテゴリの組み合わせを割り当てて、サイトごとにナビゲーションをカスタマイズすることができます。

商品/ストアフロント構造のカタログナビゲーションにすると、マーチャントは次のことが可能になります。

• 商品のレコードは 1 つのままにする。
  
• サイトごとに、独自のナビゲーションの固有のストアフロントを作成できる。
  
• 国内外のストアフロントのサイトを簡単に拡張できる。
  
• 商品はストアフロントカタログではなく、商品カタログに属するため、ストアフロントから切り離して商品をレプリケートできる。
  
• 商品データがストアフロントカタログデータと切り離されているため、複数のジョブをはるかに迅速に実行できる。
  

カタログのクォータ

前の単元で取り上げたコンテンツやコンテンツスロットと同様に、カタログにもクォータがあります。クォータとは厳格な上限で、これを超えるとパフォーマンスに支障を来します。クォータを超えることがないように、Agentforce Commerce for B2C では次の上限を超えると自動的に報告されます。

ナビゲーション

ページとカタログのナビゲーションのミラーリング

ベストプラクティスは、ストアフロントページのナビゲーションを、ストアフロントのカタログ構造にミラーリングさせることです。こうすれば、ストアフロントナビゲーションにどのカテゴリをどの順序で表示するかをマーチャントが管理できます。

そうしないと、マーチャントにも買い物客にも混乱が生じます!

たとえば、買い物客がストアフロントに移動すると、セール中の靴を示すカテゴリページが開いたとします。買い物客は何をクリックすればよいのかわからず、混乱します。その日は靴を買うつもりではなかったため、そのままサイトから立ち去ります。意図が明確な買い物客であれば、検索用語を入力して目的のページにアクセスしたかもしれません。

この改善策は、ランディングページに、最上位カテゴリを一連のタブとして表示することでしょう。買い物客が最上位カテゴリをクリックすると、ペインにサブカテゴリが表示されるか、モバイルデバイスにコンテンツスロットのリストが表示されるようにします。ページのフローを、ストアフロントのカタログ構造と一致させます。

次の例は、モバイルデバイス上のサブカテゴリのコンテンツスロットのリストを示しています。最上位カテゴリは「Women's (レディース)」です。サブカテゴリは「Summer Style (サマースタイル)」、「Women's Dresses (レディースドレス)」、「Women's Jewelry (レディースジュエリー)」です。

Show In Menu Navigation (メニューナビゲーションに表示)

ベストプラクティスは、全カテゴリで「Show in Menu Navigation (メニューナビゲーションに表示)」属性を使用して、マーチャントの柔軟性を高めることです。マーチャントが Business Manager でこの属性を設定すれば、カテゴリのオン/オフを切り替えることができます。デフォルトでは、全カテゴリに使用できます。

ストアフロントのページ構造は、カタログ内で定義されたカテゴリ構造に対応しており、検索を行うと絞り込みが行われます。検索ではカテゴリやサブカテゴリごとの絞り込みが可能ですが、色やサイズ、生地で絞り込むこともできます。マーチャントが検索の絞り込みを使用する場合、「Show in Menu Navigation (メニューナビゲーションに表示)」属性を使用すると、ページナビゲーションのカテゴリとは異なる一連の値を (異なるペインにまたは選択肢のリストとして) 表示できます。一定のカテゴリではメニューナビゲーションをオフにして、代わりに絞り込みを使用することもできます。

検索の絞り込みを使用する場合は、買い物客が価格、カテゴリ、商品種別などの複数の属性を使用して検索できます。たとえば、ジュエリーを、種別 (ブレスレット、指輪、ネックレス、イヤリング、セット)、金属 (金、銀、プラチナ)、カテゴリ (貴金属、ファッション) を指定して検索すると、カタログ全体を検索する場合よりも結果が絞り込まれます。

既存の属性の使用

新しい属性を作成する代わりに、既存の属性を使用します。ストアフロントのページナビゲーションを特定の方法で表示する必要がある場合は、カスタマイズする前に既存のコントロールを調査します。

たとえば、カテゴリごとに標準の縦型タブを水平方向に表示したい場合は、標準の「Header Nav Menu Banner (ヘッダーナビゲーションメニューのバナー)」属性を使用します。あるいは、カテゴリを左から右に水平方向に表示したい場合は、「Header Menu Orientation (ヘッダーメニューの方向)」属性を使用します。

ヘッダー

ベストプラクティスは、ヘッダーに認証情報を表示することです。また、買い物客の認証レベルに応じてヘッダーが変更されるようにする必要があります。買い物客が認証されていないか、認証されているか、あるいは認識されているかがわかるようにします。

たとえば、認証されていない買い物客のヘッダーには [Sign In (サインイン)]/[Register (登録)] と表示します。買い物客がログインしたら、「Hello, Henry (Log Out?) (ヘンリーさん、こんにちは (ログアウトしますか?))」と表示します。

フッター

フッターにもベストプラクティスがあります。フッターはコンテンツアセットとして使用します。そうすれば、コンテンツを直接 Business Manager で簡単に更新できます。

ただし、メールのサインアップフォームなど、ビジネスロジックを使用するフッター要素は、マーチャントが誤ってコードを変更してしまわないように、ISML にコード化する必要があります。

ストアフロントのページ

では、ストアフロントの主要なページであるカテゴリと商品情報に関連するベストプラクティスを見てみましょう。

カテゴリ/リストページ

カテゴリのランディングページは、カテゴリを選択したときに表示されるページです。このページを静的にすることもできますが、検索結果ページのようにして、検索結果に商品ではなく、選択したカテゴリの商品のリストを示すこともできます。

Agentforce Commerce for B2C のすべての Web ページと同様、カテゴリページにもコンテンツスロットを 6 つ以上含めることができません。

クイックビュー

これは商品情報フルページの短縮バージョンです。必ず商品情報フルページへのリンクを含める必要があります。モバイル環境にはクイックビューページを含めるべきではありません。

商品情報ページ

在庫や買い物カゴ内の他の品目に基づいて適用されるプロモーション、クーポンコード、買い物客が属する顧客グループなど、商品に関する特定の詳細は動的に変更する可能性があります。ベストプラクティスは、こうした情報を処理するビジネスルールに応じて、このページが動的に変更されるようにすることです。次に例を示します。

• 在庫あり、在庫切れ、予約販売、取り寄せに対応する在庫ルール
  
• 商品レベルや注文レベルの割引のプロモーション用メッセージ
  

SEO のサポート

ベストプラクティスは、テンプレートに product-name などの標準データをデフォルトのメタデータとして使用することです。こうすれば、プログラムによって関連するデータがページメタデータに取り込まれる一方で、マーチャントがその情報をより詳細な情報や関連性の高い情報に上書きできます。たとえば、次のような例があります。

以下は、SEO のその他のベストプラクティスです。

• 買い物客とロボットの両方が使用する、多数のキーワードが設定された HTML サイトマップを作成します。
  
• カタログページの閲覧に Cookie の使用を求めてはなりません。
  
• Business Manager で管理されるコンテンツアセットを参照するページを設計して、変更時にサイトのテンプレートやコードを変更しなくても済むようにします。
  
• コードの膨張を避けるためにページのデザインを最適化します。
  
• 買い物客が古い URL をクリックした場合に、サイトまたは商品カタログへの代替パスが表示されるカスタムの 404 エラーページを作成します。
  
• メタタグを使用して、HTML ページの構造化されたデータを示します。
  
• 多数のキーワードが設定された本文、サイト内リンク、アンカーテキスト、画像 <alt> タグを作成します。
  
• 重複しているコンテンツをサイトから削除します。たとえば、2 つの URL に同じページコンテンツが含まれている場合は、いずれかを削除します。
  
• レガシー URL のマッピングには、静的マッピングルールまたは動的マッピングルールを使用します。
  
• 他のサイトからの受信リンクを特定し、新しい URL に更新するよう依頼します。
  

次のステップ

商品データの商品カタログとストアフロントカタログの使用など、ストアフロントデザインのベストプラクティスについて説明しました。また、最適なナビゲーションや SEO のガイダンスも示しました。次の単元では、モバイルのベストプラクティスについて説明します。

リソース

• Trailhead: Agentforce Commerce for B2C (マーチャンダイザー向け)