商品ページで「Complete the Look」を出すための設計チェックリスト

このプレイブックでやること（ゴール）

このプレイブックでは、商品ページに「Complete the Look（このコーデに使っている商品をまとめて提案する枠）」を載せるための設計を、今日中に決められる状態にすることをゴールにします。

ここでの「Complete the Look」は、主役の商品に対して「一緒に買うとコーデが完成する商品」をセットで見せるブロックのことを指します。特にアパレル・ファッション小物・家具・インテリアなど、コーディネート提案 Shopify で探している方を想定しています。

前提：Complete the Look を置く前に決めておくこと

• どのカテゴリーで出すかを決める：全商品に出すのか、まずは「トップスだけ」「ソファだけ」など、主力カテゴリから始めるのかを決めます。最初は在庫が安定しているカテゴリに絞ると管理が楽です。
• 「主役」と「合わせる商品」の関係を決める：例）トップス→ボトムス・アウター・アクセ、ソファ→ラグ・クッション・テーブルなど、自社での「定番コーデ」パターンをざっくり言語化しておきます。
• 在庫とバリエーションの扱いルールを決める：サイズ欠けが多い商品や、セールで急に売り切れる商品は、Complete the Look から除外するかどうかの方針を先に決めておきます。
• 商品画像の整合性を確認する：Complete the Look に出したい組み合わせが、ちゃんと商品画像（着用画像・使用例）でも分かるかを確認します。画像で見せていない組み合わせを出すと、かえって不安を与えます。

手順：Complete the Look ブロックを設計する

• 1. 対象商品を Shopify のコレクションでまとめる
  Shopify管理画面の 「商品」 → 「コレクション」 で、「トップス」「ボトムス」など、主役と合わせる商品群を整理します。Complete the Look に出したい候補商品が、どのコレクションに入っているかを明確にしておきます。
• 2. コーデの代表パターンを 3〜5 個だけ決める
  ノートなどに、よくある組み合わせパターンを書き出します。例：
  - トップス主役 → ボトムス＋アウター＋アクセサリー
  - ワンピース主役 → アウター＋バッグ
  - ソファ主役 → ラグ＋クッション＋サイドテーブル
  「どの商品でも基本はこの形」と言える型を 3〜5 個に絞ります。
• 3. 文言を 1〜2 パターンに固定する
  商品ページに表示する見出しは、シンプルに揃えます。例：
  - 「Complete the Look｜このコーデに使ったアイテム」
  - 「このアイテムと合わせて購入されています」
  できれば、1サイトにつき 1パターンにすると、お客様にも分かりやすくなります。
• 4. 商品ページのどこに置くかを決める
  Shopify管理画面の 「オンラインストア」 → 「テーマ」 → 「カスタマイズ」 を開き、任意の商品テンプレートを表示します。
  - 商品画像のすぐ下
  - 商品説明の下
  - レビューの上
  など、候補位置を決め、PC・スマホ両方でスクロール量を確認します。多くの場合、商品説明とレビューの間が、見られやすさと邪魔にならなさのバランスが取りやすいです。
• 5. 何点まで表示するかを決める
  Complete the Look に出す点数を決めます。目安は 3〜4点 です。
  - 2点以下だと「ただのおすすめ」に見えやすい
  - 5点以上だと情報量が多く、スマホで圧迫感が出やすい
  まずは 3点表示にし、必要に応じて 4点まで増やす方針にします。
• 6. カート導線のスタイルを選ぶ
  実装方法やアプリ設定で、次のどちらを採用するか決めます。
  - 1つずつ 「カートに追加」 ボタンを押してもらう方式
  - チェックボックスで複数選択 → 「選択した商品をカートに追加」 ボタンで一括追加する方式
  スマホでの操作のしやすさと、テーマ・アプリで実現できるかどうかを考えて選びます。
• 7. 非表示にする条件を決める
  以下のような場合に Complete the Look を非表示にするかどうかを事前に決めておきます。
  - 在庫が残りわずかの商品しか出せないとき
  - セール・アウトレット商品ページ
  - すでにバンドル商品としてセット販売している商品
  「この条件のときは出さない」と決めておくと、後の調整が楽になります。
• 8. テスト用の商品ページを 3〜5 件決めて確認する
  実際の 商品ページURL を 3〜5 個ピックアップし、PC/スマホ両方で次を確認します。
  - タイトル文言が違和感ないか
  - 出てくる商品が、画像を見ても「一緒に使っている」ことが分かるか
  - スクロール位置が深すぎないか
  必要なら、その商品だけ一時的に Complete the Look をオフにして調整します。

チェックリスト：公開前にここだけは確認する

