カードが平凡——情報カードの設計

結論

プロがカードを「非凡」にするのは装飾ではなく規律だ。共通解は3層で確定する——(1) 分離は影/枠線/塗りのいずれか1つだけを選んで重ねない、(2) 全スペーシングを8px（補助4px）グリッドに乗せ「内側パディング ≤ カード間ギャップ」を守る、(3) media→title→supporting→actions の固定スタック順で並べ、サイズ・ウェイト・色・位置の差で主役を1つだけ立てる。影は単発の黒影でなく、ぼかし違いを重ねて背景の色相で色付けし、強い影は hover/focus にだけ予約する。

01 — 分離手段は1つだけ選ぶ

カードを背景から浮かせる手段は3つ——影（elevated）、枠線（outlined）、対比塗り（filled）。やってはいけないのは、これらを同時に重ねること。枠線＋濃い影＋内側ハイライトを全部盛りすると、各エッジが競合して視覚ノイズになり、グリッドのスキャン性が落ちる。グリッド全体でどれか1つに統一し、影を使うなら枠線は付けない。

secondary8 best practices for UI card design — UX Collective

02 — 影は多層・背景色相で色付け

単発のグレー box-shadow（0 4px 8px rgba(0,0,0,.x)）は光の減衰を再現せず、いわゆるAI/テンプレ感の元凶になる。プロはぼかし違い（1/2/4px…）を重ねて各層の不透明度を下げ、垂直オフセットを水平の2倍（H:V=1:2）に固定し、影色を黒でなく背景の色相で薄く乗せる。光源を全要素で統一すると、縁がにじまず自然な距離感が出る。

blogDesigning Beautiful Shadows in CSS — Josh Comeau

03 — rest は軽く、hover/focus で持ち上げる

全カードに重い影を常時付けると「深さ」の意味が消え、どれも同じ高さに見える。Material準拠で rest は 0〜2dp相当の軽い影にとどめ、hover/focus でだけ 4〜8dp相当へ持ち上げる。transition で滑らかに段差を付ければ、触れる要素だけが前に出てインタラクションが読める。ホバー不可のモバイルでは 1dp相当のごく軽い影を初期値にする。

primaryCards — Material Design (M2)

04 — 内側パディング ≤ カード間ギャップ

スペーシングはすべて 8pxグリッド（微調整のみ4px補助） に乗せる。5pxや10pxの半端な値は1.5x DPIで7.5px等になりエッジがにじみ、グリッドの律動が崩れる。さらに重要なのが近接の法則——内側パディングをカード間ギャップ以下に保つこと。内側が外側より広いと隣接カードが1つの塊に見え、分離が読めなくなる。desktopはギャップ24〜32px・内側16〜24px、mobileは内外を詰める。

secondarySpacing best practices — Cieden Web Design Spacing — Concept Fusion

05 — 固定スタック順で階層を1つ立てる

タイトル・メタ・本文が等しい強さで並ぶと、カードは即座に平凡化する。media→title→supporting→actions の順を固定し、主役（タイトルや値）を サイズ＋ウェイト＋色＋位置 の4軸で突出させる。タイトルは大きく太く濃く、メタは小さく淡く、本文はその中間。タイトルは5〜7語、メタ10〜15語、ボタン1〜3語の動詞句に制限し、本文は最小16px。日本語は約物が空くので font-feature-settings:"palt" を当てる。

secondaryCards and Composability in Design Systems — Eightshapes Card interface design — LogRocket

06 — 比率固定とtruncationで行を揃える

内容量の差をそのまま流すと、行の高さがガタついて雑に見える。CSS標準の aspect-ratio でメディアを16:9または1:1に固定し、-webkit-line-clamp で本文を省略すれば、JSなしでグリッドの行が揃う。溢れたときはタイトルより先に description を truncate し、画像やdescriptionが無くても崩れない構造にしておく。

secondary8 best practices for UI card design — Prototypr Cards — Material Design (M1)

実装スニペット

