OS 3.0テーマ向け推奨ストア画像サイズ

目を引くビジュアルは、オンラインストアの成功において重要な役割を果たします。高品質な画像と戦略的な表示技術を組み合わせることで、ストアのデザインと顧客の印象を向上させることができます。OS 3.0テーマでは、新しいセクションタイプと更新されたレイアウトオプションが導入されており、それぞれに特定の画像サイズの推奨があります。

このガイドでは、すべてのOS 3.0セクションに推奨される画像サイズ、アップロード手順、および画像の品質とパフォーマンスを最適化するためのヒントを説明します。

コマースセクションの画像サイズ

コマースセクションには、商品およびカテゴリに焦点を当てたモジュールが含まれます。以下のサイズを使用して、商品およびカテゴリの画像がデバイス間で鮮明に表示されるようにしてください。

ユニークカテゴリ

ユニークカテゴリセクションは、ストアフロントにカテゴリのエントリーカードを表示します。カバー画像はカテゴリグループ全体のビジュアルテーマを設定し、推奨画像は個々のカテゴリを強調する任意のカードごとの画像です。

おすすめ商品

おすすめ商品セクションは、カテゴリごとにタブで整理された商品を表示します。このセクションでは専用のセクションレベルの画像アップロードは不要で、すべての画像は既存の商品データから自動的に取得されます。

ユニークおすすめ商品

ユニークおすすめ商品セクションは、目立つビジュアルと厳選された商品リストで単一のカテゴリを強調表示します。PC版とモバイル版の画像を別々にサポートしており、選択されたレイアウト設定に応じて推奨サイズが異なります。

レイアウト別のPC版およびモバイル版の推奨画像サイズ：

メディアプロモーション商品

メディアプロモーション商品セクションは、メディアユニット（画像または動画）と関連する商品群を組み合わせて、単一のセールスポイントをその関連商品とともに強調表示できます。

ショッピング画像

ショッピング画像セクションは、全幅の背景画像に商品ホットスポットを重ねて配置し、顧客が画像から直接商品を発見して購入できるようにします。

ショッピング動画

ショッピング動画セクションは、短い動画と関連する商品カードを組み合わせて、顧客が同じモジュール内で視聴と購入を行えるようにします。

商品カテゴリリスト

商品カテゴリリストセクションは、カテゴリのエントリーカードをグリッド表示し、顧客にストアの商品のカテゴリを視覚的に紹介します。

プロモーションセクションの画像サイズ

プロモーションセクションはブランドストーリーテリング、キャンペーン、ビジュアルマーチャンダイジングに使用されます。異なる画面サイズでのトリミングを避けるために、推奨サイズの画像をアップロードしてください。

スライドショー

スライドショーセクションは、一連の全幅画像またはバナーを表示し、通常はヒーロービジュアル、プロモーション、または季節のキャンペーンに使用されます。PC版とモバイル版で別々の画像をサポートしています。

ユニークスライドショー

ユニークスライドショーセクションは、ブラウザサイズに合わせて画像とテキストをフィットさせた全画面スライドを表示し、没入感のあるストーリーテリング体験を作り出します。PC版とモバイルで別々の画像をサポートしており、選択したレイアウト設定に応じて推奨サイズが異なります。

レイアウト別のPC版とモバイルの画像推奨サイズ：

画像バナー

画像バナーセクションは、通常プロモーションバナーやキャンペーンビジュアルに使用される、1枚または2枚の並列画像を表示します。

画像とテキストパーツ

画像とテキストパーツセクションは、画像とテキストのブロックを組み合わせて表示し、商品機能、ブランドストーリー、または主要なセールスポイントを強調するのに適しています。

画像とテキストリスト

画像とテキストリストセクションは、複数の機能、特典、またはカテゴリを一度に表示するのに適した、グリッドまたはリストレイアウトで画像とテキストのカードを連続して表示します。

ホバー時の画像切替

ホバー時の画像切替セクションは、顧客が画像にホバーしたときに画像が変わるように表示し、インタラクティブな閲覧体験を作り出します。

リッチテキスト

リッチテキストセクションは、任意の背景画像付きのフォーマットされたテキストブロックを表示し、ブランドメッセージ、告知、または編集コンテンツに適しています。

動画

動画セクションは、動画を埋め込み、動画再生前に任意のポスター画像を表示します。

成分表示

成分表示セクションは、商品成分、素材、またはパーツを構造化された視覚的フォーマットで提示し、詳細な商品ストーリーテリングに適しています。

ビフォー＆アフター

ビフォー＆アフターセクションは、2つの画像を並べて表示し、ドラッグ可能な仕切りで顧客が商品効果や結果を比較できるようにします。

コラージュ

