商品セクション（サムネイル）
Plain Jane および Plain Jane Interactive 向け
学べること
Plain Jane v3.1 のデフォルトのモダンレイアウトである「サムネイル」レイアウトの設定方法
グリッドシステム、モバイルモーダル、メディア処理を含む高度なカスタマイズオプション
製品画像、バリアント、モバイル最適化のベストプラクティス
🎯 サムネイルレイアウトとは？
商品セクション（サムネイル） は Plain Jane v3.1 におけるデフォルトのモダンな商品レイアウトです。高度なグリッドベースの画像システム、モバイル向けの下部モーダルインターフェース、および豊富なカスタマイズオプションを備えています。このセクションは最も柔軟でモダンなUXパターンを提供します。
主な機能：
高度なグリッドベースの画像ギャラリー
モバイルデバイス向けの下部モーダルインターフェース
強化されたメディア処理（画像、ビデオ、3Dモデル）
カラースウォッチを使った高度なバリアント選択
モデル情報とサイズチャートのサポート
モバイル最適化されたレスポンシブデザイン
ギャラリーの列数と間隔をカスタマイズ可能
対応テーマ：
✅ Plain Jane v3.1+（デフォルト）
✅ Plain Jane Interactive v2+
🔧 商品セクション（サムネイル）の有効化方法
に移動 オンラインストア > テーマ > カスタマイズ
次へ移動： Products > Default product
クリック セクションを追加 まだ存在しない場合
を選択し、 商品セクション（サムネイル）
必要に応じてブロックと設定を構成してください
💡 注意：商品セクション（サムネイル）は新しい Plain Jane v3.1 インストールのデフォルトセクションです。
📱 レイアウトとギャラリーのオプション
画像ギャラリーの設定
ギャラリーの列数
デスクトップギャラリーの列数を設定（1〜6列）
モバイルは自動的に小さい画面向けに最適化されます
製品ごとのメタフィールドで上書きできます
ギャラリーの間隔
ギャラリーとメイン画像の間の余白を調整
デスクトップとモバイルの画像サイズをカスタマイズ可能
微調整のためのグリッドギャップと自動行設定
画像の配置
追加の写真をメイン画像の上または下に表示するかを選択
画像と商品情報のレイアウトを反転
モバイル専用の配置オプション
モバイルモーダル体験
商品セクション（サムネイル）にはモバイル向けの高度な下部モーダルシステムが含まれます：
下部モーダル：商品詳細とともに下からスライドアップします
レスポンシブ高さ：コンテンツに合わせて自動調整されます
タッチに優しい：モバイルでの操作に最適化されています
スムーズなアニメーション：0.3秒のトランジションタイミング
🛍️ 商品情報ブロック
商品セクション（サムネイル）は並べ替え可能なモジュール式ブロックをサポートします：
コアブロック
セールバッジ - セール／割引表示を表示
商品ヘッダー - タイトルとパンくずナビゲーション
商品価格 - セール価格を含む価格表示
商品説明 - リッチテキストの商品説明
商品バリアント - サイズ、色、その他のバリアントセレクター
商品ボタン - カートに追加および今すぐ購入ボタン
高度なブロック
モデル情報 - モデルの寸法や情報を表示
カラースウォッチ - 視覚的な色選択インターフェース
サイズチャート - ポップアップまたは埋め込みのサイズガイド
カスタムアコーディオン - 展開可能なコンテンツセクション
⚙️ 高度なカスタマイズ
カラースウォッチの設定
視覚的な色選択を有効にする：
製品にカラーメタフィールドを追加
スウォッチ表示オプションを構成
カラーバリアントの接続を設定
詳細を学ぶ: カラースウォッチの設定
モデル情報
ファッション製品のためにモデル詳細を表示：
モデルメタフィールドを追加（身長、寸法、着用サイズ）
表示形式と位置を構成
スタイルとレイアウトをカスタマイズ
詳細を学ぶ: モデル情報の設定
サイズチャート
商品固有のサイズガイドを追加：
サイズチャートのメタフィールドを作成
サイズチャートの画像や表をアップロード
ポップアップ動作を構成
詳細を学ぶ: サイズチャートの追加
📐 カスタマイズオプション
レイアウト設定
商品情報と画像を切り替え：レイアウトの順序を反転
追加写真を反転：ギャラリーの配置を制御
ギャラリーの列数：デスクトップで1〜6列
ギャラリーマージン：画像周りの間隔を調整
スタイリングオプション
フェードの継続時間：ページ遷移アニメーションを制御
モバイル画像サイズ：異なる画面サイズ向けに最適化
デスクトップ画像サイズ：最大画像寸法を設定
グリッドギャップ：画像間の間隔を微調整
レスポンシブ挙動
モバイルレイアウト：モバイルデバイス向けに自動最適化
タブレット表示：タブレット画面向けの中間サイズ設定
デスクトップレイアウト：カスタマイズ可能な列を持つフルグリッドシステム
🎨 ベストプラクティス
画像最適化
高品質な画像を使用する（幅1000px以上を推奨）
商品画像で一貫したアスペクト比を維持する
商品単体画像とライフスタイルショットの両方を含める
高速読み込みのためにファイルサイズを最適化する
商品情報
明確で魅力的な商品説明を記載する
ファッション／アパレル商品にはモデル情報を使用する
フィットに関する案内が必要なアイテムにはサイズチャートを含める
複数色のある商品にはカラースウォッチを設定する
モバイル体験
実際のデバイスで下部モーダル機能をテストする
すべてのインタラクティブ要素がタッチフレンドリーであることを確認する
重要な情報はスクロールせずに見えるように保つ
モバイル閲覧に適した画像サイズを使用する
🚀 パフォーマンスティップス
画像圧縮：最適化された画像フォーマットを使用（可能な場合はWebP）
レイジーローディング：パフォーマンス向上のための組み込み遅延読み込み
モバイルファースト：デザインはモバイル体験を主要に考慮
グリッド効率：最適なレンダリングのための高度な CSS Grid
最終更新