画像サイズのガイド
魅力的なビジュアルは、オンラインストアの成功に欠かせない重要な要素です。高品質な画像と戦略的な表示方法を組み合わせることで、ストアのデザインや顧客の印象を大きく向上させることができます。
この記事では、さまざまなモジュールやパーツに推奨される画像サイズを紹介し、画像アップロードに関するよくある質問にお答えします。
ストアの主要パーツに適した画像サイズ
商品画像
画像のアップロード先：
SHOPLINEの管理画面から、商品ページ移動します。画像を追加したい特定の商品を選択し、画像/動画モジュールに進み、「画像を追加（またはドラッグアンドドロップ）」をクリックしてアップロードします。
商品画像のレイアウトはPC版で調整可能ですので、SHOPLINEはモバイルデバイス向けの商品画像の表示を最適化することをお勧めしています。選択できる画像比率は、正方形（1:1）、縦長（2:3）、横長（4:3）、オリジナルの4つです。商品の形状に最も適したものを選択してください。
| 推奨アスペクト比 | 2:3 | |
| 最小サイズ（モバイルデバイスでの幅の75%） |
|
|
| 推奨サイズ（詳細ページの画像） |
|
|
|
注： すべての商品画像で比率を統一することを推奨します。一貫性を保つことで、商品の高さにばらつきが生じるのを防ぎ、顧客の閲覧体験を損なうことがありません。 |
カテゴリカバー
画像のアップロード先：
SHOPLINE管理画面の 商品 ＞ カテゴリ に進みます。カバー画像を追加したい特定のカテゴリを選択し、「カテゴリカバー」セクションで画像をアップロードしてください。
| 推奨アスペクト比 | 1:1 |
| 推奨サイズ | ≥ 1600ピクセル |
カテゴリバナー
画像のアップロード先：
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 |
デモ画像：
|
背景テクスチャを背景画像として使用 |
システムは、アップロードした画像を水平および垂直方向に自動的にコピーおよびスタックします。したがって、画像サイズに制限はありません。エディタで効果をテストし、画像を調整できます。 |
デモ画像：
パフォーマンスを向上させるための画像アップロードのヒント
- 高画質を保つ：元のディテールを損なわないよう、可能な限り大きな元画像をアップロードしてください。これにより、リサイズ時も画質の低下を防げます。
- 読み込み速度を最適化：ページの読み込みを速くするため、画像形式は .png よりも .jpg を選択しましょう。テーマは画像を自動的にリサイズして、効率的な表示をサポートします。
よくある質問
一部の画像が切り取られるのはなぜですか？
テーマでは、異なる画面幅やデバイスに対応するため、画像サイズが調整されることがあります。このため、特に高さやアスペクト比が固定されたモジュールでは、画像が切り取られる場合があります。以下は切り取りの主な原因です：
- 高さが固定されたパーツ：「大画像とテキストボックス」や「スライドショー」など、一部のパーツは、テキストの読みやすさを保つために高さが固定されています。このため、画像の寸法と一致しない場合に切り取られることがあります。
- アスペクト比が固定されたパーツ：固定されたアスペクト比を採用しているパーツでは、自動的に中央を基準に切り取られます。画像表示エリアが設定されていない場合、デフォルトで中央部分が表示されます。
-
レスポンシブ画像処理：
「大画像とテキストボックス」や「スライドショー」など、多くのテーマパーツではレスポンシブ画像処理を使用しています。この技術では、PCやモバイルデバイスの画面に合わせて画像をズーム・切り取りし、表示エリアを完全にカバーします。これにより、画像が引き伸ばされたり歪んだりすることなくスケーリングが可能です。
レスポンシブ処理前の表示例：
レスポンシブ処理後の商品表示例：
「画像を自動適合」に設定しているのに切り取られるのはなぜですか？
パララックススクロール効果が有効になっている場合、画像が切り取られることがあります。この効果を維持するために、画像が表示エリアを超える場合、自動的にズーム・切り取りされます。
推奨サイズを使用しても画像が完全に表示されない場合はどうすればいいですか？
推奨サイズを使用しても画像が正しく表示されない場合、以下の2つの設定を確認してください。
- 画像表示エリアの設定：一部のパーツには、画像表示エリアを調整する設定があります。この設定が画像の表示を制限している可能性があるため、「自動」を選択していることを確認してください。
- パララックススクロール：一部のテーマでは、背景画像をズームする「パララックススクロール」効果を使用しています。この効果により画像が切り取られる場合があります。この機能が不要な場合は、テーマ設定で無効にしてください。