ドキュメントCommerceAdobe Commerce as a Cloud Service

[SaaS のみ]{class="badge positive" title="Adobe Commerce as a Cloud ServiceおよびAdobe Commerce Optimizer プロジェクトにのみ適用されます（Adobeで管理される SaaS インフラストラクチャ）。"}

ユースケース

Last update: Wed Aug 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • ユーザー
  • リーダー

次のユースケースは、Adobe Commerce as a Cloud Service がサポートするコア機能とビジネスシナリオを示しています。これにより、開発を加速し、効果の高いエクスペリエンスを開始できます。

問題が発生した場合は、 トラブルシューティングの節でガイダンスを確認してください。

前提条件

これらのユースケースを試す前に、次の前提条件を満たす必要があります。

  1. 次のオプションを使用して Cloud Service インスタンスを作成します。

    1. 環境 ドロップダウンで サンドボックス を選択します。
    2. データをテスト ドロップダウンで「Adobe ストア」を選択します。

  2. Adobe Experience Cloud アカウントにログインします

  3. 次のオプションを使用してCloud Service ストアフロントを設定します。

    1. テンプレートの adobe-commerce/adobe-demo-store を選択します。
    2. 接続方法として、使用可能なインスタンスを選択（メッシュ/SaaS） を選択します。

チェックアウトワークフロー

このワークフローでは、顧客がストアフロントから製品を購入する際のチェックアウトプロセスと、管理者として注文を確認する方法を示します。

支払いサービスを有効にする

  1. Commerce管理者で、Stores/Settings/Configuration/Payment Methods に移動します。

  2. 「一般設定」セクションで、Payment Services Sandbox ID と Payment Services Sandbox Key を入力します。 これらの ID は、 サンドボックスのオンボーディングに説明されている手順に従って取得できます

  3. 有効 ドロップダウンを はい に設定します。

  4. 「設定を保存」をクリックします。

商品の購入

  1. 前提条件で作成した ストアフロントに移動します。

  2. 製品を検索して選択します。 必要なカスタマイズを選択します。 次に、「買い物かごに追加」をクリックします。

    ストア検索 {width="600" modal="regular"}

  3. 買い物かごアイコンを選択して、買い物かごを表示します。

    買い物かごに追加してチェックアウト {width="600" modal="regular"}

  4. チェックアウト をクリックします。

    チェックアウトをクリック {width="600" modal="regular"}

  5. 必要な連絡先の詳細と発送情報を入力します。 この注文には架空の情報を使用できます。

  6. チェックアウトするには、小切手/マネーオーダー を選択します。 クレジットカードを使用する場合は、Paypal が提供するテストカードのいずれかを使用します。 これらは、任意の将来の有効期限および任意の CVC で使用できます。

    詳細を入力 {width="600" modal="regular"}

    クレジットカード {width="600" modal="regular"}

  7. Place Order をクリックします。

注文を確定

  1. Commerce Admin: <your store URL>/admin を開きます。

  2. Adobe IDを使用してログインします。

  3. Sales/Orders に移動します。

    注文を確認 {width="600" modal="regular"}

  4. 注文した商品を探し、詳細を確認します。

    注文詳細 {width="600" modal="regular"}

ストアフロントコンテンツの更新

コンテンツを作成、編集およびストアフロントに直接公開します。

  1. 前提条件で作成した ストアフロントを開きます。

  2. Storefront Builder を開きます。 https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md に移動します。

  3. インデックス ページを開きます。

  4. カルーセルブロックの下に、「Adobe Store デモへようこそ」という行を編集して新しいタイトルを入力します。

  5. 送信アイコンをクリックし、「プレビュー」をクリックします。

  6. プレビューページを確認して、「公開」をクリックします。

  7. ストアフロントページを更新し、変更がライブになったことを確認します。

コンテキスト実験

Adobe Commerceのコンテキスト実験機能を使用すると、ストアフロントで実験を作成および管理して、様々なコンテンツや設定をテストできます。

