商品メディア

商品メディア要素について

概要：Shopifyの商品メディア要素は、お客様のShopify商品をページに表示するために設計されています。商品メディア要素を使用して、画像、動画、3Dモデルでお客様の商品をアピールできます。

以下の動画チュートリアルで詳細を確認できます。

商品メディアは、メインメディアとメディアリストの2つのサブ要素で構成されています。各サブ要素にアクセスし、構成する方法については、以下のセクションをご覧ください。

• メインメディア

• メディアリスト

商品メディア要素へのアクセス方法

• ステップ1: エディターの左側サイドバーにある「要素」をクリックします。

• ステップ2: 「Shopify」タブで、「商品メディア」要素をクリックします。

• ステップ3: 要素をページエディターにドラッグアンドドロップし、編集を開始します。

検索ボックスで商品メディア要素を検索してアクセスすることもできます。

商品メディア要素には、3つの一般的なバリエーションがあります。商品をより魅力的にアピールするために、商品メディア要素は以下の3つのメディアタイプに対応しています。

• 画像

• 3Dモデル

• 動画

商品メディア要素の構成方法

商品メディア要素をクリックすると、外観を細かく調整するのに役立つさまざまな種類のパラメータが表示されます。

一般設定

一般タブでは、商品メディアを設定するためのすべてのカスタマイズが可能です。

商品ソース

商品メディア要素をエディターページにドラッグアンドドロップすると、「商品ソース」オプションには以下の2つの選択肢があります。

• Auto（自動）：ページ割り当てを通じてこのページに割り当てられた商品が、ページエディターに表示されます。このオプションは、商品ページ、または商品メディア要素が商品詳細要素内に配置されている場合にのみ適用されます。その他の状況では、以下のカスタム商品オプションを選択する必要があります。

• Custom Product（カスタム商品）：カスタム商品を選択し、希望する商品を選択できます。

フル幅を有効にする

フル幅オプションを有効にすると、メディアは画面のフル幅サイズになります。有効にしない場合は、黒い点をドラッグするか、右側のボックスに数値を入力してメディア幅を調整できます。

メインメディアソース

「デフォルトバリアントメディア」がデフォルトで選択されます。

ドロップダウンメニューには他に2つのオプションがあります。

• Featured Media（特集メディア）：Shopify内の商品のメディアセクションにあるメディアを表示します。特集メディアを変更するには、Shopify管理画面で商品の詳細に移動してください。

• First Variant Media（最初のバリアントメディア）：Shopify内で設定した商品の最初のバリアントメディアを表示します。

変更を行う場合は、Shopify管理画面 > 商品をクリック > 全商品を選択 > 編集したい商品を選択します。商品の画像とその並べ替えを追加/変更できます。

メディアリストを表示

メディアリストを表示するには「はい」を選択します。非表示にするには「いいえ」を選択します。

メディアリストの位置

上記の「メディアリストを表示」で「はい」を選択すると、メディアリストの位置オプションが有効になります。

選択できるオプションは4つあります。

• 上部 (Top)

• 右 (Right)

• 下部 (Bottom)

• 左 (Left)

バッジを表示

商品バッジは、割引や残り在庫を動的に表示します。

商品メディアにバッジを表示したい場合は、「バッジを表示」オプションを有効にします。

バッジをクリックすると、「一般」タブで商品バッジのテキストを編集することもできます。デフォルトの「Discount（割引）」パラメータと「Stock（在庫）」パラメータは、選択された商品のバリアントの値に基づいて計算されます。

さらに、「商品の条件を適用」トグルを使用すると、バッジを表示する前に特定の条件を満たす必要があるかどうかを制御できます。「はい」を選択すると、特定の条件が満たされた場合にのみバッジが表示されるオプションが有効になります。これらの条件は、プレースホルダー {{count}} と {{total}} で定義されるルールの数に基づいています。

• Belongs to Collection(s)（コレクションに属する）：バッジが表示されるために、商品が特定のコレクションに属する必要があるかどうかを選択できます。「すべてのコレクション」を選択すると条件は無視されますが、特定のコレクションを選択すると、それらの商品にバッジ表示が限定されます。

