商品メディアのタイプ
オンラインストアを閲覧しているお客様には、商品ページの画像のようなメディアが表示されます。ビデオ、3次元モデル、拡張現実といったメディアを商品ページで使用すると、商品に対するお客様の信頼度を高め、顧客体験の向上と売上の増加につながります。商品に追加するメディアが適切に表示されるようにするには、メディアが高品質で、必要な仕様を満たしていることが重要です。
ビデオや3Dモデルを商品ページに表示するには、追加するメディアに対応しているテーマをオンラインストアで使用する必要があります。すべてのテーマは商品への画像の追加に対応しています。
画像
商品画像は、オンラインストアやShopify POSを含む、Shopifyの販売チャネル全体で商品を表示するために使用されます。ほとんどの商品画像に最適なファイル形式は、PNG、次いで、JPEGです。その他のサポートされているファイル形式には、PSD、TIFF、BMP、GIF、SVG、HEIC、WebPです。ShopifyのImageryサービスでは、お客様のウェブクライアントによってサポートされている最適な画像形式を判断し、最適な形式で画像が自動表示されるようにします。ストアで画像が表示される具体的な方法は、オンラインストアのテーマによって異なりますが、全てのテーマが画像の追加に対応しています。
商品画像およびコレクション画像は、最大5000 x 5000ピクセル、または25メガピクセルまでの任意のサイズにすることができます。商品画像およびコレクション画像のファイルサイズが20MB未満でない場合、Shopifyには追加できません。
写真の解像度を高めると、お客様には洗練された、かつプロフェッショナルな印象を持ってもらえます。たとえば、正方形の商品画像の場合、通常、2048 x 2048ピクセルのサイズが最適です。商品撮影に関する詳細なアドバイスについては、Shopify ブログの「商品の美しい写真に関する優れたDIYガイド」をお読みください。
画像を追加すると、オンラインストアテーマのさまざまなエリアで使用するための、異なるサイズの画像が自動的に作成されます。たとえば、お客様が商品を詳細に見ることができる商品の詳細ページでは、商品画像の大型バージョンを使用することができます。同じ画像のコンパクトバージョンは、より大きな画像が必要でないコレクションテンプレート上で使用されることがあります。
3Dモデル
3次元で物体を仮想的に表現したものが、3次元モデルです。3次元モデルを使用することで、お客様は商品のサイズ、スケール、詳細を把握しやすくなります。
ストアを閲覧しているお客様は、商品ページから3Dの商品モデルを表示できます。モデルはデバイスのカメラと画面を使用して、お客様の環境に商品を表示します。3Dモデルを使用することで、お客様はどの角度からでも商品を確認できます。
3Dモデルのファイルが以下の要件を満たしていることを確認してから、ファイルをオンラインストアに追加することが必要です。
- ファイルサイズ: 最大500MB
- ファイルのタイプ:
GLB、USDZ
15MBを超える3Dモデルファイルをアップロードすると、Shopifyがファイルを最適化します。最適化によりファイルサイズが縮小され、読み込み速度が向上します。
| モデルサイズ | 最適化 | コンバージョン |
|---|---|---|
| 15MB未満 | 3次元モデルは最適化されていません。モデルのジオメトリとマテリアルは変更されません。 | ファイルは、モデルのUSDZ版とGLB版の両方が利用できるように変換されます。変換により、AndroidとiOSの両方のデバイスとの互換性が確保されます。 |
| 15MBより大きい | 3Dモデルは最適化されています。モデルのジオメトリとテクスチャは、元のファイルの視覚的な出力を維持しながら最適化されます。 | ファイルは、モデルのUSDZ版とGLB版の両方が利用できるように変換されます。変換により、AndroidとiOSの両方のデバイスとの互換性が確保されます。 |
ビデオ
商品のビデオを追加するには、ビデオファイルをアップロードするか、YouTubeまたはVimeoのビデオリンクを埋め込むかの2つの方法があります。ビデオファイルをアップロードする場合は、以下の要件を満たしていることを確認してください。
- ビデオの長さ: 最大10分
- ビデオサイズ: 最大1GB
- ビデオ解像度: 最大4K (4096 x 2160ピクセル)
- ビデオファイルのタイプ:
.mp4、または.mov
YouTubeやVimeoの動画を埋め込む際には前述の要件を満たす必要はありません。しかし、YouTubeやVimeo以外のURLはサポートされません。
ストリーミングに対応しているブラウザでは、ビューアの接続速度とアップロードされたビデオの解像度に応じて、ビデオが480p、720p、または1080pのいずれかで表示されます。ストリーミングに対応していないブラウザの場合、ビデオは利用できる最高の解像度で表示されます。
管理画面またはShopifyアプリから、商品の画像、3Dモデル、またはビデオを追加できます。
3Dモデルまたはビデオに対応しているテーマ
テーマはすでに3Dモデルやビデオに対応している可能性があります。テーマが適切なバージョンで更新されていることを確認してください。
以下のShopifyによるテーマでは、オンラインストアでの3Dモデルまたはビデオの表示がサポートされています。
Online Store 2.0のテーマ:
一部のテーマでは更新も行われ、Vimeoの動画再生の体験を向上させました。テーマでVimeoの動画を表示させる場合は、テーマを次のいずれかのバージョンに更新することを検討してください。
ほとんどの外部サービスのテーマには、3Dモデルやビデオが組み込まれた最近のバージョンがあります。外部サービスが開発したテーマを使用する場合は、テーマ開発者にサポートを依頼するか、テーマのヘルプドキュメントを参照してください。
メタフィールドを使用して商品のメディアを追加する
商品のメディアをオンラインストアに表示する方法をカスタマイズするには、メタフィールドを使って、商品用のファイル参照メタフィールドを作成できます。ファイル参照メタフィールドでは、商品を表示するための画像やお客様がダウンロードできるその他すべてのファイルタイプをアップロードすることができます。オンラインストアのメタフィールドに、JPEG、PNG、WEBP、SVG、HEIC、GIFの画像を表示できます。メタフィールドには、一度に1つのファイルのみを保存できます。メタフィールドには、一度に1つのファイルのみを保存できます。
Online Store 2.0のテーマを利用している場合、テーマエディタを使用して、ファイル参照メタフィールドとテーマを連携させることができます。以前のテーマを利用している場合、テーマコードを編集するか、Shopifyパートナーを雇ってサポートを受けることができます。