写真提供：マイナビニュース

写真拡大

Smashingmagazineは8月29日(米国時間)、「Ways To Reduce Content Shifting On Page Load｜Smashing Magazine」において、Webブラウザでページを読み込でんいる時にコンテンツがずれるのを避ける方法を紹介した。インターネットの帯域幅が細く、スマートフォンのような小さいスクリーンでWebページを見ていると、ロード時に読み込みに合わせてページデザインがドンドンずれていくことがかる。記事ではこうしたズレを解消するテクニックを紹介している。

紹介されている主なテクニックは次のとおり。

・画像の読み込みにおけるページロード時のコンテンツシフトを避けるためには固定サイズ指定の方法が使えるが、この方法はレスポンシブデバイスには向いていない。こういったケースではイントリンシックレイシオ(Intrinsic Ratios; padding-bottomハック)の方法が有効。
・多くのスクリーンサイズに対応するように@mediaを使ってサイズを設定するが、このときに広告枠などに対してもサイズを指定するようにする。広告はアドブロッカーなどを使われると表示されないため、結果として表示が崩れ、ページ読み込み時にコンテンツシフトが発生する。あらかじめ広告のサイズを指定するとともに、アドブロッカーを使われた場合などを考慮して別のコンテンツを下に入れておくなどする。
・フォントは異なる横幅をもっているため、Webフォントなどを使う場合ロード時にコンテンツシフトが発生しやすくなる。こうした場合はFont Face Observerなどを使って問題を回避できる。
・Flexboxレイアウトはロード時のコンテンツシフトを発生させやすいが、現在のところGridレイアウトを採用するのは得策とはいえない。Safari 10および今後リリースされるChromeやFirefoxなどでこうした機能がデフォルトで機能するようになってから、徐々にGridレイアウトを使うことになると考えられる。
・インタラクティブにfont-weightをboldに変更すると、サイズがかわるため表示がずれることになる。これを避けるにはfont-weightの代わりにtext-shadowを使えばよいが、text-shadowはサポートしているブラウザが限定されるといった問題がある。Modernizrなどを使ってこうした問題を回避できる。

最近、Google Chromeの開発チームがスクロールアンカー(Scroll Anchoring; スクロール固定)と呼ばれる機能を提案しており、この機能がすべてのブラウザでサポートされるようになれば、今回取り上げたコンテンツシフトを避けるためにテクニックを適用しなくても、ユーザーの煩わしさを避けることが可能になる。それが実現するまでは上記テクニックなどを適用することで問題の低減を図ることができると説明がある。

(後藤大地)