カードコンポーネントのデザインパターン：情報設計・レイアウト・インタラクション
UIのカードコンポーネント設計を解説。情報の優先順位・サムネイル・メタデータ・アクションボタンの配置・カードグリッドレイアウト・ホバーインタラクションなど、多用途に活用できるカードUIの実践設計ガイドを紹介します。
カードはUIにおいて最も汎用性の高いコンポーネントの1つです。商品・記事・ユーザー・場所・タスクなど、様々な種類のコンテンツをカード形式で表現することで、一覧での比較・探索が容易になります。本記事では、カードコンポーネントの情報設計からレイアウト・インタラクションまでの実践設計パターンを解説します。
カードの基本構造
カードの構成要素（典型例）：
- メディア（サムネイル画像・アイコン・ビデオ）
- ヘッダー（タイトル・サブタイトル）
- 本文（説明テキスト・メタデータ）
- フッター（アクションボタン・メタ情報）
これらすべてが必要なわけではなく、コンテンツの性質に応じてコンポーネントを組み合わせます。
カードのレイアウトバリエーション
縦型カード（Portrait Card）：
画像が上部に配置され、テキスト情報がその下に続く最も一般的なスタイル。ECの商品一覧・ニュース記事・レシピなどに使われます。画像のアスペクト比は3:2または16:9が多く採用されています。
横型カード（Landscape Card）：
左に画像・右にテキスト情報を配置するスタイル。リスト形式での表示に向いており、縦型より情報密度が高いです。音楽・Podcast・求人票の一覧などに使われます。
コンパクトカード：
画像なしまたは小アイコンのみ・タイトルとサブテキストのみのシンプルなカード。通知リスト・検索結果・設定項目のカードスタイルなどに使われます。
情報の優先順位と配置
F字・Z字読みへの配慮：
ユーザーの視線は上から下・左から右に流れるため、最重要情報（タイトル・価格・評価）を左上から右方向に、補足情報を下部に配置します。
メタデータの表現：
日付・カテゴリ・タグ・評価・閲覧数などのメタデータは小さいテキストで控えめに表示し、本文テキストより低い視覚的重みにします。
価格・評価の強調：
ECの商品カードでは価格を大きく・太く表示し、評価（星）は価格の近くに配置します。セール価格は赤・元値は打ち消し線で表現するのが日本のECアプリの標準パターンです。
カードのシャドウとボーダー
シャドウで浮き上がらせる：
カードに軽いドロップシャドウをつけることで、背景から「浮いた」印象を与え、独立したコンテンツ単位であることを示します。
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);ボーダーvsシャドウ：
明るい背景ではシャドウ、ダークモードではシャドウより薄いボーダーの方が効果的な場合があります。
角丸（Border Radius）：
角丸はカードの印象を大きく変えます。8〜16pxは現代的で親しみやすい印象、4px以下はシャープでビジネスライクな印象です。ブランドの性格に合わせて選択します。
カードのホバー・タップインタラクション
ホバーエレベーション（デスクトップ）：
ホバー時にシャドウを強くし、わずかに上方向にtranslateするアニメーション（2〜4px）は、カードがクリック可能であることを示しつつ、インタラクションの楽しさを提供します。
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}タップ時のフィードバック（モバイル）：
モバイルでは、タップ時に背景をさりげなく暗くする（ripple effect・overlay）フィードバックがタップを確認させます。
カードグリッドのレイアウト設計
レスポンシブグリッド：
カードグリッドはCSS Gridを使い、画面幅に応じてカラム数を変化させます。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}カラム数の目安：
- モバイル（< 640px）: 1〜2カラム
- タブレット（640〜1024px）: 2〜3カラム
- デスクトップ（> 1024px）: 3〜4カラム
カードの高さ統一：
グリッドで高さが不揃いなカードを並べると視覚的に乱れます。CSS Gridのgrid-auto-rows やFlexboxのalign-items: stretchで高さを揃えつつ、コンテンツが溢れた場合の処理（テキスト省略・最大行数制限）を設計します。
まとめ
カードは情報の「まとめ単位」として機能するUIコンポーネントです。コンテンツの性質に合わせた縦型・横型の選択、情報の優先順位に従った配置、適切なシャドウと角丸、インタラクションフィードバックを設計することで、ユーザーが快適に探索・比較できるカードUIが完成します。UI ZUKANではカードの実装例を多数掲載しています。