ux-cards

カードスキル

このスキルの動作（最初にお読みください）

これは生成型のスキルです。デフォルトの失敗モードは次のとおりです：カード詰め込み（複数のトピック、長いテキスト、あらゆる詳細を 1 枚のカードに詰め込むこと）、影の重ねすぎ（カードとその画像とそのボタンのすべてに影を付けること）、そして何でもカード化（ユーザーが順位付けされた比較可能な結果を必要とする場面でカードグリッドを使うこと）。カードとは1 つの容器に収まった 1 つの咀嚼しやすいトピックであり、探索を誘うものです。そしてカードレイアウトは閲覧に適しており、検索には適していません。このスキルは次のことを制御します：

1. 何をカード化するのか、ユーザーがそれをどう消費するのかを確立する — 閲覧か検索かが、そもそもカードが適切かどうかを決めます。
2. 常に当てはまる中核を適用する — 1 枚のカードに 1 つのトピック、内部の階層、段階的な開示、抑制。
3. コンテナのスタイルとインタラクションの決定事項（elevated／outlined／flat、カード全体のクリック、メディア）をトレードオフとともに明らかにする。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。

---

ステップ 0 — 設計の前にコンテキストを確立する

不明な場合は尋ねてください。回答なしで進める場合は前提を明言してください：

• 閲覧か検索か？ カードはフラットです — すべてのカードが等しい順位を持ちます。これは探索的な閲覧（フィード、ギャラリー、ダッシュボード）に最適であり、順位付けされた検索結果や仕様ごとの比較には不適切です（リストや表を使用してください）。ユーザーが特定の項目を探し求めるなら、カードは根本から再検討してください。
• 項目ごとのコンテンツ — テキストのみ（指標、メモ）→ テキストカード、メディア + 要約 + アクション → リッチカード、人 → ユーザーカード（アバター、名前、ステータス、CTA 1 つ）。詳細の度合いが異なる異種の項目こそカードの本領です。
• アクションは 1 つか複数か？ 単一のアクションはカード全体をクリック可能にすることが妥当です。複数のアクションには内部のボタン階層が必要です。
• プラットフォーム／密度 — モバイルではより強く切り詰められ、より大きなタッチ領域が必要で、レスポンシブなカードグリッドは再配置されます。

---

常に適用する中核（ほぼすべてのケースで正しい）

1 枚のカード = 1 つのトピック

• 別々のトピックは別々のカードに分割する。 容器の役割は「ここにあるものはすべて関連しており、外にあるものはそうではない」と示すことです。トピックが混ざったカードは、ユーザーに何が一緒に属するかを解読させます。
• カードは記事ではなくティーザー — 段階的な開示。 短い補足テキストを、開くことを誘う省略記号で切り詰めます。カードの表面ですべての疑問に答えてはいけません。
  • ❌ 完全な説明、仕様、3 つのリンク、2 つのボタンを備えたカード ✅ 画像、タイトル、2 行のティーザー…、明確なアクション 1 つ

カード内部の階層

• ユーザーが最初に何を見るべきかを決め、サイズ、太さ、色、配置でそれを徹底します — プレビューよりタイトル、二次アクションより主アクション。
• 色の階層： すべてが強調されていれば、何も強調されていません。強調する要素は 1 つ（「詳細を見る」）— 補助的なアクション（保存、お気に入り）は控えめに保ちます。
• 主アクションと二次アクションを視覚的に区別する；オーバーフロー（ケバブ ⋮）メニューは、ユーザーが期待する右上隅に配置します。

抑制こそがスタイル

• シンプルさを第一に： 水平方向の区切り線よりもタイポグラフィとネガティブスペース — 区切り線はカード内部ではめったに役立ちません。
• カード 1 枚につき影は最大 1 つ。 すでに浮き上がったカードの内部で、メディア、ボタン、アイコンに影を決して付けないでください。影は四辺すべてで見えるようにします（柔らかなアンビエントで、鋭いキーライトだけにしない）。
• 一貫したパディングとマージン — 要素は呼吸し、関連する項目はまとまり、コンテンツが端に触れることはありません。
• 簡潔なラベル： 冗長な言葉や句読点はなし；マイクロコピー級の簡潔さ。
• 高品質なメディアのみ — ぼやけた画像やざらついた画像は信頼を損ないます；画像上のテキストは 4.5:1 以上のコントラストを保ちます（半透明の暗いオーバーレイを使用してください）。

---

文脈依存の判断（表面化させ、自動適用しない）

