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