商品セクション（ショーケース）
Plain Jane および Plain Jane Interactive 向け
このビデオで学べること
「Showcase」商品レイアウト、伝統的なサイドバイサイドレイアウトの設定とカスタマイズ方法
画像ギャラリー、配置、レスポンシブ動作の設定オプション
このレイアウトをモダンなサムネイルレイアウトと使い分けるタイミング
🎯 ショーケースレイアウトとは？
商品セクション（ショーケース） サムネイルギャラリーとクラシックな商品情報表示を備えた伝統的なサイドバイサイドの商品レイアウトを提供します。慣れ親しんだナビゲーションパターンによる従来型のEC体験を好むストアに最適です。
主な機能：
伝統的なサムネイルギャラリーシステム
画像と商品情報のサイドバイサイドレイアウト
画像配置（左/右）を設定可能
ギャラリーの列数と間隔をカスタマイズ可能
積み重ねレイアウトによるモバイルレスポンシブ設計
クラシックな商品情報の階層構造
利用可能：
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
🔧 商品セクション（ショーケース）の有効化方法
に移動します オンラインストア > テーマ > カスタマイズ
に移動します 商品 > デフォルト商品
別の商品セクションが現在アクティブな場合：
既存の商品セクションをクリックします
を選択します セクションを削除
をクリック セクションを追加
を選択します 商品セクション（ショーケース）
必要に応じてレイアウトとブロックを構成します
📐 レイアウト設定
画像と商品情報の配置
商品情報と画像を切り替える
商品情報を左側に移動するためのトグル
デフォルト：画像が左、商品情報が右
反転：商品情報が左、画像が右
画像ギャラリーの設定
追加写真を反転：サムネイルをメイン画像の上または下に表示するかを制御
ギャラリーの列数：サムネイル列数を設定（1〜6）
ギャラリーの余白：画像ギャラリー周りの間隔を調整
レスポンシブ動作
デスクトップレイアウト
構成可能な比率のサイドバイサイドレイアウト
画像ギャラリーはおおよそ幅の60%を占めます
商品情報は残りの40%のスペースに表示されます
モバイルレイアウト
自動的に単一カラムに積み重ねられます
注目画像が最初に表示されます
メイン画像の下にサムネイルギャラリー
画像の後に商品情報が続きます
🖼️ 画像ギャラリーのオプション
ギャラリー設定
列数
サムネイル表示の列数を1〜6に設定
商品ごとのメタフィールドで上書き可能
モバイルは最適な表示のために自動調整されます
画像サイズ設定
デスクトップ画像サイズ：最大画像寸法を制御
モバイル画像サイズ：小さい画面向けに最適化
ギャラリーの余白：要素間の間隔を微調整
ギャラリー配置
追加写真をメインの下に配置：サムネイルを注目画像の下に移動
追加写真を反転：サムネイルの順序を変更
グリッドギャップ：サムネイル画像間の間隔を調整
画像表示
注目画像
ズーム機能を備えた大きなメイン商品画像
クリックで全画面表示を開く
画像間のスムーズなトランジション
複数のメディアタイプ（画像、動画）をサポート
サムネイルナビゲーション
サムネイルをクリックしてメイン画像を変更
より良いユーザーフィードバックのためのホバー効果
一貫したアスペクト比を推奨
パフォーマンスのための遅延読み込み
📱 モバイル最適化
レスポンシブデザイン
モバイルレイアウトの動作
モバイルデバイスでは自動的に列が積み重なります
タッチ操作に最適化されたサムネイルサイズ
小さい画面向けの簡素化されたナビゲーション
読み込みパフォーマンスの向上
タッチ操作
画像ナビゲーションのスワイプジェスチャー対応
タッチに適したサムネイルサイズ
モバイル向けに最適化されたボタン配置
タッチデバイスのアクセシビリティ向上
⚙️ カスタマイズオプション
アニメーション設定
フェード時間：画像間のトランジション時間を制御
ページトランジション：ページ読み込み時の全体的なアニメーションを設定
ホバー効果：サムネイルのホバー挙動を設定
レイアウトの微調整
余白コントロール：すべての要素周りの間隔を調整
配置オプション：テキストや要素の位置を制御
カラーのカスタマイズ：ブランドカラーに合わせる
タイポグラフィ設定：フォントサイズとスタイリングを制御
🛍️ 商品情報の表示
商品セクション（ショーケース）は商品情報の伝統的な階層を維持します：
情報の順序
商品タイトル：目立つ見出し
価格表示：セール表示を含む明確な価格表示
商品説明：リッチテキストコンテンツ
バリアント選択：サイズ、カラー、その他のオプション
数量セレクター：カートに追加するためのコントロール
アクションボタン：カートに追加および今すぐ購入ボタン
追加機能
セールバッジ：割引やプロモーションを強調表示
在庫表示：在庫状況を表示
商品レビュー：レビューアプリとの統合
ソーシャル共有：ソーシャルメディア用の共有ボタン
🎨 ベストプラクティス
画像ガイドライン
すべての製品画像で一貫したアスペクト比を使用してください
鮮明な表示のために最低1000pxの幅を推奨
複数の角度やディテールショットを含める
高速読み込みのためにファイルサイズを最適化する
レイアウトに関する考慮点
さまざまな画面サイズとデバイスでテストする
情報の階層が明確であることを確認する
重要な詳細はファーストビュー上部に保つ
クリーンな外観のためにホワイトスペースを効果的に使用する
ユーザーエクスペリエンス
サムネイルナビゲーションを直感的にする
画像の読み込み速度を速く保つことを確認する
モバイルデバイスでのタッチ操作をテストする
明確なコールトゥアクションを提供する
🔄 商品セクション（ショーケース）を使うべき時
おすすめ：
伝統的な小売ブランド
従来の顧客期待を持つストア
詳細なサムネイルギャラリーが有益な商品
慣れ親しんだECパターンを求めるブランド
代わりに商品セクション（サムネイル）を検討する場合：
最もモダンなモバイル体験を求める場合
顧客がアプリのようなインタラクションを好む場合
ボトムモーダルのような高度な機能が必要な場合
モバイル最適化が最優先事項である場合
🚀 パフォーマンスに関する注意点
画像の最適化：可能な場合はWebP形式を使用する
遅延読み込み：ページ速度向上のために組み込み済み
レスポンシブ画像：自動サイズ最適化
モバイルパフォーマンス：遅い回線向けに最適化
最終更新