画像が表示されるたびに画面が動くのはなぜ？レイアウト崩れを防ぐ基本

Webページを開いた直後、読もうとしていた文章が突然下へ移動したり、押そうとしていたボタンの位置がずれたりすることがあります。

ページの読み込み途中で要素の位置が変わる現象を、レイアウトシフトと呼びます。

特に画像の多いWebサイトでは、画像が表示されるたびに周囲の文章やボタンが押し出され、ページ全体が落ち着かない印象になることがあります。

完成後の画面だけを確認していると気付きにくい問題ですが、表示速度や操作性、利用者のストレスに関係する重要な確認項目です。

今回は、レイアウトシフトが起きる理由と、HTMLやCSSで防ぐための考え方を初心者向けに解説します。

レイアウトシフトとは

レイアウトシフトとは、ページの読み込み中に、すでに表示されている要素の位置が意図せず変わることです。

たとえば、次のような動きが該当します。

• 文章を読んでいる途中で画像が入り、本文が下へ移動する

• 押そうとしたボタンが動き、別のリンクを押してしまう

• ヘッダーの高さが途中で変わり、ページ全体がずれる

• Webフォントの読み込み後に文字幅が変わる

• 後から表示された案内によってコンテンツが押し下げられる

利用者自身の操作によってメニューが開くなど、予想できる変化とは異なります。

何も操作していないのに位置が動くことが、レイアウトシフトの問題です。

画像が原因になりやすい理由

ブラウザは、HTMLを上から読みながらページを表示します。

画像の大きさが事前に分からない場合、ブラウザは画像用の場所を十分に確保できません。

先に文章やボタンを並べたあとで画像を読み込み、画像の高さが判明した時点で必要な空間を作ります。

その結果、画像より下にあった要素がまとめて押し下げられます。

通信速度が速い環境では一瞬で終わるため、制作者のパソコンでは気付かないこともあります。

しかし、スマートフォンの通信状態が悪い場合や、画像の容量が大きい場合は、位置の変化が目立ちやすくなります。

画像の表示領域を先に確保する

画像によるレイアウトシフトを防ぐ基本は、画像が読み込まれる前から必要な領域を確保しておくことです。

HTMLで画像の幅と高さを伝えておくと、ブラウザは画像の縦横比を事前に判断できます。

画像本体の読み込みが終わっていなくても、その比率に合わせた空間を先に用意できるため、後から文章が押し下げられにくくなります。

レスポンシブ対応で画像の表示幅が画面に合わせて変わる場合でも、元の幅と高さの情報には意味があります。

ブラウザは指定された数値から縦横比を計算し、実際の表示幅に合った高さを確保できるからです。

「CSSで横幅を指定しているから、HTML側の大きさは不要」とは限りません。

表示サイズと画像本来の大きさは別

画像には、画像ファイル自体が持つ大きさと、Webページ上で表示する大きさがあります。

たとえば、大きな写真をページ上では小さく表示することがあります。

HTMLへ設定する幅と高さは、画像本来の縦横比が分かる組み合わせにすることが重要です。

実際の表示サイズはCSSで調整できます。

ここで縦横比の合わない数値を設定すると、画像が引き伸ばされたり、読み込み後に比率が変わったりする原因になります。

数字を適当に入れるのではなく、使用する画像の比率を確認して設定します。

CSSで比率を決める方法もある

すべての画像が同じ比率で表示されるカード一覧などでは、CSSで画像領域の縦横比を決める方法も便利です。

施工事例、商品一覧、ブログカードなどでは、投稿者が縦長や横長の画像を自由に登録することがあります。

画像ごとに高さが変わると、カードの並びが不揃いになります。

あらかじめ表示領域の比率を決め、その中へ画像を収めれば、読み込み前からカードの高さを確保できます。

ただし、比率だけをそろえると、画像の一部が切れる場合があります。

人物写真、商品写真、文字を含む画像などでは、重要な部分が見切れていないか確認が必要です。

画像の切り抜き方法にも注意する

決められた比率の枠へ画像を配置するときは、画像全体を表示するのか、枠いっぱいに切り抜いて表示するのかを選びます。

枠いっぱいに見せる方法は、カード一覧の見た目を整えやすいことがメリットです。

一方、画像の縦横比が枠と異なる場合は、上下または左右が切り取られます。

画像全体を表示する方法では、内容は切れませんが、枠の中に余白が生まれる場合があります。

どちらが正しいかは、画像の用途によって異なります。

装飾的な写真なら切り抜いても問題になりにくい一方、ロゴ、図表、バナー、文字入り画像などは全体が見える方が適しています。

