マーケティング向けに 静的 HTML を配信しているチームでも、長文が入った瞬間に縦スクロールが有効化され、従来型のスクロールバーがインライン終端で 12～17 px を奪うと、中央寄せのヒーローやスティッキーナビ、モーダルの位置が横方向に「跳ねる」古典的な UX 不具合は今も再発します。デザインではレイアウトシフト、計測では CLS として現れます。2026 年現在、scrollbar-gutter: stable はその宣言的な解決策です。短いページでもガターを先取りしておくため、後から overflow が変わってもグリッド全体が再フローしにくくなります。本稿は手書きでも Eleventy や Astro、Hugo の出力でもよい 静的サイト を想定し、ダイアログやスティッキークロームとの併用、@supports によるフォールバック、そして Safari / WebKit の実機サインオフがヘッドレスだけでは足りない理由を整理します。クロスドキュメントで視覚的連続性まで求める場合は、別問題を解く 静的 MPA での View Transitions API とセットで読むと、同じリリース列車に載せやすいです。
この記事では判断用のマトリクス、コピペ可能な @supports レシピ、ガター幅や CLS 予算の数量感、そしてレンタル Mac mini を使った Safari チェックリストまで持ち帰れるように構成しました。
スクロール可否が中央レイアウトを壊す理由
overflow-y がハイドレーション後に visible から auto に変わる、あるいは CMS プレビューが背の高いブロックを挿入する——その瞬間に従来型スクロールバーが現れ、横方向の空間を奪います。1200 px の max-width 記事を margin-inline: auto で中央に置いていたつもりが、初回ペイント時にユーザーが覚えたビューポートのクロムと比べて 約 15 px ずれる、といった現象です。背景だけ 100vw に伸ばしたスティッキーヘッダーは、本文がガターを尊重しているのに背景がフル幅のままなので、さらに不揃いに見えます。
かつては window.innerWidth - document.documentElement.clientWidth を測る JavaScript が主流でしたが、ハイドレーションと競合し、ズームされたビューポートでは破綻し、スクロール開始までオーバーレイとして隠れるバーでは無意味、という穴だらけでした。方針を CSS に寄せるとペイント時の分岐が減り、静的ジェネレータの出力も決定的になります。
2026 年初頭の公開マーケテンプレのテレメトリでは、デスクトップセッションのおよそ 4～7% が依然として非オーバーレイの従来型スクロールバーを示す例があり、ガター予約を無視すると厳しい CLS 予算に落ちる余地が残っています。
デザイントークンには --page-gutter-inline のように scrollbar-gutter の方針と整合する余白を定義し、コンポーネントライブラリが対称パディングを固定値で押し付けてガターと喧嘩しないようにします。
フォールバック付きで scrollbar-gutter を書く
プログレッシブエンハンスメントはスクロールのルートから始めます。多くの静的サイトでは html または body のどちらか一方にだけ適用し、二重予約を避けます。
html {
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; } /* 最終手段：常に従来型バーを表示 */
}@supports not 側は意図的に乱暴です。scrollbar-gutter を知らないエンジンでも overflow-y: scroll で常にスペースを確保できますが、短いページでもバーが常時見える代償があります。CLS が契約上クリティカルで、ピクセル単位のミニマルなクロムより優先される場合に選びます。
overflow-x: hidden は慎重に。横方向のクリップが、マーケが広い表を差し込んだあとのアンカー付きダイアログと悪さをする例があります。
ハッシュ付きの同一静的 CSS バンドルにレイアウト原語と一緒に載せ、CDN の部分デプロイで HTML とガター規則がズレないようにしてください。
マトリクス：stable / auto / レガシー
| キーワード | 向く場面 | トレードオフ |
|---|---|---|
stable | 非同期コンテンツ後にスクロール可否が切り替わるマーケページ | 本来スクロールしない極短 LP ではわずかな非対称が出る |
auto | overflow が確定したときだけガターを欲しい場合 | 後からスクロール可能になったときの初回ペイントシフトは防げない |
| JS 幅ハック | レガシー企業ブラウザ | ズーム、分割ビュー、仮想リストで壊れやすい |
ダイアログ、背景ロック、入れ子 overflow
モーダルで body に overflow: hidden を当てつつ、利用規約だけ内側スクロールにするパターンでは、ロックの瞬間にスクロールバーが消えて中央のシェルが横に動くことがあります。CSS 側で scrollbar-gutter: stable をダイアログを開く前から有効にしておくと、ロック／解除の遷移でも再フローを抑えられます。
ネイティブ <dialog> を使う場合、inert な背景がルートのガター方針とどう相互作用するかは Safari のマイナーごとに挙動が磨かれてきた経緯があるため、リグレッションに備えて記録を残してください。
二段スクロールのドキュメントでは、内側に overscroll-behavior: contain を置き、ゴムバンドとルートのガター予約が争わないようにします。
position: sticky の告知バーと併用する場合、110% ズームでスティッキーのオフセットがガター確保のあとに再計算され、トランスフォームアニメと同フレームで 1 フレームだけ跳ねることがあるので録画で確認します。
クラウド Mac mini 上の Safari QA
Playwright の WebKit はパース検証には向きますが、初回ホイールイベントのあとにオーバーレイスクロールバーがフェードインする際の微妙なシフトまでは保証しません。Apple シリコン上の Safari でリリースあたり 20～35 分 を確保し、契約上のサインオフは安定版、スクロールバーヒューリスティクスまわりの退行切り分けは Technology Preview、と役割を分けるのが現実的です。
調達が遅れる場合はクラウド Mac mini をスプリント単位で借りる手があります。MacHTML の Apple Silicon ホストは多くの場合 日 $16.9 前後から、静的バンドルを SSH で押し込み、VNC で本番に近い Safari 設定と並べて比較、という流れを同日で回せます。貸出ノートを送るより安く早いケースも珍しくありません。
本番に合わせて color-scheme、任意の ::-webkit-scrollbar テーマ、フォントスタックをミラーしてください。カスタムスクロールバーはガター幅の前提を変えます。
ダイアログ開閉を 120 fps のスローモーションで録画すると、背景とモーダルで 1 フレームだけ食い違う争いを言葉より証拠で終わらせやすいです。
運用では scrollbar-gutter を含む CSS のハッシュを CDN キャッシュキーに結びつけ、部分デプロイで HTML とレイアウトトークンが非同期にならないようにします。
CLS 予算とテレメトリ
デスクトップ LCP ページでは CLS を 0.05 以下に抑える SLA が増えています。ガターを先取りするコストは、後から JavaScript でパディングを足し直すより累積シフトとしては小さくなりがちです。
RUM から横方向シフトのピクセルヒストグラムを吐き出し、ルート変更で 8 px を超えるスパイクはスクロール可否の切り替えとガター未設定を疑ってください。
モーダルオープンと同じセッションで CLS が 0.02 を超えて悪化したら、スクロールロック実装がバーを消したあと幅補償を戻していない典型パターンを疑います。
四半期ごとに、ダイアログ多めのフローで最長 30 セッションを手でレビューしてください。オーバーレイのフェードインを「画像のレイアウトシフト」と誤ラベルする自動バケツがまだ残ります。
静的パイプライン向けロールアウト
- ビジュアル diff がステージングを通るまで
data-*で body に段階的に載せる。 - Playwright で背の高いフィクスチャ注入の前後にヒーローのバウンディングボックスの x オフセットを比較し、6 px を超えたらアラート。
- どのロケールから先に出すか文書化し、RTL ではガター予約に加えてミラー化したパディングトークンが要るか検討する。
- Lighthouse と WebPageTest のトレースを、Safari 画面録画と同じセッション ID で監査証跡として保管する。
よくある質問
scrollbar-gutter は overflow-y: scroll ハックの完全な置き換えになりますか？
モダンな常時更新ターゲットでは多くの場合そうです。@supports not の逃げ道だけはレガシー互換モードのために残してください。
stable は極小 LP で無駄なスペースを食いませんか？
わずかに食います。常時バー表示よりマシか、CLS の影響が小さいかをブランド側と比較して選びます。
100vw 背景とは干渉しますか？
します。生のビューポート単位ではなく、テキスト列に論理幅トークンを結びつけた背景の方が安全です。
Apple Silicon Mac mini は、WebKit のスクロールバー議論を終わらせる最短経路です。オーバーレイのヒューリスティクス、長時間キャプチャのサーマル、macOS のアクセシビリティ切り替えは Linux だけの CI では再現が難しい領域です。MacHTML は SSH/VNC 付きのクラウド Mac mini で scrollbar-gutter、ダイアログ、スティッキークロームを別の CapEx なしに検証できます。スプリントで確保し、証拠が取れたら解放する運用が現実的です。
クラウド Mac mini で Safari レイアウト QA
Apple Silicon をレンタルし、scrollbar-gutter・モーダルのスクロールロック・スティッキーナビを実 WebKit で検証できます。