# 関連商品セクション

> **学べること**
>
> * 横スクロールのカルーセルで関連商品を表示する方法
> * レイアウト、タイポグラフィ、間隔に関する高度なカスタマイズオプション
> * 商品レコメンデーションとナビゲーションの設定方法
> * クロスセルとアップセルを改善するためのベストプラクティス

***

## 🎯 関連商品セクションとは？

この **関連商品セクション** は、商品ページに表示される動的な商品レコメンデーションカルーセルで、関連商品、補完商品、または類似商品を表示します。このセクションはShopifyの組み込み商品レコメンデーションエンジンを使用して、顧客に関連商品を自動的に提案し、平均注文額を増やしショッピング体験を向上させます。

**主な機能：**

* Shopifyのアルゴリズムに基づく自動商品レコメンデーション
* ナビゲーション矢印付きの横スクロールカルーセル
* カスタマイズ可能な商品表示オプション（タイトル、価格、バッジ）
* 高度なタイポグラフィと間隔のコントロール
* タッチナビゲーション対応のモバイルレスポンシブデザイン
* リアルタイムの商品データ読み込み

利用可能：

* ✅ Plain Jane v3.1+
* ✅ Plain Jane Interactive v2+

> 💡 **注意**：このセクションは商品ページでのみ利用でき、Shopifyの商品のレコメンデーションAPIを使用します。

***

## 🔧 関連商品セクションの追加方法

1. 移動先： **オンラインストア > テーマ > カスタマイズ**
2. に移動 **商品 > デフォルト商品**
3. セクションリストの一番下までスクロール
4. クリック： **「セクションを追加」**
5. を選択します **商品レコメンデーション** または **関連商品**
6. 表示オプションとスタイリングを設定

> ⚠️ **重要**：このセクションはコレクションやホームページを表示しているときのテーマエディタのプレビューではなく、実際の商品ページでのみ表示されます。

***

## 📋 コンテンツと表示オプション

### **セクションヘッダー**

**セクションタイトル**

* 見出しテキストをカスタマイズ（例：「あなたにおすすめ」、「関連商品」）
* 空欄にするとセクションヘッダーを完全に非表示にします
* デフォルト：「関連商品」

**表示商品数の上限**

* 表示する商品の最大数を設定（1〜8商品）
* Shopifyが自動的にフィルタリングして最も関連性の高い商品を選択します
* デフォルト：4商品

### **商品情報の表示**

**商品タイトルを表示**

* 商品名の表示をオン/オフ切替
* 商品識別に不可欠
* 推奨：有効のままにする

**商品価格を表示**

* タイトルの下に商品価格を表示
* 顧客が情報に基づいて判断しやすくなる
* 該当する場合はセール価格の表示を含む

**比較価格を表示**

* 商品がセール中の場合に元の価格を表示
* 透明性のため取り消し線付き価格を表示
* 商品にセール価格がある場合に自動的に表示されます

**商品バッジ**

* **売り切れバッジを表示**：販売不可の商品を示します
* **セールバッジを表示**：割引商品を強調表示します
* **予約注文バッジを表示**：近日発売の商品を示します

***

## 🎨 レイアウト＆デザイン設定

### **商品グリッドのレイアウト**

**1行あたりの商品数（デスクトップ）**

* デスクトップ画面で横に表示する商品数を設定（1〜6商品）
* デフォルト：4商品
* 推奨：視覚的バランスのため3〜4が最適

**1行あたりの商品数（モバイル）**

* モバイル表示を制御（1〜3商品）
* デフォルト：2商品
* モバイルでは自動的に横スクロールが有効になります

**製品テキストの配置**

* 商品タイトルと価格の配置：左、中央、または右
* 中央揃えはより洗練された外観を作ります
* 左揃えは長い商品名の可読性を向上させます

### **ナビゲーションコントロール**

**矢印ナビゲーション**

* デスクトップナビゲーション用の左右の組み込み矢印
* ブランドに合わせて矢印カラーをカスタマイズ可能
* 表示件数より多くの商品があると自動的に表示されます

**タッチ/スワイプナビゲーション**

* モバイル端末でのネイティブなタッチスクロール対応
* より良いユーザー体験のためのスムースな慣性スクロール
* 追加設定は不要

***

## ✏️ タイポグラフィのカスタマイズ

### **フォントサイズ**

すべてのテキスト要素はデスクトップとモバイルで別々にカスタマイズできます：

**セクションタイトルのサイズ**

* デスクトップ：16〜32pxの範囲
* モバイル：14〜24pxの範囲
* デフォルト：デスクトップ20px、モバイル18px

**商品タイトルのサイズ**

