目次

• 00:00イントロ
• 00:23 CardUIについて
• 03:52 事例で理解する
• 08:23 Cardにするデメリット
• 10:39 いろんなCardUIを見る

公式のドキュメント

‍

Card - Material Design 3
‍https://m3.material.io/components/cards/accessibility
‍MD3になってスタイルがAndroid独自になったのでちょっとわかりづらい気もする

Card - Material Design 2
‍https://m2.material.io/components/cards
‍こっちの方が大元の概念はわかりやすい気がする。

‍

□ 公式に書かれていること

• ⚡ カードは単一の含まれるユニットとして識別可能
  ‍https://m3.material.io/components/cards/overview‍
• ⚡ カードには、画像から見出し、サポート テキスト、ボタン、リスト、その他のコンポーネントまで、あらゆるものを保持できます。
  ‍https://m3.material.io/components/cards/overview‍
• ⚡ カードのレイアウトとサイズは、その内容によって異なります。カードを作成する唯一の正しい方法はありません。
  ‍https://m3.material.io/components/cards/overview

□ よくある使い方と特徴

• Cardは”オブジェクト/コンテンツ”を表現する時に使われるUIパターン
• 例:食べログのお店一覧の「お店」オブジェクト
• 特徴としては、Card内にさまざまな情報を詰め込めるが1つの独立したものとして見えること
• そのため、複数のアクション、複数の情報を1つにまとめたいときに重宝される
• 独立して見えるので、タップ範囲が明確である

□ カードの利点

さまざまな情報をまとめて、”1つのオブジェクト”として認識することが容易である

⚡ カードを使用して、単一のトピックに関するコンテンツとアクションを表示します。
カードは、関連性のある実用的な情報を簡単にスキャンできる必要があります。テキストや画像などの要素は、階層を明確に示す方法でカードに配置する必要があります。

‍

ドキュメント

動画でも使っているドキュメントはこちら

https://takumikai.notion.site/1-Card-UI-a9050b76809841e798297736c1fd3b9d?pvs=4

‍

目次

• 00:00イントロ
• 00:23 CardUIについて
• 03:52 事例で理解する
• 08:23 Cardにするデメリット
• 10:39 いろんなCardUIを見る

‍

公式のドキュメント

‍

Card - Material Design 3
‍https://m3.material.io/components/cards/accessibility
‍MD3になってスタイルがAndroid独自になったのでちょっとわかりづらい気もする

Card - Material Design 2
‍https://m2.material.io/components/cards
‍こっちの方が大元の概念はわかりやすい気がする。

‍

□ 公式に書かれていること

• ⚡ カードは単一の含まれるユニットとして識別可能
  ‍https://m3.material.io/components/cards/overview‍
• ⚡ カードには、画像から見出し、サポート テキスト、ボタン、リスト、その他のコンポーネントまで、あらゆるものを保持できます。
  ‍https://m3.material.io/components/cards/overview‍
• ⚡ カードのレイアウトとサイズは、その内容によって異なります。カードを作成する唯一の正しい方法はありません。
  ‍https://m3.material.io/components/cards/overview

□ よくある使い方と特徴

• Cardは”オブジェクト/コンテンツ”を表現する時に使われるUIパターン
• 例:食べログのお店一覧の「お店」オブジェクト
• 特徴としては、Card内にさまざまな情報を詰め込めるが1つの独立したものとして見えること
• そのため、複数のアクション、複数の情報を1つにまとめたいときに重宝される
• 独立して見えるので、タップ範囲が明確である

□ カードの利点

さまざまな情報をまとめて、”1つのオブジェクト”として認識することが容易である

⚡ カードを使用して、単一のトピックに関するコンテンツとアクションを表示します。
カードは、関連性のある実用的な情報を簡単にスキャンできる必要があります。テキストや画像などの要素は、階層を明確に示す方法でカードに配置する必要があります。

‍

ドキュメント

動画でも使っているドキュメントはこちら

https://takumikai.notion.site/1-Card-UI-a9050b76809841e798297736c1fd3b9d?pvs=4

‍

‍

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript