{"product_id":"2026-07-06","title":"【Horizon】Rolloutsで商品写真をA\/Bテストする設定例｜メタフィールドで商品ギャラリーを丸ごと差し替え","description":"\u003cp\u003eShopifyの商品写真は、どの1枚を主役にするか・どんな順番で見せるかで購入率が大きく変わります。そこでテーマ「Horizon」で、商品ギャラリーの写真・動画を丸ごと別バージョンに差し替えられるようにし、Shopifyの「ロールアウト（Rollouts）」で訪問者を50%ずつ振り分けて、どちらの写真が売れるかを実データで比較する方法です。\u003c\/p\u003e\n\u003cp\u003e商品メタフィールドに「もう一方のメディア一式」を登録し、ロールアウトの処理（Bパターン）側でテーマ設定のスイッチをオンにするだけ。写真以外はまったく同一の条件でA\/Bテストできます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"RolloutsとメタフィールドでHorizonの商品写真をA\/Bテストする完成イメージ\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_1_b31e8d4c-2b2a-4011-9eb3-a66627c9abd2.png?v=1783258290\" class=\"zoomable-image\" width=\"800\" height=\"821\" style=\"aspect-ratio: 0.975;\"\u003e\u003c\/p\u003e\n\u003cp\u003e👉 実際の表示は、以下のデモストアで確認できます（テーマ設定オンでメタフィールドの写真に切り替わった状態）。\u003cbr\u003e\u003ca href=\"https:\/\/horizon-store-coffee.myshopify.com\/products\/ethiopia-yirgacheffe\" target=\"_blank\" rel=\"noopener\"\u003ehorizon-store-coffee.myshopify.com\/products\/ethiopia-yirgacheffe\u003c\/a\u003e\u003cbr\u003eストアパスワード：storedojo\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003e仕組み\u003c\/h3\u003e\n\u003cp\u003eHorizonの商品ギャラリー（商品ページ・商品カード）は、内部で1つのメディア配列を組み立てて表示しています。テーマ設定 \u003cstrong\u003eab_test_use_alt_media\u003c\/strong\u003e がオンのとき、この配列を商品メタフィールド \u003cstrong\u003ecustom.ab_media\u003c\/strong\u003e（写真・動画のリスト）に丸ごと差し替えます。差し替えるのは「表示するメディア」だけなので、ズームやスライドショー、バリエーション切り替えはそのまま動きます。\u003c\/p\u003e\n\u003ch3\u003e【設定手順①】商品メタフィールド「ABメディア」を作成\u003c\/h3\u003e\n\u003cp\u003e◆Shopify管理画面 → 設定 → カスタムデータ → 商品 → 「定義を追加」\u003cbr\u003e・名前：ABメディア（ネームスペースとキー：custom.ab_media）\u003cbr\u003e・タイプ：「リスト」＋「ファイル」\u003cbr\u003e・許可するファイルタイプ：メディアファイルのみ（画像・動画）\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"商品メタフィールド定義ABメディアの作成画面\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_2.png?v=1783258208\" class=\"zoomable-image\" width=\"800\" height=\"565\" style=\"aspect-ratio: 1.415;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順②】各商品に差し替え用のメディアを登録\u003c\/h3\u003e\n\u003cp\u003eテスト対象の商品の編集ページ下部「メタフィールド → ABメディア」に、もう一方のパターンの写真・動画を登録します。表示したい順番もここで指定できます。\u003cbr\u003e※メタフィールド未登録の商品は通常メディアのまま表示されるので安全です。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"各商品にABメディアを登録する画面\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_3.png?v=1783258208\" class=\"zoomable-image\" width=\"800\" height=\"691\" style=\"aspect-ratio: 1.157;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマにコードを追記する（3ファイル）\u003c\/h3\u003e\n\u003cp\u003e差し替えの本体です。以下の3ファイルにコードを追記します（コードは購入後にすべて表示されます）。\u003cbr\u003e・snippets\/product-media-gallery-content.liquid … 商品ページのギャラリー全体\u003cbr\u003e・snippets\/card-gallery.liquid … コレクション等の商品カード\u003cbr\u003e・config\/settings_schema.json … テーマ設定のオン\/オフスイッチ\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"product-media-gallery-content.liquidへの追記\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_6.png?v=1783258209\" class=\"zoomable-image\" width=\"800\" height=\"667\" style=\"aspect-ratio: 1.2;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"card-gallery.liquidへの追記\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_5.png?v=1783258208\" class=\"zoomable-image\" width=\"800\" height=\"471\" style=\"aspect-ratio: 1.699;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"settings_schema.jsonへの追記\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_7.png?v=1783258210\" class=\"zoomable-image\" width=\"800\" height=\"395\" style=\"aspect-ratio: 2.025;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順③】ロールアウト（Rollouts）でA\/Bテストを設定\u003c\/h3\u003e\n\u003cp\u003eShopifyのロールアウト（Rollouts）で、公開テーマを「コントロール」と「処理」に分けてA\/Bテストを設定します。\u003cbr\u003e・\u003cstrong\u003eコントロール\u003c\/strong\u003e：元のテーマ（Aパターン）。何も変更しません。\u003cbr\u003e・\u003cstrong\u003e処理\u003c\/strong\u003e：テーマのコピーを割り当てます（次の手順④でスイッチをオンにします）。\u003cbr\u003e配信割合はそれぞれ50%に設定すれば、写真以外はまったく同一の条件で比較できます。\u003c\/p\u003e\n\u003cp\u003e※ロールアウトはBasicプラン以上、A\/Bテスト（実験・計測）は\u003cstrong\u003eGrowプラン以上\u003c\/strong\u003eで利用できます。詳細は\u003ca href=\"https:\/\/help.shopify.com\/en\/manual\/markets-new\/rollouts\" target=\"_blank\" rel=\"noopener\"\u003eShopifyヘルプ（Rollouts）\u003c\/a\u003eを参照してください。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"ロールアウトでコントロールと処理に50%ずつ割り当てる\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_8.png?v=1783260710\" class=\"zoomable-image\" width=\"800\" height=\"392\" style=\"aspect-ratio: 2.043;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順④】処理（Bパターン）側でテーマ設定のスイッチをON\u003c\/h3\u003e\n\u003cp\u003eロールアウトの処理（Bパターン）に割り当てたテーマで、「テーマエディタ → テーマ設定 → 『A\/Bテスト（商品メディア）』 → 『ABメディアに差し替える』」を\u003cstrong\u003eオン\u003c\/strong\u003eにします。\u003cbr\u003eこうすると、コントロール（A）は元の写真のまま、処理（B）のときだけ、その商品のメタフィールドに設定した写真・動画に差し替わった状態になります。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"処理（Bパターン）側でテーマ設定のスイッチをONにする\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_4.png?v=1783260712\" class=\"zoomable-image\" width=\"800\" height=\"569\" style=\"aspect-ratio: 1.407;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順⑤】結果を計測してどちらの写真が勝ったか判定\u003c\/h3\u003e\n\u003cp\u003eロールアウトの結果画面で、コントロール（A）と処理（B）を主要指標で比較します。コンバージョン率・カート追加率・チェックアウト到達率・直帰率などを見て、購入につながった写真パターンを判定しましょう。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"ロールアウトの計測画面。コントロールと処理を指標で比較\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_9.png?v=1783260714\" class=\"zoomable-image\" width=\"800\" height=\"506\" style=\"aspect-ratio: 1.58;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e注意点\u003c\/h3\u003e\n\u003cp\u003e・差し替えるメディアは、元の写真と近い縦横比にするとレイアウトのズレ（CLS）を防げます。\u003cbr\u003e・メタフィールドはファイル参照のため3Dモデルは対象外です（写真・動画のみ対応）。\u003cbr\u003e・カートのサムネイルやSNSシェア画像（OGP）は通常の写真のままです。テストの純度を保つため、あえて差し替え対象から外しています。\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49044252131579,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06.png?v=1783260180","url":"https:\/\/store-dojo.com\/products\/2026-07-06","provider":"STORE DOJO","version":"1.0","type":"link"}