パフォーマンスとユーザビリティを重視してカルーセルを最適化する。
カルーセルは、スライドショーのようにコンテンツを表示する UX コンポーネントです。カルーセルは「自動再生」することも、ユーザーが手動で移動することもできます。カルーセルは他の場所でも使用できますが、最もよく使用されるのは、ホームページに画像、商品、プロモーションを表示する場合です。
この記事では、カルーセルのパフォーマンスと UX に関するベスト プラクティスについて説明します。
パフォーマンス
適切に実装されたカルーセル自体は、パフォーマンスにほとんど影響しないか、影響しません。ただし、カルーセルには大きなメディア アセットが含まれていることがよくあります。サイズの大きなアセットは、カルーセルに表示されるかどうかにかかわらず、パフォーマンスに影響する可能性があります。
LCP(Largest Contentful Paint)
大きな折り込みオーバーのカルーセルには、ページの LCP 要素が含まれていることが多く、LCP に大きな影響を与える可能性があります。このようなシナリオでは、カルーセルを最適化することで LCP を大幅に改善できる可能性があります。カルーセルを含むページでの LCP 測定の詳細については、カルーセルの LCP 測定のセクションをご覧ください。
INP(Interaction to Next Paint)
カルーセルには最小限の JavaScript 要件があるため、ページの応答性に影響を与えることはありません。サイトのカルーセルに長時間実行されるスクリプトがあることが判明した場合は、カルーセル ツールの置き換えを検討する必要があります。
CLS(Cumulative Layout Shift)
驚くほど多くのカルーセルで、CLS の原因となる、合成されていないアニメーションが使用されています。自動再生カルーセルがあるページでは、無限の CLS が発生する可能性があります。通常、このタイプの CLS は人間の目には見えないため、問題を見落としやすくなります。この問題を回避するには、カルーセル(スライド遷移中など)で合成されていないアニメーションを使用しないでください。
パフォーマンスに関するベスト プラクティス
HTML を使用してカルーセル コンテンツを読み込む
カルーセル コンテンツは、ページの HTML マークアップを介して読み込む必要があります。これにより、ページの読み込みプロセスの早い段階でブラウザが検出できるようになります。カルーセルを使用する際に避けるべきパフォーマンス上の最大の間違いは、JavaScript を使用してカルーセル コンテンツの読み込みを開始することです。これにより画像の読み込みが遅れ、LCP に悪影響が及ぶ可能性があります。
<div class="slides"> <img src="https://example.com/cat1.jpg"> <img src="https://example.com/cat2.jpg"> <img src="https://example.com/cat3.jpg"> </div>
const slides = document.querySelector(".slides"); const newSlide = document.createElement("img"); newSlide.src = "htttp://example.com/cat1.jpg"; slides.appendChild(newSlide);
カルーセルを高度に最適化するには、最初のスライドを静的に読み込み、ナビゲーション コントロールや追加のコンテンツを含めるように段階的に拡張することを検討してください。この手法は、ユーザーの注意が長時間続く環境に最も適しています。これにより、コンテンツの読み込みに時間をかけることができます。ユーザーが 1 秒か 2 秒しか滞在しない可能性のあるホームページなどの環境では、1 つの画像のみを読み込むことも同様に効果的です。
レイアウトのずれを回避する
カルーセルのレイアウトがずれる原因として最も一般的なのは、スライドの切り替えとナビゲーション コントロールです。
スライドの切り替え: スライドの切り替え中に発生するレイアウトのずれは、通常、DOM 要素のレイアウト誘導プロパティの更新によって発生します。これらのプロパティの例としては、
left
、top
、width
、marginTop
などがあります。レイアウト シフトを回避するには、代わりに CSStransform
プロパティを使用してこれらの要素を遷移します。このデモでは、transform
を使用して基本的なカルーセルを作成する方法を示します。ナビゲーション コントロール: カルーセル ナビゲーション コントロールを DOM から移動したり、追加または削除したりすると、これらの変更の実装方法によってはレイアウト シフトが発生する可能性があります。通常、この動作を示すカルーセルは、ユーザーのホバーに応答して動作します。
カルーセルの CLS 測定に関するよくある誤解を以下に示します。
自動再生カルーセル: カルーセル関連のレイアウト シフトの最も一般的な原因は、スライド遷移です。自動再生ではないカルーセルでは、通常、これらのレイアウト シフトはユーザー操作から 500 ミリ秒以内に発生するため、累積レイアウト シフト(CLS)にはカウントされません。ただし、自動再生カルーセルの場合、これらのレイアウトのずれは CLS にカウントされるだけでなく、無限に繰り返される可能性があります。そのため、自動再生カルーセルがレイアウトのずれの原因になっていないことを確認することが特に重要です。
スクロール: 一部のカルーセルでは、ユーザーがスクロールを使用してカルーセル スライドを移動できます。要素の開始位置が変更されたが、スクロール オフセット(
scrollLeft
またはscrollTop
)が同じ量(ただし反対方向)で変更された場合、同じフレームで発生した場合、レイアウト シフトとは見なされません。
レイアウト シフトの詳細については、レイアウト シフトをデバッグするをご覧ください。
最新のテクノロジーを使用する
多くのサイトでは、サードパーティの JavaScript ライブラリを使用してカルーセルを実装しています。現在、古いカルーセル ツールを使用している場合は、新しいツールに切り替えることでパフォーマンスを改善できる可能性があります。新しいツールはより効率的な API を使用する傾向があり、jQuery などの追加の依存関係を必要とすることはあまりありません。
ただし、作成するカルーセルの種類によっては、JavaScript がまったく必要ない場合もあります。新しい ScrollSnap API を使用すると、HTML と CSS のみを使用してカルーセルのような遷移を実装できます。
scroll-snap
の使用に関する参考になるリソースをいくつかご紹介します。
- ストーリー コンポーネントを作成する(web.dev)
- 次世代のウェブ スタイル設定: スクロール スナップ(web.dev)
- CSS のみのカルーセル(CSS Tricks)
- CSS のみでカルーセルを作成する方法(CSS Tricks)
カルーセル コンテンツを最適化する
カルーセルには、サイトの最大の画像が含まれていることがよくあります。そのため、これらの画像を完全に最適化しておくとよいでしょう。適切な画像形式と圧縮レベルを選択する、画像 CDN を使用する、srcset を使用して複数の画像バージョンを提供するなど、画像の転送サイズを削減できる手法はいくつかあります。
パフォーマンスの測定
このセクションでは、カルーセルに関連する LCP の測定について説明します。カルーセルは LCP の計算において他の UX 要素と同様に取り扱われますが、自動再生カルーセルの LCP の計算方法はよく混同されます。
カルーセルの LCP 測定
カルーセルの LCP の計算方法を理解するための主なポイントは次のとおりです。
- LCP は、フレームにペイントされたページ要素を考慮します。ユーザーがページを操作(タップ、スクロール、キー操作)すると、LCP 要素の新しい候補は考慮されなくなります。したがって、自動再生カルーセルのどのスライドも最終的な LCP 要素になる可能性がありますが、静的カルーセルでは最初のスライドのみが LCP の候補になります。
- 同じサイズの 2 つの画像がレンダリングされた場合、最初の画像が LCP 要素と見なされます。LCP 要素は、LCP 候補が現在の LCP 要素よりも大きい場合にのみ更新されます。したがって、カルーセルの要素のサイズがすべて同じである場合、LCP 要素が最初に表示される画像になります。
- LCP の候補を評価する際、LCP は「可視サイズまたは固有サイズのいずれか小さい方」を考慮します。したがって、自動再生カルーセルで画像が一貫したサイズで表示され、ディスプレイ サイズより小さいさまざまな元のサイズの画像が含まれている場合、新しいスライドが表示されるたびに LCP 要素が変化する可能性があります。この場合、すべての画像が同じサイズで表示される場合は、固有サイズが最も大きい画像が LCP 要素と見なされます。LCP を低く抑えるには、自動再生カルーセル内のすべてのアイテムが同じ固有サイズであることを確認する必要があります。
Chrome 88 でのカルーセルの LCP の計算の変更
Chrome 88 以降では、後で DOM から削除される画像は、Largest Contentful Paint の候補と見なされます。Chrome 88 より前は、これらの画像は考慮から除外されていました。自動再生カルーセルを使用するサイトの場合、この定義の変更は LCP スコアにほとんど影響しないか、プラスの効果をもたらします。
この変更は、多くのサイトがカルーセルの遷移を実装する際に、以前に表示された画像を DOM ツリーから削除していることを確認したことに対応して行われました。Chrome 88 より前は、新しいスライドが表示されるたびに、前の要素が削除され、LCP の更新がトリガーされていました。この変更は自動再生カルーセルにのみ影響します。定義上、コンテンツを含む最大のペイントは、ユーザーがページを初めて操作する前にのみ発生する可能性があります。
Chrome 121 のしきい値の変更
Chrome 121 では、カルーセルなどの横方向にスクロールする画像の動作が変更されました。これらのイベントでは、縦方向のスクロールと同じしきい値が使用されるようになりました。つまり、カルーセルのユースケースでは、画像がビューポートに表示される前に読み込まれます。つまり、画像の読み込みがユーザーに気付かれにくくなりますが、ダウンロードが増えるというデメリットがあります。水平方向の遅延読み込みのデモを使用して、Chrome と Safari と Firefox の動作を比較します。
その他の考慮事項
このセクションでは、カルーセルを実装する際に考慮すべき UX とプロダクトのベスト プラクティスについて説明します。カルーセルは、ビジネス目標の達成を促進し、コンテンツを移動して読みやすく表示する必要があります。
ナビゲーションに関するベスト プラクティス
目立つナビゲーション コントロールを提供する
カルーセルのナビゲーション コントロールは、クリックしやすく、非常に目立つようにする必要があります。ほとんどのカルーセルでは、ナビゲーション コントロールが小さく目立たないようになっています。1 つの色やスタイルのナビゲーション コントロールがすべての状況で機能することはほとんどありません。たとえば、暗い背景でははっきり見える矢印が、明るい背景では見えにくくなることがあります。
ナビゲーションの進行状況を示す
カルーセル ナビゲーション コントロールには、スライドの合計数とユーザーの進行状況に関するコンテキストを提供する必要があります。この情報により、ユーザーは特定のスライドに移動し、すでに表示されたコンテンツを把握しやすくなります。状況によっては、次のスライドの抜粋やサムネイルのリストなど、今後のコンテンツのプレビューを提供することも、エンゲージメントを高めるのに役立ちます。
モバイル操作をサポートする
モバイルでは、従来のナビゲーション コントロール(画面上のボタンなど)に加えて、スワイプ ジェスチャーもサポートする必要があります。
代替のナビゲーション パスを提供する
ほとんどのユーザーがカルーセルのすべてのコンテンツにアクセスすることはないため、カルーセル スライドがリンクするコンテンツには、他のナビゲーション パスからアクセスできるようにする必要があります。
読みやすさに関するベスト プラクティス
自動再生を使用しないでください
自動再生を使用すると、ほぼ矛盾する 2 つの問題が発生します。画面上のアニメーションはユーザーの注意をそらし、より重要なコンテンツから目をそらします。また、ユーザーはアニメーションを広告に関連付けることが多いため、自動再生されるカルーセルを無視します。
そのため、自動再生が適切な選択肢となることはほとんどありません。コンテンツが重要である場合は、自動再生を使用しないことで露出を最大化できます。カルーセル コンテンツが重要でない場合は、自動再生を使用すると、より重要なコンテンツが損なわれます。また、自動再生カルーセルは読みづらく(また煩わしい)、ユーザーによって読み進める速度は異なるため、カルーセルがユーザーごとに「適切な」タイミングで常に切り替わることはありません。
スライド ナビゲーションをユーザーがナビゲーション コントロールで操作できるようにすることをおすすめします。自動再生を使用する必要がある場合は、ユーザーがホバーしたときに自動再生を無効にする必要があります。また、スライド遷移率はスライドの内容を考慮する必要があります。スライドに含まれるテキストが多いほど、画面に表示する時間を長くする必要があります。
テキストと画像を分離する
カルーセルのテキスト コンテンツは、HTML マークアップを使用して個別に表示されるのではなく、対応する画像ファイルに「焼き込まれ」ることがよくあります。このアプローチは、ユーザー補助、ローカライズ、圧縮率に悪影響を及ぼします。また、アセット作成に画一的なアプローチを奨励します。ただし、同じ画像とテキストのフォーマットが、パソコンとモバイルの両方で同じように読みやすいことはほとんどありません。
簡潔にする
ユーザーの注意を引くには、ほんの一瞬しかありません。短く要点を絞ったコピーを使用すると、メッセージが伝わる可能性が高まります。
商品のベスト プラクティス
カルーセルは、追加の垂直スペースを使用して追加のコンテンツを表示できない場合に適しています。商品ページのカルーセルは、このユースケースの良い例です。
ただし、カルーセルは必ずしも効果的に使用されているわけではありません。
- カルーセルは、特にプロモーションを含むものや自動的に進むものの場合、ユーザーが広告と誤認しやすく、ユーザーは広告を無視する傾向があります。これはバナー ブラインドネスと呼ばれる現象です。
- カルーセルは、複数の部門をなだめ、ビジネスの優先順位に関する決定を回避するためによく使用されます。その結果、カルーセルは効果のないコンテンツのゴミ箱になりがちです。
予測内容を検証する
カルーセル(特にホームページに表示されるカルーセル)のビジネスへの影響は、評価とテストを行う必要があります。カルーセルのクリック率は、カルーセルとそのコンテンツが効果的かどうかを判断するのに役立ちます。
関連性を高める
カルーセルは、興味深く関連性の高いコンテンツが明確なコンテキストで提示されている場合に最適です。カルーセル以外でユーザーを引き付けられないコンテンツをカルーセルに配置しても、パフォーマンスは向上しません。カルーセルを使用する必要がある場合は、コンテンツに優先順位を付け、各スライドがユーザーが次のスライドにクリックして移動したくなるほど十分に関連性があることを確認します。