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

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

Katie Hempenius
Katie Hempenius
X

カルーセルは、スライドショーのようにコンテンツを表示する UX コンポーネントです。 カルーセルは「自動再生」できますユーザーが手動で移動することもできます。カルーセルは 他の場所でも使用できるため、画像の表示に最もよく使用されます。 商品、プロモーションをホームページで 表示したりできます

この記事では、カルーセルのパフォーマンスと UX のベスト プラクティスについて説明します。

カルーセルを示す画像

パフォーマンス

適切に実装されたカルーセルは、それ自体では最小限に抑えられるか、まったくないはずです。 パフォーマンスに及ぼす影響を確認できますただし、カルーセルにはサイズの大きいメディア アセットが含まれていることがよくあります。 サイズの大きいアセットは、表示の有無にかかわらずパフォーマンスに影響を与える可能性があります 選択することもできます

  • LCP（Largest Contentful Paint）

    スクロールせずに見える範囲の大きなカルーセルには、多くの場合、ページの LCP 要素が含まれます。 LCP に大きく影響することがありますこのような場合 カルーセルを最適化すると、LCP が大幅に改善される可能性があります。Google Cloud オペレーションスイートの カルーセルを含むページでの LCP 測定の仕組み カルーセルの LCP 測定をご覧ください。 。

  • INP（Interaction to Next Paint）

    カルーセルは JavaScript の要件が最小限であるため、 ページの応答性に影響しますサイトのカルーセルに カルーセル ツールを置き換えることを検討してください。

  • CLS（Cumulative Layout Shift）

    驚くべきことに、合成されていないジャンクのあるアニメーションを使用しているカルーセルが多数あります。 CLS に影響する可能性があります自動再生カルーセルがあるページでは、 CLS が無限に発生する可能性があります通常、この種の CLS は明らかではない 人間の目には照らされるため、問題は見過ごされがちです。これを回避するには 非合成アニメーションは使用しないでください。 使用することもできます（スライドの切り替え時など）。

パフォーマンスに関するベスト プラクティス

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 秒間も広告を見ていなかったり 1 つの画像を読み込むだけでも同様に効果があります。

レイアウト シフトを回避する

スライドの切り替えとナビゲーション コントロールは、 カルーセルのレイアウト シフト:

  • スライドの切り替え: スライドの切り替え時に発生するレイアウト シフトは、 これは通常、DOM 要素のレイアウト誘導プロパティを更新することで発生します。 このようなプロパティの例としては、left、top、width などがあります。 marginTop。レイアウト シフトを回避するには、代わりに CSS transform プロパティを使用して、これらの要素を移行します。この デモ: transform を使用して以下を行う方法を示します。 基本的なカルーセルを作成します

  • ナビゲーション コントロール: カルーセル ナビゲーションの移動、追加、削除 DOM からのコントロールにより、その変更方法によってはレイアウト シフトが生じることがあります。 確認します。通常、この動作を示すカルーセルは、 レスポンスを返します。

CLS の測定に関して混乱しがちなポイントは次のとおりです。 カルーセル:

  • 自動再生カルーセル: スライドの切り替えは、動画再生の最も一般的なソースです カルーセル関連のレイアウト シフト。自動再生されないカルーセルでは、これらのレイアウトが 通常はユーザー インタラクションから 500 ミリ秒以内に発生し、カウントされません。 Cumulative Layout Shift へ （CLS）。ただし、 レイアウトの変化がカウントされるだけでなく 無期限に繰り返すことができますそのため、特に 自動再生カルーセルがレイアウトのソースでないことを確認することが重要です できます。

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

レイアウト シフトについて詳しくは、レイアウトをデバッグする シフトします。

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

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

ただし、作成するカルーセルのタイプによっては、 使用できます。新しいスクロール Snap API を使用すると、HTML のみを使用して、カルーセル形式の遷移を実装できます。 CSS。

scroll-snap の使用に関する役立つリソースを以下に示します。

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

多くの場合、カルーセルにはサイトの最大規模の画像が含まれているため、 確認する必要があります適切な選択 画像形式と圧縮レベル、画像 CDN を使用 srcset を使用して複数の画像を提供 バージョン 画像転送サイズを削減できるさまざまな技術があります。

パフォーマンスの測定

このセクションでは、カルーセルに関連する LCP の測定について説明します。ただし、 LCP の期間中、カルーセルの扱いは他の UX 要素と変わりません。 自動再生されるカルーセルの LCP を計算する仕組みは、 疑問に思われるかもしれません。

カルーセルの LCP 測定

カルーセルの LCP の計算方法を理解するうえで重要なポイントは以下のとおりです。

  • LCP は、ページ要素がフレームに描画される際に考慮します。新しい候補者 は、ユーザーが操作（タップ、 キー操作など）を確認できます。自動再生されるスライドは LCP の最終的な要素になる可能性もありますが、静的な画像の LCP の候補となるのは最初のスライドのみです。
  • 同じサイズの画像が 2 つレンダリングされると、最初の画像が考慮されます LCP 要素ですLCP 要素は、LCP 候補が 現在の LCP 要素より大きくなりますすべてのカルーセル要素が 同じサイズにする場合、LCP 要素は最初に表示される画像である必要があります。
  • LCP の候補を評価する際には、 いずれか小さい方」という警告が表示されます。自動再生 カルーセルは一貫したサイズで画像を表示しますが、次の画像が含まれています。 多様な本質的 サイズ サイズがディスプレイ サイズよりも小さい場合、LCP 要素は新しい 表示されます。すべての画像が同じタイミングで表示される場合 サイズが大きい場合、固有のサイズが最も大きい画像が LCP と見なされます。 要素です。LCP を低く抑えるには、自動再生されるすべてのアイテムで カルーセルは本質的に同じサイズです。