前提条件

  1. Storefront Builder で、インデックスページを選択し、「コピー」をクリックします。

  2. メインフォルダーの下に 実験 フォルダーを作成します。作成するには、「新規 ボタンをクリックし、フォルダー を選択します。

  3. experiments フォルダーに 1234 という名前のフォルダーを作成します。

  4. インデックスページの 2 つのコピーを 1234 フォルダーに貼り付けます。

  5. 各ページを開き、名前を「homev1」および「homev2」に変更します。 これらは 挑戦者です。

  6. 異なるコンテンツを含めるように各ページを変更します。 例えば、ヒーロー画像やテキストを変更します。 各ページの違いを識別できる必要があります。

  7. チャレンジャーページをそれぞれ公開します。

  8. コントロールページ（元のインデックスページ）を開きます。

  9. タイトルが metadata の新しいブロックを追加します。

  10. メタデータブロックの行に次の情報を追加します

    • タイトル - Adobe Commerce

    • 説明 – Web ストア

    • 実験 – 1234

    • 実験のバリアント

      • https://<your-site>.aem.live/experiments/1234/indexv1
      • https://<your-site>.aem.live/experiments/1234/indexv2

    メタデータブロック {width="600" modal="regular"}

  11. 匿名またはプライベートブラウジングウィンドウを開き、メインページに移動します。

  12. プライベートブラウジングウィンドウを閉じ、前の手順を繰り返します。 ページを開くたびに、作成したランダムバリアントが表示されます。

ストアフロントコンテンツの強化

AEM Assets、Adobe Express、Fireflyを使用すると、シンプルな自己駆動型のワークフローで、ストアフロントに表示される画像をすばやく変更できるようになりました。

前提条件

  • AEM Assets、Adobe ExpressおよびAdobe Fireflyへのアクセスが必要です。

画像の背景のカスタマイズ

製品画像の背景をすばやく変更するシナリオを考えます。 Adobe Commerce、AEM Assets、Adobe Expressを組み合わせると、いくつかの簡単な手順でこの変更を行うことができます。

  1. 前提条件で作成した ストアフロントを開き、変更する項目に移動します。 品目の SKU または製品コードを書き留めます。

  2. AEM AssetsAdobe Experience Cloud で選択して、 を開きます。

    aem assets {width="600" modal="regular"}

  3. 「Assets」をクリックします。

    アセットをクリック {width="600" modal="regular"}

  4. SKU または 製品コード で商品を検索します。

  5. 編集する項目を選択し、「Adobe Expressで開く をクリックします。

    adobe express で開く {width="600" modal="regular"}

  6. 画像 パネルで「オブジェクトを挿入」を選択します。

    オブジェクトの挿入 {width="600" modal="regular"}

  7. テキストボックスに、追加する画像を入力します。 例えば、「雪に覆われた松の木」。

    オブジェクト編集を挿入 {width="600" modal="regular"}

  8. Brush size を調整し、生成された画像を追加する場所を描画します。 この例では、既存のオブジェクトの周囲に描画して、背景を選択します。

  9. 「生成」をクリックして結果を表示します。

  10. 目的のオプションを選択し、「保持 をクリックして、様々な結果から選択し す。

  11. 自分のスタッフ をクリックして、画像エディターに戻ります。

  12. 保存 をクリックして、画像タイプを指定します。

  13. もう一度 保存 をクリックして、変更を保存します。

  14. アセットを保存 ダイアログで、Commerce 保存先フォルダー を選択します。

    新規アセットとして保存 {width="600" modal="regular"}

  15. 新しいアセットとして保存 をクリックして、画像を保存します。

