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

キャプチャした画面上のプルダウンメニューなどの要素の位置が意図した箇所とずれてしまう

キャプチャ元の製品仕様として、画面幅に合わせた位置制御をJavaScriptを用いて行っている要素については、画面幅設定が「自動」モードの場合、意図した位置に表示されないケースがあります。
下記のように「コンテンツ設定」から、画面幅設定を「手動」に切り替え、適切な幅の設定を行っていただくことで解決する可能性があります。

設定方法

  1. 該当のコンテンツ編集画面を開く

  2. 右上の︙メニューから「コンテンツ設定」を選択

  3. 画面幅設定で「固定」を選択

  4. キャプチャした際のブラウザの画面幅を入力し、設定

  5. ずれていた要素の位置が意図した箇所になっているか、編集画面で確認 (必要に応じて、4.の設定画面で何度でも調整可能です)

    スクリーンショット2024-10-11183139.png


    上記設定によって、常に固定された幅での見た目が維持され、お客様がご覧になる幅に合わせて表示の拡大縮小がかかるようになるため、要素の位置が意図した箇所に固定できるようになります。

留意点

  • キャプチャ時の幅を記憶していない場合も、少しずつ変更しながら見え方を確認できますので、何度かお試しください

  • 画面幅設定を「固定」とする場合は、1440pxなどできるだけ一般的なブラウザ画面の幅に合わせた状態でのキャプチャをおすすめしております。これによって小さな画面で閲覧された場合にも文字サイズ等が小さくなりすぎることを避けることができます

参考情報

  • キャプチャした時の画面の幅(現在のWindowサイズ)はこちら (※外部サイト)などから確認できますので、確認した値でpx単位をお試しください

画面幅を固定に設定してもズレが解消しない場合

上記の設定を行ってもガイドの位置ズレが解消しない場合は、ガイド位置の仕様と制約をご覧ください。ガイド専用の回避策(px幅の正確な確認方法・ガイド位置調整・配置のコツ)を詳しくまとめています。


ページを開いた直後だけズレて、数回操作すると正常になる場合

「ページを開いた直後は評価欄などのクリック位置がズレていて、1〜2回誤操作した後(または少し待った後)に正常に反応するようになる」という場合、原因は画面幅の設定ではなく、ページ表示直後にレイアウトがまだ確定していないことであることがほとんどです。


なぜ起きるか

  • PLAINERは、ガイドやクリック判定の位置を、対象の要素の実際の表示位置に合わせて常に自動で計算し続ける仕組みになっています。

  • 一方、キャプチャ元のページがJavaScriptで表示を組み立てる場合、ページを開いた直後の一瞬はレイアウトがまだ動いており、要素の位置が確定していません。この「レイアウトが落ち着く前」のタイミングでは、クリック判定の位置が実際の要素からずれてしまい、意図しない動作(別の画面が開く、更新が実行される等)につながることがあります。

  • レイアウトが落ち着くと位置が自動的に補正されるため、数回操作した後や少し待った後には正常に反応するようになります。


確認・回避のポイント

  • 公開(本番)で改めて確認してください。編集画面やプレビューではレイアウト確定までの一瞬のズレが目立つ場合でも、公開後のデモでは問題なく動作するケースが多くあります。まずは公開した状態で挙動をご確認ください。

  • ページを開いてから一呼吸おいてから操作すると、レイアウト確定後の正しい位置で反応します。

  • クリックで進むガイドは、ページ読み込み直後にレイアウトが大きく動く箇所(動的に生成される一覧やフォームなど)を避け、ヘッダー・固定要素などレイアウト変化の少ない箇所の近くに配置すると、開いた直後のズレを軽減できる場合があります。


JavaScriptによる位置制御が強いページで、上記でも改善しない場合は、具体的なコンテンツURLと該当ページを添えてガイド位置の仕様と制約もあわせてご確認のうえ、サポートまでお問い合わせください。

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