ストアフロントとは？
Adobe CommerceまたはMagento Open Sourceの実装内では、ストアフロントがストアの外部の公開部分になります。 顧客が購入に使用するコンテンツと機能コンポーネントを提供します。
顧客が販売に至るパスは、購入へのパス と呼ばれることもあります。また、ストアフロントには、顧客がこのパスを完了するためのコンポーネントが含まれています。 以下の節では、戦略的な価値を提供する基本的なページタイプ（ストアでの買い物の際に顧客が通常訪問する場所）の概要を説明します。 レビューする際には、カスタマージャーニーの各段階で使用できる様々なストア機能を検討します。
Commerce ストアフロント
Edge Delivery Services を活用した Commerce ストアフロントの登場により、Adobeは、最先端のテクノロジーを活用したパフォーマンス、拡張性、信頼性の高いストアフロントを提供し、優れたスピードとユーザーエクスペリエンスを提供します。
-
パフォーマンスの向上:Edge Delivery Servicesでストアフロントをホストすると、読み込み時間が短縮され、サイトのパフォーマンスが向上します。これにより、コンバージョン率の向上と SEO ランキングの改善が可能になります。
-
スケーラビリティ：このアーキテクチャは、パフォーマンスを損なうことなく、トラフィックの増加や大規模な製品カタログに対応するためのシームレスな拡張をサポートします。
-
柔軟性：ストアフロントは高度にカスタマイズ可能で、企業は独自のニーズに合わせてショッピング体験をカスタマイズできます。
-
ユーザーエクスペリエンスの向上：高度なキャッシュ、リアルタイムの更新、パーソナライズされたコンテンツ配信などの機能により、よりスムーズで魅力的なショッピングエクスペリエンスが実現します。
主な機能
Edge Delivery Servicesを活用したCommerce ストアフロントには、マーチャントと開発者の両方に利益をもたらす主な機能がいくつか用意されています。 これらの機能により、企業は、ニーズに応じてストアフロントをカスタマイズおよび拡張する柔軟性を維持しながら、魅力的なショッピング体験を作成できます。
Commerce ストアフロントの設定と最適化について詳しくは、Adobe Commerce ストアフロントのドキュメントを参照してください。
Edge Delivery Servicesを活用したCommerce ストアフロントは、直観的なドキュメントベースのオーサリングエクスペリエンスを提供し、マーチャントにとってはコンテンツの作成と管理が容易になります。 マーチャントは、Microsoft Word やGoogle Docsなどの使い慣れたツールを使用して、バージョン管理やチームメンバーとの共同作業を維持しながら、リッチコンテンツを作成できます。
-
コンテンツ作成のシンプル化:Microsift Word やGoogle Docsなど、使い慣れたドキュメントベースのオーサリングツールを使用して、コンテンツを作成および編集します。
-
リアルタイムプレビュー：公開する前に、ライブプレビュー機能で変更を即座に確認できます。
-
バージョン管理：コンテンツの変更を追跡し、以前のバージョンに簡単にロールバックできます。
-
共同ワークフロー：複数のチームメンバーが、組み込みのレビュープロセスと同時にコンテンツを操作できます。
-
コンテンツの再利用：複数のページで再利用できるコンテンツブロックを作成して、一貫性を維持します。
ヘッドレス実装により、開発者はフロントエンドプレゼンテーションレイヤーをバックエンドコマース機能から切り離すことができ、Commerceの堅牢なバックエンドサービスを活用しながら、最新のテクノロジーで構築された柔軟なカスタムストアフロントを可能にします。
-
API ファーストのアーキテクチャ:Commerceのバックエンドサービスを活用しながら、最新のフレームワークを使用してカスタムフロントエンドエクスペリエンスを構築します。
-
構成可能なコンポーネント：様々なページレイアウトに組み立てることができる再利用可能なモジュール型コンポーネントを作成してデプロイします。
-
拡張可能なプラットフォーム：コアコードを変更せずに、API と Webhook を通じてカスタム機能を追加します。
-
最新の開発ツール：業界標準の開発ツールおよびワークフローを使用して、実装とデプロイメントを高速化します。
ホームページ
ほとんどの人は、滞在や他の場所への移動を決定する前に、ページに数秒しか費やさないことを知っていましたか？ 印象を与えるのはそんなに長くない。 研究は、人々が特に他の人々の写真も愛することを示しています。 どのデザインを選択しても、ホームページ上のすべての情報は、訪問者を販売プロセスの次のステップに向けて移動させる必要があります。 このアイデアは、関心のあるポイントから次のポイントへとまとまりのあるフローで彼らの注意を導くことです。
カタログページ
カタログページのリストには、通常、小さな製品画像と簡単な説明が含まれ、リストまたはグリッドとして書式設定できます。 ブロック、ビデオ、キーワードに富んだ説明を追加したり、プロモーションやシーズン用に特別なデザインを作成したりできます。 特別なカテゴリを作成して、様々なカテゴリの製品を厳選したコレクションであるライフスタイルやブランドを特集することもできます。
最初の製品説明では、通常、買い物客が詳しく見るのに十分な情報を提供します。 自分が何を求めているかを知っているユーザーは、製品を買い物かごに追加して出発できます。 アカウントにログインして買い物をされるお客様は、パーソナライズされたショッピングエクスペリエンスをお楽しみいただけます。
検索結果
検索を使用するユーザーは、ナビゲーションだけに依存するユーザーと比べて、購入する可能性がほぼ 2 倍であることをご存知ですか？ これらの買い物客を 事前認定済み と見なす場合があります。
Live Search
Live Search for Adobe Commerceを使用すると、ストアは迅速で非常に関連性が高く直感的な検索エクスペリエンスを提供し、Adobe Commerceでも追加料金なしで利用できます。
標準カタログ検索
標準のカタログ検索を使用すると、ストアの右上隅に検索ボックスが表示され、フッターに詳細検索へのリンクが表示されます。 買い物客が送信したすべての検索用語が保存されるので、買い物客が探しているものを正確に確認できます。 候補を提示したり、同義語やよくあるスペルミスを入力したりできます。 検索語句を入力すると、特定のページが表示されます。
製品ページ
商品ページは盛りだくさんです！ 商品ページでまず目をひくのが、高解像度のズームとサムネールギャラリーを備えたメイン画像です。 価格と在庫に加えて、詳細情報と関連製品のリストを含むタブ付きセクションがあります。
ショッピングカート
買い物かごには、割引クーポン、推定配送、税金を含む注文の合計が表示されます。 これらの機能により、トラストバッジやシールを表示するのに最適な場所になります。 買い物かごページを、1 つの最終的なオファーの機会として使用することもできます。 例えば、特定の製品が買い物かごに入っている際にインパルス購入オプションとして表示されるクロスセル品目を設定できます。
チェックアウトページ
チェックアウトプロセスは、次の 2 つの手順で構成されます。
-
配送先情報
チェックアウトプロセスの最初の手順は、顧客が配送先住所情報を入力し、配送方法を選択することです。 顧客がアカウントを持っている場合、配送先住所は自動的に入力されますが、必要に応じて変更できます。
ゲストのお客様が登録済みと認識されるメールアドレスを入力した場合、ストア設定の「Enable Guest Checkout Login」フィールドがYesに設定されていると、ログインプロンプトが表示されます（設定リファレンスガイド の Checkout Options を参照）。 ただし、この設定では、顧客情報が未認証のユーザーに公開される可能性があります。
-
レビューおよび支払い情報
チェックアウトプロセスの 2 番目の手順は、顧客が支払い方法を選択し、オプションで割引コードを適用することです。
note note NOTE 複数 Commerce クーポンコードを設定できますが、お客様は買い物かごに 1 つのクーポンコードのみを適用できます。 （詳しくは、 クーポンコードを参照してください。） 
ページの上部にあるプログレスバーはチェックアウトプロセスの各ステップに従い、注文の概要 には、ここまでに入力された情報が表示されます。