Commerce AEM Assetsへの画像の追加

  1. AEM as a Cloud Serviceの ナビゲーションパネルから、Assets / ファイル / Commerce を選択し、前の節で作成したアセットをクリックします。

    commerce フォルダー {width="600" modal="regular"}

  2. プロパティ をクリックします。

    プロパティ {width="600" modal="regular"}

  3. 「Commerce」タブを選択します。

    「コマース」タブ {width="600" modal="regular"}

  4. Adobe Commerceに存在しますか？フィ ルドは はい に設定されています。

  5. 追加 をクリックして、アセットを追加する製品 SKU を入力します。

    sku に追加 {width="600" modal="regular"}

  6. アセットの位置とアセットタイプを選択します。

  7. 「基本」タブを選択し、「レビューステータス」タブを 承認済み に変更します。

    アセットを承認 {width="600" modal="regular"}

  8. 保存して閉じる をクリックします。

Commerceで画像を確認します。

  1. Adobe Commerce 管理者 で、カタログ/製品 に移動します。

  2. 前の節で画像を追加した製品を選択します。

  3. 「画像とビデオ」セクションを展開します。

    画像とビデオ {width="600" modal="regular"}

  4. 画像が画像のリストで使用できるようになったことを確認します。

  5. ストアフロントに戻り、変更された製品のページに移動します。

  6. 新しい画像が表示されることを確認します。

    画像確認 {width="600" modal="regular"}

バリエーションを生成

Adobe Commerceのバリエーションを生成では、ジェネレーティブ AI を活用して、高品質のコンテンツ生成の自動化、メッセージの微調整、ストアフロントへのアセットのシームレスな公開を行います。

テキストを生成

  1. ユニバーサルエディターを使用してストアフロントサイトを開きます。

  2. 編集するテキストのブロックを選択します。

  3. プロパティ パネルで、「バリエーションを生成」をクリックします。

  4. 「生成 ボタンをクリックします。

  5. 生成テキストを選択またはカスタマイズします。

  6. 「公開」をクリックして、ストアフロントを更新します。

コンテンツと画像の生成

  1. バリエーションを生成を開きます。

  2. ヒーローバナー テンプレートを選択します。

  3. 「ユーザーのインタラクションの説明」テキストボックスに、「Adobeの社員とパートナーがAdobe ブランドの商品を購入する経験」と入力します。

  4. ドメインの知識の URL に、www.adobestore.com と入力します。

  5. 生成 をクリックします。

  6. コンテンツバリエーションを選択し、「画像を生成」をクリックします。

  7. 画像サイズ ドロップダウンから ワイドスクリーン （16:9） を選択します。

  8. コンテンツタイプ ドロップダウンから「写真」を選択します。

  9. スタイル 参照画像については、既存のAdobe ストアバナーを選択します。

  10. 使用する生成画像を選択し、「保存」をクリックします。

  11. 他の参照画像と一緒にこのプロセスを繰り返して、より多くのバリエーションを生成します。

トラブルシューティング

これらのチュートリアルを試みる際に発生した問題を解決するには、次の推奨事項を使用してください。

  • コマンドやフラグに関するガイダンスが必要な場合：

    1. aio --help を実行すると、使用可能なすべてのコマンドとフラグが表示されます。

    2. 特定のコマンドに対しては、--help フラグを使用します。 例：

      • aio console --help
      • aio commerce –help

  • 無効なログインの問題が発生した場合：

    1. aio config clear を実行します。
    2. aio auth login –-force を実行します。
    3. ブラウザーでログインします。
    4. プロファイルを選択します。
    5. 端子に切り替えて続行します。

  • init コマンドが失敗した場合：

    1. aio api-mesh delete を実行します。
    2. aio commerce init を再実行します。

  • init コマンドを実行する前に、間違った組織、プロジェクト、またはワークスペースを選択した場合：

    1. aio console org select を実行します。
    2. aio console project select を実行します。
    3. aio console workspace select を実行します。

  • 無効なテナントの選択がある場合：

    1. Ctrl+C キーを押して、現在の CLI の実行をキャンセルします。
    2. aio commerce init を実行します。

  • 無効な API メッシュのインストールが発生した場合：

    • aio api-mesh update mesh-config.json を実行します。
recommendation-more-help
76c6d489-ee5b-4411-84d1-033660e03d8c