こんにちは！フロントエンド・アーキテクトの私です。

Webサイトを作っていて、「あれっ、読み込み中のページをふと見たら、突然文字がガクッと下に押し出されて、クリックしたかったリンクと違う場所を押してしまった……！」なんてイライラした経験、ありませんか？

あれ、本当にストレスですよね。せっかくお目当てのボタンを押そうと思った瞬間に、上のほうから画像がのっそり現れて、ボタンが下へ逃げていく。あの現象のせいで、うっかり変な広告を踏んでしまったり……。

この「画面が読み込み途中に勝手にガタガタ動く現象」、Web業界ではCLS（Cumulative Layout Shift：累積レイアウトシフト）というちょっとカッコいい（そして恐ろしい）名前で呼んでいます。

今回は、このレイアウトのガタつきを防ぐために、ブラウザの頭の中では何が起きているのか、そして私たちがどうやってそれを優しくエスコートしてあげればいいのかを、一緒に紐解いていきましょう。難しいことは抜きにして、身近な例えからスタートしますので、どうぞリラックスして読んでくださいね。

—

1. カフェのメニュー表で考えてみよう：ブラウザの「席替え」問題

想像してみてください。あなたは、あるおしゃれなカフェのカウンターでメニューをじっと見つめて、「今日はこれにしよう！」と指をさそうとしています。

ところが、店員さんが慌ててやってきて、「あ、すみません！ 今日の日替わりスープの札をまだ置いてませんでした！」と言いながら、メニュー表のど真ん中に大きなスープの札を割り込ませました。

その瞬間、あなたが指をさそうとしていた「本日のケーキセット」の文字が、グイッと右下に押しやられてしまいました。これじゃあ、うっかりケーキじゃなくてスープを注文しちゃいそうになりますよね。

実は、Webブラウザもこれと全く同じパニックを体験しています。

ブラウザは、上から順番にHTMLという「文字の材料」を読み込みながら、画面を組み立てていきます。
1. まず文字（テキスト）をバーッと並べます（よし、ここに席を作ろう）。
2. その後から、少し遅れて画像や広告データが届きます（「おっと、私を忘れてもらっちゃ困るね！」と、後から大きな顔で割り込んできます）。

ブラウザは真面目なので、「あ、後から写真が届いたんだね。じゃあ、さっき並べた文字たち、ちょっと下に行ってくれる？」と、その場で急遽席替え（レイアウトの再計算）を始めます。これが、あのガタつきの正体です。

—

2. ブラウザが泣かないための魔法：「ペイントホールド」と「場所のキープ」

この悲劇を防ぐために、現代のWebブラウザは裏側で色々な工夫をしてくれています。その代表が「ペイントホールド（Paint Holding）」と呼ばれる仕組みです。

ざっくり言うと、ブラウザは「ページ全体の準備が整うまで、ちょっと画面を描画するのを待って（ホールドして）あげよう」と踏ん張ってくれます。特にページ遷移の瞬間などは、前の画面を少しだけ保持して、準備ができるまで白飛びやガタガタを隠そうとしてくれる優しい機能です。

しかし、ブラウザの優しさにも限界があります。
「後からやってくる画像や広告の『大きさ（縦と横のサイズ）』が、最初から分からない」となると、ブラウザも「どれくらいのスペースを空けておけばいいの！？」とパニックになってしまいます。

だからこそ、私たち人間（作り手）が、ブラウザに対してこう教えてあげる必要があるんです。

> 「ねえブラウザさん、この場所には後で縦300px、横400pxの画像が入るから、今のうちにその分のスペース（座席）を空けといてね！」

これが、レイアウト安定性（CLS対策）の核心です。

—

3. 実践！ ブラウザに「場所取り」をしてあげる方法

じゃあ、具体的にどうすればブラウザに「ここ空けといてね」と伝えられるのでしょうか？
難しく考える必要はありません。基本のキは、「画像や埋め込みコンテンツの『幅（width）』と『高さ（height）』をあらかじめCSSやHTMLで指定してあげること」です。

昔は「サイズを固定しちゃうと、スマホの画面で崩れちゃうんじゃないの？」と心配されていましたが、今のCSSには心強い味方がいます。実際のコードを見てみましょう。

サンプルコード：画像を美しく迎える準備

レイアウトがガタつかない優しいページ

下のスペースを見てみてください。画像が読み込まれる前から、ちゃんと場所が空いていますね。

画像の下にあるこの文章も、読み込み中にびくとも動きません！大成功です。

このコードのポイントは、`aspect-ratio`（アスペクト比）というCSSプロパティや、`img`タグの`width` / `height`属性です。
これがあるおかげで、たとえ画像自体のダウンロードに数秒かかろうとも、ブラウザは「ここに16:9の空間があるな」と最初から理解しているので、下の文章を押し下げる必要がなくなるのです。

—

4. つまずきがちなポイントと、温かいフォロー

「よし、じゃあ画像のサイズを全部ガチガチに固定すればいいんだな！」と思ったそこのあなた、ちょっと待ってくださいね。ここでよくある「つまずきポイント」をそっとお伝えしておきます。

よくある失敗：「CSSで高さ（height）を `auto` のまま放置してしまう」

CSSで画像や枠組みのサイズを指定し忘れていると、ブラウザは「高さが0pxだ」と勘違いします。そして、画像が読み込まれた瞬間に「うわっ、高さがあったのか！」と慌てて高さを広げるため、盛大にレイアウトがガタつきます。

大丈夫です、解決策はシンプル！
レスポンシブデザイン（スマホやパソコンなど、画面の大きさに合わせるデザイン）をするときは、先ほど紹介した `aspect-ratio` を使うのが今のモダンな黄金ルールです。「幅が何ピクセルであっても、縦と横の比率は常にこれくらいにしてね」とブラウザにお願いしておけば、画面サイズが変わってもレイアウトはビクともしません。

—

5. まとめ：ユーザーへの思いやりは、ブラウザへの思いやりから

レイアウトの安定性（CLS対策）を整えるということは、言い換えれば「ユーザーの時間を奪わない、イライラさせないための優しさ」です。

そしてそれは同時に、愚直に画面を描画しようと頑張っているWebブラウザに対して、「こうやって準備しておいたよ！」とヒントを教えてあげる、チームワークのようなものでもあります。

最初は「なんだかルールが多くて面倒だな」と感じるかもしれませんが、一度この「場所をあらかじめキープする」という感覚を掴んでしまえば、あなたの作るWebサイトは見違えるほど滑らかで、プロフェッショナルな手触りになります。

もしまた読み込み中のガタつきに悩んだら、こう自分に問いかけてみてください。
「ブラウザは、このコンテンツの大きさを事前に知っているかな？」と。

その答えが「Yes」になるようにエスコートしてあげれば、あなたのWebページは、訪れた人にとって最高に居心地の良い場所になりますよ。それでは、また次回のブラウザ探検でお会いしましょう！