魅力的なビジュアルは、オンラインストアの成功に欠かせない重要な要素です。高品質な画像と戦略的な表示方法を組み合わせることで、ストアのデザインや顧客の印象を大きく向上させることができます。

この記事では、さまざまなモジュールやコンポーネントに推奨される画像サイズを紹介し、画像アップロードに関するよくある質問にお答えします。

ストアの主要コンポーネントに適した画像サイズ

商品画像

画像のアップロード場所:
SHOPLINE管理画面の商品に移動します。画像を追加したい特定の商品を選択し、「画像/動画」モジュールで 画像を追加（またはドラッグ＆ドロップ）をクリックしてアップロードします。

最適化のポイント:
PC版では商品画像のレイアウトを調整できますが、SHOPLINEではモバイルデバイスでの商品画像表示の最適化を推奨しています。以下の4種類の画像スケールから、商品の形状に最も適したものを選択してください：：正方形（1:1）、縦長（2:3）、横長（4:3）、オリジナル。
1.1.1.png

推奨アスペクト比	2:3
最小サイズ（モバイルデバイスでの幅の75％）	幅：560ピクセル高さ：840ピクセル
推奨サイズ（詳細ページの画像）	幅：1,700ピクセル高さ：2,550ピクセル

Note: すべての商品画像でスケールを統一することを推奨します。一貫性を保つことで、商品の高さにばらつきが生じるのを防ぎ、顧客の閲覧体験を損なうことがありません。

カテゴリカバー

画像のアップロード場所:
SHOPLINE管理画面の商品 > カテゴリ に進みます。カバー画像を追加したい特定のカテゴリを選択し、「カテゴリカバー」セクションで画像をアップロードしてください。

推奨アスペクト比	1:1
推奨サイズ	≥ 1600ピクセル

カテゴリバナー

画像のアップロード場所:
SHOPLINE管理画面の商品 > カテゴリ に進みます。バナー画像を追加したいカテゴリを選択し、「カテゴリバナー」セクションで画像をアップロードしてください。

推奨サイズ

幅：1,920ピクセル
高さ：420ピクセル

Note: 画像の幅は画面の幅に応じて変動しますが、高さは固定されています。そのため、画像が一部切り取られる場合がありますので、重要な情報が中央に収まるようにデザインすることをおすすめします。

スライドショー

画像のアップロード場所:
SHOPLINE管理画面の オンラインストア セクションに進み、編集したいテーマを選択して [デザイン] をクリックします。テーマエディターを開き、「スライドショー」コンポーネントを見つけて画像をアップロードしてください。

最適化のポイント:
スライドショー画像は、PC版とモバイル版で個別に設定が可能です。それぞれの表示効果に基づいて適切な素材をアップロードしましょう。
1.1.4.png

PC版推奨アスペクト比	3：1
PC版推奨サイズ	幅：1,920ピクセル高さ：650ピクセル

モバイル版推奨アスペクト比	1：2
モバイル版推奨サイズ	幅：375ピクセル高さ：500ピクセル

Note: 画像の切り取りを避けたい場合は、画像の高さを「最初の画像に合わせる」を選択し、パララックススクロール機能を無効にすることをおすすめします。

分割スライドショー

画像のアップロード場所:
SHOPLINE管理画面の オンラインストア セクションに進み、この機能に対応したテーマを選択して [デザイン] をクリックします。テーマエディターを開き、「スプリットスライドショー」コンポーネントを見つけて画像をアップロードしてください。

Note: 「スプリットスライドショー」コンポーネントは、Expect、Soo、Metal、Flexible、Control のテーマでのみ利用可能です。このコンポーネントでは、画像とテキストがブラウザサイズに適応するように設計されています。

PC版推奨サイズ（高さをフルスクリーンに設定）		幅：1,220ピクセル高さ：1,080ピクセル
PC版推奨サイズ（高さを特定の値に設定）		幅：1,152ピクセル高さ：適応値に設定

モバイル版推奨サイズ（高さをフルスクリーンに設定）		幅：1,125ピクセル高さ：1,125ピクセル
モバイル版推奨サイズ（高さを特定の値に設定）		幅：750ピクセル高さ：適応値の2倍

Notes:

PC画像アップロード: 主なデザイン要素を画像の中央に配置してください。これにより、異なるデバイスでの切り取りを防ぐことができます。
モバイル画像アップロード: 画像の下部に余白を残してください。これにより、オーバーレイされたテキストが主要なデザイン要素を覆うのを防ぐことができます。

大きな画像とテキストボックス

画像のアップロード場所:
SHOPLINE管理画面の オンラインストア セクションからテーマエディターにアクセスします。編集したいテーマを選択し、[デザイン] をクリックします。テーマエディター内で「大画像とテキストボックス」コンポーネントを見つけ、画像をアップロードしてください。

PC版推奨アスペクト比	16:9
PC版推奨サイズ	幅：1,920ピクセル高さ：1,080ピクセル

モバイル版推奨サイズ

幅：750ピクセル
高さ：1,020ピクセル

Notes:

このコンポーネントにアップロードされた画像は、固定の高さで表示されるため、一部が切り取られる可能性があります。切り取りを防ぐには、画像表示エリアを選択するか、高さを「自動」に設定してください。
アップロードする画像の高さは、設定される切り取り高さより大きくしてください。これにより、画像が拡大されてぼやけるのを防ぐことができます。