* デスクトップ：12〜20pxの範囲
* モバイル：10〜16pxの範囲
* デフォルト：デスクトップ14px、モバイル12px

**商品価格のサイズ**

* デスクトップ：12〜18pxの範囲
* モバイル：10〜14pxの範囲
* デフォルト：デスクトップ14px、モバイル12px

### **フォントウェイトのオプション**

**セクションタイトルを太字にする**

* セクションヘッダーを太字（700）にする切替
* セクションを商品コンテンツから際立たせるのに役立ちます
* 視覚的階層を明確にするため推奨されます

**商品タイトルを太字にする**

* 商品名を強調するために太字にします
* テキストの存在感が必要なミニマルなデザインに有用です
* 長い商品名の可読性への影響を考慮してください

**表示リンクを太字にする**

* 矢印ナビゲーションのコントロールを太字にする
* ナビゲーションの視認性を微妙に高めます

***

## 🎨 カラーのカスタマイズ

### **背景とセクションカラー**

**背景色**

* セクションの背景色を設定
* シームレスなページ統合のために透明を使用
* セクションの定義のために微妙な背景色を検討

**セクションタイトルの色**

* ヘッダーテキストの色をカスタマイズ
* 背景とよくコントラストする必要があります
* 通常は主要なブランドカラーと一致します

**矢印の色**

* ナビゲーション矢印の色を設定
* 背景に対して視認性があるべきです
* 多くの場合アクセントカラーや中立のグレーを使用します

### **商品情報の色設定**

**商品タイトルの色**

* 商品名のカラー
* 可読性のため通常はニュートラル（黒、濃いグレー）
* アクセシビリティのため十分なコントラストを維持する必要があります

**製品価格の色**

* 価格情報の色
* 一貫性のために商品タイトルの色と合わせることが多い
* 価格を強調するためにアクセントカラーを使用する場合があります

### **商品バッジの色設定**

各バッジタイプはテキスト色と背景色を個別に設定できます：

**プレオーダーバッジ**

* テキスト色と背景色
* 多くの場合青系やニュートラルトーンを使用
* 「近日公開」を明確に伝えるべきです

**売り切れバッジ**

* テキスト色と背景色
* 通常はグレーや落ち着いた色を使用
* 在庫切れを明確に伝えます

**セールバッジ**

* テキスト色と背景色
* 通常は赤、オレンジ、またはブランドのアクセントカラーを使用
* 緊急性を生み出し割引を目立たせます

**比較価格の色**

* 取り消し線付きの元の価格の色
* 通常はグレーや落ち着いた色で目立たせないようにする
* 読みやすく、セール価格より目立たないようにするべきです

***

## 📏 高度な間隔コントロール

### **セクションの間隔**

**上部の間隔**

* デスクトップ：0〜200pxの範囲、デフォルト20px
* モバイル：0〜100pxの範囲、デフォルト16px
* セクション全体の上部のスペースを制御します

**下部の間隔**

* デスクトップ：0〜200pxの範囲、デフォルト20px
* モバイル：0〜100pxの範囲、デフォルト16px
* セクション全体の下部のスペースを制御します

### **内部の間隔**

**ヘッダーと商品間の間隔**

* 範囲：8〜80px、デフォルト32px
* セクションタイトルと商品グリッドの間のスペース
* 視覚的な分離と余白を作るのに役立ちます

**画像と情報の間隔**

* 範囲：8〜80px、デフォルト24px
* 商品画像とテキスト情報の垂直スペース
* 画像と詳細の視覚的なつながりに影響します

**タイトルと価格の間隔**

* 範囲：4〜40px、デフォルト8px
* 商品名と価格の間のスペース
* 情報のまとまりを保つために最小に保つ

**商品間のギャップ**

* デスクトップ：8〜160pxの範囲、デフォルト16px
* モバイル：8〜160pxの範囲、デフォルト16px
* カルーセル内の商品の水平スペース

***

## 🚀 商品レコメンデーションの仕組み

### **Shopifyのアルゴリズム**

関連商品セクションは、どの商品を表示するかを決定するためにShopifyの機械学習アルゴリズムを使用します：

**レコメンデーションの要因：**

* 一緒に頻繁に購入される商品
* 同じセッション内で一緒に閲覧された商品
* 類似した商品カテゴリやタグ
* 補完的な商品関係
* 顧客の行動パターン

**自動更新：**

* より多くのデータが収集されるとレコメンデーションは改善されます
* 商品関係に関する手動設定は不要です
* アルゴリズムは季節的なトレンドや顧客の好みに適応します

### **フォールバック動作**

レコメンデーションに十分なデータがない場合：

