# インタラクティブポイントの追加

インタラクティブポイントは、Interactive Spaces（インタラクティブスペース）を活気づけるクリック可能なホットスポットです。本ガイドでは、これらのインタラクティブ要素の作成、配置、スタイリングに関する必要な情報をすべて説明します。

## 🎯 インタラクティブポイントとは？

インタラクティブポイントは、背景画像の上に重ねられるクリック可能な領域で、商品情報、リンク、またはカスタムコンテンツを表示します。訪問者がポイントにホバーまたはクリックすると、次の内容が表示されます：

* 商品の詳細と価格
* クイックなカート追加オプション
* 商品ページへのリンク
* カスタムテキストや行動喚起メッセージ

## 🛠️ 最初のインタラクティブポイントを追加する

### ステップ1：ポイント設定にアクセス

1. **テーマカスタマイザーを開く**
   * に移動 **オンラインストア → テーマ**
   * クリック： **テキストの** Plain Jane Interactive 上で
2. **Interactive Environment セクションを選択**
   * Interactive Environment セクションをクリック
   * 下にスクロールして **インタラクティブポイント**
3. **新しいポイントを追加**
   * クリック： **インタラクティブポイントを追加**
   * 新しいポイント設定が表示されます

### ステップ2：ポイントのコンテンツを設定

#### 商品ベースのポイント

1. **商品を選択**
   * クリック： **商品を選択**
   * ストアの商品カタログから選択
   * 商品タイトル、価格、画像は自動入力されます
2. **上書きオプション**
   * **カスタムタイトル**：商品名を上書き
   * **カスタム説明**：特定の詳細を追加
   * **価格を表示**：価格表示のオン/オフ切替

#### カスタムリンクポイント

1. **カスタムリンクを有効にする**
   * 切り替え： **カスタムリンクを使用** をオンにする
   * 遷移先のURLを入力
   * カスタムタイトルと説明を追加

### ステップ3：ポイントを配置

#### 視覚的な配置

1. **X 位置（横）**
   * 値の範囲：0〜100％
   * 0％ = 左端
   * 50％ = 中央
   * 100％ = 右端
2. **Y 位置（縦）**
   * 値の範囲：0〜100％
   * 0％ = 上端
   * 50％ = 中間
   * 100％ = 下端

#### 配置のヒント

* **プレビューモードを使用** でポイント配置をリアルタイムで確認
* **小さな増分で微調整** （1〜2％の調整）
* **異なる画面サイズでテスト** して適切な配置を確認

## 🎨 ポイントのスタイリング

### ポイントの外観オプション

#### スタイルタイプ

1. **パルス（デフォルト）**
   * アニメーションする脈動する円
   * 注目を集めるのに最適
   * 控えめな動きが目を引く
2. **プラスアイコン**
   * クリーンな「＋」シンボル
   * ミニマルでモダン
   * プロフェッショナル／コーポレートなテーマに適する
3. **ドット**
   * シンプルな円形インジケーター
   * 最も控えめなオプション
   * 画像になじみやすく溶け込む

#### カラーカスタマイズ

* **プライマリカラー**：主要なポイントの色
* **セカンダリカラー**：アクセントまたはパルスの色
* **テキストの色**：コンテンツオーバーレイのテキスト
* **背景色**：ポイントの背景

### サイズと視認性

* **ポイントサイズ**：直径を調整（デフォルト：40px）
* **パルス強度**：アニメーションの強さを制御
* **不透明度**：ポイントの透明度を設定
* **Zインデックス**：レイヤーの順序（数値が高いほど前面）

## 📱 モバイルに関する考慮点

### タッチフレンドリーな設計

* **最小サイズ**：簡単にタップできるように44px
* **間隔**：ポイント間は少なくとも8px
* **コントラスト**：モバイル上でポイントが見やすいことを確認

### モバイル専用設定

* **モバイルで表示**：ポイントの表示切替
* **モバイルサイズ倍率**：小さな画面向けにサイズを調整
* **簡略化されたアニメーション**：パフォーマンスのために動きを抑制

## 🔧 高度なポイント設定

### ホバーエフェクト

```css
/* カスタムホバーアニメーション */
.interactive-point:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
```

### カスタムコンテンツオーバーレイ

* **リッチテキスト書式設定**：説明にHTMLを使用
* **画像オーバーレイ**：ツールチップに商品画像を追加
* **ビデオコンテンツ**：商品ビデオを埋め込む
* **ソーシャルプルーフ**：レビューや評価を含める

