「あれ、ボタンが逃げた！？」を防ぐ。Webサイトの“ガタつき”を測るCLSとLayout Instability APIの優しいお話
こんにちは！ 日々Webサイトを作ったり、デザインしたりしているみなさん。今日も素敵なサイト制作、お疲れ様です。
突然ですが、スマホでネット記事を読んでいるとき、こんな経験はありませんか？
> 「あ、このリンクを押そう！」と思って画面をタップした瞬間、
> 上の方に遅れて画像や広告がドカンと割り込んできて、
> 画面全体が『ガクッ』と下にズレてしまい、
> 全く関係のない別のリンクや広告を押してしまった……。
「うわ、もう！」と、ちょっとだけイラッとしてしまいますよね（笑）。実はこれ、世界中のWeb開発者が頭を抱えてきた「レイアウトシフト（表示のガタつき）」という現象なんです。
このガタつきがどれくらい発生しているかを数値化したものが「CLS（Cumulative Layout Shift）」であり、ブラウザがそのガタつきを検知するための裏方の仕組みが「Layout Instability API」です。
「なんだか英語ばかりで難しそう……」と思った方も、どうぞ安心してください。今回は、難しい専門用語をできるだけ使わず、私たちの日常や身の回りのことに例えながら、この仕組みを日本一優しく、そして現場のリアルな知見を交えて解説します。一歩ずつ、一緒に紐解いていきましょう！
—
そもそも、どうして画面が「ガクッ」と動くの？
ブラウザがWebページを描画する（レンダリングする）とき、裏側では「リフロー（再レイアウト）」という作業が行われています。
これを、「レストランのテーブルセッティング」に例えてみましょう。
1. 最初の状態：
お皿やフォークが、テーブルの上にきれいに並べられています。これが最初の画面表示です。
2. ハプニング発生：
あとから遅れて、超巨大なメインディッシュ（遅れて読み込まれた画像や広告）が届きました。
3. 慌てるウェイター：
「大変だ、置くスペースがない！」と、すでに並んでいたお皿やフォークを慌てて端っこにググッと押し退け、なんとかメインディッシュを置きました。
この「慌ててお皿を押し退ける」動きこそが、画面がガクッと動くリフロー（再レイアウト）です。
そして、このお皿が動いてしまった驚きや不快感の合計得点が、今回の主役であるCLS（レイアウトのガタつき指標）なのです。
—
CLS（Cumulative Layout Shift）ってなに？
CLSを日本語に訳すと、「累積レイアウト移動数」となります。
ちょっと硬い言葉ですが、要するに「そのページが表示されてから、どれだけ画面がガタガタ動いて読者を混乱させたか」のイライラ度ポイントです。
- CLSのスコアが「0」： まったくガタつかない、お行儀の良い素晴らしいサイト！
- CLSのスコアが「大」： 画像や広告が読み込まれるたびに、画面が激しく上下する、ちょっと落ち着きのないサイト。
Googleも「CLSが低い（＝ガタつかない）サイトは、ユーザーにとって使いやすい良いサイトだ」と評価しています。だからこそ、私たち開発者はこの数値をできるだけゼロに近づけたいのです。
—
ブラウザの超優秀なセンサー「Layout Instability API」
では、自分の作ったサイトがどれくらいガタついているのか、どうやって調べればいいのでしょうか？
ここで登場するのが、ブラウザに内蔵されている「Layout Instability API（レイアウト・インスタビリティ・エーピーアイ）」というセンサーです。直訳すると「レイアウト不安定検知器」ですね。
このセンサーは、Webページが開かれている間、ずっと画面を監視してくれています。そして、「あ！ 今、画像が入ってきたせいで、下の文章が50ピクセル下に押し出されたぞ！」という瞬間を見逃さずに記録してくれます。
実際にセンサーを動かしてみよう！
「百聞は一見にしかず」です。このセンサーの声を、実際にJavaScriptを使って聴いてみましょう。
以下のコードは、ブラウザが「ガタつき」を検知するたびに、コンソール（開発者ツール）にその情報を優しく出力してくれるプログラムです。HTMLファイルを作成して貼り付けるか、ブラウザの「検証」画面のコンソールに貼り付けて試してみてくださいね。
CLS（レイアウトシフト）計測テスト
下のボタンを押すと、3秒後に画像が読み込まれて画面が「ガクッ」と動きます。
このコードで何が起きるの？
1. ページを開くと、ブラウザの監視カメラ（`PerformanceObserver`）が作動します。
2. 「画像を読み込む」ボタンを押すと、3秒後に猫の画像がぬっと現れます。
3. このとき、画像の上にサイズ（高さ）が指定されていないため、画像が現れた瞬間に下の「これは下のコンテンツです」という青い箱がドスン！と下に押し下げられます。
4. 監視カメラが「あ！今動いた！」と検知し、ブラウザのコンソールに警告と、そのとき動いた要素の情報を表示してくれます。
—
ガタつきを防ぐための「今日からできる２つの処方箋」
仕組みが分かれば、対策はとってもシンプルです。レストランの例を思い出してください。最初から「大きなメインディッシュが来るよ」と分かっていれば、ウェイターさんはあらかじめその分のテーブルスペースを空けておけますよね。
Webサイトでも全く同じことをすれば良いのです。
対策1：画像には必ず「幅と高さ」を書いておく
HTMLで画像を表示するとき、ただ `
` と書くのではなく、あらかじめ画像が持っている本来のサイズ（アスペクト比）を教えてあげます。
こうしておくと、ブラウザは「よし、ここに高さ250px分の空き地（スペース）を確保しておこう」と判断し、画像がダウンロードされる前であっても、その場所をぽっかり空けて待ってくれます。あとから画像が届いても、周りの要素を押し出すことはありません。
対策2：広告や動くパーツの「最低限の高さ」を確保しておく
ニュースサイトの広告や、後からふわっと浮き出てくるようなパーツがある場合は、CSSで「最低限これくらいの高さの場所だよ」とあらかじめ確保（予約）しておきましょう。
.ad-banner-wrapper {
/ 広告が読み込まれる前でも、最低150pxの枠を確保しておく /
min-height: 150px;
background-color: #f9f9f9; / 読み込み中も寂しくないように薄い背景色を敷く /
}
このように「予約席」を作っておくことで、ユーザーが記事を読んでいる最中に画面が急にガクッと動くのを防ぐことができます。
—
おわりに：ユーザーに優しい、動かない安心感を
Webサイトのパフォーマンスと聞くと、「読み込み速度を1秒でも速くする！」ということばかりに目が行きがちです。もちろんそれも大切ですが、それと同じくらい「表示されている間、イライラせずに安心して操作できること」も、ユーザーにとっては極上の体験になります。
Layout Instability APIやCLSは、そんな「ユーザーの使いやすさ（ユーザー体験）」を、ブラウザが客観的に測るために作られた優しい技術です。
もし、あなたが作ったサイトで「なんだかガタつくな……」と思う場所があったら、ぜひ画像の `width` や `height`、CSSの `min-height` を設定して、ブラウザに「ここにスペースを空けておいてね」と優しく教えてあげてください。
そのひと手間で、あなたのサイトを訪れる読者のみなさんが、もっと快適に、笑顔でコンテンツを楽しめるようになりますよ。
焦らず、できるところから一歩ずつやっていきましょう。応援しています！
コメント