関連商品セクション
Plain Jane および Plain Jane Interactive 向け
このビデオで学べること
横スクロールカルーセルで関連商品を表示する方法
レイアウト、タイポグラフィ、スペーシングの高度なカスタマイズオプション
商品レコメンデーションとナビゲーションの設定方法
クロスセルとアップセルを改善するためのベストプラクティス
🎯 関連商品セクションとは？
この 関連商品セクション は、商品ページに表示される動的な商品レコメンデーションカルーセルで、関連商品、補完商品、または類似商品を紹介します。このセクションはShopify組み込みの商品レコメンデーションエンジンを使用して、顧客に関連性の高い商品を自動的に提案し、平均注文額の向上と購買体験の改善を支援します。
主な機能：
Shopifyのアルゴリズムに基づく自動商品レコメンデーション
ナビゲーション矢印付きの横スクロールカルーセル
カスタマイズ可能な商品表示オプション（タイトル、価格、バッジ）
高度なタイポグラフィとスペーシングコントロール
タッチナビゲーション対応のモバイルレスポンシブデザイン
リアルタイムの商品データ読み込み
利用可能：
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
💡 注記：このセクションは商品ページでのみ利用可能で、Shopifyの商品レコメンデーションAPIを使用します。
🔧 関連商品セクションの追加方法
に移動します オンラインストア > テーマ > カスタマイズ
に移動します 商品 > デフォルト商品
セクション一覧の一番下までスクロールする
をクリック セクションを追加
を選択します 商品レコメンデーション または 関連商品
表示オプションとスタイリングを設定する
⚠️ 重要：このセクションは実際の商品ページでのみ表示され、コレクションやホームページをテーマエディタでプレビューしているときには表示されません。
📋 コンテンツと表示オプション
セクションヘッダー
セクションタイトル
見出しテキストをカスタマイズ（例：「おすすめの商品」「関連商品」）
空白にするとセクションヘッダーを完全に非表示にできます
デフォルト：「関連商品」
表示する商品の上限
表示する商品の最大数を設定してください（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
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能
最終更新