> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/english-ja/readme-1/pages-and-menus/product-page/product-section-showcase.md).

# 製品セクション（ショーケース）

> **学べること**
>
> * 「ショーケース」製品レイアウト（従来のサイドバイサイドレイアウト）の設定とカスタマイズ方法
> * 画像ギャラリー、配置、およびレスポンシブ動作の設定オプション
> * このレイアウトをモダンなサムネイルレイアウトと使い分けるタイミング

***

## 🎯 ショーケースレイアウトとは？

**製品セクション（ショーケース）** サムネイルギャラリーとクラシックな製品情報表示を備えた従来型のサイドバイサイド製品レイアウトを提供します。慣れ親しんだナビゲーションパターンによるより伝統的なeコマース体験を好むストアに最適です。

**主な機能：**

* 従来型のサムネイルギャラリーシステム
* 画像と製品情報のサイドバイサイドレイアウト
* 画像配置（左／右）を設定可能
* カスタマイズ可能なギャラリー列数と間隔
* 積み上げ式のモバイル対応デザイン
* クラシックな製品情報の階層構造

利用可能：

* ✅ Plain Jane v3.1+
* ✅ Plain Jane Interactive v2+

***

## 🔧 製品セクション（ショーケース）の有効化方法

1. 移動先： **オンラインストア > テーマ > カスタマイズ**
2. に移動 **商品 > デフォルト商品**
3. 別の製品セクションが現在アクティブな場合：
   * 既存の製品セクションをクリックします
   * を選択します **セクションを削除**
4. クリック： **「セクションを追加」**
5. を選択します **製品セクション（ショーケース）**
6. 必要に応じてレイアウトとブロックを構成します

***

## 📐 レイアウト設定

### **画像と製品情報の配置**

**商品情報と画像の切り替え**

* 製品情報を左側に移動する切り替え
* デフォルト：画像が左、製品情報が右
* 反転：製品情報が左、画像が右

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

* **追加画像の反転**：サムネイルをメイン画像の上または下に表示するかを制御します
* **ギャラリーの列数**：サムネイル表示の列数を設定します（1〜6）
* **ギャラリーマージン**：画像ギャラリー周囲の間隔を調整します

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

**デスクトップレイアウト**

* 比率を設定できるサイドバイサイドレイアウト
* 画像ギャラリーはおよそ幅の60％を占めます
* 残りの40％に製品情報を表示します

**モバイルレイアウト**

* 自動的に単一列に積み重なります
* 注目画像が最初に表示されます
* メイン画像の下にサムネイルギャラリー
* 画像の後に製品情報が続きます

***

## 🖼️ 画像ギャラリーオプション

### **ギャラリー設定**

**列数**

* サムネイル表示の列数を1〜6で設定します
* メタフィールドを使って商品ごとに上書き可能
* モバイルは最適な表示のために自動調整されます

**画像サイズ設定**

* **デスクトップ画像サイズ**：最大画像寸法を制御します
* **モバイル画像サイズ**：小さな画面向けに最適化します
* **ギャラリーマージン**：要素間の間隔を微調整します

**ギャラリーの配置**

* **追加写真をメインの下に配置する**：サムネイルを注目画像の下に移動します
* **追加画像の反転**：サムネイルの順序を変更します
* **グリッドギャップ**：サムネイル画像間の間隔を調整します

### **画像表示**

**注目画像**

* ズーム機能を備えた大きなメイン製品画像
* クリックで全画面表示を開く
* 画像間のスムーズな遷移
* 複数のメディアタイプ（画像、動画）をサポート

**サムネイルナビゲーション**

* サムネイルをクリックしてメイン画像を切り替える
* 優れたユーザーフィードバックのためのホバー効果
* 一貫したアスペクト比を推奨
* パフォーマンス向上のための遅延読み込み

***

## 📱 モバイル最適化

### **レスポンシブデザイン**

**モバイルレイアウトの動作**

* モバイルデバイス向けの自動列積み上げ
* タッチ操作に最適化されたサムネイルサイズ
* 小さな画面向けの簡略化されたナビゲーション
* 読み込みパフォーマンスの向上

**タッチ操作**

* 画像ナビゲーションのスワイプジェスチャーサポート
* タッチフレンドリーなサムネイルサイズ
* モバイル向けに最適化されたボタン配置
* タッチデバイス向けのアクセシビリティ改善

***

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

### **アニメーション設定**

* **フェード時間**：画像間のトランジションタイミングを制御します
* **ページトランジション**：ページ全体のロードアニメーションを設定します
* **ホバー効果**：サムネイルのホバー動作を構成します

### **レイアウト微調整**

* **マージンコントロール**：すべての要素周囲の間隔を調整します
* **配置オプション**：テキストと要素の位置を制御します
* **カラーカスタマイズ**: ブランドカラーに合わせる
* **タイポグラフィ設定**：フォントサイズとスタイリングを制御します

***

## 🛍️ 製品情報の表示

製品セクション（ショーケース）は製品情報の従来の階層を維持します：

### **情報の順序**

1. **商品タイトル**：目立つ見出し
2. **価格表示**：セール表示を伴う明確な価格表示
3. **商品説明**：リッチテキストコンテンツ
4. **バリアント選択**：サイズ、色、その他のオプション
5. **数量セレクター**：カートに追加するコントロール
6. **アクションボタン**：カートに追加および今すぐ購入ボタン

### **追加機能**

* **セールバッジ**：割引やプロモーションを強調表示
* **在庫表示**：在庫状況を表示します
* **製品レビュー**：レビューアプリとの統合
* **ソーシャル共有**：ソーシャルメディア用の共有ボタン

***

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

### **画像のガイドライン**

* すべての製品画像で一貫したアスペクト比を使用してください
* 鮮明に表示するために幅は最低1000pxを推奨
* 複数の角度やディテールショットを含めてください
* 高速読み込みのためにファイルサイズを最適化する

### **レイアウトに関する考慮点**

* さまざまな画面サイズとデバイスでテストしてください
* 情報の階層が明確であることを確認してください
* 重要な詳細はファーストビュー内に配置してください
* クリーンな外観のために余白を効果的に使ってください

### **ユーザー体験**

* サムネイルナビゲーションを直感的にしてください
* 画像の読み込み時間を短くしてください
* モバイルデバイスでのタッチ操作をテストしてください
* 明確なコールトゥアクションを提供してください

***

## 🔄 製品セクション（ショーケース）を使うべき時

### **おすすめ用途：**

* 従来型の小売ブランド
* 従来の顧客期待を持つストア
* 詳細なサムネイルギャラリーが有益な製品
* 慣れ親しんだeコマースパターンを望むブランド

### **代わりに製品セクション（サムネイル）を検討すべき場合：**

* 最もモダンなモバイル体験を求める場合
* 顧客がアプリのようなインタラクションを好む場合
* ボトムモーダルなどの高度な機能が必要な場合
* モバイル最適化が最優先事項である場合

***

## 🚀 パフォーマンスに関する考慮点

* **画像最適化**：可能な場合はWebP形式を使用してください
* **遅延読み込み**：ページ速度向上のために組み込み済み
* **レスポンシブ画像**：自動サイズ最適化
* **モバイルパフォーマンス**：遅い接続向けに最適化

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.