テキスト列と画像

画像のアップロード場所:
SHOPLINE管理画面の オンラインストア セクションからテーマエディターにアクセスします。編集したいテーマを選択し、[デザイン] をクリックします。テーマエディター内で「テキスト列と画像」コンポーネントを見つけて画像をアップロードしてください。

推奨アスペクト比	4：3（元のアスペクト比が適用されます。この比率はあくまで推奨値です。）
推奨サイズ	幅：650ピクセル高さ：488ピクセル

ブログ

画像のアップロード場所:
SHOPLINE管理画面の オンラインストア セクションからテーマエディターにアクセスします。編集したいテーマを選択し、[デザイン] をクリックします。テーマエディター内で「ブログ」コンポーネントを見つけて画像をアップロードしてください。

推奨アスペクト比	4：3（設定可能）
推奨サイズ	幅：650ピクセル高さ：488ピクセル

フッタープロモーション

画像のアップロード場所:
SHOPLINE管理画面の オンラインストア セクションからテーマエディターにアクセスします。編集したいテーマを選択し、[デザイン] をクリックします。テーマエディター内で「フッタープロモーション」コンポーネントを見つけて画像をアップロードしてください。

推奨アスペクト比	16：9（設定可能）
推奨サイズ	幅：650ピクセル高さ：488ピクセル

ユニークなテーマコンポーネントの画像サイズ

コンポーネント名	推奨サイズ	適用可能なテーマ
テーマ設定内のウェブサイトロゴ	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管理画面の オンラインストア セクションからテーマエディターにアクセスします。編集したいテーマを選択し、[デザイン] をクリックします。テーマエディター内でページセレクターを使用して「チェックアウトページ」に切り替えます。左側のナビゲーションメニューにあるパレットアイコンをクリックし、「コンテンツ」セクションで画像をアップロードしてください。

Note: チェックアウトページへの画像アップロードコンポーネントは、『SHOPLINEのエンタープライズプラン』の加入者のみが利用できます。

背景画像として画像をアップロード	トップバナー画像	左側の背景画像	右側の背景画像
背景画像として画像をアップロード	1920 px × 200 px	1048 px × 1048 px	872 px × 1048 px

デモ画像:

Screenshot 2024-01-30 at 5.46 1.png

背景テクスチャを背景画像として使用

システムはアップロードした画像を自動的に横方向と縦方向にコピーして重ね合わせます。そのため、画像サイズに制限はありません。エディター内で効果を確認しながら、画像を調整してください。

デモ画像：

Screenshot 2024-01-30 at 5.50 1.png

パフォーマンスを向上させるための画像アップロードのヒント

高画質を保つ: 元のディテールを損なわないよう、可能な限り大きな元画像をアップロードしてください。これにより、リサイズ時も画質の低下を防げます。
読み込み速度を最適化: ページの読み込みを速くするため、画像形式は .png よりも .jpg を選択しましょう。テーマは画像を自動的にリサイズして、効率的な表示をサポートします。

よくある質問

Q1: 一部の画像が切り取られるのはなぜですか？

テーマでは、異なる画面幅やデバイスに対応するため、画像サイズが調整されることがあります。このため、特に高さやアスペクト比が固定されたモジュールでは、画像が切り取られる場合があります。以下は切り取りの主な原因です：

高さが固定されたコンポーネント:
「大画像とテキストボックス」や「スライドショー」など、一部のコンポーネントは、テキストの読みやすさを保つために高さが固定されています。このため、画像の寸法と一致しない場合に切り取られることがあります。
固定アスペクト比のコンポーネント:
固定されたアスペクト比を採用しているコンポーネントでは、自動的に中央を基準に切り取られます。画像表示エリアが設定されていない場合、デフォルトで中央部分が表示されます。
レスポンシブ画像処理:
「大画像とテキストボックス」や「スライドショー」など、多くのテーマコンポーネントではレスポンシブ画像処理を使用しています。この技術では、PCやモバイルデバイスの画面に合わせて画像をズーム・切り取りし、表示エリアを完全にカバーします。これにより、画像が引き伸ばされたり歪んだりすることなくスケーリングが可能です。

レスポンシブ処理前の表示例:

Screenshot 2024-02-02 at 4.21 1.png

レスポンシブ処理後の表示例:

Screenshot 2024-02-02 at 4.22 1.png

Q2: 「画像を自動適合」に設定しているのに切り取られるのはなぜですか？

パララックススクロール効果が有効になっている場合、画像が切り取られることがあります。この効果を維持するために、画像が表示エリアを超える場合、自動的にズーム・切り取りされます。

Q3: 推奨サイズを使用しても画像が完全に表示されない場合はどうすればいいですか？

推奨サイズを使用しても画像が正しく表示されない場合、以下の2つの設定を確認してください。

画像表示エリアの設定:
一部のコンポーネントには、画像表示エリアを調整する設定があります。この設定が画像の表示を制限している可能性があるため、「自動」を選択していることを確認してください。
パララックススクロール:
一部のテーマでは、背景画像をズームする「パララックススクロール」効果を使用しています。この効果により画像が切り取られる場合があります。この機能が不要な場合は、テーマ設定で無効にしてください。

コンポーネント名	推奨サイズ	適用可能なテーマ
ロゴリスト	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です。	すべてのテンプレート

画像サイズのガイド

目次