カルーセルの LCP の計算を変更（Chrome 88）

Chrome の時点で 88、 後で DOM から削除された画像は、最も大きい可能性がある Contentful Paints ですChrome 88 より前は、これらの画像は 検討する必要があります自動再生カルーセルを使用するサイトに対する定義の変更 LCP スコアに対してニュートラルまたはプラスの影響を与えます。

この変更は、 観測 多くのサイトでカルーセルの 遷移を実装するために 取得した画像が表示されます。Chrome 88 より前のバージョンでは、 前の要素が削除されると LCP がトリガーされ、 更新されますこの変更は自動再生カルーセルにのみ影響します。定義上、 最大の Contentful Paint は、ユーザーが最初に できます。

しきい値の変更（Chrome 121）

Chrome 121 で、カルーセルなどの水平スクロール画像の動作が変更されました。垂直スクロールと同じしきい値が使用されるようになりました。つまり、カルーセルのユースケースでは、画像はビューポートに表示される前に読み込まれます。つまり、画像の読み込みがユーザーの目に触れる可能性は低くなりますが、ダウンロード数は増えます。水平遅延読み込みのデモを使用して、Chrome と Safari および Firefox での動作を比較してください。

その他の考慮事項

このセクションでは、常に使用しておくべき UX とプロダクトのベスト プラクティスについて説明します。 注意すべき点がいくつかありますカルーセルはビジネス目標の達成を促進する 操作しやすく読みやすい方法でコンテンツを提示できます

ナビゲーション コントロールを目立たせる

カルーセルのナビゲーション コントロールは、クリックしやすく、見やすいものにする必要があります。これは、 めったにないものでも ほとんどのカルーセルに ナビゲーションコントロールが 小ささと繊細さを兼ね備えています。単一の色またはスタイルの単一の ナビゲーション コントロールは、状況によって機能することはほとんどありません。たとえば、 暗い背景でもはっきり写っていると画像が見づらいことがあります 背景に画像を表示させます。

ナビゲーションの進行状況を表示する

カルーセルのナビゲーション コントロールで、 ユーザーの進捗状況を確認できますこの情報により ユーザーが特定のスライドに移動し、どのコンテンツが 表示されます。状況によっては コンテンツ（次のスライドの抜粋やサムネイルのリストなど）は、 エンゲージメントを高めることができます

モバイル ジェスチャーをサポートする

モバイルでは、従来のデバイスに加えて、スワイプ操作もサポートする必要がある ナビゲーション コントロール（画面上のボタンなど）。

別のナビゲーション パスを提供する

ほとんどのユーザーがすべてのカルーセル コンテンツに興味を持つ可能性は低いため、 他のナビゲーションからアクセスできる、カルーセル スライドのリンク先のコンテンツ あります。

読みやすさのベスト プラクティス

自動再生を使用しない

自動再生を使用すると、ほぼ逆説的な問題が 2 つ発生します。画面上 アニメーションはユーザーの注意をそらし、より重要なものから目をそらす content;ユーザーがアニメーションと広告を関連付けている場合、 自動再生されるカルーセルは無視されます。

そのため、自動再生が適切な選択であることはまれです。コンテンツが重要でなければ、 自動再生を使用すると露出を最大化できます。カルーセルのコンテンツが重要でなければ 自動再生を使用すると、より重要なコンテンツが目立たなくなります。また 自動再生カルーセルは読みにくい場合があり、それも煩わしくありません。閲覧されたユーザー カルーセルが一貫して 「右」時間をかける必要がありません。

スライドのナビゲーションは、ナビゲーション コントロールを介してユーザーの誘導を行うのが理想的です。条件 自動再生を使用する必要があり、ユーザーがカーソルを合わせたときに自動再生を無効にする必要があります。また スライドの遷移速度では、スライドのコンテンツを考慮し、テキストの量が スライドに含める長さを決める必要があります。

テキストと画像を分けておく

カルーセルのテキスト コンテンツは多くの場合に「組み込まれている」対応する画像ファイルを HTML マークアップを使用して個別に表示するよりも効率的です。この方法は アクセシビリティ、ローカライズ、圧縮率ですまた、 アセットの作成に汎用的なアプローチを採用しています。ただし、同じ画像やテキストを パソコンとモバイルのフォーマットで読み取れることはほとんどありません。

簡潔にすること

ユーザーの注意を引くための時間は、ほんの一瞬である。短い、 要点を絞ってコピーを作成することで、メッセージが伝わる可能性が高まります。

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

カルーセルは、追加の垂直スペースを使用して 追加コンテンツを表示するオプションはありません。商品ページのカルーセルは ユースケースの好例となることがよくあります

ただし、カルーセルは常に効果的に使用されるとは限りません。

  • カルーセル（特にプロモーションが含まれる場合や自動的に進む場合） 誤った情報を 表示することもできます。ユーザーは広告を無視する傾向がある - これは バナー 失明。
  • カルーセルは、複数の部門を行きわたらせるためによく使用され、 ビジネス上の意思決定を 簡単に行えるようにしますそのためカルーセルは 無力なコンテンツばかりに目が行く傾向があります

予測内容を検証する

カルーセル（特にホームページでのカルーセル）がビジネスにもたらす効果は、 評価、テストしますカルーセルのクリック率は、 そのコンテンツが効果的であることがわかります

関連性を高める

カルーセルは、興味を引く関連性の高いコンテンツが含まれていて、 明確なコンテキストを提示します。それ以外の場所でコンテンツがユーザーを引き付けられなければ、 カルーセルに配置しても、パフォーマンスは向上しません。必要に応じて カルーセルを使用し、コンテンツに優先順位を付け、各スライドが十分に表示されるようにする クリックして次のスライドに進めます