インタラクティブポイントの追加
インタラクティブポイントは、Interactive Spaces を生き生きとさせるクリック可能なホットスポットです。このガイドでは、これらのインタラクティブ要素の作成、位置設定、スタイリングに関する必要な情報をすべて説明します。
🎯 インタラクティブポイントとは？
インタラクティブポイントは、背景画像の上に重ねられたクリック可能な領域で、製品情報、リンク、またはカスタムコンテンツを表示します。訪問者がこれらのポイントにホバーまたはクリックすると、次のものが表示されます：
製品の詳細と価格
クイックでカートに追加するオプション
製品ページへのリンク
カスタムテキストや行動喚起メッセージ
🛠️ 最初のインタラクティブポイントを追加する
ステップ1：ポイント設定にアクセス
テーマカスタマイザーを開く
次へ移動： オンラインストア → テーマ
クリック カスタマイズ Plain Jane Interactive 上で
Interactive Environment セクションを選択
Interactive Environment セクションをクリック
下にスクロールして インタラクティブポイント
新しいポイントを追加
クリック インタラクティブポイントを追加
新しいポイントの設定が表示されます
ステップ2：ポイントのコンテンツを設定
製品ベースのポイント
製品を選択
クリック 製品を選択
ストアの製品カタログから選択
製品のタイトル、価格、画像が自動で入力されます
上書きオプション
カスタムタイトル：製品名を上書きする
カスタム説明：特定の詳細を追加する
価格を表示：価格表示のオン/オフを切り替え
カスタムリンクポイント
カスタムリンクを有効にする
切り替え カスタムリンクを使用する をオンにする
遷移先のURLを入力
カスタムのタイトルと説明を追加
ステップ3：ポイントの位置を決める
視覚的配置
X位置（水平）
値の範囲：0〜100％
0％ = 左端
50％ = 中央
100％ = 右端
Y位置（垂直）
値の範囲：0〜100％
0％ = 上端
50％ = 中央
100％ = 下端
配置のヒント
プレビューモードを使用 してポイントの配置をリアルタイムで確認する
小さな増分で微調整する （1〜2％の調整）
異なる画面サイズでテストする 適切な配置を確認するために
🎨 ポイントのスタイリング
ポイントの外観オプション
スタイル種類
パルス（デフォルト）
アニメーションする脈動する円
注目を引くのに最適
さりげない動きが目を引きます
プラスアイコン
シンプルな「＋」記号
ミニマルでモダン
プロフェッショナル／コーポレートなテーマに良い
ドット
シンプルな円形インジケーター
最も控えめなオプション
画像に自然に馴染みます
色のカスタマイズ
プライマリカラー：メインポイントの色
セカンダリカラー：アクセントまたはパルスの色
テキストの色：コンテンツオーバーレイのテキスト
背景色：ポイントの背景
サイズと可視性
ポイントサイズ：直径を調整（デフォルト：40px）
パルス強度：アニメーションの強さを制御
不透明度：ポイントの透明度を設定
Zインデックス：レイヤー順序（大きいほど前面）
📱 モバイルに関する考慮点
タッチフレンドリーなデザイン
最小サイズ：タップしやすい44px
間隔：ポイント間は少なくとも8px
コントラスト：モバイルでポイントが見えるようにする
モバイル固有の設定
モバイルで表示：ポイントの表示を切り替え
モバイルサイズの倍率：小さな画面用にサイズを調整
簡素化されたアニメーション：パフォーマンスのために動きを減らす
🔧 高度なポイント設定
ホバー効果
/* カスタムホバーアニメーション */
.interactive-point:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
}カスタムコンテンツオーバーレイ
リッチテキストのフォーマット：説明にHTMLを使用する
画像オーバーレイ：ツールチップに製品画像を追加する
ビデオコンテンツ：製品ビデオを埋め込む
ソーシャルプルーフ：レビューや評価を含める
条件付き表示
デバイスに基づいて表示/非表示：モバイル対デスクトップ
時間ベースの表示：季節やプロモーション用コンテンツ
ユーザー行動：再訪問者向けに異なるコンテンツを表示
💡 ベストプラクティス
戦略的な配置
主要製品を目立たせる
ベストセラーや新着を強調する
高利益の商品に注力する
論理的な製品グループを作成する
自然な配置
画像内の実際の製品の上または近くにポイントを配置する
空白やランダムな配置は避ける
閲覧者の視線の流れを考慮する
バランスの取れた分布
すべてのポイントを一箇所に集めない
スペース全体に視覚的なリズムを作る
要素の間に余白を残す
コンテンツ戦略
魅力的なコピー
行動を促す言葉を使う
ユニークな特徴や利点を強調する
テキストは簡潔でスキャンしやすく保つ
価格戦略
即時の透明性のために価格を表示する
セール価格を使って緊急性を作る
高級品では価格を非表示にすることを検討する
行動喚起の最適化
明確で具体的なCTA（「今すぐ購入」「詳細を見る」）
適切な場合は緊急性を作る
CTAのスタイルをブランドの声に合わせる
🎪 クリエイティブな実装アイデア
シーズンキャンペーン
ホリデーコレクション：インタラクティブなギフトガイド
夏／冬：季節の製品ショーケース
新学期準備：寮の設定での学生必需品
ライフスタイル統合
部屋の模様替え：購入可能な製品を使ったビフォー/アフター
アウトフィットビルダー：コーディネートされたトータルルック
レシピ統合：料理の文脈でのキッチンツール
ブランドストーリーテリング
舞台裏：ツールを強調した製造工程
ブランドの歴史：製品の進化を示す年代記
サステナビリティ：エコフレンドリーな製品の特徴
📊 パフォーマンス最適化
読み込みに関する考慮点
画像の最適化：背景画像を圧縮する
ポイントの制限：セクションごとに最大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テストのアイデア
ポイントの配置：異なる位置をテストする
視覚スタイル：パルスと静的ポイントを比較する
コンテンツタイプ：製品情報とカスタムメッセージを比較する
カラースキーム：ブランドカラーと対照的な色をテストする
追跡すべき指標
クリック率：ポイントのクリックから製品ページ訪問へ
コンバージョン率：インタラクティブポイントからの購入
エンゲージメント時間：ポイントとのやり取りに費やした時間
モバイル対デスクトップ：デバイスごとのパフォーマンスの違い
最終更新