Rift Survivors 設計書

Appearance

デザインシステム ​

概要 ​

Rift Survivors のデザインシステムは シンセウェーブ / サイバーパンク のビジュアルスタイルを一貫して適用するためのルール集。 全UI要素はこのデザインシステムに従って実装する。

カラーパレット ​

プライマリカラー ​

名前カラーコード用途
Neon Pink#ff2d75プライマリアクション、強調、CTA、レジェンダリー装備
Cyber Cyan#00f0ffセカンダリ、リンク、情報表示、レア装備
Electric Purple#a855f7アクセント、リフトエネルギー、エピック装備

背景カラー ​

名前カラーコード用途
Void Black#0a0a0fメイン背景
Deep Navy#1a1a2eカード/パネル背景
Midnight Blue#16213eサブパネル背景
Dark Surface#252540入力フィールド、ホバー状態

テキストカラー ​

名前カラーコード用途
Pure White#ffffff見出し、重要テキスト
Light Gray#e0e0e0本文テキスト
Muted Gray#888888サブテキスト、無効状態
Dim Gray#444444プレースホルダー

セマンティックカラー ​

名前カラーコード用途
Success#00ff88HP回復、成功、アンコモン装備
Warning#f0f000注意、中HP、弱点攻撃
Danger#ff2d75低HP、死亡、失敗
Info#00f0ff情報、ヒント

グラデーション ​

