商品画像の最適化と推奨サイズ
画像はオンラインストアのデザインにおいて重要な要素です。高品質な画像を適切に活用し、最適な表示技術を取り入れることで、ストア全体のビジュアルを強化し、間接的にコンバージョン率の向上にもつながります。
この記事では、各モジュールで推奨される画像サイズ と、よくある質問への回答をご紹介します。
商品画像
-
SHOPLINEでは、PCで商品レイアウトを調整できるため、モバイルデバイスでの商品画像の表示に重点を置くことを推奨します。
-
画像のアスペクト比は、以下の4つのオプションから選択できます。
- 正方形（1:1）
- 縦長（2:3）
- 横長（4:3）
- 元のアスペクト比
-
注意：元のアスペクト比を選択すると、すべての画像がオリジナルの寸法で表示されます。一貫したアスペクト比を維持することで、商品リストの見た目を統一し、顧客の閲覧体験を向上させることができます。
| 項目 | 値 | |
| 推奨アスペクト比 | 2:3 | |
| 最小サイズ（モバイルデバイスの幅75%） | 幅：560px | 高さ：840px |
| 推奨サイズ（プロフィールコラージュ） | 幅：1700px | 高さ：2550px |
カテゴリカバー
SHOPLINE管理画面から 商品 > カテゴリ に進み、編集するカテゴリを選択します。カテゴリ編集ページの画面右側にあるカテゴリカバーセクションで、カバー画像をアップロードできます。
| 項目 | 値 |
| 推奨アスペクト比 | 1:1 |
| 推奨サイズ | ≥1600px |
カテゴリバナー
SHOPLINE管理画面から 商品 > カテゴリ に進み、編集するカテゴリを選択します。カテゴリ編集ページの画面右側にあるカテゴリバナーセクションで、バナー画像をアップロードできます。
画面の幅が変わると、画像の幅はスケーリングされますが、高さは固定されるため、一部の画像が切り取られる場合があります。適切な表示を維持するために、重要な要素が中央に配置される画像を使用することを推奨します。
| 項目 | 幅 | 高さ |
| 推奨サイズ | 1920px | 420px |
スライドショー
SHOPLINEでは、PC版とモバイル版の画像を別々に設定できるため、デバイスごとの最適な表示効果に合わせた素材をアップロードできます。
|
注： 高さを固定すると、画像の一部がクロッピングされる可能性があります。また、高さ設定を「画像の自動調整」にしている場合でも、視差効果が有効になっているとクロッピングが発生することがあります。 画像のクロッピングを避けたい場合は、SHOPLINEが 最初の画像のサイズに適応する設定を選択し、視差スクロール効果を無効にすることを推奨しています。 |
| 項目 | 値 | |
| PC版の推奨アスペクト比 | 3：1 | |
| 推奨サイズ | 幅：1920px | 高さ：650px |
| 項目 | 値 | |
| モバイル版の推奨アスペクト比 | 1：2 | |
| 推奨サイズ | 幅：375px | 高さ：500px |
分割スライドショー
分割スライドショープラグインは、Expect、Soo、Metal、Flexible、Control などのテンプレートで、画像とテキストをブラウザウィンドウのサイズに応じてリサイズできる機能を提供しています。
注意事項
PC版の画像をアップロードする際は、異なるPC環境で画像がクロッピングされる可能性があるため、主要な要素はマージンから離して配置することを推奨します。
モバイル版の画像をアップロードする際は、スライドショーのテキストが画像に重なる仕様になっているため、主要な要素がテキストに覆われないよう、スライドショーの下部に十分なスペースを確保 してください。
| デバイス | 高さ設定 | 幅 | 高さ |
| PC版の推奨サイズ | フルスクリーン | 1220px | 1080px |
| 特定の値に設定 | 1152px | 適応値に設定 | |
| モバイル版の推奨サイズ | フルスクリーン | 1125px | 1125px |
| 特定の値に設定 | 750px | 2倍の適応値に設定 |
単一画像
単一画像はデフォルトで固定の高さに設定されており、表示エリアによっては画像が切り取られる可能性があります。画像の切り取りを防ぐには、表示エリアを調整するか、画像の高さを [画像の自動調整] に設定してください。
|
注： ソース画像の高さは、設定された切り取り高さよりも十分に大きいサイズを推奨します。高さが不足している場合、画像が拡大されて画質が劣化し、ぼやけて見える可能性があります。 |
| デバイス | 値 | |
| PC版の推奨アスペクト比 | 16:9 | |
| PC版の推奨サイズ | 幅：1920px | 高さ：1080px |
| モバイル版の推奨サイズ | 幅：750px | 高さ：1020px |
画像付きテキスト列
| 項目 | 値 | |
| 推奨アスペクト比 | 4:3（この比率は推奨であり、元のアスペクト比を適用することもできます） | |
| 推奨サイズ | 幅：650px | 高さ：488px |
ページプロモーション画像
| 項目 | 値 | |
| 推奨アスペクト比 | 16:9（設定可能） | |
| 推奨サイズ | 幅：650px | 高さ：488px |
その他のパーツの推奨サイズ
| パーツ名 | 推奨サイズ | 適用可能なテーマ |
| ロゴリスト | 144px * 144px | Edges/Cycle/Carfit |
| コメントテンプレート | 240px * 240px | Edges/Cycle/Carfit |
| テキストと画像のグリッド | レイアウトによってサイズが異なります。推奨幅は1420px以上です。 | Edges/Cycle/Carfit |
| 特別推薦 | レイアウトによってサイズが異なります。推奨幅は1420px以上です。 | Edges/Cycle/Carfit/Barn |
| ショップ可能な画像 > 設定 | レイアウトによってサイズが異なります。推奨幅は1420px以上です。 | Edges/Cycle/Carfit |
| ロゴリスト | 320px * 320px | Expect/Control/Metal/Soo/Flexible |
| キャンペーン画像 |
カテゴリ：推奨幅は1600px以上 バナー：幅は400px以上 |
Expect/Control/Metal/Soo/Flexible |
| 画像とテキスト | 画像は高さに合わせて適応します。推奨サイズは1000px * 1000pxです。 | すべてのテンプレート |
チェックアウトバナー画像サイズ
| バナー画像として画像をアップロード | トップバナー画像 | 左側バナー画像 | 右側バナー画像 |
| 1920px * 200px | 1048px * 1048px | 872px * 1048px |
|
注：
|
よくある質問
画像が切り取られる理由は何ですか？
画像が意図せず切り取られるのは、使用するモジュールの仕様や設定によるものです。以下の要因を確認してください。
単一画像モジュール（固定高さ）
さまざまな画面サイズに適応するため、モジュールの高さが固定されます。これにより、コンテンツの読みやすさは確保されますが、画像が元のアスペクト比で表示されないことがあります。
スライドショーモジュール
高さが固定されている場合、異なる画面幅でも高さは変わらず、アスペクト比が調整されるため、画像の一部が切り取られることがあります。
固定アスペクト比のモジュール
モジュールが固定アスペクト比を採用している場合、自動的に画像の切り取りが発生します。画像表示エリアを設定していない場合、デフォルトで中央部分が表示されます。
レスポンシブ画像処理
スライドショーや単一画像など、多くのテーマモジュールではレスポンシブ画像処理が採用されています。この技術では、PCとモバイルで統一された表示を実現するため、広い画像をズームして切り取り、表示エリアを完全にカバーするように調整します。画像は引き伸ばされることなくスケーリングされますが、一部がトリミングされることがあります。
画像が自動的にフィット設定されているにもかかわらず、画像が切り取られているのはなぜですか？
パララックススクロール効果が有効になっている可能性があります。パララックス効果を適用するために、画像が表示エリアよりも大きなサイズに自動ズームされ、切り取りが発生します。
推奨サイズを使用しているにもかかわらず、画像が完全に表示されない理由は何ですか？
高さ設定が「画像を自動的にフィット」になっているかどうかを確認してください。
この設定が有効である場合、パララックス効果が適用されているかどうかをチェックし、不要であれば無効にすることで切り取りを防ぐことができます。