特集ページの着用写真で気に入った組合せを見つけても、ジャケット、パンツ、バッグのどれが販売中で、どの色を使ったのか分からなければ、購入の前に探し直すことになります。写真全体を一つの商品一覧へリンクするだけでは、同じ商品に着地できるとは限りません。小売ブランドの特集ページでは、写真ごとに写る販売商品を特定し、商品詳細の選択肢までたどれるようにします。
この記事は、アパレル・雑貨・宝飾小売の事業者、EC運営者、Web担当者に向けたものです。特集の着用カットから使用商品一覧、商品詳細へつなぐ対応表を作り、色やサイズ、付属品、品切れ時の表示まで決めます。個々の商品をどの角度から撮るかではなく、一枚の編集写真に複数の商品が写る時の案内に絞ります。
みやあじよのアパレル・雑貨・宝飾小売向けホームページ制作では、特集を読んだ人が紹介された商品へ進める導線を扱っています。写真の印象を保ったまま買える商品を明らかにするには、デザインより先に商品番号と掲載状態をそろえることが必要です。特集を一度公開して終わりにせず、販売状態が変わった後も読者が迷わない管理単位を考えます。
一枚の着用カットを、販売する商品に分解する
着用カットには、販売する主役の商品、別売の組合せ商品、撮影用の小物、販売終了品が同時に写ることがあります。画面ではすべて同じ程度に「買えるもの」に見えるため、制作前に一枚ずつ内訳を確認します。「コーディネートA」のような写真名だけでは、登録担当が後から商品詳細を特定できません。カットIDと商品管理番号を一対多で結び、商品名、色、サイズ、販売可否、リンク先を記録します。
最初に決めるのは、何を販売対象として載せるかです。モデルが着たジャケットが現行品でも、中のトップスが撮影時の私物なら、トップスへ購入リンクを付けません。バッグが店舗では扱われていてもECにない場合は、商品詳細へ進めない理由と来店で確認できる範囲を販売担当に確かめます。事業者が扱っていない商品を「同じアイテム」として外部へ誘導するなら、紹介方針とリンク先を別に決める必要があります。
写真の説明を「着用アイテムを見る」だけにせず、写真に写る順序に近い使用商品一覧を置きます。たとえば上着、インナー、ボトムス、バッグ、アクセサリーの順に、画像や短い商品名、色、販売状態を表示します。読者が写真のどの部分を指すか判断しにくい場合は「写真右手のバッグ」のような位置の補足を添えます。ただし、スマートフォンでの切り抜きで位置が変わるなら、「ブラウンのバッグ」のように商品特徴で識別できる言葉へ直します。
画面上のホットスポットを使う場合も、点だけに商品情報を預けません。写真の人物や服の位置は端末幅で動き、点を押しにくい人もいます。写真の下に通常の文字リンクを並べれば、読者は拡大操作をせずに商品を選べます。画像内に価格や在庫を焼き込むと更新のたびに写真を作り直す必要があるため、変動する情報は商品データから表示するか、更新責任を明確にしたテキストとして扱います。
着用カットから商品詳細までの対応表を作る
特集を作る担当、商品登録担当、撮影担当が別々だと、見た目の呼び名と台帳の商品名が食い違います。制作の入力資料として、カットID、写る場所、現行の商品番号、掲載する色や型、遷移先、販売状態の更新担当を一行で照合できる表を作ります。商品番号が決まっていない予約商品なら、仮のページへ送る前に公開時点の正式なリンクを確定します。
表は左右にスクロールして確認できます。
| カットと写る部分 | 商品の照合 | 特集に載せる情報 | 遷移先と更新条件 |
|---|---|---|---|
| A・上着 | 商品管理番号と着用色を照合 | 商品名、色、販売状態 | 該当色を選べる商品詳細。販売終了時は表示を更新 |
| A・ボトムス | 商品番号と写真の仕様を照合 | 別売であること、色、サイズ展開 | 対象商品の詳細。着用サイズと販売サイズを混同しない |
| A・バッグ | 型と色、付属品の有無を照合 | バッグ本体の販売条件 | 該当型の詳細。在庫がない場合の案内を決める |
| A・撮影用小物 | 販売対象外かを確認 | 販売対象外ならその範囲 | 購入リンクを付けず、誤認を避ける説明を置く |
この表は入力項目の例であり、実際の商品番号や販売条件ではありません。「A・上着」が複数サイズを持つ時、写真から分かるのは撮影に使った一点です。購入者が選べるサイズは商品詳細で確認し、着用サイズを載せるなら撮影記録と照合します。セット販売でない組合せを「一式」と呼ぶと、合計価格や同梱物について誤解を生みます。別売の品は別売と示し、セット価格がある場合だけ、その対象と条件を商品台帳で確認します。
対応図では「着用カット→使用商品一覧→商品詳細→販売状態の更新」を一つの流れにします。商品詳細のURLを集める作業と、公開後に変わる在庫・販売状態を追う作業を同じ表に入れるのが要点です。記事や特集から一度だけ正しくリンクできても、商品が非公開になれば導線は途切れます。リンクを貼った後に、商品側の状態変更を誰が特集へ知らせるかまで決めます。
リンク先は「似た商品」ではなく該当商品を指す
商品カードからカテゴリ一覧へ送ると、特集の写真と同じ商品を探し直す必要があります。基本は該当する商品詳細をリンク先にします。色や仕様が複数あるなら、特集で見た色を商品ページで確認できるようにします。ただし、URLで選択状態を直接指定できるかはECの仕組みによって違います。対応しないカートへ、動作しない選択用のパラメータを付けるのは避け、到着後に色を識別できる写真と選択欄を用意します。
Shopifyの公式ヘルプは、商品の色やサイズをバリエーションとして登録し、組合せごとに価格や在庫などを管理できることを説明しています。これはShopify利用時の仕様であり、他のECでも同じ入力方法になるとは限りません。Google Search Centralのバリエーションの資料も、複数の選択肢を持つ商品で、商品やバリエーションをどう表すかを示しています。構造化データの設定を検討する前に、画面上の商品名、選択状態、URLの挙動が実際の商品管理と一致するかを確かめます。
リンクを開いた時に色が選択される仕組みでも、サイズまで自動選択するかは慎重に決めます。特集写真のモデル着用サイズは、購入者に合うサイズを意味しません。到着後に選び直せる選択欄とサイズ表を見せ、未選択のまま購入へ進めない仕様ならその状態を明示します。柄物や一点物では、写真の柄の出方や細部が販売する現物と違う可能性を商品担当が確認します。商品の同一性を写真だけから決めません。
特集の本文にリンクを埋める場合、文章の「このバッグ」から詳細へ移動しても、ページ下部の一覧には同じバッグを載せます。複数の入口が別の商品へ飛ばないよう、URLを一つの対応表から供給します。商品名変更や販売ページの統合があった時は、特集本文、画像付近のカード、SNSで使ったリンクを同じ更新依頼に含めます。短縮URLや転送だけで古い販売条件を残さないよう、リンク先の表示も見ます。
品切れと販売終了で、案内を変える
売切れのたびに特集から商品を消すと、写真と一覧の関係が分からなくなります。一方、購入できない商品に「購入する」と出し続けるのも困ります。品切れが一時的なのか、再入荷予定の有無を案内できるのか、販売終了なのかを商品担当に確認し、状態ごとの表示文とリンク先を決めます。「再入荷予定」は確定している範囲だけを書き、予定がない場合に日付を作りません。
一時的な品切れなら、写真の使用商品一覧に「現在品切れ」と示し、商品詳細へ進めて仕様や再入荷案内を確認できる運用が考えられます。販売終了なら、「掲載商品は販売終了」と明示し、同じ型の別色や後継品を紹介する場合も元の商品と区別します。類似品へ無言でリンクを差し替えると、写真と遷移先の商品が違う状態になります。代替案には「近い色」「同シリーズ」など、確認した関係を短く添えます。
Google Merchant Centerのランディングページ要件は、商品が在庫切れである場合にその状態を明確に表示することや、商品情報と遷移先を一致させることを求めています。これはMerchant Centerへ商品を掲載する場合の要件です。自社サイトだけでも、特集と詳細の販売状態が矛盾しないことは読者の判断に直接関わります。広告や商品フィードを使う場合は、特集、商品詳細、フィードの更新時刻と担当を照合します。
特集自体に賞味期限のような「掲載終了日」を決める必要があるとは限りません。過去の季節の着こなしを読み物として残すなら、各商品が現在買えるかを現在形で区別します。すべて販売終了なら、購入を促すボタンを残すより、記事として残す理由や現行の近い特集への道を考えます。公開後の変更を最初から前提にすると、古いページを一律削除するか放置するかの二択になりません。
スマートフォンでは写真と商品一覧を離しすぎない
PCでは写真の横に商品カードを置けても、スマートフォンではカードが写真の下へ移動します。冒頭に長いストーリー本文が挟まると、読者は「どの商品だったか」を忘れたままスクロールします。写真の直後に「この写真で使った商品」と短い見出しを置き、画像の並びと対応したカードを見せます。写真が縦に長い場合は、上から見える範囲の商品の位置も考え、順序を決めます。
カードには小さな商品写真、商品名、色、販売状態を載せ、必要な時だけ価格を表示します。価格を載せるなら、商品詳細との同期または更新手順が必要です。特集カードの価格だけ古い状態を防ぐため、表示方法を選ぶ時に商品データとの連携可否を確認します。サイズやカラーをカード上で選ばせるなら、選択操作、在庫状態、カート投入結果まで実装と検証が増えます。特集の役割が商品発見なら、詳細ページで選択させるほうが明快な場合もあります。
着用写真の一部へ押せる領域を重ねる設計では、拡大画像やスワイプとの操作競合を確認します。複数の商品点が近いと、小さい画面では狙った商品を押しにくくなります。点を設けるとしても、写真下の一覧を同じ内容で残し、キーボードで順にたどれるリンク名を付けます。「詳しく見る」が何個も並ぶより、「ベージュのジャケットの商品詳細」のように対象が分かる言葉にします。
見出しとカードの関係を、幅1440、768、390ピクセル程度で実画面確認します。写真の切り抜きでバッグが消えるのに一覧にはバッグがある、横並びカードの三つ目が画面外に隠れる、売切れ表示がボタンの下へ押し出される、といった状態を拾います。画像が読み込めない場合にも、商品名とリンク先で選べるかを確かめます。写真を見ない人にも組合せが伝わるよう、画像の代替テキストと一覧の文章は役割を分けます。
撮影前と公開後で担当する確認を分ける
撮影前には、スタイリング担当が使う商品と色・サイズを決め、販売担当が現行の管理番号、販売の可否、貸出品や私物を照合します。撮影後には、採用カットごとに写った商品が予定から変わっていないかを確認します。予備のジャケットに差し替えたのに商品番号だけ元のままでは、ページをきれいに作っても正しい商品へつながりません。カットIDをファイル名や制作表に残し、差し替え履歴を追えるようにします。
公開前には、編集担当が特集の文章と画像、EC担当が商品詳細のURLと色選択、販売担当が在庫・価格・販売条件を確認します。担当が同じ人でも、確認項目は分けて記録します。特集側だけで商品情報を推測して埋めないためです。公開時には実際のスマートフォンで写真から商品一覧を開き、上着、ボトムス、バッグをそれぞれ一つずつ詳細までたどります。移動先の画像、商品名、選択欄、販売状態が対応表と一致すれば、導線の最低限の確認になります。
公開後は、品切れ、再入荷、販売終了、商品ページURL変更の通知先を決めます。自動連携していない特集カードなら、商品管理の変更から何を手作業で更新するかを明記します。季節特集を再掲する前には、全リンクを開き直し、撮影時の価格や配送条件を現在のものとして読ませていないかも見ます。流入やクリックを分析する場合も、まずリンクの正しさを確認し、実測していない売上効果を特集の成果として書きません。
参考資料
- Shopify Help Center「Adding variants」（Shopifyの商品選択肢と、組合せごとの管理項目を確認）
- Google Search Central「Product Variant Structured Data」（商品と色・サイズ等のバリエーション、URLの扱いを確認）
- Google Merchant Center Help「About landing page requirements」（商品広告を利用する場合のランディングページと在庫表示の要件を確認）
- みやあじよ「アパレル・雑貨・宝飾小売向けホームページ制作」（対象LPの特集と商品詳細の支援範囲を確認）
