メインコンテンツにスキップ

ガイド位置の仕様と制約

バルーンガイド・ポップアップガイドの表示位置に関する制約事項を、お問い合わせの多い順にまとめています。


⚠️ 「位置を指定して追加」と「要素を選択して追加」の使い分けについては、「位置を指定して追加」と「要素を選択して追加」の使い分けをご覧ください。


1. プレビューと本番で位置がズレる

ガイドの位置は、キャプチャ時の画面サイズを基準に設定されます。閲覧者のブラウザサイズが異なると、ガイド位置がズレて表示されることがあります。

  • 回避策:「画面幅の固定機能」をご利用ください。閲覧者のブラウザサイズに関わらず、一定の画面幅で表示されます。詳細は画面幅の固定機能をご覧ください。


画面幅を固定に設定してもガイドの位置がズレる場合

画面幅を「固定」に設定した後もガイドのズレが解消しない場合、以下の原因が考えられます。


原因1:設定したpx幅がキャプチャ時の実際のブラウザ幅と一致していない


原因2:キャプチャ元のページがJavaScriptで要素の位置を動的に制御している

  • ページがブラウザ幅に応じてJavaScriptで要素を再配置する構造の場合、画面幅を固定にしても、ガイドと要素の位置がずれることがあります。この場合、現状の仕様では完全な回避は困難です。

  • 対処法:「高度な編集」→「ガイド位置調整」でpx単位の微調整をお試しください。また、ページ内でレイアウト変化が少ない箇所(ヘッダー・固定要素の周辺など)にガイドを配置することで、ズレを軽減できる場合があります。


2025年6月のアップデートにより、画面幅を固定に設定しているデモでバルーンガイドの吹き出し・ポインター・ページリンクのハイライト枠が正しい位置に表示されない不具合が修正されました。上記の原因に該当しないケースで以前からズレが気になっていた場合は、改めてプレビューでご確認ください。


編集画面では正しいのに、プレビュー・本番でだけ画面下部の空白にハイライトされる場合

「編集画面ではボタンの上に正しくハイライトされるのに、プレビューや本番だと何もない空白部分にハイライトされてしまう」という場合、原因は画面幅ではなく「ガイド表示時の自動スクロール」であることがほとんどです。


なぜ起きるか

  • PLAINERは、ガイドを表示するとき対象の要素を画面の中央あたりに来るように自動でスクロールします(この自動スクロールの仕様はガイドが指し示す要素が表示される位置が画面中央のため、長文のガイドが見切れてしまうもあわせてご覧ください)。

  • ところが、対象がページの一番下にあるボタンなど、これ以上下にスクロールできない位置にある場合、要素を画面中央まで引き上げきれません。その結果、ハイライト枠だけが「要素が中央に来た前提の位置」に表示され、実際のボタンからずれて空白部分に当たって見えます。

  • 編集画面ではこの中央寄せのスクロールが発生しないため、ズレが見えず「編集では正しいのにプレビューだけズレる」という現象になります。これは不具合ではなく、現在の表示仕様によるものです。


回避策:ガイドを2つに分ける

対象のボタンを1つのガイドで直接指すのではなく、「先に下までスクロールさせるガイド」と「ボタンを指すガイド」の2つに分けると、空白へのズレを避けられます。具体的な手順は以下のとおりです。

  1. 1つ目のガイド(スクロール用)を作る
    編集画面でページを一番下までスクロールした状態にし、画面下部あたりにガイドを追加します(「位置を指定して追加」が便利です)。文言は「下までスクロールしてください」など、次に進むと最下部に移動することを伝える内容にします。

  2. 2つ目のガイド(ボタン用)を作る
    1つ目のガイドの次の順番に、押してほしいボタンを対象にしたガイドを追加します。文言は「このボタンを押してください」などにします。

こうすると、閲覧者はまず1つ目のガイドで最下部まで移動し、その状態で2つ目のガイドが表示されるため、ボタンがすでに画面内にある状態となり、中央寄せのスクロールによるズレが起きにくくなります。


補足:「高度な編集」が表示されない場合

  • px単位の微調整(「高度な編集」→「ガイド位置調整」)は、吹き出し形のガイドで利用できます。ガイドをクリックした状態で右側のメニューを下までスクロールすると表示されます。詳細は作成したガイドの位置を調整したいをご覧ください。

  • 「高度な編集」が表示されない場合は微調整ができないため、上記の「ガイドを2つに分ける」方法での対処をおすすめします。


上記をお試しいただいても解決しない場合は、該当のデモURLをサポートまでお知らせください。実際のコンテンツを確認した上で、より詳しいご案内が可能です。


2. ガイドが画面から見切れる

長いテキストのガイドや、画面端に設置したガイドが画面からはみ出すことがあります。現在の仕様では、ガイドが画面端に来た場合の自動位置補正は行われません。

  • 回避策:

    • ガイドのテキストを短くする(要点のみに絞る)

    • 「位置を指定して追加」で表示位置を手動で調整する

    • キーボードのEnterキーで次のガイドに進むことも可能です


3. ガイドを別ページにコピーできない

作成済みのガイド単体を、同じコンテンツ内の別ページにドラッグ・コピーする機能は現在ありません。

  • 回避策:

    • 移動先のページで新しくガイドを作成してください

    • ページ単位での複製であれば、サムネイル間の「+」ボタンから「他のデモコンテンツからページを追加」機能でガイドごと引き継げます


4. 画像コンテンツ(スクリーンショットベース)の制約

画像コンテンツの場合、バルーンガイドは「位置を指定して追加」でのみ設置可能です(要素を選択しての設置はできません)。ポップアップガイドは画像コンテンツでも通常通り使用できます。


5. ガイドの位置指定の精度

こちらの回答で解決しましたか?