判断	適用する条件	避ける／適応させる条件	デフォルトの推奨
浮き上がった（シャドウ付き）カード	アフォーダンスを必要とするクリック可能なカード。物理的なカードを模倣する。ホバー時にシャドウを強める	何十ものシャドウがノイズを加える高密度なダッシュボード	インタラクティブなカードのデフォルト — 単一シャドウのルールを伴う
アウトラインカード	奥行きなしでグループ化する。よりクリーンで静かなサーフェス	インタラクションがより強いアフォーダンスを必要とする場合	非インタラクティブまたは低強調のグループ化に使用する
フラットカード	はっきりした背景色で区切るミニマルな美学	視覚的な手がかりがない場合（ユーザーが完全に見落とす）	コントラストのある背景 + ホバーのマイクロインタラクションがある場合のみ
完全にクリック可能なカード	単一の主要アクション。より大きなターゲット、より少ない認知	内部に複数の競合するアクション（ネストされたクリックトラップ）	単一のアクションがある場合、カード全体をクリック可能 + ホバーの手がかり
リッチメディアカード	ビジュアルがコンテンツそのものである閲覧体験（製品、記事、動画）	メッセージを圧迫する装飾としてのメディア	メディアはそのスペースに見合うか、削られるか
ユーザーカード	ソーシャル／人物の文脈: アバター + 名前 + ステータス + 1 つの CTA	完全なプロフィールをカードに詰め込む	アイデンティティ + 1 つのアクション。残りはプロフィール上に
カードグリッド vs. リスト／テーブル	異種で、視覚的で、閲覧可能なコンテンツ	ランク付けされた結果、仕様の比較、既知の項目のスキャン	発見にはカード、検索にはリスト／テーブル（データについては → ux-tables）

---

結果を検証する（オーケストレーション）

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合、このスキル自体のコアにすでにこれらのルールが含まれています — ブロックするのではなく、それなしで進めてください。

生成または改訂した後、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補レンズです — 姿勢は docs/orchestration-policy.md で設定されるか、すべてを ux-design-review 経由でルーティングします。ここでは、**heuristics と microcopy は Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness は Tier B（提供）**です — 既存のデザインシステムのもとでは aesthetics は抑制され、accessibility は使用法に絞られます。mobile-responsiveness はモバイル上でのみ適用されます。ユーザーがこのスキルを特定の 1 つの目的で呼び出した場合は、そのスコープを尊重してください。

• ux-heuristics-audit (Tier A) — 認識（カードは 1 つの単位として読めるか？）、カードセット全体での一貫性、クリック可能性のアフォーダンス。
• ux-accessibility-audit (Tier B — 提供。デザインシステムのもとでは絞る) — 画像上のテキストのコントラスト（≥4.5:1）、カード内アクションのタッチターゲット、クリック可能なカードのフォーカス状態。
• ux-aesthetics-audit (Tier B — 提供。デザインシステムのもとでは抑制) — これはシャドウ過多と雑然さのチェックです: 階層、パディングのリズム、単一強調のルール。
• ux-microcopy-audit (Tier A) — タイトルとラベルの簡潔さ、ティーザーテキストの品質。
• ux-mobile-responsiveness-audit (Tier B — 提供。モバイル上でのみ適用) — 文脈がモバイルの場合: グリッドのリフロー、切り詰め、タッチ領域。

監査でコンフリクトが表面化した場合（例: マーケティングはカードに多くを望む vs. スキャンしやすさ）、主要なタスクに向けて解決してください: カードの役割は一瞬で把握され、クリックを促すことです — 目的地になることではありません。

---

一般的な do/don't パターン

❌ しないこと	✅ すること
1つのコンテナに3つのトピック	カードごとに1トピック。論理的なグループに分割する
カード表面に記事全文	ティーザー + 省略表示… — 段階的な情報開示
カード + 画像 + ボタンにシャドウ	カードごとにシャドウは1つ。内部の要素には個別に付けない
カードを横に分割する区切り線	余白とタイポグラフィで区切る
すべての要素が太字でカラフル	強調する要素は1つ。色の階層構造
ページから見分けがつかないフラットなカード	明確な背景 + ホバー時の手がかり、またはアウトライン/浮き上がり表現を使う
アクションが1つあるのに小さなリンクしかクリックできないカード	カード全体をクリック可能にし、ポインターカーソルとホバー効果を付ける
煩雑な画像の上に直接重ねた白文字	半透明の暗いオーバーレイ、コントラスト比 4.5:1 以上
ランク付けされた検索結果にカードグリッド	検索にはリスト/テーブル、閲覧にはカード
見慣れない隅に浮かぶケバブメニュー	ユーザーが期待する右上に配置
確認せずに出荷	ヒューリスティクス + アクセシビリティ + 美学 + マイクロコピーのチェックに回す

---

出典レッスン (Uxcel)

• UI Cards Types & When to Use Them
• Best Practices for Designing UI Cards