カードバトル - Game Asset Wiki

📑 目次

1. カードデザイン 2. カードイラスト 3. フィールド / 手札UI 4. カードエフェクト 5. デッキ構築UI 🔹 TCG拡張 🔸 ローグライクカード拡張

🎴 1. カードデザイン

カードのフレーム・レイアウト・レアリティ別デザイン。ゲームの見た目を決定づける最重要アセット。

🖼️

カードフレーム

レアリティ・属性・カードタイプ別のフレームデザイン

レアリティ別フレーム

レアリティ	フレーム特徴	背景処理	追加演出
N（ノーマル）	シンプルな灰色/茶色の枠	無地 or 薄い模様	なし
R（レア）	銀色の枠 + 細い装飾	薄い光沢	なし
SR（スーパーレア）	金色の枠 + 中程度の装飾	グラデーション	微細なキラキラ
SSR / UR	虹色/特殊色の枠 + 豪華な装飾	ホログラフィック風	パーティクル・光線

カードレイアウト要素

要素	位置	内容
イラスト枠	カード上部（面積の50-60%）	キャラ or アイテムのイラスト
カード名	イラスト下 or 上	フォント: 太めのゴシック or 装飾体
コスト	左上 or 右上	円形 or 菱形アイコン内に数値
ステータス	カード下部	ATK/HP or 効果テキスト
属性アイコン	右上 or 左上	火/水/風/土/光/闇等
カードタイプ	イラスト-テキスト間	ユニット/スペル/トラップ等
テキスト欄	下部（面積の25-35%）	カード効果の説明文

カードサイズ規格

用途	推奨サイズ	アスペクト比
手札表示	200×280px	5:7
フィールド表示	120×168px	5:7
拡大表示（詳細）	400×560px	5:7
カード裏面	同上	共通デザイン1種

💡 実装方式: カードフレームとイラストを別画像として重ね合わせるとフレームの使い回しが効く。フレーム（レアリティ別）× イラスト（個別）でアセット数を削減。

カードフレーム（SR / 金枠）

game card frame design, golden ornate border, fantasy TCG style, empty illustration area in center, name plate below art, cost circle top left, ATK/HP boxes bottom corners, text area bottom half, dark background, premium quality, card template, 5:7 aspect ratio

カード裏面

game card back design, symmetrical ornate pattern, [game logo/emblem] in center, dark rich colors, elegant border, TCG card back, premium quality, 5:7 aspect ratio

🎨 2. カードイラスト

カードフレーム内に表示するキャラクター/アイテム/スペルのイラスト。

🧑‍🎨

イラストの種類と仕様

カードタイプ別のイラスト要件

カードタイプ	イラスト内容	構図	推奨サイズ
ユニットカード	キャラクター	バストアップ or 全身。ポーズ付き	512×512 以上
スペルカード	魔法・技の描写	エフェクト中心。動的な構図	512×512 以上
アイテムカード	武器・道具	アイテムが中央。シンプル背景	512×512 以上
フィールドカード	場所・地形	風景。パース付き	512×512 以上

💡 画風統一: 全カードイラストの画風を統一するために、最初にスタイルリファレンスを1枚作成し、全生成に --sref として適用する。レアリティが上がるほど描き込み密度を上げると差別化できる。

ユニットカードイラスト

TCG card illustration, anime style, [character description], dynamic pose, [element] themed background effects, dramatic lighting, upper body portrait, detailed illustration for game card, vibrant colors, high quality --sref [style reference]

✏️

イラスト制作フロー

大量のカードイラストを効率的に制作する手順

スタイルリファレンス作成 — ゲーム全体の画風を決める基準イラスト1枚を作成
レアリティ別サンプル — N/R/SR/SSR各1枚を作成し、描き込み量の基準を決定
属性別カラーパレット — 火（赤/橙）水（青/白）等の属性カラーを統一
バッチ生成 — --sref + --cref を使い同スタイルで大量生成
トリミング・サイズ統一 — カードフレームに収まるようにクロップ
品質チェック — フレームと重ねて表示確認。文字が読めるか確認

🎪 3. フィールド / 手札UI

カードを配置するフィールド、手札表示、各種ゲームUI。

🏟️

バトルフィールド

カードを配置するプレイエリア

要素	アセット	備考
フィールド背景	PNG/WebP（1920×1080）	テーマに合わせたテーブル/マット
カードスロット	PNG（透過）	カード配置位置を示す枠線
デッキ置き場	PNG（透過）	山札の位置。残り枚数表示
墓地 / 捨て札	PNG（透過）	使用済みカードの置き場
プレイヤー情報	UIパーツ	HP/マナ/アイコン/名前
ターン表示	PNG + CSS animation	「あなたのターン」演出

✋

手札UI

プレイヤーの手持ちカード表示

状態	表示	実装
通常	扇形 or 横並び（画面下部）	CSS transform（回転+配置）
ホバー	カードが上に浮き上がる	CSS translateY + scale
選択中	光る枠 + 拡大	CSS box-shadow + scale
プレイ不可	グレーアウト / コスト不足表示	CSS filter: grayscale
ドロー	デッキから手札にスライド	CSS animation
プレイ	手札からフィールドにスライド	CSS animation

✨ 4. カードエフェクト

カードの発動・攻撃・破壊時のビジュアルエフェクト。

💥

エフェクト一覧

カードバトルで必要なエフェクトと形式

エフェクト	タイミング	推奨形式	フレーム/長さ
カード発動	手札→フィールド時	CSS animation / WebPアニメ	光るフラッシュ 0.3-0.5秒
召喚演出	ユニット出現時	WebPアニメ / スプライトシート	光の柱/魔法陣 1-2秒
攻撃	ユニット攻撃時	スプライトシート	斬撃/衝撃 4-8F
スペル発動	魔法カード使用時	WebPアニメ / MP4	属性別エフェクト 1-3秒
破壊	ユニット撃破時	スプライトシート / CSS	砕ける/消滅 6-10F
ダメージ数字	ダメージ発生時	フォント + CSS animation	ポップアップ + フェード
バフ/デバフ	ステータス変更時	アイコン + CSS	↑↓矢印 + 色変化
勝利/敗北	バトル終了時	CSS + PNG / MP4	テキスト演出 2-3秒

召喚演出エフェクト

game effect sprite sheet, magical summoning circle, glowing energy pillar, 6 frames animation sequence, blue-white light energy, transparent background, particle effects, horizontal strip layout, game VFX card summon effect

📋 5. デッキ構築UI

カード一覧からデッキを組むための編集画面。

🔧

デッキ編集画面のUI要素

必要なパーツとレイアウト

UI要素	内容	アセット
カード一覧グリッド	所持カードをグリッド表示	グリッド枠 + スクロールバー
フィルターボタン	属性/コスト/レアリティで絞り込み	フィルターアイコン + ドロップダウン
ソートボタン	名前/コスト/レアリティで並べ替え	ソートアイコン
検索バー	カード名でテキスト検索	入力フィールド + 虫眼鏡アイコン
デッキスロット	選択中のデッキ内容（右パネル等）	ミニカードリスト or グリッド
デッキ枚数表示	現在枚数 / 最大枚数	テキスト + ゲージ
マナカーブ	コスト別カード枚数のグラフ	棒グラフ（CSS or Canvas）
保存/削除ボタン	デッキの保存・削除	ボタン（4状態）
デッキ選択リスト	複数デッキの切替	タブ or リスト

🔹 TCG拡張

TCG（トレーディングカードゲーム）固有

まよている等、対戦型カードゲームで追加で必要になるアセット。

🆚

対戦UI

対戦画面の追加要素

要素	内容
対戦マッチング画面	VS表示、プレイヤーアイコン対決演出
チェーン/スタック表示	複数カード効果の解決順を視覚化
フェイズ表示	ドロー/メイン/バトル/エンド等のフェイズインジケーター
対戦結果画面	勝利/敗北 + 獲得報酬表示
ランク表示	対戦ランクのバッジ/エンブレム

📦

パック開封

カードパックの購入・開封演出

要素	形式	内容
パック外装	PNG	パッケージデザイン。シリーズ別
開封アニメ	MP4 / CSS	パックを開く演出
カード出現	CSS animation	裏面→反転→表面の演出
レア演出	WebPアニメ / CSS	SR以上の場合の特別エフェクト

🔸 ローグライクカード拡張

ローグライクカード（デッキ構築型）固有

ルナオブスパイア等、Slay the Spire系のデッキ構築ローグライクで追加で必要になるアセット。

🗺️

マップ / ルート選択

ダンジョンの進行ルートUI

要素	内容
ノードアイコン	通常戦闘/エリート/ボス/ショップ/イベント/休憩各アイコン
接続ライン	ノード間の経路表示
現在位置マーカー	プレイヤーの現在階層
フロア背景	階層テーマに合わせた背景変化

🎁

報酬・イベント

戦闘後報酬とランダムイベント

要素	内容
カード報酬画面	3枚から1枚を選択するUI
レリック/アーティファクト	永続効果アイテムのアイコン（32×32〜64×64）
ランダムイベント画面	イベントイラスト + 選択肢ボタン
ショップUI	カード/レリック/回復の購入画面
カード削除画面	デッキからカードを除外するUI
カード強化表示	強化済みカードの視覚的差別化（枠色変え等）

🃏 カードバトル