目を引くビジュアルは、オンラインストアの成功に重要な役割を果たします。高品質な画像と戦略的な表示技術を組み合わせることで、ストアのデザインを向上させ、最終的に転換率を向上させることができます。このガイドでは、さまざまなモジュールやコンポーネントに推奨される画像サイズと、画像のアップロードに関する一般的な質問に対する回答を提供しています。
目次
重要なストアコンポーネントの画像サイズ
商品画像
画像のアップロード場所: SHOPLINE管理パネルの商品セクションに移動します。画像を追加したい特定の商品を選択し、画像/動画モジュールに進み、画像を追加（またはドラッグアンドドロップ）をクリックしてアップロードします。
商品画像のレイアウトはPC版で調整可能ですが、SHOPLINEはモバイルデバイス向けに商品画像の表示を最適化することをお勧めしています。選択できる画像スケールは、正方形（1:1）、縦長（2:3）、横長（4:3）、オリジナルの4つです。製品の形に最も適したものを選択してください。
| 推奨アスペクト比 | 2:3 | |
|
最小サイズ (モバイルデバイスでの幅の75％) |
|
|
|
推奨サイズ (詳細ページの画像) |
|
|
| 注意: すべての商品画像で一貫したスケールを維持し、製品の高さにばらつきが生じないようにすることがお勧めされます。これは、ユーザーの閲覧体験に影響を与える可能性があるためです。 |
コレクションカバー
画像のアップロード場所: SHOPLINE管理パネルの商品 > カテゴリにアクセスします。特定のコレクションにカバーを追加したい場合は、コレクションカバーセクションに移動して画像をアップロードします。
| 推奨アスペクト比 | 1:1 |
| 推奨サイズ | ≥ 1600ピクセル |
カテゴリ バナー
画像をアップロードする場所: SHOPLINE管理パネルの商品 > カテゴリ にアクセスします。バナーを追加したいカテゴリを選択します。画像をアップロードするには、カテゴリバナー セクションを見つけます。
| 推奨サイズ |
|
|
| 注意: 画像の幅は画面幅によって異なり、高さは固定されているため、画像が切り取られる可能性があります。 |
スライドショー
画像をアップロードする場所: SHOPLINE管理パネルのオンラインストア セクションにアクセスします。編集したいテーマを選択し、デザイン をクリックします。テーマエディターで、画像をアップロードするための スライドショー コンポーネントを見つけます。
スライドショー画像について、SHOPLINEはPC版とモバイル版で別々の画像設定をサポートしており、表示効果に基づいて素材をアップロードできます。
| 推奨アスペクト比（PC版用） | 3:1 | |
| 推奨サイズ（PC版用） |
|
|
| 推奨アスペクト比（モバイル版用） | 1:2 | |
| 推奨サイズ（モバイル版用） |
|
|
| 注意: 画像の切り取りを避けるためには、画像の高さに 最初の画像に合わせる を選択し、パララックススクロールを無効にすることを推奨します。 |
分割スライドショー
画像をアップロードする場所: SHOPLINE管理パネルのオンラインストア セクションにアクセスします。この機能をサポートし、編集したいテーマを選択します。 デザイン をクリックします。テーマエディターで、画像をアップロードするための 分割スライドショー コンポーネントを見つけます。
| 注意: 分割スライドショー コンポーネントは、Expect、Soo、Metal、Flexible、Control テーマ専用で、画像とテキストをブラウザサイズに合わせるサポートをしています。 |
| PCバージョンの推奨サイズ（高さはフルスクリーンに設定） |
|
||
| PCバージョンの推奨サイズ（高さを特定の値に設定） |
|
| モバイルバージョンの推奨サイズ（高さはフルスクリーンに設定） |
|
||
| モバイルバージョンの推奨サイズ（高さを特定の値に設定） |
|
注意:
|
大きな画像とテキストボックス
画像のアップロード先: SHOPLINE管理パネルのオンラインストアセクションからテーマエディタにアクセスします。編集したいテーマを選択し、デザインをクリックします。テーマエディタで、画像をアップロードするための大きな画像とテキストボックスコンポーネントを見つけます。
| 推奨アスペクト比（PCバージョン用） | 16:9 | |
| 推奨サイズ |
|
|
| 推奨サイズ（モバイルバージョン用） |
|
|
注意:
|
画像とテキストを含むテキスト列
画像のアップロード場所：SHOPLINE管理パネルのオンラインストアセクションからテーマエディタにアクセスします。編集したいテーマを選択し、デザインをクリックします。テーマエディタで、画像のアップロードには画像付きテキスト列コンポーネントを見つけます。
| 推奨アスペクト比 | 4:3（元のアスペクト比が適用され、この比率は単なる推奨です。） | |
| 推奨サイズ |
|
|
ブログ
画像のアップロード場所：SHOPLINE管理パネルのオンラインストアセクションからテーマエディタにアクセスします。編集したいテーマを選択し、デザインをクリックします。テーマエディタで、画像のアップロードにはブログコンポーネントを見つけます。
| 推奨アスペクト比 | 4:3（設定可能） | |
| 推奨サイズ |
|
|
フッタープロモーション
画像のアップロード場所：SHOPLINE管理パネルのオンラインストアセクションからテーマエディタにアクセスします。編集したいテーマを選択し、デザインをクリックします。テーマエディタで、画像のアップロードにはフッタープロモーションコンポーネントを見つけます。
| 推奨アスペクト比 | 16:9（設定可能） | |
| 推奨サイズ |
|
|
人気のテーマコンポーネントの画像サイズ
画像のアップロード場所：SHOPLINE管理パネルのオンラインストアセクションからテーマエディタにアクセスします。編集したいテーマを選択し、デザインをクリックします。
| 注意：特定のコンポーネントは特定のテーマにのみ適用されます。サポートされるテーマについては適用可能なテーマ列を参照してください。 |
| コンポーネント名 | 推奨サイズ | 適用可能なテーマ |
| ロゴリスト | 144 px * 144 px |
Edges/Cycle/Carfit/Feeling/Extent/Shine/Wink/Blouse/ Barn/Brooklyn/Soo/Flexible/Control/Solid/Along/Expect/ Bobo/Bloom/Impress |
| お客様の声 | 240 px * 240 px | Edges/Cycle/Carfit/Solid |
| テキストと画像のグリッド | レイアウトによって異なります。推奨幅は1,420ピクセル以上です。 | Edges/Cycle/Carfit/Barn |
| 特別推薦 | レイアウトによって異なります。推奨幅は1,420ピクセル以上です。 | Edges/Cycle/Carfit/Barn |
| ショップ可能な画像 | レイアウトによって異なります。推奨幅は1,420ピクセル以上です。 | Edges/Cycle/Carfit/Charm/Shine/Solid |
| ロゴリスト | 320 px * 320 px |
Expect/Control/Metal/Soo/Flexible/Barn/Cycle/Carfit/Soo/ Edges/Bobo |
| プロモーション |
コレクション: 推奨幅は1,600ピクセル以上 バナー画像: 推奨幅は400ピクセル以上 |
Expect/Control/Metal/Soo/Flexible/Edges/Bloom |
| 画像とテキスト | 画像の高さは適応されます。推奨サイズは1,000 px * 1,000 pxです。 | すべてのテンプレート |
ユニークなテーマコンポーネントの画像サイズ
| コンポーネント名 | 推奨サイズ | 適用可能なテーマ |
| テーマ設定内のウェブサイトロゴ | 28 px * 28 px | すべてのテーマ |
| カバー付きおすすめ商品 | 472 px * 330 px | Barn |
| メディアのスプライシング | 854 px * 1232 px | Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges |
| 動画 | 1920 px * 800 px | すべてのテーマ |
| アコーディオンラベル | 470 px * 470 px | Seed/Charm |
| 画像バナー |
960 px * 650 px 1920 px * 650 px |
Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges |
| オファーバナー | 180 px * 180 px | Barn |
| おすすめ商品 | 470 px * 760 px | Charm |
| グラフィックステッチングモジュール | 600 px * 700 px | Charm |
| ホバー時の画像切り替え | 800 px * 800 px | Charm |
| グラフィックナビゲーション | 160 px * 160 px | Flash |
| グラフィックカルーセル | 339 px * 246 px | Blouse |
| 画像ステッチング | 700 px * 700 px | Flash |
| 動画グラフィックステンプレート | 710 px * 400 px | Feeling/Extent/Shine/Wink/Blouse/Edges |
| モバイルデバイス上のフッターメニュー | 120 px * 120 px | Flash |
| タイムライン | 500 px * 500 px | Feeling/Extent/Shine/Wink/Blouse/Edges/Solid |
| 地図 | 710 px * 528 px | Feeling/Extent/Shine/Wink/Arise/Blouse/Barn/Brooklyn/Flexible/ Control/edges/Solid/Along/Expect/Bobo/Bloom/Impress |
| マルチレベルフィルター | 1920 px * 650 px | Cycle/Carfit/Edges |
チェックアウトページ：背景画像の推奨事項
画像のアップロード先： SHOPLINE管理パネルのオンラインストアセクションからテーマエディタにアクセスします。編集したいテーマを選択し、デザインをクリックします。テーマエディタで、ページセレクタを使用してチェックアウトページに切り替えます。左側のナビゲーションメニューにあるパレットアイコンをクリックし、コンテンツセクションに移動して画像をアップロードします。
| 注意： チェックアウトページへの画像アップロードコンポーネントは、SHOPLINEのエンタープライズプランのサブスクライバー専用です。 |
| 背景画像として画像をアップロード | トップバナー画像 | 左側の背景画像 | 右側の背景画像 |
| 1920 px * 200 px | 1048 px * 1048 px | 872 px * 1048 px |
デモ画像：
|
背景テクスチャを背景画像として使用 |
システムは、アップロードした画像を自動的に水平および垂直方向にコピーして重ねます。そのため、画像サイズに制限はありません。エディタで効果をテストして画像を調整できます。 |
デモ画像：
パフォーマンス向上のための画像アップロードのヒント
- 画質を最大限に活用： 詳細を保持し、リサイズしても情報が失われないように、可能な限り大きな生の画像をアップロードします。
- 高速化のために最適化： より速い読み込み時間のために.jpgを.pngより選択します。テーマは効率的なページビューのために画像を自動的にリサイズします。
画像アップロードに関するよくある質問
Q1: なぜ一部の画像が切り取られているのですか？
テーマは、異なる画面幅やデバイスに合わせて画像サイズを調整することがあります。これにより、特に高さやアスペクト比が固定されたモジュールでは切り取りが発生することがあります。切り取りの理由は以下の通りです：
- 固定の高さを持つコンポーネント: テキストが読みやすい状態を保つために、「テキストボックス付き大画像」と「スライドショー」などの一部のコンポーネントは、デフォルトの固定高さを持っており、画像の寸法と一致しない場合があります。
- 固定アスペクト比を持つコンポーネント: 固定アスペクト比: コンポーネントが固定アスペクト比を採用している場合、自動的にクロップが行われます。画像表示領域が設定されていない場合、画像はデフォルトで中央にクロップされます。
- レスポンシブ画像処理: 「テキストボックス付き大画像」と「スライドショー」などの多くのテーマコンポーネントは、レスポンシブ画像処理を使用しています。この技術は、幅の広い画像をズームしてクロップし、PCとモバイルデバイスの両方で一貫した表示を確保します。画像は表示領域を完全にカバーするように拡大され、写真を伸縮させたり歪ませたりすることなくスケーリングが可能になります。
レスポンシブ処理前の商品表示
レスポンシブ処理後の商品表示
Q2: 「画像を自動調整」を選択しても画像がクロップされる理由は何ですか？
パララックススクロール効果が有効になっている場合、画像はまだクロップされる可能性があります。パララックス効果を維持するために、画像は表示領域を超えると自動的にズームおよびクロップされます。
Q3: 推奨サイズを使用しても画像が完全に表示されない場合はどうすればよいですか？
推奨サイズを使用しても画像が完全に表示されない場合は、次の2つの設定を確認してください:
- 画像表示領域: 特定のコンポーネントには、画像表示領域を調整する設定があり、画像を誤って制限する可能性があります。この設定では自動を選択していることを確認してください。
- パララックススクロール: 一部のテーマでは、背景画像を拡大表示する「パララックススクロール」効果を使用しており、クロップが発生します。この効果が必要ない場合は、テーマ設定で無効にしてください。
コメント