カードUIデザインのパターンまとめ：商品・コンテンツ表示に最適な設計
アプリで広く使われるカードUIのデザインパターンを解説。商品カード・コンテンツカード・プロフィールカードなど用途別の設計ポイントと、インタラクションの実装方法を国内アプリ事例とともに紹介します。
カードUIはモダンなモバイルアプリ・Webアプリにおいて最も広く使われるUIコンポーネントの一つです。コンテンツを独立した「カード」として表示することで、情報の区切りが明確になり、ユーザーは必要な情報をすばやく見つけられます。本記事では、カードUIのパターン・設計ポイント・インタラクション設計を詳しく解説します。
カードUIの基本要素
カードは「関連する情報のコンテナ」として機能します。優れたカードUIには以下の要素が適切に配置されています。
基本構成：
- サムネイル画像（上部または左側）
- タイトル（最重要情報、最大2行）
- 説明文/サブテキスト（1〜2行に収める）
- メタデータ（日時・評価・価格など）
- アクションボタン（お気に入り・カートなど）
カードの視覚的境界：
カードの境界を表現する方法は主に3つです。
- シャドウ型：ドロップシャドウで浮いて見える。ライトモードで映えるが重くなりがち
- ボーダー型：1〜2pxの細い枠線で区切る。シンプルで軽量な印象
- 塗りつぶし型：背景色の差でカードを表現。ダークモードやフラットデザインに最適
用途別カードUIパターン
1. 商品カード（ECアプリ）
ECアプリの商品一覧で最も重要なUIです。ユーザーがスクロールしながら目的の商品を見つけるため、視認性と情報密度のバランスが鍵です。
推奨レイアウト：
- 画像比率：3:4（縦長）または1:1（正方形）
- タイトル：2行まで（overflow: ellipsis）
- 価格：大きめフォント（16〜18sp）で目立たせる
- セール表示：赤いバッジまたは取り消し線+値引き後価格
- お気に入りボタン：画像右上に重ねて配置（半透明の丸ボタン）
2. コンテンツカード（メディア・ニュース）
記事・動画・ポッドキャストなどのコンテンツを一覧表示するカードです。サムネイル・タイトル・公開日・読了時間などの情報をコンパクトに収める必要があります。
横長サムネイル（16:9または2:1）と左下に重ねたカテゴリバッジの組み合わせが、視認性が高く多くのメディアアプリで採用されています。
3. プロフィール/ユーザーカード
SNS・求人・マッチングアプリでよく使われるパターン。アバター画像・名前・属性情報（職業・居住地など）・フォローボタンを組み合わせます。
水平カード（アバターを左端に、テキストを右に）と縦型カード（アバターをトップに大きく）の2パターンがあります。一覧表示では水平型、おすすめ表示では縦型が使いやすいです。
4. ステータスカード（ダッシュボード）
数値・グラフ・KPIを表示するサマリーカードです。家計簿・フィットネス・ビジネスアプリのダッシュボードで多用されます。数値を大きく、ラベルを小さく配置し、前週比/前月比をアイコンと色で示すパターンが視認性を高めます。
カードのインタラクションデザイン
タップ時のフィードバック：
カードをタップした際、即座に視覚的なフィードバックを返すことが重要です。
- 軽い縮小アニメーション（scale: 0.97、duration: 100ms）
- 背景色の濃度を上げる（ripple effect）
- シャドウの縮小
スワイプアクション：
リスト形式のカードでは、スワイプでアクションを実行できるパターンが効果的です。
- 左スワイプ：削除・アーカイブ（赤いアクションを表示）
- 右スワイプ：既読・お気に入り・完了（緑・青のアクションを表示）
- アクションアイコンのサイズは十分に大きく（最低44×44px）
カードのサイズとグリッド
カードのサイズは表示グリッドとの関係で決まります。
- 1カラム（フルワイド）：詳細情報を多く含むコンテンツ向け
- 2カラムグリッド：商品一覧・写真ギャラリーに最適
- 3カラムグリッド：小さなアイテム（アイコン・タグなど）に限定使用
- ホリゾンタルスクロール：「おすすめ」「ランキング」などの横スクロールリスト
まとめ
カードUIは「情報の整理とスキャナビリティの向上」に優れたパターンです。用途に応じた適切な情報の優先順位付けと、タップしたくなる視覚的な魅力を両立させることが、優れたカードUIの条件です。UI ZUKANのギャラリーで多様なカードUIの事例を確認しながら、あなたのアプリに最適な設計を見つけてください。