• Contain Tag(s)（タグを含む）：このオプションを使用すると、特定の商品のタグを指定できます。

例えば、Shopifyの商品ページで商品価格を$15に設定し、比較対象価格を20%に設定した場合、デフォルトでは25%の割引が計算され表示されます。デフォルトの在庫は、在庫に残っている商品の数にも基づいています。

加えて、特定の商品のバリアントに対してカスタムの割引と在庫数を入力することも可能です。

バッジの位置

利用可能なオプションに応じて、商品画像の上下左右のいずれかにバッジを配置することを選択できます。

「スタイリング」タブでは、商品バッジの間隔、余白、フォントサイズなどのその他のスタイリング設定が可能です。

**ATTRIBUTES（属性）、VISIBILITY（表示）、ANIMATION（アニメーション）**パラメータの詳細については、この記事をご確認ください。

スタイリング設定

SPACING（間隔）、BACKGROUND（背景）、BORDER（ボーダー）、DISPLAY（表示）、CUSTOM CSS（カスタムCSS）パラメータの詳細については、こちらをご覧ください。

レガシーエディター - 商品メディアのメインメディアサブ要素の構成方法

メインメディアは商品メディアのサブ要素です。商品メディア要素内の最大の商品画像をクリックすることで、メインメディアにアクセスできます。

一般設定

• ナビゲーションタイプ

ナビゲーションタイプは5種類あります。デスクトップとラップトップでは、一部のオプションはマウスオーバー時にのみ表示されます。

• ページネーションタイプ

設定できるスタイルは3種類あります。

• メディアホバーアクション

メディアホバーアクションは、動画、3Dモデル、タブレットやスマートフォンなどのタッチデバイスでは機能しません。

• メディアクリックアクション

商品メディアをクリックした際に選択できるオプションは3つあります。

• メディア比率

選択できるタイプは3種類あります。

• Original（オリジナル）：メディアは元のサイズで表示されます

• Square（正方形）：メディアは正方形の形状で表示されます

• Custom（カスタム）：メディアの高さを調整できます

Gen 2エディター - 商品メディアのメインメディアサブ要素の構成方法

メインメディアは商品メディアのサブ要素です。商品メディア要素内の最大の商品画像をクリックすることで、メインメディアにアクセスできます。

一般設定

メディア比率

選択できるタイプは3種類あります。

• Original（オリジナル）：メディアは元のサイズで表示されます

• Square（正方形）：メディアは正方形の形状で表示されます

• Custom（カスタム）：メディアの高さを調整できます

メディアオブジェクトフィット

正方形タイプとカスタムタイプでは、メディアをコンテナに合わせてリサイズできます。

メディアの高さ

メインメディアサブ要素の高さを調整できます。

メディアの位置

正方形タイプとカスタムタイプでは、コンテナ内のメディアの位置を選択できます。

画像の読み込み

オプションは3つあります。

• Lazy loading（遅延読み込み）：スクロールして表示された場合にのみ画像を読み込み、ページ速度を向上させます

• Eager（積極的）：画像を事前に読み込みキューに追加します

• Standard（標準）：通常の画像読み込み

メディアタイプ

メインメディア要素を表示するために、スライドショーまたは単一画像のどちらかに切り替えることができます。

メディアホバーアクション

選択できるオプションは2つあります。

メディアホバーアクションは、動画、3Dモデル、タブレットやスマートフォンなどのタッチデバイスでは機能しないことに注意してください。

メディアクリックアクション

商品メディアをクリックした際に選択できるオプションは3つあります。

ナビゲーションタイプ

選択できるナビゲーションタイプは5種類あります。

ページネーションタイプ

設定できるスタイルは3種類あります。

スタイリング設定

SPACING（間隔）、BACKGROUND（背景）、BORDER（ボーダー）、DISPLAY（表示）、CUSTOM CSS（カスタムCSS）パラメータの詳細については、こちらをご覧ください。