• 対象カテゴリが明確か：どのカテゴリの商品に Complete the Look を出すのか決めている
• 主役と合わせる商品の型が決まっているか：トップス→ボトムス＋アウター、のように社内で説明できる「型」がある
• 見出し文言が統一されているか：商品によって「このコーデ」「おすすめ商品」などバラバラになっていない
• 表示位置が決まっているか：全商品で「商品説明の下」のように統一されている
• 表示点数が 3〜4 点に収まっているか：スマホで窮屈に見えないかを確認した
• カート導線が分かりやすいか：1点ずつ追加か、一括追加なのかが一目で分かる
• 在庫切れ商品の扱いが決まっているか：在庫がない商品を表示するのか・非表示にするのかルールがある
• すでにバンドル販売している商品との重複がないか：セット商品とComplete the Look が競合していない
• 画像でコーデが伝わるか：Complete the Look で出している組み合わせが、商品画像でも確認できる
• PCとスマホの見え方を両方チェックしたか：スクロール量とボタンの押しやすさを実機またはプレビューで見た

配置のコツ：売上と体験を両立させる

• 「コーデのストーリー」が伝わる並び順にする：価格順や新着順ではなく、「視線の流れ」で並べます。トップス主役なら、ボトムス→アウター→小物のように、着替える順・視線が向かう順に並べると理解しやすくなります。
• 主役を食わない価格バランスにする：主役商品より極端に高いアイテムばかりを並べると、 Complete the Look 全体が高く感じられます。主役と同価格帯〜少し安いアイテムを中心にしつつ、1点だけ高単価アイテムを入れる、などのバランスを意識します。
• レビューの少ない商品はできるだけ避ける：レビューゼロの商品を前面に出すと、不安につながる場合があります。レビューが集まっている商品を優先して Complete the Look に入れると、安心感を維持しやすいです。
• スマホの「ひと画面」に何点入るかを見る：スマホで1画面にカードが2〜3枚入る程度が目安です。1枚しか入らないとスクロールが増え、4枚以上入ると1点あたりが小さくなりすぎます。テーマのカード幅と表示点数を調整します。
• あえて「一部だけ」揃えられる提案も入れる：全身コーデ一式を揃える提案に加えて、「トップス＋アクセサリー」のようなライトな組み合わせも混ぜると、「全部は買わないけど1点足すか」という行動を取りやすくなります。

よくある失敗と回避のポイント

• 失敗1：関連性の低い商品が出てしまう
  ・例：トップスの商品ページに、色もテイストも違うバッグが出ている
  → 対策：Complete the Look 用に、あらかじめ「このカテゴリと組み合わせるコレクション」を絞り込んでおきます。AIや自動ロジックを使う場合も、ベースになるコレクションを制限しておくと外れ提案が減ります。
• 失敗2：同じ商品が何度も出てマンネリ化する
  ・例：どの商品ページを見ても、毎回同じボトムス・同じバッグが出てくる
  → 対策：在庫・売れ筋に偏りがある場合は、Complete the Look 専用にいくつか「準主力商品」を決めてローテーションさせます。季節で入れ替えるルールを決めるのも有効です。
• 失敗3：情報量が多すぎて、主役の商品が埋もれる
  ・例：主役よりも Complete the Look ブロックの方が長くて、スクロールがしんどい
  → 対策：表示点数を 3〜4 点に抑える、テキスト説明を省略し、商品名は1行までに切り詰めるなど、カードの情報量を最小限にします。
• 失敗4：在庫切れ商品ばかり提案してしまう
  ・例：気に入ったのに、サイズがほとんど残っていないアイテムばかり並ぶ
  → 対策：Complete the Look に出す条件として「在庫〇点以上」などのルールを決め、実現できるアプリやロジックを選びます。手動運用なら、週1回「在庫薄商品を除く」チェックを行います。
• 失敗5：テキストが英語で伝わりにくい
  ・例：「Complete the Look」だけだと意味が分からないお客様も多い
  → 対策：日本語の補足を必ず入れます。例）「Complete the Look｜このコーデに使ったアイテム」のように、英語＋日本語で説明するか、日本語だけにします。

RecoBoost での次の一歩：AIで「コーデに合うアイテム」を自動提案する

Shopify アプリ RecoBoost では、商品ページでの 「Complete the Look」コーディネート提案 を、AI の類似性と販売実績にもとづいて自動生成できます。

今日試せるステップは次の通りです。

1. Shopify管理画面 → 「アプリ」 から RecoBoost をインストール
2. RecoBoost を開き、「レコメンド設定」 でロジックに AIコーディネート提案（例：主役商品に合うカテゴリを指定するロジック）を選択
3. Complete the Look を出したい商品テンプレートで、「セクションを追加」 から RecoBoost のレコメンドブロックを追加し、表示位置（商品説明の下など）を決定
4. テスト用の商品ページを 3〜5 件開き、提案内容・表示位置・点数をチェックしてから公開

あとは AI が新商品の追加や在庫変動にも対応しながら、「この商品と一緒に買うとコーデが完成する」アイテムを自動で提案し続けます。