カード

Card

別名: カードUI

生態(さわってみる)

桜並木の遊歩道

満開の季節に歩きたい、静かな散歩道を紹介する特集記事。

見出しのリンクがカード全面まで拡大されています。ハートのボタンは独立して反応します。

一言定義

関連する情報とアクションをひとまとまりの面としてまとめ、一覧に並べられる入れ物UI。

分類

使う場面

  • 一覧で個々の項目を独立して見せたいとき
  • 画像・見出し・操作をひとまとまりで扱いたいとき

避ける場面

  • 走査効率が最優先の密な一覧(→テーブルやリスト)
  • 項目間で属性を比較させたいとき(→比較表)

近縁種との比較

カードは「1件=1枚の面」で独立性を出すのに対し、リストは走査効率を優先する。画像が主役ならメディアカード、属性の比較が主目的なら比較表が向く。

実例リンク

アクセシビリティ

補足
カード全体をリンクにする場合は内部の操作要素と入れ子リンクにならないよう注意。見出しリンク+疑似要素の拡大が定石。