バルーンガイド・ポップアップガイドの追加方法には「要素を選択して追加」と「位置を指定して追加」の2種類があります。それぞれ用途が異なり、誤った使い方をするとガイドの表示位置がズレる原因になります。本記事では、両者の違いと使い分けの基準を解説します。
結論
通常のHTMLコンテンツ（Webサイトをキャプチャしたコンテンツ）：「要素を選択して追加」をご利用ください
画像コンテンツ（スクリーンショットなど画像をアップロードして作成したコンテンツ）：「位置を指定して追加」をご利用ください
なぜ使い分けが必要か
「要素を選択して追加」の仕組み
画面上のHTML要素（ボタン・入力欄・テキストなど）にガイドを紐付けます。要素の位置を基準にガイドが表示されるため、閲覧者のブラウザ幅やレイアウトが変わってもガイドは要素に追従して表示されます。
「位置を指定して追加」の仕組み
画面上のXY座標を直接指定してガイドを設置します。HTML要素には紐付かないため、閲覧者の画面幅やレイアウトが編集時と異なる場合、ガイドが意図した位置からズレて表示されます。
この仕様上、通常のHTMLコンテンツで「位置を指定して追加」を使うと、閲覧環境によって位置ズレが発生します。
利用シーン別の推奨方法
通常のHTMLコンテンツの場合
原則として「要素を選択して追加」をご利用ください。ガイドを付けたい要素が直接選択できない場合や、選択範囲の調整が必要な場合は、以下の機能を組み合わせて調整できます。
選択中の要素を変更：選択範囲を親要素・子要素へ広げたり狭めたりできます
ハイライトサイズ・位置調整：ハイライト枠のサイズ・位置を微調整できます
ガイド位置調整：吹き出し（ガイド本体）の位置を微調整できます
詳細は理想の位置にガイドを付けたいをご覧ください。
画像コンテンツの場合
画像コンテンツはHTML要素を持たないため、バルーンガイドは「位置を指定して追加」でのみ設置可能です。画像内の特定の箇所にガイドを置く用途で、この機能が想定されています。なお、ポップアップガイドは画像コンテンツでも通常通り使用できます。
画像コンテンツでも座標ベースのため、閲覧者の画面幅によって位置がズレる場合があります。画面幅の固定機能の併用をおすすめします。
よくあるご質問
Q. 「位置を指定して追加」で設置したガイドが、閲覧時にズレてしまいます
通常のHTMLコンテンツでは「位置を指定して追加」は推奨されません。「要素を選択して追加」で設置し直すことをご検討ください。
どうしても座標指定のままご利用になりたい場合は、画面幅の固定機能を併用することで、閲覧時の画面幅を統一できます。詳細は画面幅の固定機能をご覧ください。
Q. ガイドを付けたい箇所が要素として選択できません
「選択中の要素を変更」「ハイライトサイズ・位置調整」「ガイド位置調整」を組み合わせることで、要素にバインドしたまま位置・範囲を調整できます。詳細は理想の位置にガイドを付けたいをご覧ください。