こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
Webサイトを見ているとき、スマホの画面をスクロールしようとした瞬間、急に広告や画像がスポッと割り込んできて、「うわっ、読もうとしていた記事が下に押しやられた！」 イラッとした経験、ありませんか？ 読もうとしたボタンを誤ってタップしてしまい、変なページに飛ばされたりすると、もう絶望的な気持ちになりますよね。
あの現象、エンジニアの間では「レイアウトシフト（CLS: Cumulative Layout Shift）」と呼んでいます。
今回は、あのユーザー泣かせの「画面のガタつき」が、ブラウザの裏側でどうやって引き起こされているのか。そして、それをどうやってスマートに防ぐのかを、難しい専門用語をできるだけカバンにしまい込んで、お茶を飲みながらでもわかるように紐解いていきましょう。大丈夫、仕組みさえ分かれば怖くありませんよ！
—
そもそも、ブラウザの中で何が起きているの？
私たちが普段何気なく見ているWebページですが、ブラウザ（ChromeやSafariなど）の頭の中では、実はものすごいスピードで「大工仕事」が行われています。
HTMLという設計図が届くと、ブラウザは「よし、ここに柱を立てて、壁を塗って……」と、上から順に材料を組み立てていきます。この時、組み立てられた骨組みのことを「DOMツリー」、見た目の色や形をまとめたものを「CSSOMツリー」と呼び、最終的に画面のどこに何を配置するかを決める作業を「レイアウト（あるいはリフロー）」と呼びます。
ここで問題になるのが、「配達の順番と、荷物のサイズ」です。
身近な例え：朝の通勤電車の座席
想像してみてください。あなたは電車のロングシートの端っこに座り、新聞（HTML）を広げて読んでいます。
そこに、後から乗ってきた大柄な人が、何の断りもなくあなたの隣にドスンと割り込んできました（後から読み込まれる画像や広告）。するとどうでしょう？ あなたは「うわっ」と体勢を崩され、読んでいた新聞の位置がズレてしまいますよね。
ブラウザの中でも、これと全く同じことが起きています。
文字（テキスト）の読み込みは一瞬で終わるのに、その上にある「画像」や「動的に読み込まれる広告・バナー」のデータが重くて、到着が遅れたとします。
ブラウザは、「とりあえず文字をここに並べよう！」とせっせとレイアウトを完了させます。その直後、遅れてやってきた重い画像が「お待たせ！」とばかりにドンッと表示される。
するとブラウザは、「あれ、スペースが足りない！ じゃあ下の文字を全部どかさなきゃ！」と、大慌てで下にあったコンテンツを押し下げるのです。これが、レイアウトシフト（画面のガタつき）の正体です。
—
なぜレイアウトシフトは「悪者」なのか？
単に「画面がちょっと動くだけでしょ？」と思っていませんか？ 実はこれ、ユーザー体験（UX）の観点からすると、最悪の罪なんです。
- 誤タップ・誤クリックの誘発: 買おうと思った商品のボタンの代わりに、広告をタップさせてしまう。
- 読書のストレス: 記事を読んでいる最中に視点が強制的に動かされるため、どこまで読んだか分からなくなる。
- 検索エンジンの評価（SEO）の低下: Googleなどの検索エンジンは、「ユーザーに優しいサイトか」を厳しく見ています。CLSが頻発するサイトは、検索順位のテストで容赦なく減点されてしまいます。
だからこそ、私たちWebを作る人間は、この「不意打ちのズレ」を綺麗に防いであげる必要があるんです。
—
防衛策：ブラウザに「席の予約席プレート」を置いてあげよう
じゃあ、どうやってこのガタつきを防ぐのか？ 答えはとってもシンプルです。
画像や広告が後から届くとしても、「ここに、この大きさのスペース（椅子）が後で来ますよ」という予約席のプレートをあらかじめ置いておくのです。
ブラウザは非常に素直な性格なので、「あ、ここに縦300ピクセル、横400ピクセルの四角い空間が最初から必要なんだな」と分かっていれば、後から画像が届いても、周りのレイアウトをびくとも動かさずに、その空いたスペースにスッポリと画像をはめ込むことができます。
実践！CSSで「予約席」を作るコード
百聞は一見にしかず。実際のコードを見てみましょう。
例えば、サーバーから後で読み込まれる画像（あるいは動的に挿入される広告バナー）があるとします。
❌ やりがちなNGパターン（サイズ未指定）
この文章がレイアウトシフトの被害に遭い、ガタガタと動いてしまいます。
⭕ 優しく安全なパターン（サイズ指定 ＋ アスペクト比の確保）
この文章は微動だにしません。ユーザーもストレスフリーです！
/ CSS側でもしっかりとスタイルを支えます /
.safe-banner-box img {
width: 100%; / 親要素の幅いっぱいに広げる /
height: auto; / 高さは比率を保って自動調整させる /
aspect-ratio: 16 / 9; / 【超重要】現代のWeb制作の必須テクニック！あらかじめ縦横比を教える /
object-fit: cover;
}
この `aspect-ratio: 16 / 9;`（アスペクト比）というプロパティが、現代のWeb開発における救世主です。
「画像自体のデータはまだ届いていないけれど、このスペースは常に16対9の比率で確保しておいてね」とブラウザに約束させることで、画面のガタつきをピタッと止めることができるんです。
—
まとめ：思いやりがブラウザをスムーズにする
レイアウトシフト（CLS）の発生メカニズム、なんとなくイメージできたでしょうか？
- 原因: 後から読み込まれる要素（画像や広告など）の「サイズ」が事前に決まっていないため、ブラウザが後から慌ててまわりのレイアウトを押し動かしてしまうこと。
- 対策: HTMLの `width`/`height` 属性や、CSSの `aspect-ratio` を使って、「あらかじめ空間（予約席）を確保しておくこと」。
Webサイトを作るということは、画面の向こうにいる「人間」を笑顔にすることです。ブラウザという優秀だけど少しおっちょこちょいな相棒に、正しい設計図とヒント（サイズ情報）をそっと渡してあげるだけで、驚くほど滑らかで心地よいWebサイトが作れるようになりますよ。
最初は気をつけるポイントが多くて大変に感じるかもしれませんが、大丈夫、ひとつずつ覚えていけば自然と手が動くようになります。一緒に快適なWebの世界を作っていきましょう！
コメント