商品画像の最適なサイズ設定

画像はオンラインストアのデザインにおいて重要なパーツです。高品質な画像を取り入れ、適切な表示技術を用いることで、ストア全体のデザインを向上させ、間接的にコンバージョン率を高めることができます。この記事では、さまざまなモジュールで使用する理想的な画像サイズの推奨事項と、よくある質問への回答を提供します。

商品画像

1. SHOPLINEでは、PCでは商品レイアウトを調整できるため、モバイルデバイスでの商品画像の表示に注力することを推奨しています。

2. SHOPLINEは4つのアスペクト比オプションを提供しています：正方形（1:1）、縦長（2:3）、左右（4:3）、および元のアスペクト比。商品に合ったものを選択できます。

注意：元のアスペクト比を選択した場合、すべての画像は元の寸法で表示されます。リスト内での統一感を保ち、全体的な顧客体験を向上させるために、すべての商品画像で一貫したアスペクト比を維持することを推奨します。

カテゴリカバー

カテゴリカバーは、SHOPLINE管理画面 > 商品 > カテゴリでアップロードできます。

カテゴリバナー

カテゴリバナー画像は、SHOPLINE管理画面 > 商品 > カテゴリでアップロードできます。画面幅が変わると、画像の幅はスケールされますが、高さは固定されるため、画像が切り取られることがあります。

スライドショー

SHOPLINEはPC版とモバイル版で別々の画像設定をサポートしており、表示効果に基づいて素材をアップロードできます。

ユニークスライドショー

ユニークスライドショーアプリは、Expect、Soo、Metal、Flexible、Controlなどのテンプレートで、ブラウザウィンドウに合わせて画像とテキストのサイズ変更をサポートしています。注意事項: PC版用の画像をアップロードする際、異なるPCでトリミングが発生することがあるため、主要なパーツは利益率から離して配置するようご注意ください。モバイル版用の画像をアップロードする際は、スライドショーのテキストが画像の上に重なるため、主要なパーツが隠れないようスライドショーの下にスペースを確保してください。

単一の画像

単一の画像はデフォルトで固定高さに設定され、トリミングされることがあります。画像の焦点となるパーツがトリミングされるのを防ぐには、画像の表示エリアを選択するか、画像の高さを「画像に自動フィット」に設定してください。

画像付きテキスト列

ページプロモーション画像

その他のパーツの推奨サイズ

チェックアウトバナー画像サイズ

よくある質問

1. なぜ画像がトリミングされるのですか？

• 単一画像用の固定高さモジュール：さまざまな画面幅やモバイルデバイスに対応するため、モジュールの高さはデフォルトで固定されており、コンテンツの読みやすさを確保します。そのため、画像が元のアスペクト比で表示されないことがあります。
• スライドショーモジュール：高さが固定されている場合、異なる画面幅でも画像の高さは変わらず、アスペクト比が変わり画像がトリミングされます。
• 固定アスペクト比のモジュール：モジュールが固定アスペクト比を採用している場合、自動的にトリミングが行われます。画像表示エリアが設定されていない場合、画像はデフォルトで中央を基準にトリミングされます。
• レスポンシブ画像処理：多くのテーマモジュール（スライドショー、単一画像など）でレスポンシブ画像処理が使用されています。レスポンシブ画像は、PCとモバイルデバイスで同じように画像を表示するために、広い画像をズームおよびトリミングする業界標準の技術です。写真は表示エリアを完全に覆うまで拡大され、写真の伸びや歪みなくスケーリングが可能です。

2. 画像を自動調整に設定してもなぜまだトリミングされるのですか？

• パララックススクロール効果が有効になっている可能性があります。パララックス効果を確保するために、画像は表示エリアより大きく自動的にズームされるため、トリミングが発生します。

3. 推奨サイズを使用しているのに画像が完全に表示されないのはなぜですか？

• 高さ設定が「自動調整画像」になっているか確認してください。なっている場合は、パララックス効果が有効かどうかを確認し、無効にするとトリミングを防げます。