レイアウトシフトとは何が起きている状態ですか。
表示済みの内容の位置が、後から入った要素によってずれる現象です。遅い画像が入った瞬間に下の文章やボタンが押し下げられ、押そうとしたボタンが動いて誤タップになります。
面接官が見ているのは用語の補強。
これは「img タグではなく next/image を使う理由は何ですか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- 後から入ってきた要素で、表示済みの内容の位置がずれる現象
画像だけでなく、広告・フォント・お知らせバーでも起きます。 - 画面サイズによってレイアウトが変わること
それはレスポンシブ対応です。時間軸のずれではありません。 - 読み込みが遅い要素が入った瞬間に、下の要素が押し下げられる現象
誤タップの原因になります。対策は「入る場所を先に確保しておく」ことです。 - CSS の読み込み順で見た目が変わること
それも一種の原因ではありますが、レイアウトシフトが指すのは「表示位置がずれる」という現象そのものです。
面接官は何を見ているか
- 後から要素が入って位置がずれる現象だと言えた
- ユーザー体験上の実害を挙げられた
- 画像に限らない話だと理解している
模範解答
表示済みの内容の位置が、後から入ってきた要素によってずれる現象です。
典型的なのは、読み込みの遅い画像が入った瞬間にその下の文章やボタンが押し下げられるケースです。読んでいた行を見失いますし、押そうとしたボタンが動いて誤タップになります。
画像だけの話ではありません。後から差し込まれる広告、遅れて読み込まれるフォント、非同期で出てくるお知らせバーなども原因になります。共通の対策は「入る場所をあらかじめ確保しておく」ことです。