# インタラクティブスペースの作成方法

Interactive Space機能はPlain Jane Interactive独自のもので、顧客がコンテキスト内で製品を探索できる没入型のクリック可能な環境を作成できます。

## 🌟 概要

Interactive Spacesは静的な製品表示を魅力的で探索可能な環境に変換します。次の用途に最適です：

* 部屋のセッティングやライフスタイル写真
* 自然な環境での製品ショーケース
* 没入型のブランドストーリーテリング
* インタラクティブなルックブック

## 📋 Interactive Spaceの設定

### ステップ1：インタラクティブ環境セクションを追加

1. **テーマカスタマイザーへ移動**
   * 移動先： **オンラインストア → テーマ**
   * クリック： **テキストの** あなたのPlain Jane Interactiveテーマに
2. **インタラクティブ環境セクションを追加**
   * クリック： **「セクションを追加」**
   * を選択します **インタラクティブ環境**
   * ページ上で希望の位置を選択

### ステップ2：背景を設定

1. **背景画像をアップロード**
   * 設定を開くには **インタラクティブ環境** セクション
   * の下で **背景**」で、クリック **画像を選択**
   * 高解像度画像を選んでください（推奨：1600x900px以上）
   * 画像は製品が自然に配置できるシーンを示すべきです
2. **背景設定**
   * **画像のフィット**：画像がコンテナをどのように満たすかを選択
     * `カバー`：コンテナを埋めますが、画像が切り取られることがあります
     * `コンテイン（収める）`：全体画像を表示しますが、空白が残ることがあります
   * **背景位置**：画像の焦点を設定

### ステップ3：インタラクティブポイントを追加

インタラクティブポイントは、製品情報やリンクを表示するクリック可能なホットスポットです。

1. **最初のポイントを作成**
   * セクション設定で、次へスクロール **インタラクティブポイント**
   * クリック： **インタラクティブポイントを追加**
2. **ポイント設定を構成**
   * **製品**：ストア内の特定製品へのリンク
   * **位置 X**：水平位置（0-100%）
   * **位置 Y**：垂直位置（0-100%）
   * **ポイントスタイル**：視覚的な外観を選択
     * `パルス`：アニメーションで脈打つドット
     * `プラス`：シンプルなプラスアイコン
     * `ドット`：ミニマルなドットインジケーター
3. **ポイントコンテンツ**
   * **カスタムテキスト**：必要に応じて製品タイトルを上書き
   * **カスタムリンク**：製品の代わりに外部リンクを使用
   * **価格表示**：製品価格の表示/非表示

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

### 画像の選択

* 高品質で十分に照明された写真を使用してください
* 製品と背景のコントラストを確保してください
* モバイル表示を考慮して、過度に複雑なシーンは避けてください
* 推奨最小解像度：1200x675px

### ポイント配置

* ポイントは注目製品の上または近くに配置してください
* ポイントを一箇所に集めすぎないようにしてください
* タッチ操作に適しているかモバイル端末でテストしてください
* スペース全体で一貫したポイントスタイルを使用してください

### コンテンツ戦略

* ベストセラーまたは最新製品をフィーチャーしてください
* テーマ別の環境を作成（寝室、キッチン、オフィス）
* 製品配置でストーリーを伝えてください
* テキストは簡潔で魅力的に保ってください

## 📱 モバイル最適化

インタラクティブスペースは自動的にモバイルデバイスに対応します：

* タッチ対応のポイントサイズ
* レスポンシブな画像スケーリング
* パフォーマンスのために最適化されたアニメーション
* 小さい画面向けに簡素化されたインタラクション

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

### ポイントの外観

* **パルスアニメーション**：微妙な動きで注意を引きます
* **色のカスタマイズ**: ブランドカラーに合わせる
* **サイズオプション**：画像のスケールと視認性に合わせて調整

### オーバーレイスタイル

* **製品カード**：豊富な製品情報の表示
* **最小限のツールチップ**：クリーンでシンプルな製品情報
* **カスタムスタイリング**：高度なCSSカスタマイズオプション

## 🔧 トラブルシューティング

### ポイントが表示されない

* 位置XとYの値が0-100の間であることを確認してください
* 製品が公開され、利用可能であることを確認してください
* テーマ設定でセクションが有効になっていることを確認してください

### モバイル表示の問題

* さまざまな画面サイズでポイントの間隔をテストしてください
* タッチ対象のためにポイントサイズを調整してください（最小44px）
* モバイル用にポイント数を減らすことを検討してください

### パフォーマンス最適化

* 背景画像を最適化してください（可能ならWebP形式を使用）
* セクションごとに8～10のインタラクティブポイントに制限してください
* ページ速度向上のために遅延読み込みを使用してください

## 💡 クリエイティブアイデア

### 部屋の設定

製品の使用感を示すリアルな部屋の環境を作成してください：

* 家具や装飾のあるリビングルーム
* 家電やアクセサリーのあるキッチン
* 寝具や照明のある寝室

### 製品コレクション

自然な設定で関連製品をグループ化：

* モデルの着用によるコーディネート
* 作業場の設定での工具コレクション
* 洗面所のアレンジにあるビューティー製品

### 季節のディスプレイ

ホリデーや季節に合わせてインタラクティブスペースを更新：

* ホリデーギフトガイド
* 夏のアウトドアコレクション
* 新学期の必需品

## 📊 分析とパフォーマンス

インタラクティブスペースの効果を追跡：

* インタラクティブポイントのクリック率を監視
* インタラクティブスペースから製品ページへのコンバージョンを追跡
* Shopifyの分析を使用してエンゲージメントを測定
* 異なるポイント配置やスタイルをA/Bテスト


---

# 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/plain-jane-interactive/sections-and-features/how-to-create-an-interactive-space.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.