リンク遷移時の画像のちらつきを修正する方法

サイトをEmDashへ移行して公開したあと、記事ページを開いた瞬間にアイキャッチ画像が一瞬だけ大きく表示される現象が見つかりました。原因はCSSではなく、本文の置き場所の幅が途中で変わることでした。その仕組みと直し方を、実際の動画と会話形式をまじえて分かりやすくまとめます。

読者

記事を開いた瞬間、アイキャッチ画像が一瞬だけ大きく見えるのはなぜですか？

木村

画像そのものではなく、画像を置く場所である「本文の幅」が一瞬変わっていたのが原因です。その仕組みと直し方を説明します。

症状：画像が一瞬だけ大きくなる

発生していた現象

記事ページを開くと、最初のほんの一瞬だけ本文が画面幅いっぱいに広がり、アイキャッチ画像も大きく表示されます。すぐに本来の2カラム表示（本文＋右サイドバー）に落ち着くのですが、目に付くちらつきでした。

画像ではなく、置き場所の幅の問題

大事なポイントは「本文の幅」が一瞬変わっていたことです。画像そのものの問題ではなく、画像を置く場所の幅が広がったり狭まったりしていたため、幅に合わせて表示される画像まで大きく見えていました。

原因：サイドバーが「後から届く」作りだった

ページが表示される順番

このサイトのページは、本文のHTMLが先に届き、右サイドバーが少し遅れて届く流れになっています。サーバーがページを組み立てながら順に送り出すためです。

レイアウトは「並んだ要素同士で幅を分け合う」方式（flex）でした。この方式では、サイドバーが届くまでの間、本文が横幅全体を占有します。サイドバーが届いた瞬間に本文の幅が狭くなり、画像も一緒に縮んでいた、というわけです。

最初に疑ったのはCSS

最初はCSS（デザインの指定）の読み込み遅れを疑い、CSSをHTMLに埋め込む対策も行いました。ただ、それだけでは症状は消えませんでした。画面を動画で撮ってコマ送りで確認したところ、サイドバーが無い間だけ本文が全幅になっていることが分かり、ようやく原因にたどり着きました。

読者

CSSの読み込みが遅れているのかと思っていました。

木村

私も最初はそう考えて、CSSをHTMLに埋め込む対策をしました。ただ、それだけでは直りませんでした。画面を動画で撮ってコマ送りで確認し、ようやく「幅の変化」に気付けました。

修正：最初から置き場所を予約する

変更前と変更後

直し方は、レイアウトの組み立て方を変えることです。

• 変更前：要素同士で幅を分け合う方式。サイドバーが無い間は本文が全幅になる
• 変更後：本文とサイドバーの場所を最初から決めておく方式（grid）。サイドバーが届く前でも、本文の幅は最初から本来の幅に固定される

あわせて行った対策

あわせて、補助的な対策も入れています。

• CSSを外部ファイルではなくHTMLに埋め込み、デザインの適用が遅れないようにした
• サイドバーの著者画像が遅延読み込み（lazy）になっていたので、画面に最初から見えている画像として即時読み込みに変更した

確認：幅が変わらないことを確かめる

直ったことの確かめ方

修正後は、カテゴリーページから記事へ遷移する様子を撮影し、読み込み途中の画面でも本文と画像の幅が最終表示と同じであることを確認しました。サイドバーが表示される前後で幅が変わらないため、画像が大きく見える瞬間はなくなりました。

ちらつき対策の基本

表示のちらつき対策の基本は「後から届くものに、幅や高さを依存させない」ことです。レイアウトの置き場所は先に決めておく、画像には表示サイズが分かる情報を付けておく。この2つで、読み込み中の見た目の変化は大きく減らせます。

木村

ポイントは「後から届くものに、幅や高さを依存させない」ことです。置き場所を先に決めておくだけで、読み込み中の見た目はぐっと安定します。