* セクションは同じコレクションから商品を表示する場合があります
* ストア在庫からランダムな商品が表示されることがあります
* 適切な商品が見つからない場合はセクションを非表示にできます

***

## 📱 モバイル最適化

### **レスポンシブデザイン**

**モバイルレイアウト**

* モバイル画面に合わせて1行あたりの商品数を自動調整します
* スワイプジェスチャーによるタッチ対応ナビゲーション
* タッチターゲットのために最適化された間隔

**パフォーマンス最適化**

* ページ速度を改善するための遅延読み込み
* 高速化のために画像を圧縮
* スムーズなスクロールのための最小限のJavaScript

**ユーザー体験**

* スムーズな慣性スクロール
* さらに商品があることを示す明確な視覚的表示
* タップしやすい商品画像と情報

***

## 💡 ベストプラクティス

### **コンテンツ戦略**

**セクションの配置**

* 商品ページの下部付近に追加
* メインの商品コンテンツの後、フッターの前に配置
* 利用可能なら商品レビューの後に追加することを検討

**商品情報**

* 明確さのために常に商品タイトルを表示する
* 透明な購買体験のために価格を含める
* 重要な情報を強調するためにバッジを戦略的に使用する

### **デザインの推奨事項**

**視覚的階層**

* セクションタイトルは明確だが圧倒しないようにする
* 商品画像を主な焦点にすることを確実にする
* セクション全体で一貫した間隔を使用する

**色の戦略**

* 既存の商品ページの色とブランドの一貫性を保つ
* アクセシビリティのために十分なコントラストを確保する
* インパクトを保つためにセールバッジは節度を持って使用する

### **パフォーマンスに関する考慮事項**

**画像最適化**

* 関連商品は最適化された画像を使用することを確認する
* 視覚的調和のために一貫したアスペクト比を使用する
* 品質を損なわずに画像を圧縮する

**読み込み戦略**

* セクションはメインの商品コンテンツの後に読み込まれます
* レコメンデーションの読み込みに失敗した場合の優雅なフォールバック
* ページ読み込み速度への影響は最小限

***

## 🔧 トラブルシューティング

### **セクションが表示されない場合**

**商品ステータスを確認**

* 実際の商品ページを表示していることを確認（コレクションではない）
* 商品が公開され利用可能であることを確認
* レコメンデーションのためにストアに複数の商品があることを確認

**テーマの設定**

* セクションが商品テンプレートに追加されていることを確認
* セクションが非表示または無効になっていないか確認
* 商品レコメンデーションの上限が0に設定されていないか確認

### **商品が表示されない場合**

**データ要件**

* レコメンデーションには十分な商品データが必要です
* アルゴリズムは顧客の行動パターンを学習するのに時間を要します
* フォールバックとして手動で商品をコレクションに追加することを検討してください

**APIの制限**

* ShopifyのレコメンデーションAPIには日次の制限があります
* トラフィックの多いストアではセクションが空になることがあります
* アルゴリズムの性能はストアの運用期間やトラフィックにより向上します

### **スタイリングの問題**

**レスポンシブの問題**

* ブラウザのリサイズだけでなく実際のモバイルデバイスでテストしてください
* モバイルの間隔値が適切であることを確認
* タッチターゲットが十分に大きく簡単に操作できることを確認

**カラーコントラスト**

* 選択した背景でテキストが読みやすいことを確認
* WCAG準拠のためにアクセシビリティツールでテストする
* モバイル閲覧時の異なる照明条件を考慮する

***

## 📊 パフォーマンスへの影響

### **読み込みの挙動**

**非同期読み込み**

* セクションコンテンツはページの初期レンダリング後に読み込まれます
* メインの商品ページコンテンツをブロックしません
* API呼び出しが失敗した場合の優雅な劣化

**データ使用量**

* 追加のデータ転送は最小限
* 可能な場合は商品情報をキャッシュ
* Shopifyのサーバーへの最適化されたAPI呼び出し

### **SEOに関する考慮事項**

**コンテンツの価値**

* 内部リンクの機会を追加で提供
* 検索エンジンが商品関係を理解するのに役立つ
* サイト滞在時間を改善し直帰率を下げる可能性がある

**ページ速度**

* コアのページ読み込み指標への影響は最小限
* セクションは段階的に読み込まれます
* モバイルのCore Web Vitals向けに最適化

***

関連商品セクションは、売上を増やし顧客体験を向上させる強力なツールです。適切に設定されると、関連性の高い商品オプションを提示することで平均注文額を大幅に向上させつつ、顧客にとっても実際に価値のある体験を提供できます。

### **ヘルプが必要ですか？**

* 💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/sections-and-features/related-products-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.