カード
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
カードは TV アプリの基本的な構成要素です。
リソース
ハイライト
- カードを使用して、1 つのトピックに関するコンテンツを表示します。
- カードには画像から見出しまであらゆるものを含めることができ、テキスト、ボタン、リストなどの UI 要素をサポートします。
- 1 つのカードを別のカードと統合したり、複数のカードに分割したりすることはできません。
- カードには、標準、クラシック、コンパクト、インセット、ワイド標準、ワイド クラシックの 6 つのバリエーションがあります。
バリエーション
カードは 5 種類あり、それぞれユースケースが異なります。
- 標準
- 伝統的
- 最小
- ワイド標準
- ワイド クラシック
コンテンツ ブロック
カードのコンテンツは個別のブロックに配置されます。強調を含むカードのビジュアル デザインは階層を示します。カード自体のレイアウトは、カードに含まれるコンテンツの種類に対応しています。
構造
- タイトル
- 字幕
- 説明
- 余分なテキスト
仕様
標準のカード
構造
- 画像
- コンテンツ ブロック
状態
仕様
クラシック カード
構造
- 画像
- コンテンツ ブロック
状態
仕様
コンパクト カード
構造
- 画像
- コンテンツ ブロック
状態
仕様
横長標準カード
構造
- 画像
- コンテンツ ブロック
状態
仕様
ワイドカード
構造
- 画像
- コンテンツ ブロック
状態
仕様
Usage
カードは、さまざまなコンテンツを視覚的に魅力的でユーザー フレンドリーな方法で表示できる、汎用性の高いデザイン要素です。以降のセクションでは、カードの設計上の考慮事項について説明します。
アスペクト比
カードには、16:9、1:1、2:3 の 3 つの一般的なアスペクト比があります。アスペクト比にはそれぞれ強みがあるため、最適な選択は特定のニーズによって異なります。
- カードの最も一般的なアスペクト比は 16:9 です。これは、画像や動画の表示に適したワイド アスペクト比です。
- 1:1 は正方形のアスペクト比です。キャストとスタッフ、チャンネル ロゴ、チームロゴなど、視覚的なバランスが重要なカードに適しています。
- 2:3 は縦長のアスペクト比です。グリッドを分割してさらに強調する場合に適しています。
カードのアスペクト比を選択する最善の方法は、さまざまなオプションを試して、最も良く見えるものを見つけることです。
さまざまなアスペクト比の使用例を紹介します
1 対 1
キャストとスタッフ
スポーツチームのロゴ
2:3
話題の書籍
16:9
映画カード
レイアウトと間隔
画面に表示されるカードの数に応じてカードの幅を変化させるには、20 dp の間隔で適切なピーキングを実装します。
1 カード レイアウト
カードの幅 - 844 dp
2 カード レイアウト
カードの幅 - 412 dp
3 カード レイアウト
カードの幅 - 268 dp
4 カード レイアウト
カードの幅 - 196 dp
5 枚カード レイアウト
カードの幅 - 124 dp
コンテンツ ブロック
カード内のコンテンツ ブロックの幅は、画像のサムネイルと同じ幅にする必要があります。コンテンツ ブロックにより多くのテキストを表示する必要がある場合は、ワイドカード版を使用します。
check_circle
すべきこと
どうしても必要な場合にのみ、短い説明文を表示するために幅の広いカードを使用します。説明は短い長さにします。
cancel
すべきでないこと
縦に積み重ねたカードには長い説明を付けないでください。
コンパクト カード
コンパクトなカードは簡潔で読みやすくする必要があります。背景画像の前にあるコンテンツは、簡潔で的を射たものにする必要があります。長いタイトル、サブタイトル、説明は避けます。これにより、カードがより見やすくなり、スキャンしやすくなります。
画像上のテキストを読みやすくするには、半透明の黒のグラデーション オーバーレイを追加します。これにより、画像を覆いすぎずに背景が暗くなり、テキストが見やすくなります。
check_circle
すべきこと
画像の背景の上にスクリムを使用したコンパクトなカード。
cancel
すべきでないこと
背景画像の上にスクリムのないコンパクトなカードを使用しないでください。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[null,null,["最終更新日 2025-07-27 UTC。"],[],[],null,["# Cards are the basic building blocks of your TV app. \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#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Use a card to display content on a single topic.\n- A card can hold anything from images to headlines, supporting text, buttons, lists, and other UI elements.\n- A card cannot merge with another card or divide into multiple cards.\n- There are six variations of cards: standard, classic, compact, inset, wide standard, and wide classic.\n\nVariants\n--------\n\nThere are five types of cards, each with a different use case:\n\n1. Standard\n2. Classic\n3. Compact\n4. Wide standard\n5. Wide classic\n\nContent blocks\n--------------\n\nA card's contents are arranged in distinct blocks. The card visual design\nincluding emphasis denotes hierarchy. The layout of the cards themselves\naccommodates the types of content the cards contain.\n\n### Anatomy\n\n1. Title\n2. Subtitle\n3. Description\n4. Extra text\n\n### Specs\n\nStandard card\n-------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nClassic card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nCompact card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide standard card\n------------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide classic card\n-----------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nUsage\n-----\n\nCards are versatile design elements that can be used to display a variety\nof content in a visually appealing and user-friendly way. The following\nsections explore design considerations for cards.\n\n### Aspect ratio\n\nThere are three common aspect ratios for cards: 16:9, 1:1, and 2:3.\nEach aspect ratio has its strengths, so the best choice for\nyou depends on your specific needs.\n\n- 16:9 is the most common aspect ratio for cards. It is a wide aspect ratio that is well-suited for displaying images and videos.\n- 1:1 is a square aspect ratio. It is a good choice for cards that need to be visually balanced, such as cast and crew, channel logos, or team logos.\n- 2:3 is a taller aspect ratio. It is a good choice if you want to break up the grid and bring more emphasis.\n\nUltimately, the best way to choose an aspect ratio for your cards is to\nexperiment with different options and see what looks best.\n\nHere are some examples usages of different aspect ratios \n\n### 1:1\n\nCast and crew \n\nSports teams logos\n\n### 2:3\n\nTrending books\n\n### 16:9\n\nMovie cards\n\n### Layout and spacing\n\nVarying card widths based on the number of cards visible on the screen\ncan be achieved by implementing proper peaking with a spacing of 20dp. \n\n### 1-card layout\n\nWidth of the card --- 844dp\n\n### 2-card layout\n\nWidth of the card --- 412dp\n\n### 3-card layout\n\nWidth of the card --- 268dp\n\n### 4-card layout\n\nWidth of the card --- 196dp\n\n### 5-card layout\n\nWidth of the card --- 124dp\n\n### Content block\n\nThe width of the content block in a card should be the same width as the image\nthumbnail. If you need to display more text in the content block,\nuse a wide card variation. \ncheck_circle\n\n### Do\n\nUse wide cards to show short descriptions, but only if absolutely necessary. The length of the description should be only a few words. \ncancel\n\n### Don't\n\nAvoid long descriptions on vertically stacked cards.\n\n### Compact card\n\nCompact cards should be concise and easier to read. The content preceding the\nbackground image should be brief and to the point. Avoid long titles,\nsubtitles, or descriptions. This makes your cards more\nvisually appealing and easier to scan.\n\nTo make text more readable on an image, add a semi-transparent black\ngradient overlay. This darkens the background without obscuring\nthe image too much, making the text easier to see. \ncheck_circle\n\n### Do\n\nCompact card using scrim on top of image background. \ncancel\n\n### Don't\n\nDon't use compact cards without scrim on top of the background image."]]
