カードインターフェイスとビジュアルブロック

1）なぜカードなのか

• すぐにスキャンされる、
• 1つのマスターCTAを与えます、
• 異なった容器/コラムに合わせます、
• 動作で予測可能（ホバー、プレス、フォーカス、コンテキストメニュー）。

2）カードの解剖学

1.メディアゾーン（カバー/ロゴ/プレビュー、16：9/4：3/1：1）。

2.ヘッダー（1-2切り捨て行）。

3.メタデータ（字幕、タグ/カテゴリ、プロバイダ、時間）。

4.ステータスバッジ（新規、ライブ、プロモーション、評価）。

5.CTA/クイックアクション（ボタンまたはアイコン）。

6.二次テキスト（短い、最大2〜3行）。

7.コントロール（お気に入り、……コンテキスト）。

階層：メディア→ヘッダー→CTA→メタ→セカンダリ。破壊的なアクションはメニューに非表示または表示されます。

3）グリッドとレイアウト

グリッド（固定列）：2〜6列、■オートフィット/オートフィル。
レスポンシブタイル：'minmax （240px、 1fr）'-カードは国境に正確に成長します。
石積み/変化する高さ：注意してください。焦点の順序および可読性を保障して下さい。
リスト（行）：水平経済とソートが重要な場合。

css
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 16px;
}
.card {
border-radius: 12px;
background: var(--bg-elevated);
box-shadow: var(--elev-2);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.card__media { aspect-ratio: 16/9; object-fit: cover; }

4）密度およびリズム

余白/インデント：内部12-16 px；単位の間で8-12 px。
行の高さ：1。3–1.5;フォント：title 16-18 px、 meta 12-14 px。
テキストクリッピング：'line-clamp： 2-3'；ツールチップ/詳細の必須全文。

5）状態とインタラクティブ

ホバー/フォーカス/アクティブ：シャドウ/ハイライト、レイアウトなし「ジャンプ」；'：focus-visible'は常に表示されます。
選択可能：チェックボックス/フレーム；参考カードと混同しないで下さい。
押下：最大98％+シャドウダウン（≤ 120ミリ秒）まで減少します。
Busy/Loading：スケルトン。「空」ではありません。

css
.card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.card:hover { box-shadow: var(--elev-3); transform: translateY(-1px); transition: box-shadow. 16s, transform. 16s; }

6）画像・メディア

アスペクト比は固定です。ゲームのリスト-16：9または4：3。
遅延ロード：'loading=」lazy」'+'decoding=」async」'。
ポスターカラーが優勢なプレースホルダー/スケルトン。
読み込みエラー：ダミー画像+イメージオフアイコン。

html
<img class = "card __ media" src ="..." alt = "Game name" loading =" lazy" onerror =" this. src='/fallback. png'">

7）バッジとタグ

短い（1-2ワード）：新しい、ライブ、-20％、トップ10。
色だけに頼ることはできません-アイコン/テキストを追加します。
場所：左トップメディア；いくつか-4-6 pxのギャップを持つスタック内。

css
.badge { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:8px; font-size:.75rem; }
.badge--live { background: var(--bg-danger); color: var(--on-danger); }

8） CTAとクイックアクション

カードごとに1プライマリ（「プレイ」「ベット」など）。
補助アイコン（お気に入り、シェア、……）-ホバー/フォーカスで。
破壊-確認または元に戻すパネルを介して。

html
<div class="card__actions">
<button class="btn btn--primary">Играть</button>
<button class =" icon" aria-label = "Add to Favorites" title =" B Favorites "> </button>
<button class="icon" aria-haspopup="menu" aria-expanded="false">⋯</button>
</div>

9）空室状況（A11y）

リンクカード全体が'<a>'で、明確な'aria-label'があります。そうでなければ、タイトルはリンクのように、残りは静的です。
タブの順序はビジュアルに対応します。フォーカスリングが見えます。
'alt'の画像；decorative-'aria-hidden=」true」'。
ステータスについては、'role=「status」'/'aria-live=「polite」'を使用します。
テキストとバッジコントラスト≥ AA；意味は色だけではありません。

10）パフォーマンス

メディアとリストの怠惰なロード；sentry-observerとスクロールするペジネーションまたはinfinitis。

テープ/無限出力の仮想化（10k要素±）

フローの最小化：'transform/opacity'のみをアニメーション化します。
カードをスケルトンでレンダリングし、データをロードした後にコンテンツに置き換えます。

11）スケルトン、間違い、空

スケルトンはカード（メディア/テキスト/ボタン）の構造を繰り返します。'prefers-reduced-motion'を考えます。
エラー状態：アイコン+ショートテキスト（「ゲームの読み込みに失敗しました」）+再試行ボタン。
空の状態：アイコン/イラスト、説明、「What's next」（フィルター/検索/サブスクリプション）。

12）コンテンツ管理

切り捨て：'line-clamp'+明示的なツールチップ。

長い数字/合計： テーブル桁：'font-variant-numeric： tabular-nums；'.

ローカリゼーション：長いラベルの幅は+20〜30％です。
RTLサポート：バッジ/アイコンとアラインメントを反転します。

13）暗いテーマとコントラスト

影は弱く、透明度のある境界線（'1px'）を使用します。
小さいフォントのためのサポートAAA；ちらつきを避ける。
メディアは、テキストを読みやすくするために薄いベール（オーバーレイ8-12％）によって暗くなります。

css
.theme-dark. card { background: var(--bg-elevated-dark); box-shadow: var(--elev-1-dark); }
.theme-dark. card__media::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.12); }

