Design Pattern
カード
カードは、関連する情報を一つのまとまりとして視覚的にグルーピングする UI パターンです。リスト表示、ダッシュボード、商品一覧など、同じ構造の情報を繰り返し表示する場面で使います。
いつ使う / 使わない
使うべきとき
- 同じ構造の情報を複数並べて比較・一覧表示する場合
- タイトル、画像、説明など複数の要素を 1 つのまとまりとして見せたい場合
- 各カードが個別のページや詳細へのエントリーポイントになる場合
使わないべきとき
- 情報量が少なく、単純なリストで十分な場合
- カード内にフォームや複雑な操作を含めたい場合 → 専用のセクションを使う
- カード同士に順序や階層関係がある場合 → リストやツリーを検討する
構造（Anatomy）
1 コンテナ（article / li）
2 メディア領域（画像・アイコン）
3 コンテンツ領域（見出し・本文）
4 アクション領域（リンク・ボタン）
- コンテナ — article か li で意味を持たせる。全体をリンクにするか、一部だけにするかを設計する
- メディア — 装飾画像なら alt="" にし、意味のある画像なら適切な代替テキストをつける
- アクション — カード全体がクリック可能な場合も、リンク要素を内包して意味を保つ
HTML 構造
重要なポイント
- カードの一覧は ul > li または ol > li で構造化する
- 各カードの見出しは h3 などで適切な見出しレベルを設定する
- 全体がリンクの場合は a 要素でラップし、内部に冗長なリンクを置かない
- 画像の alt 属性を省略しない（装飾なら空文字列を設定する）
CSS 実装
見た目で補助すべき点
- レイアウト — Grid で均等配置し、カード高さを揃える
- ホバー — クリック可能であることをカーソルとスタイル変化で示す
- 余白 — カード間とカード内の余白を一貫させる
- レスポンシブ — 画面幅に応じて列数を自動調整する
アクセシビリティ
WCAG 1.1.1 非テキストコンテンツ
カード内の画像に適切な代替テキストが必要です。装飾画像には alt="" を設定します。
WCAG 1.3.1 情報及び関係性
カード内の見出し、テキスト、リンクの構造が支援技術に正しく伝わる必要があります。
WCAG 2.4.4 リンクの目的
カードのリンク先がリンクテキストから理解できる必要があります。
キーボード操作
- Tab でカード内のリンクやボタンに移動
- Enter でリンク先に遷移
- カード全体がクリック可能でも、フォーカス対象はリンク要素に限定する
ライブデモ
基本のカード
タイトル、説明、タグを含む基本的なカードレイアウトです。
画像付きカード
サムネイル画像を含むカードで、メディア要素の配置を示します。
水平カード
画像とコンテンツを横並びにしたバリエーションです。
よくある間違い
カード全体を a で囲み、内部にも別の a を置く
入れ子のリンクはアクセシビリティとクリック挙動の両面で問題になります。
画像の alt 属性を省略する
スクリーンリーダーがファイル名を読み上げてしまい、ノイズになります。
カード間の高さがバラバラ
Grid の暗黙的な行高に任せると、内容量の差で見た目が崩れます。