商品メディアのメディアリストサブ要素の構成方法

メディアリストは商品メディアのサブ要素です。商品メディア要素内で多数の商品画像が表示されているセクションをクリックすることで、メディアリストにアクセスできます。

一般設定

コンテンツメディアリストレイアウト：メディアリストのレイアウトを選択でき、グリッドまたはスライドショーの2つのオプションで表示されます。

グリッド

• 行ごとのアイテム数：ここに列に表示されるアイテム数を設定できます。最大数は12アイテムです。

• アイテム間隔：スライダーを調整して、各アイテム間の間隔をカスタマイズします。最大間隔は100pxです。

スライドショー

• 表示されるアイテム数：列内に表示されるアイテム数をカスタマイズします。最大数は12アイテムです。

• スクロールするアイテム数：ここにスクロールあたりのアイテム数を調整できます。

• アイテム間隔：スライダーを調整して、各アイテム間の間隔をカスタマイズします。最大間隔は100pxです。

• 部分的なアイテムを表示（スライドショーレイアウトのみ）：前後のアイテムを部分的に表示したい場合は「はい」をクリックします。

• ナビゲーションタイプ（スライドショーレイアウトのみ）：このオプションは、メディアリストにナビゲーション矢印アイコンを追加します。

スタイリング設定

SPACING（間隔）、BACKGROUND（背景）、BORDER（ボーダー）、DISPLAY（表示）、CUSTOM CSS（カスタムCSS）パラメータの詳細については、こちらをご覧ください。

商品メディアのメディアリストアイテムサブ要素の構成方法

メディアリストアイテムはメディアリストのサブ要素です。メディアリストアイテムをクリックすると、右側サイドバーに「スタイリング」タブが表示され、メディアをカスタマイズするための多くのパラメータが表示されます。

ボーダー

ボーダースタイル：各状態に対して4つのボーダースタイルから1つを選択できます。「その他の設定」ボタンをクリックすると、ボーダー幅とボーダー半径を設定できます。

効果

• 不透明度：このバーをドラッグして不透明度を調整できます。

• 影：メディアに影の効果を適用したい場合は、このオプションをオンにします。

**ATTRIBUTES（属性）とVISIBILITY（表示）**パラメータの詳細については、こちらをご確認ください。

よくあるケース

商品メディアを変更する方法

PageFlyはShopifyで構成された商品データのみを使用するため、商品メディアを変更したい場合は、PageFlyではなくShopifyで行う必要があります。

• ステップ1: Shopify管理画面 > 商品 > 商品を選択

ステップ2: メディアセクションで編集をクリックして、選択した商品のメディアを変更します

商品メディアの並べ替え方法

PageFlyはShopifyで構成された商品データのみを使用するため、商品メディアの並べ替えを変更したい場合は、PageFlyではなくShopifyで行う必要があります。

• ステップ1: Shopify管理画面 > 商品 > 商品を選択

• ステップ2: 商品メディアを目的の位置にドラッグします

ヒントと実践

• 高解像度の商品画像（メイン画像および利用可能な場合はズーム機能）を使用し、さまざまな角度や使用時の商品（該当する場合）を紹介します。

• 商品画像がサイズ、色、テクスチャ、機能などの重要な詳細を明確に表示していることを確認します。

• 商品ページのできるだけ「カートに追加」ボタンの近くに、商品メディア要素を目立つように配置します。関連するすべての要素は、連携して機能するように商品詳細要素に入れる必要があります。

よくある質問

1. Shopify商品メディアとは何ですか？

商品メディアには、画像、3Dモデル、動画の3種類があります。

2. Shopify商品メディアのサイズはどのくらいですか？

最大4472 x 4472 pxまたは20メガピクセル、最大20MBです。

3. Shopifyの商品画像数はいくつですか？

1つの商品につき最大250枚の写真を、.png、.gif、.jpg形式でアップロードできます。

追加リソース

• PageFlyを使ってShopify商品ページに商品詳細を表示する方法

• Shopify商品詳細 | PageFlyで作成する方法