【Material Design】コンテンツのUI表現の代表パターン「CardUI」

目次

• 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

‍

‍