遅延読み込みだけでは解決しない

ページの表示を速くするため、画面外の画像を後から読み込む方法があります。

これは通信量を減らすために有効ですが、画像の領域が確保されていなければ、表示された瞬間に周囲の要素が動く可能性があります。

遅延読み込みを設定しただけで、レイアウトシフトも自動的に解決するわけではありません。

また、最初に表示される大きなメイン画像まで遅らせると、ページを開いたときに重要な画像がなかなか表示されないことがあります。

画面の下にある画像と、最初から見える画像では、読み込み方を分けて考える必要があります。

Webフォントでも画面は動く

レイアウトシフトの原因は画像だけではありません。

Webフォントを使用している場合、最初は端末に入っている別のフォントで文章が表示され、読み込み後に指定したフォントへ切り替わることがあります。

フォントによって文字の幅や高さが異なるため、改行位置が変わり、見出しや本文の高さが変化します。

特に大きな見出しや、横幅いっぱいに配置した短いキャッチコピーでは変化が目立ちます。

使用するフォントを増やしすぎない、必要な太さだけを読み込む、代わりに表示するフォントを近いものにするといった工夫が必要です。

デザインだけでなく、読み込み途中の見え方も確認します。

後から追加される案内にも場所が必要

Cookieに関する案内、キャンペーン告知、エラーメッセージなどが、ページ表示後に追加されることがあります。

これらを通常のコンテンツの途中へ挿入すると、その下にある要素が突然移動します。

最初から表示する可能性がある場所を確保するか、既存のコンテンツを押し下げない配置方法を検討します。

ただし、画面へ重ねて表示すると、本文やボタンを隠す可能性があります。

「動かないようにすること」だけでなく、「重要な内容を邪魔しないこと」も合わせて考える必要があります。

WordPressでは投稿画像の比率が変わりやすい

WordPressサイトでは、運用担当者が管理画面から画像を追加します。

制作時に使用した画像は同じ比率でも、公開後に縦長の写真や小さな画像が登録される可能性があります。

そのため、最初に用意した画像だけで確認しても十分ではありません。

次のような画像でも表示を確認します。

• 横長の画像

• 縦長の画像

• 正方形の画像

• サイズが小さい画像

• 文字を含むバナー

• 画像が登録されていない状態

アイキャッチ画像がない場合に空白が残るのか、代替画像を表示するのかも決めておくと、公開後の崩れを防ぎやすくなります。

高さを固定すればよいとは限らない

画面の動きを防ぐために、すべての要素へ固定の高さを設定すると、別の問題が起こることがあります。

文章が増えたときに枠からはみ出したり、スマートフォンで内容が重なったりする可能性があるためです。

固定した高さが向いているのは、画像枠やアイコンなど、必要な領域を予測しやすい部分です。

本文、見出し、ボタンを含むカードなど、内容によって高さが変わる要素では慎重に判断します。

高さを固定する前に、縦横比、最小の高さ、余白などで対応できないか検討することが大切です。

完成後ではなく読み込み途中を確認する

通常の再読み込みでは、画像やフォントがすでにキャッシュされており、すぐに表示されることがあります。

その状態では、初めてサイトを訪れる利用者に起きる画面の動きを確認できません。

ブラウザの開発者ツールを使って通信速度を遅くしたり、キャッシュを無効にしたりすると、読み込み途中の状態を確認しやすくなります。

スマートフォンの実機でも確認し、ページを開いた直後に次の点を見ます。

• 画像の表示前に空間が確保されているか

• 文章の位置が途中で変わらないか

• ボタンが突然移動しないか

• フォントの切り替えで改行が大きく変わらないか

• 後から表示される案内が本文を押し下げないか

ページが完全に表示されたあとの見た目だけでなく、表示が完成するまでの過程も品質の一部です。

まとめ

レイアウトシフトは、ページの読み込み中に文章、画像、ボタンなどの位置が意図せず変わる現象です。

画像の大きさが事前に分からない場合、ブラウザは表示領域を確保できず、読み込み後に周囲の要素を押し下げます。

画像の幅と高さや表示比率をあらかじめ伝えることで、画像が届く前から必要な空間を用意できます。

また、Webフォント、後から追加される案内、WordPressで登録されるさまざまな比率の画像にも注意が必要です。

Webサイトは、最終的な画面が整っていれば完成というわけではありません。

読み込み途中でも操作対象が動かず、安心して閲覧できる状態を作ることが、使いやすいWebサイト制作につながります。