カルーセルのパフォーマンスとユーザビリティを最適化します。
カルーセルは、スライドショー形式でコンテンツを表示する 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 つの画像を読み込むだけでも同様に効果があります。
レイアウト シフトを避ける
カルーセルのレイアウト シフトが発生する最も一般的な原因は、スライドの切り替えとナビゲーション コントロールの 2 つです。
スライド遷移: スライド遷移中に発生するレイアウト シフトは、通常、レイアウトを左右する DOM 要素のプロパティの更新によって発生します。これらのプロパティの例としては、
left、top、width、marginTopなどがあります。レイアウトの移動を避けるには、代わりに CSS のtransformプロパティを使用してこれらの要素を移行します。このデモでは、transformを使用して基本的なカルーセルを作成する方法を示します。ナビゲーション コントロール: カルーセル ナビゲーション コントロールを DOM から移動したり、追加/削除したりすると、その実装方法によってはレイアウトがずれることがあります。この動作を示すカルーセルは通常、ユーザーがカーソルを合わせたときに表示されます。
カルーセルの CLS 測定に関して混同されることが多い点は次のとおりです。
自動再生カルーセル: スライドの切り替えは、カルーセル関連のレイアウト シフトの最も一般的な原因です。自動再生以外のカルーセルでは、通常、これらのレイアウト シフトはユーザー操作から 500 ミリ秒以内に発生するため、Cumulative Layout Shift（CLS）にはカウントされません。ただし、自動再生カルーセルでは、これらのレイアウト シフトが CLS にカウントされるだけでなく、無期限に繰り返される可能性もあります。したがって、自動再生カルーセルがレイアウト シフトのソースでないことを確認することが特に重要です。
スクロール: 一部のカルーセルでは、ユーザーはスクロールを使用してカルーセル スライドを移動できます。要素の開始位置が変化しても、スクロール オフセット（
scrollLeftまたはscrollTop）が同じ量だけ（ただし逆方向に）変化した場合、同じフレーム内で発生する限り、レイアウト シフトとはみなされません。
レイアウト シフトの詳細については、レイアウト シフトをデバッグするをご覧ください。
最新テクノロジーの活用
多くのサイトでは、サードパーティの JavaScript ライブラリを使用してカルーセルを実装しています。古いカルーセル ツールを現在使用している場合は、新しいツールに切り替えることでパフォーマンスを改善できる可能性があります。新しいツールは、より効率的な API を使用する傾向があり、jQuery などの追加の依存関係を必要とする可能性は低くなります。
ただし、作成するカルーセルのタイプによっては、JavaScript をまったく必要としない場合もあります。新しい Scroll Snap API を使用すると、HTML と CSS のみを使用してカルーセル形式の遷移を実装できます。
scroll-snap の使用に役立つと思われるリソースをいくつかご紹介します。
- ストーリー コンポーネント（web.dev）の構築
- 次世代のウェブスタイル設定: スクロール スナップ（web.dev）
- CSS のみのカルーセル（CSS の裏技）
- CSS のみのカルーセルを作成する方法（CSS の裏技）
カルーセル コンテンツを最適化する
カルーセルには、サイトで最も大きな画像がいくつか含まれることが多いため、これらの画像が完全に最適化されていることを確認することをおすすめします。適切な画像形式と圧縮レベルの選択、画像 CDN の使用、srcset による複数の画像バージョンの提供はいずれも、画像の転送サイズを小さくできる手法です。
パフォーマンスの測定
このセクションでは、カルーセルに関連する LCP の測定について説明します。LCP の計算中は、カルーセルは他の UX 要素と同じように扱われますが、カルーセルの自動再生に使用する LCP の計算の仕組みに混乱が生じがちです。
カルーセルの LCP 測定
カルーセルの LCP の計算の仕組みを理解するための重要なポイントは次のとおりです。
- LCP では、ページ要素がフレームにペイントされる際に考慮されます。ユーザーがページを操作（タップ、スクロール、キー操作）すると、LCP 要素の新しい候補は考慮されなくなります。したがって、自動再生カルーセルのスライドはすべて最終的な LCP 要素になる可能性がありますが、静的カルーセルでは最初のスライドのみが LCP の候補になる可能性があります。
- 同じサイズの画像が 2 つレンダリングされた場合、最初の画像は LCP 要素と見なされます。LCP 要素は、LCP 候補が現在の LCP 要素よりも大きい場合にのみ更新されます。したがって、すべてのカルーセル要素のサイズが同じ場合、LCP 要素は最初に表示される画像になります。
- LCP の候補を評価する際に、LCP では「表示サイズまたは固有のサイズのうち、小さい方」が考慮されます。したがって、自動再生カルーセルに一貫したサイズで画像が表示されているが、表示サイズよりも小さいさまざまな固有のサイズの画像が含まれている場合、新しいスライドが表示されると LCP 要素が変更されることがあります。この場合、すべての画像が同じサイズで表示される場合、固有の最大サイズの画像が LCP 要素と見なされます。LCP を低く抑えるには、自動再生カルーセル内のすべてのアイテムが本来のサイズと同じになるようにする必要があります。
カルーセルの LCP 計算の変更（Chrome 88）
Chrome 88 以降、後で DOM から削除された画像は、最大の Contentful Paint が発生する可能性があります。Chrome 88 より前では、このような画像は検討対象から除外されていました。自動再生カルーセルを使用しているサイトの場合、この定義の変更によって LCP スコアに中立またはプラスの影響があります。
この変更は、多くのサイトで以前に表示された画像を DOM ツリーから削除することでカルーセル遷移を実装している観察に対応するために行われました。Chrome 88 より前では、新しいスライドが表示されるたびに、以前の要素が削除されると LCP の更新がトリガーされていました。この変更は、定義上、カルーセルの自動再生にのみ影響します。Largest Contentful Paint が発生する可能性があるのは、ユーザーが最初にページを操作する前のみです。
しきい値の変更（Chrome 121）
Chrome 121 では、カルーセルなどの水平方向にスクロールする画像の動作が変更されました。これらは、垂直スクロールと同じしきい値を使用するようになりました。つまり、カルーセルのユースケースでは、画像はビューポートに表示される前に読み込まれます。つまり、ユーザーが画像の読み込みに気づく可能性は低くなりますが、その代わりにダウンロード数が増加します。水平遅延読み込みのデモを使用して、Chrome と Safari や Firefox での動作を比較します。
その他の考慮事項
このセクションでは、カルーセルを実装するときに留意すべき UX とプロダクトのベスト プラクティスについて説明します。カルーセルは、ビジネス目標の達成を促進し、操作しやすく読みやすい方法でコンテンツを提示する必要があります。
ナビゲーションに関するベスト プラクティス
ナビゲーション コントロールを目立たせる
カルーセル ナビゲーション コントロールは、クリックしやすく、視認性の高いものにする必要があります。これはめったに行われない手法です。ほとんどのカルーセルには、小さくてもわかりにくいナビゲーション コントロールがあります。単一の色またはスタイルのナビゲーション コントロールがすべての状況で機能することはほとんどありません。たとえば、矢印が暗い背景でははっきりと見えても、明るい背景では見えにくいことがあります。
ナビゲーションの進行状況を表示する
カルーセル ナビゲーション コントロールでは、スライドの合計数とユーザーによるスライドの進行状況に関するコンテキストを提供する必要があります。この情報により、ユーザーは特定のスライドに移動し、どのコンテンツがすでに表示されているかを把握しやすくなります。状況によっては、次のスライドの抜粋やサムネイルのリストなど、今後予定されているコンテンツのプレビューを提供することも効果があり、エンゲージメントを高めることができます。
モバイル操作をサポートする
モバイルでは、従来のナビゲーション コントロール（画面上のボタンなど）に加えて、スワイプ操作をサポートする必要があります。
別のナビゲーション パスを指定する
ほとんどのユーザーがすべてのカルーセル コンテンツを利用する可能性は低いため、カルーセルのスライドがリンク先のコンテンツには、他のナビゲーション パスからアクセスできるようにする必要があります。
読みやすさのベスト プラクティス
自動再生を使用しない
自動再生を使用すると、ほぼ逆説的な 2 つの問題が生じます。画面上のアニメーションは、ユーザーの注意をそらし、より重要なコンテンツから目をそらす傾向があります。同時に、ユーザーはアニメーションを広告に関連付けてしまうことが多いため、自動再生されるカルーセルは無視されます。
そのため、自動再生が適切な選択となることはほとんどありません。コンテンツが重要な場合は、自動再生を使用しないと露出を最大化できます。カルーセル コンテンツが重要でない場合は、自動再生を使用すると、より重要なコンテンツの表示が損なわれます。さらに、自動再生カルーセルは読みにくいことがあり、煩わしくもなります。ユーザーは読むスピードが異なるため、カルーセルがユーザーごとに「適切な」タイミングで一貫して遷移することはまれです。
スライドのナビゲーションは、ナビゲーション コントロールを使用してユーザーが操作できるようにすることが理想的です。自動再生を使用する必要がある場合は、ユーザーがカーソルを合わせたときに自動再生が無効になります。また、スライドの切り替え速度では、スライドの内容を考慮する必要があります。スライドに含まれるテキストが多いほど、画面に表示される時間が長くなります。
テキストと画像を分離する
カルーセルのテキスト コンテンツは、多くの場合、HTML マークアップを使用して個別に表示するのではなく、対応する画像ファイルに「組み込まれ」ます。このアプローチは、ユーザー補助、ローカライズ、圧縮率に適していません。また、アセット作成に対する画一的なアプローチも推奨されます。ただし、同じ画像とテキスト形式であっても、パソコンとモバイルで同じように読み取れることはほとんどありません。
簡潔であること
ユーザーの注意を引く時間はわずか 1 秒です。要点を押さえた簡潔なコピーを作成することで、メッセージが伝わる可能性が高まります。
サービスのベスト プラクティス
カルーセルは、縦方向のスペースを追加して追加コンテンツを表示することができない場合に便利です。商品ページのカルーセルは このユースケースの良い例です
ただし、カルーセルが常に効果的に使用されるとは限りません。
- カルーセルは、特にプロモーションが含まれる場合や自動的に進む場合、ユーザーが広告と間違えることがよくあります。ユーザーは広告を無視する傾向があります。この現象はバナー ブラインドネスと呼ばれます。
- カルーセルは、複数の部門を配置し、ビジネス上の優先事項に関する意思決定を回避するためによく使用されます。その結果、カルーセルは効果の低いコンテンツの捨て場に早変わりする可能性があります。
予測内容を検証する
カルーセルがビジネスに及ぼす影響（特にホームページの場合）は、評価とテストを行う必要があります。カルーセルのクリック率は、カルーセルとそのコンテンツが効果的かどうかを判断するのに役立ちます。
関連性を高める
カルーセルが最適に機能するのは、興味を引く関連性の高いコンテンツを明確なコンテキストとともに示している場合です。カルーセルの外でコンテンツがユーザーの関心を引き付けないとしたら、カルーセルに配置してもパフォーマンスは向上しません。カルーセルを使用する必要がある場合は、コンテンツを優先し、ユーザーがクリックして次のスライドに移動したくなるよう、各スライドの関連性が十分であることを確認してください。