バルーンガイド・ポップアップガイドの表示位置に関する制約事項を、お問い合わせの多い順にまとめています。
⚠️ 「位置を指定して追加」と「要素を選択して追加」の使い分けについては、「位置を指定して追加」と「要素を選択して追加」の使い分けをご覧ください。
1. プレビューと本番で位置がズレる
ガイドの位置は、キャプチャ時の画面サイズを基準に設定されます。閲覧者のブラウザサイズが異なると、ガイド位置がズレて表示されることがあります。
回避策：「画面幅の固定機能」をご利用ください。閲覧者のブラウザサイズに関わらず、一定の画面幅で表示されます。詳細は画面幅の固定機能をご覧ください。
画面幅を固定に設定してもガイドの位置がズレる場合
画面幅を「固定」に設定した後もガイドのズレが解消しない場合、以下の原因が考えられます。
原因1：設定したpx幅がキャプチャ時の実際のブラウザ幅と一致していない
対処法：こちらのツール（外部サイト）などでキャプチャ時のブラウザ幅を確認し、その値を正確に入力してください。1440pxはあくまで目安です。
原因2：キャプチャ元のページがJavaScriptで要素の位置を動的に制御している
ページがブラウザ幅に応じてJavaScriptで要素を再配置する構造の場合、画面幅を固定にしても、ガイドと要素の位置がずれることがあります。この場合、現状の仕様では完全な回避は困難です。
対処法：「高度な編集」→「ガイド位置調整」でpx単位の微調整をお試しください。また、ページ内でレイアウト変化が少ない箇所（ヘッダー・固定要素の周辺など）にガイドを配置することで、ズレを軽減できる場合があります。
✅ 2025年6月のアップデートにより、画面幅を固定に設定しているデモでバルーンガイドの吹き出し・ポインター・ページリンクのハイライト枠が正しい位置に表示されない不具合が修正されました。上記の原因に該当しないケースで以前からズレが気になっていた場合は、改めてプレビューでご確認ください。
✅ あわせて、画面幅を固定に設定したデモの2ページ目以降のステップで、バルーンガイドの吹き出し・ハイライト・ポインターが対象の要素からずれて表示される不具合も修正されました。ズーム・パン機能を併用している場合に特に発生しやすい症状でした。固定幅で複数ページのデモを作成しており、2ページ目以降にガイドを設定している場合は、改めてプレビューで表示をご確認ください（自動幅のデモや、ズーム・パンを使っていないデモには影響しません）。
編集画面では正しいのに、プレビュー・本番でだけ画面下部の空白にハイライトされる場合
「編集画面ではボタンの上に正しくハイライトされるのに、プレビューや本番だと何もない空白部分にハイライトされてしまう」という場合、原因は画面幅ではなく「ガイド表示時の自動スクロール」であることがほとんどです。
なぜ起きるか
PLAINERは、ガイドを表示するとき対象の要素を画面の中央あたりに来るように自動でスクロールします（この自動スクロールの仕様はガイドが指し示す要素が表示される位置が画面中央のため、長文のガイドが見切れてしまうもあわせてご覧ください）。
ところが、対象がページの一番下にあるボタンなど、これ以上下にスクロールできない位置にある場合、要素を画面中央まで引き上げきれません。その結果、ハイライト枠だけが「要素が中央に来た前提の位置」に表示され、実際のボタンからずれて空白部分に当たって見えます。
編集画面ではこの中央寄せのスクロールが発生しないため、ズレが見えず「編集では正しいのにプレビューだけズレる」という現象になります。これは不具合ではなく、現在の表示仕様によるものです。
回避策：ガイドを2つに分ける
対象のボタンを1つのガイドで直接指すのではなく、「先に下までスクロールさせるガイド」と「ボタンを指すガイド」の2つに分けると、空白へのズレを避けられます。具体的な手順は以下のとおりです。
1つ目のガイド（スクロール用）を作る
編集画面でページを一番下までスクロールした状態にし、画面下部あたりにガイドを追加し