おすすめの配置｜CheckoutOSドキュメント

配置戦略は、カスタマージャーニーのどこにおすすめを表示するかを決めます。適切な場所に適切なタイミングで表示すると、反応とコンバージョンを大きく高められます。

利用できる配置

商品ページ

顧客が閲覧している間に関連商品を表示します。

商品ページへの配置

{
  "placement": {
    "location": "product_page",
    "positions": [
      {
        "id": "below_add_to_cart",
        "title": "Frequently Bought Together",
        "algorithm": "frequently_bought_together",
        "max_products": 3,
        "layout": "horizontal_cards"
      },
      {
        "id": "below_description",
        "title": "You May Also Like",
        "algorithm": "content_based",
        "max_products": 4,
        "layout": "grid_2x2"
      },
      {
        "id": "sidebar",
        "title": "Recently Viewed",
        "algorithm": "recently_viewed",
        "max_products": 4,
        "layout": "vertical_list"
      }
    ]
  }
}

商品ページに適したアルゴリズム

よく一緒に購入される商品 — 補完的な商品で高いコンバージョン
コンテンツに基づく類似性 — 代替商品を検索
最近閲覧した商品 — 再び関心を引く
アップグレードの選択肢 — 上位商品のアップセル

カートページ

チェックアウト前に商品を追加する最後の機会です。

カートページへの配置

{
  "placement": {
    "location": "cart_page",
    "positions": [
      {
        "id": "below_cart_items",
        "title": "Complete Your Order",
        "algorithm": "based_on_cart",
        "max_products": 3,
        "layout": "horizontal_scroll",
        "show_add_button": true
      },
      {
        "id": "cart_sidebar",
        "title": "Don't Forget",
        "algorithm": "frequently_bought_together",
        "max_products": 2,
        "layout": "compact_cards"
      }
    ]
  }
}

カートページの戦略

この段階では、迷わず追加しやすい商品を重視してください。アクセサリー、消耗品、小さな追加商品など、カートの内容を補完し、簡単に「はい」と決められる商品を表示します。

チェックアウト

チェックアウト中の戦略的なアップセルのタイミングです。

チェックアウトへの配置

{
  "placement": {
    "location": "checkout",
    "positions": [
      {
        "id": "pre_payment",
        "title": "Add to Your Order",
        "algorithm": "high_converting_upsells",
        "max_products": 1,
        "layout": "inline_banner",
        "timing": "before_payment_step"
      },
      {
        "id": "post_purchase",
        "title": "One More Thing...",
        "algorithm": "personalized",
        "max_products": 2,
        "layout": "featured_card",
        "timing": "after_order_confirmed"
      }
    ]
  }
}

サンクスページ

購入後に顧客の関心を再び引きます。

サンクスページへの配置

{
  "placement": {
    "location": "thank_you_page",
    "positions": [
      {
        "id": "main_recommendations",
        "title": "Based on Your Purchase",
        "algorithm": "post_purchase",
        "max_products": 4,
        "layout": "grid_2x2",
        "offer_discount": true,
        "discount_amount": "10%"
      },
      {
        "id": "trending_section",
        "title": "Trending Now",
        "algorithm": "trending",
        "max_products": 4,
        "layout": "horizontal_scroll"
      }
    ]
  }
}

レイアウトのオプション

利用できるレイアウト

horizontal_cards — 商品カードを横に並べる
vertical_list — 縦に並ぶリスト表示
grid_2x2 — 2 × 2の商品グリッド
grid_3x2 — 3 × 2の商品グリッド
horizontal_scroll — スクロールできるカルーセル
compact_cards — サイドバー向けの小さいカード
inline_banner — 単一商品のバナー
featured_card — 大きく目立つカード

表示設定

表示オプション

{
  "display": {
    "product_card": {
      "show_image": true,
      "image_size": "medium",
      "show_title": true,
      "title_max_lines": 2,
      "show_price": true,
      "show_compare_at_price": true,
      "show_rating": true,
      "show_reviews_count": false,
      "show_badges": ["sale", "new", "bestseller"],
      "show_quick_add": true
    },
    "section": {
      "title_style": "bold",
      "show_view_all_link": true,
      "background_color": "transparent",
      "padding": "medium"
    },
    "responsive": {
      "mobile_products": 2,
      "tablet_products": 3,
      "desktop_products": 4
    }
  }
}

配置のA/Bテスト

異なる配置をテストして、有効なものを見つけます。

配置のA/Bテスト

{
  "experiment": {
    "name": "Cart Recommendation Position",
    "variants": [
      {
        "name": "Control",
        "weight": 50,
        "position": "below_cart_items"
      },
      {
        "name": "Sidebar",
        "weight": 50,
        "position": "cart_sidebar"
      }
    ],
    "success_metric": "recommendation_ctr"
  }
}

モバイル向けの最適化

おすすめはモバイル画面に適応させる必要があります。

モバイルでの推奨事項

表示する商品を減らす（デスクトップの4点に対してモバイルは2〜3点）
スペースを有効に使うために横スクロールを使用
追加ボタンのタッチ領域を広げる
初期表示範囲より下の画像を遅延読み込み
折りたたみ可能なセクションを検討

モバイルの設定

{
  "mobile": {
    "placements": {
      "product_page": {
        "positions": ["below_add_to_cart"],
        "max_products": 2,
        "layout": "horizontal_scroll"
      },
      "cart_page": {
        "positions": ["below_cart_items"],
        "max_products": 2,
        "layout": "horizontal_scroll",
        "collapsed_by_default": false
      }
    }
  }
}

パフォーマンス上の考慮事項

ページの読み込みへの影響

おすすめの配置を増やすたびに読み込み時間が増えます。遅延読み込みを使い、最初に表示する商品を制限し、Core Web Vitalsを監視して、おすすめによるページパフォーマンスの低下を防いでください。

効果的な使い方

配置戦略

アルゴリズムを状況に合わせる — カートページではカートに基づく提案、ログイン済みユーザーにはパーソナライズした提案
表示しすぎない — 1ページ当たり最大2〜3か所
タイトルをテストする — 「こちらもおすすめ」と「コーディネートを完成させる」を比較
購入までの流れを考慮する — 前半は発見、後半は緊急性
配置ごとに測定する — 成果が低い配置もあります

おすすめの配置

利用できる配置

商品ページ

商品ページに適したアルゴリズム

カートページ

チェックアウト

サンクスページ

レイアウトのオプション

利用できるレイアウト

表示設定

配置のA/Bテスト

モバイル向けの最適化

モバイルでの推奨事項

パフォーマンス上の考慮事項

効果的な使い方

関連トピック

スマートおすすめの概要

分析ダッシュボード