注目のカルーセル
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
注目のカルーセルは、ユーザーに関連するコンテンツのセレクションを表示します。
リソース
ハイライト
- 注目のカルーセルを使用して、特定のコンテンツをハイライト表示します。
- 注目のカルーセルには、画像、見出し、コンテンツの詳細、動画、アクション、ページ設定コントロールなどの UI 要素を含めることができます。
- カルーセルは通常、アプリのホームページまたはランディング ページに配置されるため、簡単にアクセスできます。
- 注目のカルーセルは、ユーザーの関心を引き、臨場感あふれるエクスペリエンスを実現するため、視覚的にアピールします。
- 表示されるコンテンツは、ユーザーの閲覧履歴、好み、現在の傾向に基づいてカスタマイズできます。
バリエーション
注目のカルーセルを統合するには、次の 2 つの方法があります。
- 臨場感
- カード
コンテンツ ブロック
構造
- テキストを上書き
- タイトル
- 説明
- ボタン
仕様
構造
- 背景
- 有効な要素
- 無効な要素
- 合計要素数
仕様
臨場感
構造
- 画像の背景
- シネマティックなスクリム
- Poster
- 背景色
- コンテンツ ブロック
- ページ分け
- コンテンツ グリッド
仕様
カード
構造
- 画像の背景
- シネマティックなスクリム
- Poster
- カードの背景
- コンテンツ ブロック
- ページ分け
- コンテンツ グリッド
仕様
Usage
注目のカルーセルを使用すると、厳選されたコンテンツの厳選されたコンテンツを、魅力的で視覚的に魅力のある操作しやすいフォーマットで紹介および宣伝できます。
背景に画像がある
背景画像は、ストリーミング アプリの注目のカルーセルでユーザー エンゲージメントを高めるうえで重要な役割を果たします。
高品質の画像
フォーカスのあるカードのコンテンツとの関連性が高く、視覚的に魅力のある高解像度の画像を使用します。
check_circle
すべきこと
鮮明で視覚的な魅力があり、コンテンツ ブロックとの関連性が高い画像を使用します。
cancel
すべきでないこと
背景にテキストを含む画像は使用しないでください。
わかりやすい視覚的な階層
画像の上にスクリムを使用して、フォーカスされているカードのコンテンツから背景が注意をそらさないようにします。これにより、ユーザーがカードのタイトル、説明、行動を促すフレーズのボタンにフォーカスを合わせることができます。
check_circle
すべきこと
スクリムを使用すると、読みやすさとコンテンツのわかりやすさが向上します。
cancel
すべきでないこと
背景が画面上の他のコンテンツの読みやすさと可視性に影響しないようにします。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Featured carousels showcase a selection of content relevant to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Carousel(kotlin.Int,androidx.compose.ui.Modifier,androidx.tv.material3.CarouselState,kotlin.Long,androidx.compose.animation.ContentTransform,androidx.compose.animation.ContentTransform,kotlin.Function1,kotlin.Function2)) | Available |\n\nHighlights\n----------\n\n- Use featured carousels to highlight specific content.\n- Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.\n- Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.\n- Featured carousels are visually appealing to help engage the user, and create an immersive experience.\n- The content displayed can be personalized based on the user's viewing history, preferences, or current trends.\n\nVariants\n--------\n\nThere are two different ways of integrating featured carousels:\n\n1. Immersive\n2. Card\n\nContent block\n-------------\n\n### Anatomy\n\n1. Overline text\n2. Title\n3. Description\n4. Button\n\n### Specs\n\nPagination\n----------\n\n### Anatomy\n\n1. Background\n2. Active element\n3. Inactive elements\n4. Total elements\n\n### Specs\n\nImmersive\n---------\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Background color\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nCard\n----\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Card background\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nUsage\n-----\n\nUse featured carousels to showcase and promote a curated selection\nof content in an engaging, visually appealing, and simple to navigate format.\n\n### Images in backgrounds\n\nImages in backgrounds play a crucial role in enhancing user engagement\nin a streaming app featured carousel.\n\n### High quality imagery\n\nUse high-resolution images that are visually appealing and relevant\nto the content of the focused card. \ncheck_circle\n\n### Do\n\nKeep images clean, visually appealing, and relevant to the content block. \ncancel\n\n### Don't\n\nAvoid using images with text in the background.\n\n### Obvious visual hierarchy\n\nEnsure that the background does not distract from the focused card's\ncontent by using a scrim over the image; this helps the user maintain\nfocus on the card's title, description, and call-to-action button. \ncheck_circle\n\n### Do\n\nUse a scrim to improve readability and content digestion. \ncancel\n\n### Don't\n\nMake sure the background doesn't affect readability and visibility of the rest of the content on the screen."]]
