マテリアルデザインにおけるカード、チップス、タブの使い方

カード

カードは、より複雑で詳細な情報への エントリーポイントとして用いられることが多い。

カードは 異なるタイプのオブジェクトから構成されるコンテンツを表示するのに便利な手段である。

また、似たようなオブジェクトでも、 サイズやアクションが多様なものを表示するのにも適している。

サイズが同じでアクションもなく、一様なコンテンツは、単純なリストで表示すべき。

コンテンツ内のテキストにリンクを貼るのはやめるべき。

https://material.io/components/cards

これで完璧！マテリアルデザインの「カード」の使い方

リンクボタンをつけたいときはシンプルでフラットなものにします。色を変えるなどしてボタンであることが一目で分かるようにします。

重要な情報を上に

文字はサイズを変えて強調

https://saruwakakun.com/html-css/material/cards

カード内でスクロールできるようにしてはいけない

https://saruwakakun.com/html-css/material/failure#section2

チップス

https://material.io/components/chips#types

タブ

それぞれのタブは相互に重複してはいけない。

タブのラベルは意味のある分類を表し、論理的な構成にする。

タブのラベルは省略してはいけない。(ex "今週のおすす...")

各タブの幅は均等にする。

タブのラベルは折り返してはいけない。

タブのラベルは文字でもアイコンでもよいが、混在してはいけない。

https://material.io/components/tabs