14）分類、フィルター、pagination

上/側面のフィルター・パネル；結果はカードのグリッドです。
ペジネーションが表示されます。無限のスクロール-「Back to Top」でのみ位置を維持します。
フィルタはスクロールを「リセット」しません。すぐに適用される（≤ 100ms）または表示器と。

15） iGamingの詳細

15.1ゲームカード（スロット/テーブル）

メディア：16：9ポスター、プロバイダーロゴ。
メタデータ：プロバイダ、RTP、ボラティリティ、カテゴリ（-唯一の有益な、勝つことの約束なし）。
バッジ：新しい、人気のある、トーナメント、ジャックポット。
CTA： "Play"+"Demo。「18+」のコンテキストと責任あるゲームが表示されます。

15.2マッチ/係数カード

ライブバッジライブ；タイマー/期間。
（許可されている場合）インスタントホバー/プレスと安全な元に戻すキー係数（2-3）。
明滅なしの更新；コースを変更するとき-きちんとした照明。

15.3トーナメント/イベントカード

日付、賞品プール、ルール（リンク）。
ステータス（登録開始/終了、進行中）。

CTA「参加」、「ルール」；参加の進捗状況（ポイント/場所）

16） Antipatterns

カード全体がクリック可能+セカンダリリンク内（フォーカス/クリックトラップ）。
近くの2つのプライマリCTA（「プレイ」と「ボーナスを購入」）-注目の競争。
プレースホルダ/スケルトンがない→ジャンピンググリッド（CLS）。
無限の輝きの効果；シャドウアニメーション/ぼかし（高価）。
灰色の小さな灰色の列メタデータ（コントラストなし）。
色だけで意味を伝えるバッジ。

17）システムトークンの設計（例）

json
{
"card": {
"radius": 12,
"gap": 12,
"mediaRatio": "16/9",
"px": "12 12 12 12",
"shadow": { "rest": "var(--elev-2)", "hover": "var(--elev-3)" }
},
"badge": { "radius": 8, "px": "4 8", "icon": 14 },
"grid": { "gap": 16, "min": 240, "max": 1 },
"motion": { "hoverMs": 160, "pressMs": 100, "fadeMs": 160 },
"a11y": { "contrastAA": true, "focusRingWidth": 2, "focusRingOffset": 2 }
}

