読み込み中にレイアウトがガクッとずれるときの原因と対処

レイアウトシフトとは何か

レイアウトシフトとは、ページの読み込みや描画の途中で、すでに表示されている要素の位置が予期せず動いてしまう現象です。たとえば、文章を読み始めた直後に画像が遅れて表示され、文章が下に押し下げられる、といった動きが典型です。

見た目の不快感だけでなく、押そうとしたボタンの位置がずれて誤タップする、という実害もあります。Webの表示品質指標であるCore Web VitalsのCLS（Cumulative Layout Shift）でも評価対象になっており、できるだけ抑えることが望ましい挙動です。

最も多い原因は画像のサイズ未指定

レイアウトシフトの代表的な原因は、imgタグにwidthとheight、またはアスペクト比が指定されていないことです。サイズが分からないと、ブラウザは画像を読み込み終えるまでその領域を0として扱い、読み込み後に初めて高さを確保するため、後続の要素が押し下げられます。

対処は、画像本来の縦横比に合わせてwidthとheight属性を明示するか、CSSのaspect-ratioで比率を指定することです。これで読み込み前から領域が確保され、画像が後から表示されても周囲が動かなくなります。

症状別チェック表

読み込み中にレイアウトがガクッとずれるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

フォント・広告・遅延要素によるずれ

Webフォントの読み込みも、レイアウトシフトを起こすことがあります。代替フォントで一度表示してからWebフォントに切り替わるとき、字幅が変わって行が組み直されるためです。font-displayの設定や、字形の近い代替フォントの指定で影響を抑えられます。

後から差し込まれる広告枠、埋め込み、遅延読み込みのコンテンツも要注意です。表示前にプレースホルダーで領域を確保しておくと、差し込み時に周囲が動かずに済みます。

また、ユーザー操作の直後を除き、既存の要素の上に新しい要素を押し込む形のアニメーションも避けるべきです。transformによる移動など、レイアウトを再計算させない方法を選ぶとずれを防げます。

ずれを切り分けて直す手順

原因の特定と修正は次の順で進めると効率的です。

1. ページを低速回線をエミュレートして読み込み、どの要素が動くか観察する
2. 動いた要素の直前にある画像・埋め込み・広告枠を疑う
3. imgにwidth/heightまたはaspect-ratioを指定して領域を確保する
4. 遅延要素にはプレースホルダーの高さを設定する
5. Webフォントはfont-displayや近い代替フォントで切替の影響を減らす
6. 修正後、再度低速読み込みでずれが消えたか確認する

低速環境での見え方を共有して確認する

レイアウトシフトは読み込みのタイミングに依存するため、高速な開発環境では再現しにくく、実際のユーザーの回線で初めて顕在化することがあります。低速回線のエミュレーションや、実際のスマートフォンでの確認が欠かせません。

修正版を関係者に確認してもらう際は、ギガサイト便にHTMLやZIPをドロップして共有URLを発行すると、各自が自分の端末と回線で読み込み時の挙動を見られます。CDNのエッジ配信で表示が速く、同じURLのままファイルを差し替えられるため、調整を繰り返しながら確認を依頼するのに向いています。誰がいつ見たかはアクセスログで把握でき、必要なら公開期限を設定して一定期間で自動的に閲覧を止められます。