ファッション店舗で「コーディネート提案（Complete the look）」を今日から始める手順

ゴール：商品詳細ページで「一式揃う」体験をつくる

このプレイブックのゴールは、商品詳細ページ（PDP）で「Complete the look（このコーディネートを完成させる）」ブロックを出し、ユーザーが1ページで上下＋小物までカートに入れられる状態をつくることです。

最初の一歩として、以下のような状態を目指します。
- コーデ提案の位置：商品詳細ページのカートボタン直下に設置
- 提案点数：2〜4点（トップスを見ているならボトムス＋小物など）
- ロジック：共購買（よく一緒に買われる）＋類似（スタイルが近い）の組み合わせ

ここから、売れ筋カテゴリ→その他カテゴリ→アパレル以外、という順で広げていきます。

前提：Complete the look の2つの軸（共購買と類似）

Complete the look は「どの商品を一緒に見せるか」を決める設計です。実際には次の2軸を組み合わせて作ると安定します。

• 共購買（Frequently Bought Together）：同時にカート・注文されることが多い商品の組合せ。リアル店舗でいう「一緒にレジに来やすい組み合わせ」。
  - 強み：実際の購買データベースなので、CV直結しやすい
  - 弱み：新商品・低PV商品のデータが不足しがち
• 類似（Similar / Style-based）：デザイン・色・価格帯などが近い商品を出すロジック。
  - 強み：データが少ない新商品にも使いやすく、世界観を壊しにくい
  - 弱み：ただの「色違い・ほぼ同型」を並べると、“コーデ提案”ではなく“代替提案”になりやすい

Complete the look では、「主役アイテム」と「合わせアイテム」を分けて考えると設計しやすくなります。

• トップスやワンピースなど：主役アイテム（ユーザーが最初に開いた商品）
• ボトムス・アウター・バッグ・シューズ・アクセなど：合わせアイテム（主役を引き立てる商品）

基本の考え方は次の通りです。

- 主役アイテムに対しては、共購買で「実績ある組合せ」を最優先する
- 共購買データが薄い場合や、カテゴリー的に組み合わせが弱い場合は、類似ロジックで「同じスタイルの中から役割の違うアイテム」を足す

たとえば、白シャツ（主役）に対して、
- 共購買：黒テーパードパンツ、ローファー
- 類似：同じテイストのベージュチノ、レザーバッグ
という組み合わせで、コーデ全体を見せていくイメージです。

手順：まずは売れ筋カテゴリで1ブロックを作る

• 1. Shopify管理画面で対象テンプレート（商品詳細ページ）を確認する
  - Shopify管理画面 → オンラインストア → テーマ を開きます。
  - 運用中テーマの カスタマイズ をクリックし、上部のテンプレート切替で 商品 → デフォルト商品 を選びます。
  - どこにコーディネート提案を差し込むか（カートボタン付近が基本）をざっくりイメージします。
• 2. コーデ提案を入れる「主役カテゴリ」を1つ決める
  - 例：レディースの中でPV・売上の大きい トップス、または ワンピース など。
  - いきなり全商品に広げず、「このカテゴリなら、うちの世界観を一番きれいに見せられる」という範囲に絞ります。
• 3. 共購買データから鉄板セットを洗い出す
  - Shopify管理画面 → 分析 → レポート から、
  - 「よく一緒に購入されている商品」系のレポート
  - または注文データをエクスポートし、SKUの組み合わせをざっくり確認します。
  - 手動でもよいので、よく一緒に売れているペアを10〜20組程度メモします（例：白T×デニム、花柄ワンピ×カーディガンなど）。
• 4. 類似ロジックで「同じスタイルの別アイテム」を補う
  - まだ共購買データが少ない主役商品については、デザインと価格帯が近い「スタイル仲間」を考えます。
  - 例：キレイめオフィス向け白ブラウスなら、同じオフィス向けカテゴリから、
  - ボトムス：テーパードパンツ、タイトスカート
  - 小物：シンプルトートバッグ、パンプス
  - 「色違い」「サイズ違い」だけを並べるのではなく、役割の違うアイテムで“全身像”が浮かぶかを基準に選びます。
• 5. テーマエディタかアプリで「Complete the look」ブロックを置く
  - テーマ側で商品レコメンドブロックを持っている場合：
  - テーマカスタマイズ画面 で セクションを追加 → 該当の 商品レコメンド セクションを選びます。
  - タイトルを Complete the look や このコーデを完成させる などに変更します。
  - アプリを使う場合（例：RecoBoostなど）：
  - アプリ → 対象アプリを開き、レコメンドウィジェットの新規作成で 商品詳細ページ 向けのウィジェットを作成します。
  - ロジックで 共購買 をベースにしつつ、類似商品 を第二候補として設定できる構成にします。
• 6. 表示ルールを「主役カテゴリ＋点数3〜4点」に絞る
  - ウィジェットの表示条件で、
  - 対象商品をステップ2で決めた 主役カテゴリの商品のみに限定 します。
  - 表示する商品数は 3〜4点 に絞り、見た目をシンプルに保ちます。
  - 「トップスを見ているときはボトムス・小物を優先」など、カテゴリ間の組み合わせルールが設定できる場合はここで指定します。
• 7. スマホ表示を必ずプレビューし、1週間テストする
  - テーマカスタマイズ画面 上部のデバイス切替から モバイル表示 にし、
  - カートボタンからスクロールして 2スクロール以内に見えるか
  - サムネイルが小さすぎないか
  - 価格やバリエーションが分かるか
  をチェックします。
  - 公開後、1週間〜10日程度は、
  - コーデ提案ブロックのクリック率
  - 「一度に複数商品をカートに入れた注文比率」
  を見て、件数が取れそうなら対象カテゴリの拡大を検討します。

