商品の画像サイズの最適化

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

 

---

 

商品画像

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

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

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

 

---

 

カテゴリカバー

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

 

---

 

カテゴリバナー

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

 

---

 

スライドショー

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

 

---

 

分割スライドショー

分割スライドショーアプリは、Expect、Soo、Metal、Flexible、Controlなどのテンプレートで、画像とテキストをブラウザウィンドウに合わせてリサイズすることをサポートしています。注意：PC版用の画像をアップロードする際、異なるPCで切り取りが発生する可能性があるため、主要な要素をマージンから離しておくことに注意してください。モバイル版用の画像をアップロードする際、スライドショーのテキストが画像の上に重なるため、主要な要素が隠れないようにスライドショーの下にスペースを確保してください。

 

---

 

単一画像

単一画像はデフォルトで固定高さになり、切り取られる可能性があります。焦点となる要素が切り取られないように、画像表示エリアを選択するか、画像の高さを「画像を自動調整」に設定することができます。

---

画像付きテキストカラム

---

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

---

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

---

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

---

よくある質問

1. なぜ画像が切り取られるのですか？

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

2. 画像が自動フィットに設定されているのに、なぜまだトリミングされるのですか？

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

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

• 高さ設定が「自動フィット画像」になっているか確認してください。そうであれば、パララックス効果が有効になっているか確認してください。トリミングを防ぐために無効にしてください。