画像はオンラインストアデザインの重要な要素です。高品質な画像を取り入れ、適切な表示技術を用いることで、ストア全体のデザインを向上させ、転換率を間接的に向上させることができます。この記事では、異なるモジュールで使用する理想的な画像サイズに関する推奨事項と、よくある質問に対する回答を提供しています。
目次
- 商品画像
- カテゴリカバー
- カテゴリバナー
- スライドショー
- 分割スライドショー
- 単一画像
- 画像付きテキストカラム
- ページプロモーション画像
- その他コンポーネントの推奨サイズ
- チェックアウトバナー画像サイズ
- よくある質問
商品画像
1. SHOPLINEは、商品画像の表示にモバイルデバイスを重点的に考慮することをお勧めします。PCでは商品レイアウトを調整できます。
2. SHOPLINEでは、正方形（1:1）、縦長（2:3）、横長（4:3）、元のアスペクト比の4つのオプションを提供しています。お好みのものを選択できます。
3. 注意： 元のアスペクト比を選択した場合、すべての画像が元の寸法で表示されます。すべての商品画像で一貫したアスペクト比を維持し、リストでの一貫した外観を確保し、全体的なユーザーエクスペリエンスを向上させることが推奨されます。
| 推奨アスペクト比 | 2:3 | |
| 最小サイズ（モバイルデバイスの幅75%） | 560px 幅 | 840px 高さ |
| 推奨サイズ（プロフィールコラージュ） | 1700px 幅 | 2550px 高さ |
カテゴリカバー
カテゴリカバーは、SHOPLINE管理 > 商品 > カテゴリでアップロードできます。
| 推奨アスペクト比 | 1:1 |
| 推奨サイズ | ≥1600px |
カテゴリ バナー
カテゴリバナー画像は、SHOPLINE管理 > 商品 > カテゴリでアップロードできます。画面幅が変更されると、画像の幅がスケーリングされ、画像の高さは固定されるため、画像が切り取られることがあります。
| 推奨サイズ | 幅1920px | 高さ420px |
カテゴリ バナー
カテゴリバナー画像は、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 | |
| 推奨サイズ | 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 |
|
注意事項: 1. 最適な表示効果のために、できるだけ大きなサイズの画像をアップロードしてください。 2. 画像はPNGよりもJPG形式が推奨され、より速い読み込みのためです。画像はテーマに応じて読み込み時に適切な寸法に自動的にリサイズされ、ウェブサイトの読み込み速度を確保します。 |
よくある質問
1. 画像が切り取られる理由は何ですか？
- 単一画像用の固定高さモジュール：さまざまな画面幅やモバイルデバイスに適応するため、コンテンツの読みやすさを確保するために、モジュールの高さはデフォルトで固定されており、画像が元のアスペクト比で表示されないことがあります。
- スライドショーモジュール：高さが固定されている場合、画像の高さは異なる画面幅でも変わらず、アスペクト比が変更され、画像が切り取られます。
- 固定アスペクト比のモジュール：モジュールが固定アスペクト比を採用している場合、自動的に切り取りが行われます。画像表示領域が設定されていない場合、画像はデフォルトで中央に切り取られます。
- レスポンシブ画像処理：多くのテーマモジュール（スライドショー、単一画像など）でレスポンシブ画像処理が使用されています。レスポンシブ画像は、PCとモバイルデバイスで同じように画像を表示するための業界標準の技術です。写真は表示領域を完全にカバーするまで拡大され、写真を伸縮させずに歪ませることなくスケーリングが可能になります。
2. 画像が自動的にフィット設定されているにもかかわらず、なぜ画像が切り取られているのですか？
- パララックススクロール効果が有効になっている可能性があります。画像はパララックス効果を確保するために、表示領域よりも大きなサイズに自動的に拡大されるため、切り取りが発生します。
3. 推奨されるサイズを使用しているにもかかわらず、画像が完全に表示されない理由は何ですか？
- 高さ設定が「画像を自動的にフィット」になっているかどうかを確認してください。もしそうであれば、パララックス効果が有効になっているかどうかを確認してください。切り取りを防ぐために無効にしてください。
コメント