ホットスポットブロックは、静止画像の上に直接ホットスポットマーカーを配置することで、あらゆる静止画像をインタラクティブなクリック可能な体験に変換します。訪問者がホットスポットにカーソルを合わせたりクリックしたりすると、カスタムコンテンツを含むツールチップが表示されます。これにより、製品機能の強調、図解への注釈、部屋デザインの紹介、あらゆるビジュアルを通じた訪問者の誘導など、強力な方法として活用できます。
各ホットスポットは、独自のアイコン、色、位置、ツールチップの内容、リンクで完全にカスタマイズ可能です。必要な数のホットスポットを追加でき、マーカーとツールチップポップアップの両方のアニメーションスタイルを制御できます。
ページへのホットスポットブロックの追加
SeedProdページにホットスポットブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下で、ホットスポットブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、ホットスポットブロックをクリックして設定を開きます。コンテンツタブは3つのセクションに分かれています：画像、ホットスポット、ツールチップ。
画像：
- 画像：ホットスポットを配置する背景画像をアップロードまたは選択してください。
- 代替テキスト：アクセシビリティとSEOを向上させるため、画像の説明的な代替テキストを入力してください。
- 画像サイズ：画像の幅と高さをピクセル（px）またはパーセント（%）で設定します。
- 配置:ホットスポットブロックのセクション内での水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに個別の値をサポートします。
ホットスポット：
ホットスポットセクションには、画像に追加されたすべてのホットスポットマーカーが表示されます。各ホットスポット行には、そのアイコンとツールチップ内容のプレビューが表示されます。ホットスポットをドラッグして並べ替え、複製、または削除できます。ホットスポット行をクリックすると、個別の設定を展開できます：
- 水平方向の向き：画像上のホットスポットマーカーの水平位置を、0から100までのパーセンテージで設定します。
- 垂直方向の向き：画像上のホットスポットマーカーの垂直位置を、0～100％の範囲で設定します。
- ツールチップの内容:ホットスポットがトリガーされた際にツールチップポップアップ内に表示される内容を入力してください。太字、斜体、リンク、インラインカラーを含むリッチテキスト形式をサポートしています。
- 色：ホットスポットアイコンマーカーの色を設定します。
- 詳細設定：オンにすると、ラベル、リンク（新規ウィンドウで開く／ノーフォローオプション付き）、アイコン位置（左／右）、アイコンピッカー、カスタムアイコンサイズ切り替え、アイコンサイズスライダー（10～150px、カスタムアイコンサイズ有効時に表示）など、ホットスポットごとの追加オプションが表示されます。
リストの下部にある「+ ホットスポットを追加」をクリックして、画像に新しいホットスポットマーカーを追加します。
ホットスポットリストの下にある「ホットスポットアニメーション」ドロップダウンでは、すべてのホットスポットマーカーに適用される連続アニメーションスタイルを設定します。選択肢は「なし」「ソフトビート」「拡張」です。
ツールチップ:
- 位置:ホットスポットマーカーに対するツールチップの表示位置を選択します — 上、右、下、または左。
- トリガー:ツールチップを表示する操作を設定します — なし、ホバー、クリック。
- アニメーション:ツールチップが表示される際のアニメーションスタイルを選択します — フェード、拡大、スイング、スライド、落下。
- Duration:ツールチップの開閉アニメーションの長さをミリ秒単位で設定します（0～10,000ms）。
- 矢印を表示:ツールチップのバブルに表示される小さな方向矢印の表示/非表示を切り替えます。
- 最大幅:ツールチップポップアップの最大幅をピクセル単位で設定します（0～1000px）。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、ホットスポットブロックの画像スタイルと間隔をカスタマイズできます。
スタイル:
- 画像の影：画像の背後にドロップシャドウを追加します。「なし」「ヘアライン」「小」「中」「大」「特大」「2倍特大」から選択してください。
- 画像枠線：画像の周囲に枠線を追加します。枠線のスタイル（実線、点線、破線）、枠線の色、枠線の幅（上、右、下、左）、角を丸めるための枠線の角丸設定を設定します。
スペース:
- マージン:ホットスポットブロックの周囲の外側間隔（上、右、下、左）を制御します。デスクトップ、タブレット、モバイルごとに個別の値を設定できます。
- パディング：ホットスポットブロック内の内側余白（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルごとに個別の値を設定できます。
属性：
- CSS ID:ホットスポットブロックの自動生成された一意の識別子を表示します。SeedProdによって自動的に作成され、カスタムスタイリングやJavaScriptターゲティングに使用されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップ上で非表示:デスクトップ画面上でホットスポットブロックを非表示にします。
- タブレットで非表示:タブレット端末でホットスポットブロックを非表示にします。
- モバイルで非表示:モバイル端末でホットスポットブロックを非表示にします。
ステップ4: 変更を保存する
ホットスポットブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにホットスポットブロックの追加に成功しました！静的な画像をインタラクティブな体験に変えることで、訪問者の注意を誘導し、重要な詳細を強調し、エンゲージメントを高めることができます。さまざまなホットスポットアニメーション、ツールチップの位置、アイコンスタイルを試して、ブランドに合った体験を創出し、訪問者がコンテンツを探索し続けるようにしましょう。