# 商品セクション（サムネイル）

> **学べること**
>
> * Plain Jane v3.1 のデフォルトのモダンなレイアウトである「サムネイル」レイアウトの設定方法
> * グリッドシステム、モバイルモーダル、メディア処理などの高度なカスタマイズオプション
> * 製品画像、バリアント、モバイル最適化のベストプラクティス

***

## 🎯 サムネイルレイアウトとは？

**商品セクション（サムネイル）** は Plain Jane v3.1 のデフォルトでモダンな商品レイアウトです。高度なグリッドベースの画像システム、モバイル向けの下部モーダルインターフェース、そして豊富なカスタマイズオプションを備えています。このセクションは最も柔軟でモダンなUXパターンを提供します。

**主な機能：**

* 高度なグリッドベースの画像ギャラリー
* モバイルデバイス向けの下部モーダルインターフェース
* 強化されたメディア処理（画像、動画、3Dモデル）
* カラースウォッチを用いた高度なバリアント選択
* モデル情報とサイズチャートのサポート
* モバイル最適化されたレスポンシブデザイン
* カスタマイズ可能なギャラリー列数と間隔

利用可能：

* ✅ Plain Jane v3.1+（デフォルト）
* ✅ Plain Jane Interactive v2+

***

## 🔧 商品セクション（サムネイル）の有効化方法

1. 移動先： **オンラインストア > テーマ > カスタマイズ**
2. に移動 **商品 > デフォルト商品**
3. クリック： **「セクションを追加」** まだ存在しない場合
4. を選択します **商品セクション（サムネイル）**
5. 必要に応じてブロックと設定を構成してください

> 💡 **注意**：商品セクション（サムネイル）は新しい Plain Jane v3.1 インストールのデフォルトセクションです。

***

## 📱 レイアウト＆ギャラリーオプション

### **画像ギャラリーの設定**

**ギャラリーの列数**

* デスクトップギャラリーの列数を設定（1〜6列）
* モバイルは自動的に小さい画面に最適化されます
* メタフィールドを使って商品ごとに上書き可能

**ギャラリーの間隔**

* ギャラリーとメイン画像の間の余白を調整
* デスクトップとモバイルの画像サイズはカスタマイズ可能
* 微調整のためのグリッドギャップと自動行設定

**画像の配置**

* 追加画像をメイン画像の上か下に表示するかを選択
* 画像と商品情報のレイアウトを反転
* モバイル専用の配置オプション

### **モバイルモーダル体験**

商品セクション（サムネイル）はモバイル向けに洗練された下部モーダルシステムを含みます：

* **下部モーダル**：商品詳細とともに下からスライドアップ
* **応答高さ**：コンテンツに自動的に調整
* **タッチフレンドリー**：モバイルでの操作に最適化
* **滑らかなアニメーション**：0.3秒のトランジション時間

***

## 🛍️ 商品情報ブロック

商品セクション（サムネイル）は順序を変更できるモジュール式ブロックをサポートします：

### **コアブロック**

* **セールバッジ** - セール／割引の表示
* **商品ヘッダー** - タイトルとパンくずナビゲーション
* **商品価格** - セール価格を含む価格表示
* **商品説明** - リッチテキストの製品説明
* **商品バリアント** - サイズ、色、その他のバリアントセレクター
* **商品ボタン** - カートに追加／今すぐ購入ボタン

### **高度なブロック**

* **モデル情報** - モデルの寸法や情報の表示
* **カラースウォッチ** - 視覚的な色選択インターフェース
* **サイズチャート** - ポップアップまたは埋め込みのサイズガイド
* **カスタムアコーディオン** - 展開可能なコンテンツセクション

***

## ⚙️ 高度なカスタマイズ

### **カラースウォッチの設定**

視覚的な色選択を有効にする：

1. 商品にカラーメタフィールドを追加
2. スウォッチ表示オプションを構成
3. カラーバリアントの接続を設定

**詳細を学ぶ**: [カラースウォッチの設定](/english-ja/plain-jane-interactive/advanced/setting-up-color-swatches.md)

### **モデル情報**

ファッション商品のモデル詳細を表示：

1. モデルのメタフィールドを追加（身長、寸法、着用サイズ）
2. 表示形式と配置を構成
3. スタイルとレイアウトをカスタマイズ

**詳細を学ぶ**: [モデル情報の設定](/english-ja/readme-1/advanced/setting-up-model-info.md)

### **サイズチャート**

商品別のサイズガイドを追加：

1. サイズチャート用のメタフィールドを作成
2. サイズチャートの画像や表をアップロード
3. ポップアップの動作を構成

**詳細を学ぶ**: [サイズチャートの追加](/english-ja/readme-1/advanced/how-to-add-size-charts-to-each-product.md)

***

## 📐 カスタマイズオプション

### **レイアウト設定**

* **商品情報と画像の切り替え**：レイアウト順序を反転
* **追加画像の反転**：ギャラリーの配置を制御
* **ギャラリーの列数**：デスクトップで1〜6列
* **ギャラリーマージン**：画像周りの間隔を調整

### **スタイリングオプション**

* **フェード時間**：ページトランジションのアニメーションを制御
* **モバイル画像サイズ**：異なる画面サイズに最適化
* **デスクトップ画像サイズ**：最大画像寸法を設定
* **グリッドギャップ**：画像間の間隔を微調整

### **レスポンシブ挙動**

* **モバイルレイアウト**：モバイルデバイス向けの自動最適化
* **タブレットビュー**：タブレット画面向けの中間サイズ設定
* **デスクトップレイアウト**：カスタマイズ可能な列を備えたフルグリッドシステム

***

## 🎨 ベストプラクティス

### **画像最適化**

* 高品質な画像を使用する（幅は最低1000px）
* 商品画像間で一貫したアスペクト比を維持する
* 商品単体の画像に加えてライフスタイルショットを含める
* 高速読み込みのためにファイルサイズを最適化する

### **商品情報**

* 明確で魅力的な商品説明を書く
* ファッション／アパレル商品にはモデル情報を使用する
* フィットに関する案内が必要なアイテムにはサイズチャートを含める
* 複数の色がある商品にはカラースウォッチを設定する

### **モバイル体験**

* 実機で下部モーダルの機能をテストする
* すべてのインタラクティブ要素がタッチフレンドリーであることを確認する
* 重要な情報はスクロールせずに見えるように保つ
* モバイル表示に適した画像サイズを使用する

***

## 🚀 パフォーマンスティップス

* **画像圧縮**：最適化された画像フォーマットを使用する（可能な場合はWebP）
* **遅延読み込み**：パフォーマンス向上のための組み込み遅延読み込み
* **モバイルファースト**：デザインはモバイル体験を主要に考慮
* **グリッド効率**：最適なレンダリングのための高度なCSS Grid

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/pages-and-menus/product-page/product-section-thumbnail.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.