> 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/plain-jane-interactive/sections-and-features/adding-interactive-points.md). # インタラクティブポイントの追加 インタラクティブポイントは、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 デスクトップ**：デバイスごとのパフォーマンス差 --- # 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/plain-jane-interactive/sections-and-features/adding-interactive-points.md?ask=&goal= ``` `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.