### 条件付き表示

* **デバイスに基づく表示/非表示**：モバイル vs デスクトップ
* **時間ベースの表示**：季節やプロモーション用コンテンツ
* **ユーザーの行動**：再訪問者向けに異なるコンテンツを表示

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

### 戦略的な配置

1. **主要商品のフィーチャー**
   * ベストセラーや新着を強調表示
   * 利益率の高い商品に注力
   * 論理的な商品グループを作成
2. **自然な配置**
   * 画像内の実際の商品上または近くにポイントを配置
   * 空白や無作為な配置は避ける
   * 閲覧者の視線の流れを考慮
3. **バランスのとれた分布**
   * ポイントを一箇所に集中させない
   * スペース全体に視覚的なリズムを作る
   * 要素間に余白を残す

### コンテンツ戦略

1. **魅力的なコピー**
   * 行動を促す言葉を使用
   * ユニークな特徴や利点を強調
   * テキストは簡潔でスキャンしやすく保つ
2. **価格戦略**
   * 透明性を高めるために価格を表示
   * セール価格を使って購買意欲を喚起
   * 高級品については価格を非表示にすることを検討
3. **行動喚起（CTA）最適化**
   * 明確で具体的なCTA（「今すぐ購入」「詳細を見る」）
   * 適切な場合は緊急性を作る
   * CTAのスタイルをブランドの声に合わせる

## 🎪 クリエイティブな実装アイデア

### 季節キャンペーン

* **ホリデーコレクション**：インタラクティブなギフトガイド
* **夏/冬**：季節商品ショーケース
* **新学期（Back-to-School）**：寮の設定での学生必需品

### ライフスタイル統合

* **部屋の模様替え**：購入可能な商品のビフォー/アフター
* **コーディネートセット作成**：トータルルックのコーディネート
* **レシピ統合**：料理シーンでのキッチンツール

### ブランドストーリーテリング

* **舞台裏（Behind-the-Scenes）**：ツールをハイライトした製造過程
* **ブランドの歴史**：商品の進化を示す年表
* **サステナビリティ**：エコフレンドリーな商品特長

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

### 読み込みに関する考慮事項

* **画像の最適化**：背景画像を圧縮
* **ポイント制限**：セクションごとに最大10〜12ポイント
* **遅延読み込み（レイジーロード）**：表示領域に入ったときにポイントを読み込む

### 分析統合

```javascript
// ポイントのインタラクションを追跡
function trackPointClick(productId, pointPosition) {
  // 分析プラットフォームへ送信
  gtag('event', 'interactive_point_click', {
    'product_id': productId,
    'position_x': pointPosition.x,
    'position_y': pointPosition.y
  });
}
```

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

### よくある問題

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

* **配置値を確認**：0〜100％である必要があります
* **商品のステータスを確認**：商品が公開されていることを確認
* **セクションの表示設定**：セクションが有効になっていることを確認

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

* **タッチターゲットのサイズ**：モバイル用にポイントサイズを大きくする
* **ビューポートの問題**：さまざまなデバイスサイズでテスト
* **パフォーマンス**：遅いデバイスではアニメーションを減らす

#### コンテンツの重なり

* **Zインデックスの競合**：レイヤーの順序を調整
* **ツールチップの位置調整**：オーバーレイの配置を設定
* **レスポンシブのブレイクポイント**：画面ごとに異なる位置を設定

### パフォーマンスの問題

* **読み込みが遅い**：画像を最適化し、ポイント数を減らす
* **アニメーションの遅延**：エフェクトを簡素化するかモバイルで無効にする
* **メモリ使用量**：大きなセクションには遅延読み込みを実装

## 🔍 テストと最適化

### A/Bテストのアイデア

* **ポイント配置**：異なる配置をテスト
* **ビジュアルスタイル**：パルスと静的ポイントを比較
* **コンテンツタイプ**：商品情報 vs カスタムメッセージ
* **カラースキーム**：ブランドカラーと対照的な色を比較

### 追跡すべき指標

* **クリック率**：ポイントのクリックから商品ページ訪問へ
* **コンバージョン率**：インタラクティブポイントからの購入
* **エンゲージメント時間**：ポイントとのやり取りに費やした時間
* **モバイル vs デスクトップ**：デバイスごとのパフォーマンス差