• Topic 主题 トピック Topic Topic
  • Sign in

推奨される商品画像サイズ

 

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

 

目次

 


 

商品画像

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. 推奨されるサイズを使用しているにもかかわらず、画像が完全に表示されない理由は何ですか?

  • 高さ設定が「画像を自動的にフィット」になっているかどうかを確認してください。もしそうであれば、パララックス効果が有効になっているかどうかを確認してください。切り取りを防ぐために無効にしてください。
他にご質問がございましたら、リクエストを送信してください

コメント