OSテーマ2.1における画像サイズガイド
目を引くビジュアルは、オンラインストアの成功において重要な役割を果たします。高品質な画像と戦略的な表示技術を組み合わせることで、ストアのデザインと顧客の印象を向上させることができます。このガイドでは、さまざまなモジュールやパーツに推奨される画像サイズと、画像アップロードに関するよくある質問への回答を提供します。
エッセンシャルなストアパーツの画像サイズ
商品画像
画像のアップロード場所: SHOPLINE管理画面の商品セクションに移動します。画像を追加したい特定の商品を選択し、画像/動画モジュールに進み、画像を追加（またはドラッグ＆ドロップ）をクリックしてアップロードします。
商品画像のレイアウトはPC版で調整可能なため、SHOPLINEではモバイルデバイスでの商品画像の表示最適化に注力することを推奨しています。選択可能な画像の比率は4種類あり、正方形（1:1）、縦長（2:3）、横長（4:3）、およびオリジナルです。商品形状に最も適したものを選んでください。
| 推奨アスペクト比 | 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 | Selected 2.1 テーマ |
| お客様の声 | 240 px * 240 px | Selected 2.1 テーマ |
| テキストと画像のグリッド | レイアウトによってサイズは異なります。推奨幅は1,420ピクセル以上です。 | Selected 2.1 テーマ |
| 特別おすすめ | レイアウトによってサイズは異なります。推奨幅は1,420ピクセル以上です。 | Selected 2.1 テーマ |
| ショッピング画像 | レイアウトによってサイズは異なります。推奨幅は1,420ピクセル以上です。 | Selected 2.1 テーマ |
| 商標リスト | 320 px * 320 px | Selected 2.1 テーマ |
| プロモーション |
カテゴリ：推奨幅1,600ピクセル以上 バナー画像：推奨幅400ピクセル以上 |
Selected 2.1 テーマ |
| テキスト付き画像 | 画像の高さは調整されます。推奨サイズは1,000 px * 1,000 pxです。 | すべてのテーマ |
ユニークテーマパーツの画像サイズ
| パーツ名 | 推奨サイズ | 適用テーマ |
| テーマ設定のウェブサイトロゴ | 28 px * 28 px | すべてのテーマ |
| カバー付きの注目商品 | 472 px * 330 px | 選択された2.1テーマ |
| メディアスプライシング | 854 px * 1232 px | 選択された2.1テーマ |
| 動画 | 1920 px * 800 px | すべてのテーマ |
| アコーディオンラベル | 470 px * 470 px | 選択された2.1テーマ |
| 画像バナー |
960 px * 650 px 1920 px * 650 px |
選択された2.1テーマ |
| オファーバナー | 180 px * 180 px | 選択された2.1テーマ |
| 注目商品 | 470 px * 760 px | 選択された2.1テーマ |
| グラフィックステッチモジュール | 600 px * 700 px | 選択された2.1テーマ |
| ホバー時の画像切り替え | 800 px * 800 px | 選択された2.1テーマ |
| グラフィックナビゲーション | 160 px * 160 px | 選択された2.1テーマ |
| グラフィックカルーセル | 339 px * 246 px | 選択された2.1テーマ |
| 画像ステッチ | 700 px * 700 px | 選択された2.1テーマ |
| 動画グラフィックステンプレート | 710 px * 400 px | 選択された2.1テーマ |
| モバイルのフッターメニュー | 120 px * 120 px | 選択された2.1テーマ |
| タイムライン | 500 px * 500 px | 選択された2.1テーマ |
| 地図 | 710 px * 528 px | 選択された2.1テーマ |
| マルチレベルフィルタ | 1920 px * 650 px | 選択された2.1テーマ |
チェックアウトページ：背景画像の推奨事項
画像のアップロード場所：SHOPLINE管理画面のオンラインストアセクションからテーマエディターにアクセスします。編集したいテーマを選択し、デザインをクリックします。テーマエディターでページセレクターを使い、チェックアウトページに切り替えます。左のナビゲーションメニューのカラーチップアイコンをクリックし、コンテンツセクションに移動して画像をアップロードします。
| 注：チェックアウトページへの画像アップロード用パーツは、SHOPLINEのエンタープライズプランの購読者のみ利用可能です。 |
| 背景画像としてアップロードする画像 | トップバナー画像 | 左背景画像 | 右背景画像 |
| 1920 px * 200 px | 1048 px * 1048 px | 872 px * 1048 px |
デモ画像：
| 背景画像として背景テクスチャを使用する | システムはアップロードした画像を左右および上下方向に自動的にコピーして重ねます。そのため、画像サイズに制限はありません。エディターで効果を試し、画像を調整できます。 |
デモ画像：
パフォーマンス向上のための画像アップロードのヒント
- 画像品質を最大化する：詳細を保持し、リサイズ時の劣化を防ぐために、できるだけ大きな元画像をアップロードしてください。
- 速度を最適化する：読み込み時間を短縮するために、.pngよりも.jpgを選択してください。テーマは効率的なページ表示のために自動的に画像をリサイズします。
画像アップロードに関するよくある質問
Q1: なぜ一部の画像がトリミングされるのですか？
テーマは、異なる画面幅やデバイスに合わせて画像サイズを調整することがあります。これにより、特に高さやアスペクト比が固定されたモジュールでトリミングが発生することがあります。トリミングが起こる理由は以下の通りです：
- 高さが固定されたパーツ：テキストの読みやすさを確保するために、「テキストボックス付き大きな画像」や「スライドショー」などの一部パーツはデフォルトで高さが固定されており、画像の寸法と一致しない場合があります。
- アスペクト比が固定されたパーツ：アスペクト比が固定されているパーツでは、自動的にトリミングが行われます。画像表示エリアが設定されていない場合、画像はデフォルトで中央を基準にトリミングされます。
- レスポンシブ画像処理：「テキストボックス付き大きな画像」や「スライドショー」など、多くのテーマパーツはレスポンシブ画像処理を使用しています。この技術は、PCとモバイルの両方で一貫した表示を確保するために、横長の画像をズームおよびトリミングします。画像は表示エリアを完全にカバーするように拡大され、写真の伸びや歪みなくスケーリングが可能です。
レスポンシブ処理前の商品表示
レスポンシブ処理後の商品表示
Q2: 「画像を自動調整」にしているのに、なぜ画像がまだトリミングされるのですか？
パララックススクロール効果が有効になっている場合、画像は依然としてトリミングされることがあります。パララックス効果を維持するために、画像のサイズが表示エリアを超えると自動的にズームおよびトリミングされます。
Q3: 推奨サイズを使用しているのに画像が完全に表示されない場合はどうすればよいですか？
推奨サイズを使用しているにもかかわらず画像が完全に表示されない場合は、以下の2つの設定を確認してください：
- 画像表示エリア：一部のパーツには画像表示エリアを調整する設定があり、これが画像を意図せず制限している可能性があります。この設定で自動を選択していることを確認してください。
- パララックススクロール：一部のテーマでは背景画像をズームする「パララックススクロール」効果があり、これがトリミングの原因となります。この効果が不要な場合は、テーマ設定で無効にしてください。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。