カルーセルに関するおすすめの方法

パフォーマンスとユーザビリティを重視してカルーセルを最適化する。

Katie Hempenius
Katie Hempenius
X

カルーセルは、スライドショーのようにコンテンツを表示する 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 ミリ秒以内に発生するため、累積レイアウト シフト（CLS）にはカウントされません。ただし、自動再生カルーセルの場合、これらのレイアウトのずれは CLS にカウントされるだけでなく、無限に繰り返される可能性があります。そのため、自動再生カルーセルがレイアウトのずれの原因になっていないことを確認することが特に重要です。

  • スクロール: 一部のカルーセルでは、ユーザーがスクロールを使用してカルーセル スライドを移動できます。要素の開始位置が変化しても、スクロール オフセット（つまり、scrollLeft または scrollTop）が同じ量だけ（ただし反対方向に）変化しても、同じフレーム内で発生した場合はレイアウト シフトとは見なされません。

レイアウト シフトの詳細については、レイアウト シフトをデバッグするをご覧ください。

最新のテクノロジーを使用する

多くのサイトでは、サードパーティの JavaScript ライブラリを使用してカルーセルを実装しています。現在、古いカルーセル ツールを使用している場合は、新しいツールに切り替えることでパフォーマンスを改善できる可能性があります。新しいツールはより効率的な API を使用する傾向があり、jQuery などの追加の依存関係を必要とすることはあまりありません。

ただし、作成するカルーセルの種類によっては、JavaScript がまったく必要ない場合もあります。新しい スクロール スナップ API を使用すると、HTML と CSS のみを使用してカルーセル形式の遷移を実装できます。

scroll-snap の使用に関する参考になるリソースをいくつかご紹介します。

カルーセル コンテンツを最適化する

カルーセルには、サイトの最大の画像が含まれていることがよくあります。そのため、これらの画像を完全に最適化しておくとよいでしょう。適切な画像形式と圧縮レベルを選択する、画像 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 マークアップを使用して個別に表示されるのではなく、対応する画像ファイルに「焼き込まれ」ることがよくあります。このアプローチは、ユーザー補助、ローカライズ、圧縮率に悪影響を及ぼします。また、アセット作成に画一的なアプローチを奨励します。ただし、同じ画像とテキストのフォーマットが、パソコンとモバイルの両方で同じように読みやすいことはほとんどありません。

簡潔にする

ユーザーの注意を引くには、ほんの一瞬しかありません。短く要点を絞ったコピーを使用すると、メッセージが伝わる可能性が高まります。

商品のベスト プラクティス

カルーセルは、追加の垂直スペースを使用して追加のコンテンツを表示できない場合に適しています。商品ページのカルーセルは このユースケースの好例です

ただし、カルーセルは必ずしも効果的に使用されているわけではありません。

  • カルーセルは、特にプロモーションを含むものや自動的に進むものの場合、ユーザーが広告と誤認しやすく、ユーザーは広告を無視する傾向があります。これはバナー ブラインドネスと呼ばれる現象です。
  • カルーセルは、複数の部門をなだめ、ビジネスの優先順位に関する決定を回避するためによく使用されます。その結果、カルーセルは効果のないコンテンツのゴミ箱になりがちです。

予測内容を検証する

カルーセル（特にホームページに表示されるカルーセル）のビジネスへの影響は、評価とテストを行う必要があります。カルーセルのクリック率は、カルーセルとそのコンテンツが効果的かどうかを判断するのに役立ちます。

関連性を高める

カルーセルは、興味深く関連性の高いコンテンツが明確なコンテキストで提示されている場合に最適です。カルーセル以外でユーザーを引き付けられないコンテンツをカルーセルに配置しても、パフォーマンスは向上しません。カルーセルを使用する必要がある場合は、コンテンツに優先順位を付け、各スライドがユーザーが次のスライドにクリックして移動したくなるほど十分に関連性があることを確認します。