/* 非凡な影：多層・色相付き・hoverで持ち上げ。border併用しない */
.card {
  --shadow-color: 220deg 60% 50%;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0.5px 1px 1px hsl(var(--shadow-color) / 0.10),
    1px 2px 2px hsl(var(--shadow-color) / 0.10),
    2px 4px 4px hsl(var(--shadow-color) / 0.10);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover, .card:focus-within {
  box-shadow:
    1px 2px 2px hsl(var(--shadow-color) / 0.12),
    2px 4px 4px hsl(var(--shadow-color) / 0.12),
    4px 8px 8px hsl(var(--shadow-color) / 0.12),
    8px 16px 16px hsl(var(--shadow-color) / 0.12);
  transform: translateY(-2px);
}

/* 内側 ≤ ギャップ を守る8pxグリッド */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;            /* カード間ギャップ ≥ 内側padding */
}
.card { padding: 16px; }  /* 16 ≤ 24 */

@media (max-width: 1080px) {
  .card-grid { gap: 16px; }
  .card { padding: 16px; } /* mobileは内外を詰める */
}

/* 分離は1手段だけ：どちらか一方をグリッド全体で使う */
.card--elevated {
  border: none;
  box-shadow: 0 2px 8px hsl(220 60% 50% / 0.10);
}
.card--outlined {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  background: #fff;
}
/* NG: border と box-shadow を同時指定しない */

/* 固定スタック順 ＋ 階層 ＋ 比率固定 */
.card { display: flex; flex-direction: column; gap: 12px; }
.card__media {                      /* media: 比率固定 */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}
.card__title {                      /* 主役: 大きく太く */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "palt";    /* 日本語の約物詰め */
}
.card__meta { font-size: 0.875rem; color: #6b7280; }  /* 従: 小さく淡く */
.card__desc {                       /* 溢れたらここから省略 */
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

チェックリスト

• 分離手段は elevated / outlined / filled の1つだけに統一し、影と枠線を併用していない
• 影は単発の黒影でなく、ぼかし違いを2〜3層に重ね、背景の色相で色付けしている（H:V=1:2）
• rest は軽い影、hover/focus でだけ box-shadow を増層して持ち上げている
• パディング・ギャップ・マージンが全て8の倍数（微調整のみ4px）。5pxや10pxの半端な値が無い
• カード内パディング ≤ カード間ギャップ になっている（例：padding16 ≤ gap24）
• media→title→supporting→actions の固定スタック順で並んでいる
• タイトル（大・太・濃）／メタ（小・淡）／本文の差で主役が1つ立っている。本文は最小16px
• 日本語タイトルに font-feature-settings:"palt" を当てている
• メディアは aspect-ratio で16:9か1:1に固定。description は line-clamp で省略し行が揃う
• 画像やdescriptionが無くてもカードが崩れない構造になっている

限界 / 出典

数値は出典横断で概ね一致するが、いくつか幅と注意がある。(1) rest の elevation は M1 が2dp、M2 desktop が0dpと出典で食い違う——密度・プラットフォームの文脈で選ぶこと。(2) 多層シャドウの具体的な不透明度/オフセット値は Josh Comeau 個人ブログ（権威ある一次仕様ではなく定評ある実践記）の実装例で、唯一解ではない。スニペットの値は出発点として調整前提。(3) padding/gutter の帯（16〜24px／24〜32px等）は推奨レンジであり厳密な閾値ではない。最終はコンテンツ密度とBPで決める。(4) 「内側≤外側」と8pxグリッドはGestalt近接則の応用で広く支持されるが絶対則ではなく、意図的グルーピングのためにあえて崩す場合がある。(5) UX Collective / LogRocket / Concept Fusion / Cieden 等は secondary/blog であり、Material（primary）に比べると規範性は劣る——具体値はクロスチェックの上で採用した。(6) 本記事は提供された3アングルの調査結果の統合であり、新規のWeb検証や出典URLの生存確認は行っていない。

blogDesigning Beautiful Shadows in CSS — Josh Comeau

primaryCards — Material Design (M2)

primaryElevation — Material Design 3

primaryCards — Components — Material Design (M1)

secondary8 best practices for UI card design — UX Collective

secondaryCards and Composability in Design Systems — Eightshapes

secondaryCard interface design — LogRocket

secondarySpacing best practices — Cieden

secondaryWeb Design Spacing and Sizing Best Practices — Concept Fusion

secondary8 best practices for UI card design — Prototypr

blogCard UI Design: Best Practices and Examples — Mockplus

primaryCorner radius and elevation — Mass.gov Design System

blogEverything you need to know about spacing & layout grids — UIPrep