配置のコツ：世界観を壊さずに“まとめ買い”を促す

Complete the look は、押し売り感を出さずに「プロのスタイリング」をオンラインで再現するイメージで配置していきます。

• カートボタン直下に置き、「買う決意」を後押しする
  - 商品詳細の構成を、
  - 商品写真 → 価格 → バリエーション選択 → カートボタン → Complete the look
  の順にします。
  - スペースが厳しい場合でも、レビューより上に置くと、クリックされやすくなります。
• タイトルは“提案”であることを明言する
  - 例：スタイリストのおすすめコーデ / このアイテムに合うアイテム / このコーデを完成させる
  - 「関連商品」「あなたへのおすすめ」よりも、コーデ提案であることが一目で分かる文言を優先します。
• 画像のバラつきを抑え、1スクリーンに収まる点数に
  - サムネイルサイズを揃え、1スクリーンに収まる3〜4点を目安にします。
  - 絞りきれない場合は、
  - 主役：ボトムス1点
  - プラス：小物（バッグ or シューズ）1〜2点
  のように「フルコーデ」ではなく「最低限の組み合わせ」から始めます。
• アパレル以外で使うときは「使い方のセット」を意識する
  - 雑貨・コスメ・家具などに広げる場合、コーデではなく 「使用シーンのセット」 として設計します。
  - 例：
  - コスメ：ファンデを主役に、下地＋パウダー＋ツールのセット
  - 家具：ソファを主役に、クッション＋サイドテーブル
  - 雑貨：タンブラーを主役に、ストロー＋ボトルブラシ
  - このときも、共購買（よく一緒に買う）＋類似（同じテイスト） の考え方は共通です。

よくある失敗と、アパレル以外での注意点

• 類似ロジックだけで「色違いの山」になってしまう
  - 問題：Complete the look が、単なる「色違い・サイズ違いの一覧」になり、まとめ買いにつながらない。
  - 対策：
  - 主役カテゴリ（トップスなど）では、合わせカテゴリ（ボトムス・小物）を必ず含めるルールにする。
  - アプリ側でカテゴリの組み合わせ指定ができない場合は、「色違い提案」は別枠（例：関連商品）に分けます。
• 共購買データをそのまま出して世界観が崩れる
  - 問題：セール品や在庫処分品との共購買が強く、Complete the look にも混ざってしまい、全体の印象が安っぽく見える。
  - 対策：
  - Complete the look 用のロジックには、対象外タグ（例：sale / outlet） を付け、除外設定を行う。
  - または、「スタイリング用コレクション」を1つ作り、そこに含まれる商品のみを出す。
• アパレル以外で「組み合わせNG」を出してしまう
  - 問題：
  - コスメで、肌質が合わない組み合わせ（乾燥肌向けと脂性肌向けのミックス）
  - 家電で、規格が合わないアクセサリを出してしまう など。
  - 対策：
  - カテゴリやタグで 「一緒に使える条件」 を定義し、その範囲だけを Complete the look 対象にする。
  - 例：コスメなら 肌質タグ、家電なら 対応型番タグ を合わせているものだけを共購買・類似の候補に含める。
• ブロックを増やしすぎて、肝心のコーデ提案が埋もれる
  - 問題：商品詳細ページに、レビュー・ランキング・最近見た商品・ニュースレターなどが並び、Complete the look の位置が下がりすぎる。
  - 対策：
  - 「カート直下は Complete the look を優先」「レコメンド枠は2つまで」など、ページ内の優先順位を決める。
  - 既にある「関連商品」ブロックは、Complete the look を導入したページでは非表示またはフッター付近に移動する。

RecoBoost での次の一歩

RecoBoost を使う場合は、上記の「共購買＋類似」の考え方をそのままアプリのロジックに落とし込めます。例として、以下のような進め方です。

• Shopify管理画面 → アプリ → RecoBoost を開く
  - RecoBoost をインストール済みであれば、アプリ一覧から開きます。
• レコメンド設定で「Complete the look」用のウィジェットを新規作成する
  - レコメンド設定 → ウィジェットを追加 をクリックし、ページ種別で 商品詳細ページ を選択します。
  - タイトルに Complete the look など、コーデ提案と分かる文言を設定します。
• ロジックで「共購買＋AI類似商品」を組み合わせる
  - ロジック選択でまず 共購買 を選び、候補不足時のバックアップとして AI類似商品 を指定します。
  - カテゴリ・タグ条件を使い、
  - 主役カテゴリ：トップス・ワンピース
  - 合わせカテゴリ：ボトムス・バッグ・シューズ など
  を優先的に出すよう絞り込みます。
• 表示条件とデザインを「スマホ基準」で調整する
  - 表示先設定 で、まずは主役カテゴリ（売れ筋コレクション）のみに表示します。
  - デザイン では、1行あたりの表示件数やサムネイルサイズを調整し、スマホプレビューで 3〜4点が1スクリーンに収まる ように整えます。
• 効果計測で「複数商品を含む注文数」を見る
  - RecoBoost の レポート 画面で、
  - Complete the look ウィジェット経由のクリック数
  - ウィジェット経由でカートに追加された点数
  を確認します。
  - 特に、1注文あたりの商品数 が伸びているかを見ながら、対象カテゴリを少しずつ広げていきます。