コラージュセクションは、商品画像、カテゴリ画像、および任意の動画をモザイクスタイルのレイアウトで組み合わせ、視覚的なストーリーテリングやキャンペーンのハイライトに適しています。

画像とテキストパーツの結合

画像とテキストパーツの結合 セクションは、画像とテキストブロックを結合したレイアウトで、商品とその主要な詳細やストーリーを紹介するのに適しています。

追加セクションの画像サイズ

これらのセクションは、ストアに信頼性と補足コンテンツを追加します。推奨サイズで画像をアップロードして、清潔でプロフェッショナルな外観を実現してください。

商標リスト

商標リスト セクションは、ブランドやパートナーのロゴを一列に表示し、通常は信頼性を高めたり、メディア掲載を強調したりするために使用されます。

マップ

マップ セクションは、ストアのロケーションマップと任意の背景画像を表示し、実店舗を持つストアに適しています。

カウントダウン

カウントダウン セクションは、任意の背景画像付きのカウントダウンクロックを表示し、期間限定プロモーションや商品発売に適しています。

ブログ

ブログ セクションは、専用のセクションレベルの画像アップロードを必要としません。ブログカードのカバー画像 は、ブログ モジュールから自動的に取得されます。

マルチレベルフィルタ

マルチレベルフィルタセクションは、任意の背景画像付きのカテゴリナビゲーションバーを表示し、顧客が複数のフィルタレベルで商品を閲覧できるようにします。

カスタムページ

カスタムページセクションでは、PC版とモバイルの両方に任意のカバー画像を設定して、完全にカスタマイズされたページを作成できます。

カテゴリページの画像サイズ

カテゴリページは特定のカテゴリ内の商品を表示します。

カテゴリ画像

カテゴリ画像セクションは、モバイルデバイスでのカテゴリページのビジュアルヘッダーを提供します。

プロモーションカード

プロモーションカードは、カテゴリページの商品リスト内の独立したセクションです。ドラッグで位置を変更でき、商品カードの間で表示される場所を制御します。画像の寸法はページ幅、商品列数、商品カードの設定に基づいて動的に調整されるため、固定のデフォルトサイズはありません。

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

• 画像品質を最大化する： 詳細を保持し、リサイズ時の劣化を防ぐために、可能な限り大きな元画像をアップロードしてください。
• 速度を最適化する： 読み込み時間を短縮するために.pngよりも.jpgを選択してください。テーマは効率的なページ表示のために自動で画像をリサイズします。
• 商品画像はモバイル優先で： 商品画像のレイアウトはPC版で調整可能なため、モバイルでの表示最適化に注力してください。
• 一貫した比率を維持する： 同じセクション内のすべての画像で同じアスペクト比を使用し、均一でプロフェッショナルな見た目を保ちましょう。
• 重要な要素を中央に配置する： スライドショーや画像バナーなど高さが固定されたセクションの画像をアップロードする際は、主要なデザイン要素を中央に配置し、異なるデバイスでのトリミングを避けてください。

OS 3.0における画像サイズに関するよくある質問

Q1 なぜ一部の画像がトリミングされるのですか？

テーマは異なる画面幅やデバイスに合わせて画像サイズを調整するため、以下の理由でトリミングが発生することがあります：

• 高さが固定されたパーツ： テキストの可読性を保つため、スライドショーや画像バナーなどのセクションはデフォルトで固定高さが設定されており、画像の正確な寸法と一致しない場合があります。
• 固定アスペクト比のパーツ： セクションが固定アスペクト比を使用している場合、自動的にトリミングが行われます。画像はデフォルトで中央からトリミングされますが、画像表示エリアの設定を調整することで変更可能です。
• レスポンシブ画像処理： 多くのセクションはレスポンシブ処理を使用しており、PC版とモバイルで一貫した表示を確保するために広い画像をズームおよびトリミングします。画像は表示エリアを完全にカバーするよう拡大され、伸びや歪みなくスケーリングされます。

Q2 オートフィット画像を選択しても画像がトリミングされるのはなぜですか？

パララックススクロール効果が有効になっている場合、画像は依然としてトリミングされることがあります。パララックス効果を維持するために、画像のサイズが表示エリアを超えると自動的にズームおよびトリミングされます。画像全体を表示したい場合は、セクション設定でパララックススクロールを無効にしてください。

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

以下の2つの設定を確認してください：

• 画像表示エリア：特定のセクションには画像表示エリアの設定があり、表示される内容が制限される場合があります。この設定で自動を選択していることを確認してください。
• パララックススクロール：一部のテーマでは背景画像をズームインするパララックススクロール効果が使用されており、トリミングが発生します。この効果が不要な場合は、テーマ設定で無効にしてください。