---
title: "読み込み中にレイアウトがガクッとずれるときの原因と対処"
description: "ページを開いた直後に文字やボタンの位置が急に飛ぶ現象（レイアウトシフト）に悩む開発者向け。高さ未確保の要素が主因で、誤クリックや読みづらさを招く原因と対処を整理した記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/layout-shift-loading-jump"
markdown: "https://giga-site.com/articles/layout-shift-loading-jump/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 読み込み中にレイアウトがガクッとずれるときの原因と対処

ページを開いた直後にボタンや文章の位置が急に飛ぶ現象は、レイアウトシフトと呼ばれます。読み込み完了前に高さが確保されていない要素が原因になりやすく、誤クリックや読みづらさにつながります。主な原因と対処、確認の進め方を整理します。

> Source HTML: https://giga-site.com/articles/layout-shift-loading-jump
> Article index: https://giga-site.com/articles/index.md

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

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

見た目の不快感だけでなく、押そうとしたボタンの位置がずれて誤タップする、という実害もあります。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のままファイルを差し替えられるため、調整を繰り返しながら確認を依頼するのに向いています。誰がいつ見たかはアクセスログで把握でき、必要なら公開期限を設定して一定期間で自動的に閲覧を止められます。

## よくある質問

### width/heightを指定すると画像が固定サイズになりレスポンシブにできません。

width/height属性は縦横比の情報として使われ、CSSでmax-width:100%とheight:autoを併用すれば、比率を保ったまま可変表示にできます。属性とCSSを組み合わせることで、領域確保とレスポンシブの両立が可能です。

### aspect-ratioとwidth/height属性のどちらを使うべきですか。

どちらでも領域確保は可能です。シンプルなimgには両方を併記しておくのが安全で、CSS側で比率を制御したい場合やbackground要素にはaspect-ratioが扱いやすいです。プロジェクトの方針に合わせて統一すると保守しやすくなります。

### 自分の環境ではずれないのに、見てもらうとずれると言われます。

レイアウトシフトは読み込み速度に依存するため、高速な開発環境では再現しにくいことがあります。開発者ツールで回線速度を低速に設定して読み込むか、実際のスマートフォン回線で確認すると再現しやすくなります。

### アニメーションでレイアウトシフトを起こさないコツはありますか。

widthやheight、marginなどレイアウトを再計算させるプロパティではなく、transformやopacityで動かすとシフトになりにくいです。これらは描画段階の変化として扱われ、周囲の要素の位置に影響しにくいためです。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [印刷すると崩れる・はみ出すときの対処](https://giga-site.com/articles/print-layout-broken/index.md)
- [CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処](https://giga-site.com/articles/grid-layout-collapses/index.md)
- [スマホを横向きにすると崩れるときの原因と対処](https://giga-site.com/articles/landscape-mode-layout-break/index.md)
- [ブラウザのズーム（拡大表示）でレイアウトが崩れるときの対処](https://giga-site.com/articles/browser-zoom-layout-break/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）](https://giga-site.com/articles/css-not-loading-relative-path/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "読み込み中にレイアウトがガクッとずれるときの原因と対処",
  "description": "ページを開いた直後に文字やボタンの位置が急に飛ぶ現象（レイアウトシフト）に悩む開発者向け。高さ未確保の要素が主因で、誤クリックや読みづらさを招く原因と対処を整理した記事です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/layout-shift-loading-jump",
  "url": "https://giga-site.com/articles/layout-shift-loading-jump",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "width/heightを指定すると画像が固定サイズになりレスポンシブにできません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "width/height属性は縦横比の情報として使われ、CSSでmax-width:100%とheight:autoを併用すれば、比率を保ったまま可変表示にできます。属性とCSSを組み合わせることで、領域確保とレスポンシブの両立が可能です。"
      }
    },
    {
      "@type": "Question",
      "name": "aspect-ratioとwidth/height属性のどちらを使うべきですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "どちらでも領域確保は可能です。シンプルなimgには両方を併記しておくのが安全で、CSS側で比率を制御したい場合やbackground要素にはaspect-ratioが扱いやすいです。プロジェクトの方針に合わせて統一すると保守しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "自分の環境ではずれないのに、見てもらうとずれると言われます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "レイアウトシフトは読み込み速度に依存するため、高速な開発環境では再現しにくいことがあります。開発者ツールで回線速度を低速に設定して読み込むか、実際のスマートフォン回線で確認すると再現しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "アニメーションでレイアウトシフトを起こさないコツはありますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "widthやheight、marginなどレイアウトを再計算させるプロパティではなく、transformやopacityで動かすとシフトになりにくいです。これらは描画段階の変化として扱われ、周囲の要素の位置に影響しにくいためです。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```