18）スニペット

React： ユニバーサルカード

tsx type CardProps = {
title: string;
subtitle?: string;
mediaUrl?: string;
badges?: string[];
onPrimary?: () => void;
primaryLabel?: string;
onFav?: () => void;
children?: React. ReactNode;
};
export default function Card({
title, subtitle, mediaUrl, badges=[], onPrimary, primaryLabel='Открыть', onFav, children
}: CardProps){
return (
<article className="card group focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
<div className="relative">
{mediaUrl? <img className="w-full aspect-[16/9] object-cover" src={mediaUrl} alt={title}/>: <div className="aspect-[16/9] bg-neutral-200"/>}
<div className="absolute top-2 left-2 flex gap-1">
{badges. map(b => <span key={b} className="badge">{b}</span>)}
</div>
</div>
<div className="p-3 grid gap-2">
<h3 className="text-sm font-semibold line-clamp-2" title={title}>{title}</h3>
{subtitle && <p className="text-xs text-neutral-500 line-clamp-2">{subtitle}</p>}
{children}
<div className="flex items-center gap-8">
{onPrimary && <button className="btn btn--primary" onClick={onPrimary}>{primaryLabel}</button>}
{onFav && <button className="icon opacity-0 group-hover:opacity-100" aria-label="В избранное" onClick={onFav}></button>}
</div>
</div>
</article>
);
}

無限スクロールセントリー

js const sentry = document. querySelector('#sentry');
const io = new IntersectionObserver(entries=>{
if(entries. some(e=>e. isIntersecting)) loadMore();
}, { rootMargin: '200px' });
io. observe(sentry);

19）メトリクスと実験

CTR プライマリCTAのための時間をクリックします。
スクロール深さ→クリック：「ベンドの上「/」ベンドの下」をクリックします。
カード→詳細を表示→変換。
バッジの可視性とCTRへの影響。
スケルトンCLSの可視時間。
A/B：カードのサイズ、メタデータの量、クイックアクションの可視性、グリッドの種類（リスト/グリッド）。

20） QAチェックリスト

可用性について

• フォーカスリングが表示されます。タブの順序は論理的です。
• Altテキストと'aria-label'が正しい；テキスト付きのステータスバッジ。
• テキスト/背景のコントラスト≥ AA。

動作

• 1つのプライマリCTA；クイックアクションはメインシナリオと重複しません。
• ホバー/プレス/選択された区別可能；コンテキストメニューが動作します。
• 空/エラー/スケルトンが正しい；リトライがある。

パフォーマンス

• 遅延メディアの読み込み；レイアウトに鋭いジャンプはありません。
• 大規模なリストの仮想化；'transform/opacity'アニメーション。

グリッド

• 'minmax （240px、 1fr）'および'gap'は適応的です；石積みは焦点/読書順序を壊しません。
• RTL/ローカリゼーションはクロップとバッジを「壊す」ことはありません。

21）設計システムにおけるドキュメンテーション

-'カード'、'ゲームカード'、'マッチカード'、'トーナメントカード'、'ステータスバッジ'、'スケルトンカード'。
トークン：半径/影/インデント/レイヤー、バッジカラー、アニメーション。
パターン：「One CTA」「、スピナーの代わりにスケルトン」「、無限スクロール+位置の維持」。
Do/Don 't gallery：オーバーロードされたカードと最小のカード、「clickable whole card」と明示的な要素。

概要

カードは、明確な階層、1つのマスターCTA、予測可能な状態、安定したグリッド、パフォーマンスとアクセシビリティの尊重がある場合に機能します。トークンとパターンをキャプチャし、スケルトンと怠惰な読み込みを使用して、コンテンツを簡潔に保ちます。カードインターフェイスは、特にiGamingスクリプトでは、高速で読みやすく、変換できます。