← Back to list
INS-963
状態異常無効をアイコンで表す際、無効化内容に合わせてカラー変更してみる
StatusDone
TeamInstansys
Assigneeyasuhisa.hiraga@instansys.co.jp
PriorityNo priority
Created2026/07/26 23:25
Completed2026/07/27 02:03
Archived2026/08/04 00:45
Description
claude 提案カラー
┌───────────────────────────────────┬────────────────────────┬─────────┬────────────────────────────┐
│ ID │ 日本語 │ 色 │ 意図 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ stun │ スタン │ #FFD93D │ 星がまわる定番の金 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ aquasphere_stun │ アクアスフィア・スタン │ #2E9BD6 │ 水由来のスタン、濃い水色 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ freeze │ 凍結 │ #82DEEB │ ElementalColors.ice と統一 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ slow │ スロー │ #5B6BE0 │ 鈍化＝重い藍 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ confusion │ 混乱 │ #E86FD0 │ 錯乱のマゼンタ │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ taunt │ 挑発 │ #FF3D5A │ 怒りの赤 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ vacuum │ 吸引 │ #2FA890 │ 引き寄せる濃い青緑 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ hidden │ 隠す │ #8C93A8 │ 姿を消す灰 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ dot_damage │ 継続ダメージ │ #FF7A2F │ 燃焼のオレンジ │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ auto_heal │ 継続回復 │ #6EE79A │ ElementalColors.heal 系 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ lifesteal │ ドレイン │ #C2419E │ 吸血の深いマゼンタ │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ attack_power_down │ 攻撃力ダウン │ #A05CE0 │ 弱体は紫系 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ defense_down │ 防御力ダウン │ #7B5CE0 │ 同上、やや青寄り │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ elemental_resistance_down │ 属性耐性低下 │ #C46CE8 │ 同上、やや赤寄り │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ attack_power_up │ 攻撃力アップ │ #FF8A3D │ 強化は暖色系 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ attack_speed_up │ 攻撃速度アップ │ #FFB03D │ 同上、明るめ │
├───────────────────────────────────┼─────────────────────────────────────┤
│ move_speed_up │ 移動速度上昇 │ #9BE04D │ 風＝黄緑 │
├───────────────────────────────────┼─────────────────────────────────────┤
│ defense_up │ 防御力アップ │ #4D9BFF │ 盾の青 │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ critical_percent_up │ 会心率アップ | #FFE14D │ 会心の黄
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ evasion_up │ 回避率アップ │ #6FE0D8 │ 軽やかなターコイズ │
├───────────────────────────────────┼─────────────────────────────────────┤
│ burst_skill_enhance │ バーストスキル強化 | #FF4DD2 | ショッキングピンク │
├───────────────────────────────────┼────────────────────────┼─────────┼────────────────────────────┤
│ counter │ カウンター │ #DCE4F0 │ 反射の銀 │
├───────────────────────────────────┼─────────────────────────────────────┤
│ change_normal_attack_elemental_id │ 通常攻撃の属性上書き │ #9A8CC8 │ くすんだ紫 │
└───────────────────────────────────┴────────────────────────┴─────────┴────────────────────────────┘
Comments (2)
yasuhisa.hiraga@instansys.co.jp2026/07/26 23:54
23画像を用意するのではなく、カラーに合わせて動的に菱形を生成し、1~4つ並べる。 5つ以上無効化がある場合は4つ並んだ菱形を全て赤で表示
yasuhisa.hiraga@instansys.co.jp2026/07/27 00:05
-
lib/status-effect-immunity-icon.ts ← 設計図（形・色・並び順）
├─ バトル画面 → pixiGraphics で描く（WebGLキャンバス）
└─ モーダル → <svg><polygon> で描く（DOM）