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

インタラクティブポイントは、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

• コントラスト：モバイル上でポイントが見やすいことを確認

モバイル専用設定

• モバイルで表示：ポイントの表示切替

• モバイルサイズ倍率：小さな画面向けにサイズを調整

• 簡略化されたアニメーション：パフォーマンスのために動きを抑制

🔧 高度なポイント設定

ホバーエフェクト

/* カスタムホバーアニメーション */
.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ポイント

• 遅延読み込み（レイジーロード）：表示領域に入ったときにポイントを読み込む

分析統合

// ポイントのインタラクションを追跡
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 デスクトップ：デバイスごとのパフォーマンス差