StudioでUXを改善！モーダル表示中の背景スクロールを禁止する方法｜コピペOK

モーダルを開いた瞬間、背景が"ズルッ"と動いてませんか？

『Studio』でフォームやキャンペーン告知をモーダル（ポップアップ）で表示したとき、背景のページまでスクロールできてしまうことがあります。特にスマホは指が少し触れただけで背景が動きやすく、ユーザーが「いま何を見てたっけ？」となりがちです。

そこで今回紹介するのが、モーダル表示中だけ背景スクロールを禁止するTips。実装はとてもシンプルで、ID設定＋カスタムコード貼り付けだけでUXが一段上がります✨

※本Tipsは、『Studio』の有料プラン（カスタムコード機能が使えるプラン）での運用を前提にしています。

『Studio』のモーダルで起きがちなUX問題📱

モーダルは「今見てほしい情報」に集中してもらうためのUIですが、背景が動くと集中が切れてしまいます。

• 背景がスクロールして元の位置を見失う
• 背景スクロールが気になって情報が入ってこない
• 操作体験が不安定に感じて離脱のきっかけになる

「モーダルは作れたけど、なんか惜しい…」となる原因のひとつが、この背景スクロール問題です。

解決策｜カスタムコードで背景スクロールをロックする

やることはシンプルです。

• モーダルを開くボタンを押したら、bodyにno-scrollを追加
• モーダルを閉じたら、bodyからno-scrollを削除

これで、"モーダルが開いている間だけ背景がスクロールしない"状態を作れます。

用語解説ミニ📘

• モーダル：画面の上に重なるポップアップ。ユーザーの操作を一旦そこに集中させるUI
• body：Webページ全体の土台。背景スクロールの主役
• ID：パーツを特定する「名札」。コード側から狙い撃ちできる

実装手順｜ID設定 → カスタムコードを貼る🔧

手順1：ボタンにIDを設定する

モーダルを開くボタンを選択し、右側の設定パネルから「ID」にopen-modal-buttonと入力します。モーダルを閉じるボタン（×ボタンや「閉じる」テキストなど）を選択し、同様に「ID」にclose-modal-buttonと入力します。

手順2：カスタムコードを埋め込む

デザインエディタの右パネルからサイト設定の「カスタムコード」を開き、「埋め込みコード」の</body>内の末尾に以下のコードを貼り付けます。

<style>
  /* bodyのスクロールを禁止するスタイル */
  .no-scroll {
    overflow: hidden;
  }
</style>

<script>
  // それぞれのIDを持つ要素を取得
  const openButton = document.getElementById('open-modal-button');
  const closeButton = document.getElementById('close-modal-button');
  const body = document.body;

  // モーダルを開くボタンがクリックされたら
  if (openButton) {
    openButton.addEventListener('click', function() {
      // bodyに no-scroll クラスを追加してスクロールを禁止
      body.classList.add('no-scroll');
    });
  }

  // モーダルを閉じるボタンがクリックされたら
  if (closeButton) {
    closeButton.addEventListener('click', function() {
      // bodyから no-scroll クラスを削除してスクロールを許可
      body.classList.remove('no-scroll');
    });
  }
</script>

よくあるつまずき＆改善アイデア集🧠

1）閉じるボタンが複数ある

「×」「閉じるテキスト」など閉じる導線が複数ある場合、閉じる操作が必ずclose-modal-buttonを通るように設計するのがコツです。背景クリックで閉じるなら、背景ボックスにclose-modal-buttonを付けるのが手軽です。

2）スクロールが戻らない（閉じるイベントが拾えてない）

原因の多くは以下です。

• IDの入力ミス（close-modal-buttomなど）
• 実際に閉じている要素にIDが付いていない

まずは『Studio』側で、本当にクリックされる要素にIDが付いているか確認しましょう。

まとめ：小さな改善が"安心感"を作る🚀

『Studio』でモーダルを使うなら、背景スクロール禁止はコスパ最強のUX改善です。

• スマホの誤操作が減る
• 読ませたい情報に集中してもらえる
• フォームや予約導線のCV改善にもつながりやすい

まずはあなたのサイトで「モーダルを開いたとき背景が動いてないか？」をチェックして、今回のコードをコピペで導入してみてください。体験の"安定感"がグッと上がります😉