css
/* プライマリグラデーション */
--gradient-primary: linear-gradient(135deg, #ff2d75, #a855f7);

/* サイバーグラデーション */
--gradient-cyber: linear-gradient(135deg, #00f0ff, #a855f7);

/* リフトグラデーション */
--gradient-rift: linear-gradient(180deg, #ff2d75, #a855f7, #00f0ff);

/* 背景グラデーション */
--gradient-bg: radial-gradient(ellipse at 50% 0%, #1a1a2e, #0a0a0f);

カラーの使用比率 ​

背景系:      ████████████████████████  70%  (Void Black, Deep Navy)
ネオン系:    ██████                    15%  (Pink, Cyan, Purple)
テキスト系:  ████                      10%  (White, Light Gray)
アクセント:  ██                         5%  (Success, Warning)

タイポグラフィ ​

フォントスタック ​

用途フォントフォールバック
UI テキスト / 見出し'JetBrains Mono''Fira Code', 'Courier New', monospace
本文'Inter''Helvetica Neue', 'Arial', sans-serif
数値表示'JetBrains Mono'monospace
演出テキスト'JetBrains Mono'monospace

モノスペースを主体にする理由

サイバーパンクの世界観と親和性が高く、ステータス数値の桁揃え、タイプライター演出との相性が良い。

フォントサイズ ​

トークンサイズ行間用途
--text-xs10px1.4ツールチップ、注釈
--text-sm12px1.4サブテキスト、ラベル
--text-base14px1.5本文
--text-md16px1.5UIコントロール
--text-lg20px1.3セクション見出し
--text-xl28px1.2画面タイトル
--text-2xl40px1.1ダメージ数値
--text-3xl56px1.0レベルアップ表示
--text-hero72px1.0"LET'S VIBE" 等の演出テキスト

テキストスタイル ​

css
/* ネオングロウテキスト */
.text-neon {
  color: #00f0ff;
  text-shadow:
    0 0 7px #00f0ff,
    0 0 10px #00f0ff,
    0 0 21px #00f0ff,
    0 0 42px #0fa,
    0 0 82px #0fa;
}

/* グリッチテキスト */
.text-glitch {
  position: relative;
  animation: glitch-text 2s infinite;
}

@keyframes glitch-text {
  0%, 92%, 100% { transform: translate(0); }
  93% { transform: translate(-3px, 1px); color: #ff2d75; }
  94% { transform: translate(3px, -1px); color: #00f0ff; }
  95% { transform: translate(-1px, -2px); }
  96% { transform: translate(1px, 2px); color: #a855f7; }
}

スペーシング ​

トークンサイズ用途
--space-xs4pxテキスト間、アイコン余白
--space-sm8pxボタン内余白、リスト間
--space-md16pxカード内余白
--space-lg24pxセクション間
--space-xl32pxパネル間
--space-2xl48px画面セクション間

コンポーネント ​

ボタン ​

css
/* プライマリボタン */
.btn-primary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ff2d75, #a855f7);
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 15px rgba(255, 45, 117, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(255, 45, 117, 0.6);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(255, 45, 117, 0.3);
}
バリエーション背景ボーダー用途
Primaryグラデーション（ピンク→パープル）なしメインアクション（出撃、装備等）
Secondary透明1px #00f0ffサブアクション（キャンセル等）
Danger透明1px #ff2d75危険な操作（削除等）
Ghost透明なしテキストリンク的な操作
Disabled#252540なし操作不可

カード ​

css
.card {
  background: rgba(26, 26, 46, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 8px;
  padding: 16px;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
}

/* レアリティ別カード */
.card--legendary {
  border-color: #ff2d75;
  box-shadow: 0 0 15px rgba(255, 45, 117, 0.2);
  animation: legendary-pulse 2s ease-in-out infinite;
}

@keyframes legendary-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 45, 117, 0.2); }
  50% { box-shadow: 0 0 30px rgba(255, 45, 117, 0.4); }
}

バー（HP/EXP/ステータス） ​

css
.bar-container {
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease-out;
  position: relative;
}

/* HP バー */
.bar-fill--hp {
  background: linear-gradient(90deg, #00ff88, #00cc66);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.bar-fill--hp.low {
  background: linear-gradient(90deg, #ff2d75, #cc0044);
  animation: hp-critical 0.8s ease-in-out infinite;
}

@keyframes hp-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* EXP バー */
.bar-fill--exp {
  background: linear-gradient(90deg, #a855f7, #7c3aed);
}

モーダル / パネル ​

css
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1a1a2e;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 90%;
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(168, 85, 247, 0.1);
  animation: modal-enter 0.3s ease-out;
}

@keyframes modal-enter {
  from {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

アイコン規約 ​

アイコンスタイル ​

項目仕様
スタイルラインアイコン（太さ 2px）
サイズ16px（小）/ 24px（中）/ 32px（大）
カラー原則 #e0e0e0。アクティブ時はネオンカラー
ライブラリLucide Icons（オープンソース）を推奨

ゲーム固有アイコン ​

アイコン意味使用場所
⚔ / 🗡武器 / 攻撃装備スロット、ATKステータス
🛡盾 / 防御装備スロット、DEFステータス
❤HPHPバー、ステータス
⚡スキル / エネルギースキルバー
✦ミッション目標ミッションUI
◈ポータルロビーポータル
★レアリティ装備カード
🌀リフト / 次元リフトエフェクト

エフェクト ​

グロウ（発光） ​

UI要素に適用するネオングロウエフェクト。

css
/* 軽量グロウ */
.glow-sm {
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

/* 標準グロウ */
.glow-md {
  box-shadow:
    0 0 10px rgba(0, 240, 255, 0.3),
    0 0 20px rgba(0, 240, 255, 0.1);
}

/* 強力グロウ */
.glow-lg {
  box-shadow:
    0 0 15px rgba(0, 240, 255, 0.4),
    0 0 30px rgba(0, 240, 255, 0.2),
    0 0 60px rgba(0, 240, 255, 0.1);
}

スキャンライン ​

CRTモニター風のスキャンラインエフェクト。ゲーム画面全体に薄く重ねる。

css
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

クロマティックアベレーション ​

RGB色ずれエフェクト。リフトオープン時やダメージ時に適用。

css
.chromatic-aberration {
  animation: chromatic 0.1s ease-in-out;
}

@keyframes chromatic {
  0% {
    text-shadow:
      -2px 0 #ff2d75,
      2px 0 #00f0ff;
  }
  50% {
    text-shadow:
      -4px 0 #ff2d75,
      4px 0 #00f0ff;
  }
  100% {
    text-shadow: none;
  }
}

アニメーション規約 ​

イージング ​

トークン値用途
--ease-outcubic-bezier(0.16, 1, 0.3, 1)UIの出現（バウンス感）
--ease-incubic-bezier(0.5, 0, 0.75, 0)UIの消滅
--ease-in-outcubic-bezier(0.45, 0, 0.55, 1)状態変化
--ease-snapcubic-bezier(0.68, -0.55, 0.265, 1.55)スナップ感のある動き

遷移時間 ​

用途時間備考
ホバー0.15s即座に反応
パネル開閉0.3sスライド + フェード
画面遷移0.5s ~ 0.8sリフトオープン等
カットイン2.5sフルカットイン
ダメージポップアップ0.8s出現 → 浮遊 → 消滅

prefers-reduced-motion 対応 ​

css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

CSS変数一覧 ​

css
:root {
  /* カラー */
  --color-neon-pink: #ff2d75;
  --color-cyber-cyan: #00f0ff;
  --color-electric-purple: #a855f7;
  --color-void-black: #0a0a0f;
  --color-deep-navy: #1a1a2e;
  --color-midnight-blue: #16213e;
  --color-dark-surface: #252540;
  --color-success: #00ff88;
  --color-warning: #f0f000;
  --color-danger: #ff2d75;

  /* タイポグラフィ */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-sans: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;

  /* スペーシング */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ボーダー */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* イージング */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-snap: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* z-index */
  --z-hud: 100;
  --z-panel: 500;
  --z-modal: 1000;
  --z-cutin: 10000;
  --z-transition: 9999;
}