没入型ゲーミングUI設計ガイド -- "Deep Purple Theater"

ゲーミングUIは、あらゆるインターフェースの中で最も視覚的に野心的な領域である。美しさと機能性を両立させなければならないだけでなく、プレッシャーの中で即座に操作できる設計が求められる。派手な演出を入れたいという衝動と、パフォーマンスや可読性を守る責任の間で、設計者は常にバランスを取り続ける。

本記事では、Sentry と Spotify という二つの優れたプロダクトから着想を得た「Deep Purple Theater」というデザインシステムを解説する。カードゲーム、RPG、eスポーツ、音楽ストリーミングなど、エンターテインメント領域全般に適用可能な、実戦投入レベルのテンプレートだ。

核心となる設計思想

UIは「舞台装置」であるべきだ。ゲームのコンテンツが主役であり、UIはそれを引き立てる照明と舞台セットに徹する。スポットライトが当たるのはコンテンツだけ。UIそのものが目立ってしまったら、設計は失敗している。

1. デザイン哲学 -- 「ディープパープルの舞台」

劇場のメタファー

このテンプレートの根底にある考え方は、劇場の暗転だ。

舞台が暗転すると、観客の注意は自然とスポットライトに集まる。ディープパープルの背景は、まさにこの「暗転した舞台」として機能する。カード画像、スコア、プレイヤー情報といったゲームコンテンツだけがスポットライトを浴び、UIのフレーム（ナビゲーション、ボーダー、ラベル）は暗闇の中の舞台装置として存在感を消す。

なぜ純粋な黒やニュートラルグレーではなくパープルなのか。黒は冷たく無機質だが、パープルは暗さの中に温もりと奥行きを持つ。深夜のアリーナ、ネオンが反射する都市の夜景、あるいは高級感のあるゲーミングチェアの照明を想像してほしい。パープルは「暗いけれど生きている」空間を作る色だ。

Sentry のアプローチ -- 開発ツールに温もりを

Sentry は開発者向けのエラー監視ツールでありながら、無彩色のグレーではなくパープルベースのダークUIを採用している。この選択が、冷たくなりがちな開発ツールに独特の温かみを与えている。

Sentry から学べるポイント:

パープルベース背景: ニュートラルグレーではなく、微かにパープルを帯びた暗色で空間に個性を持たせる
ライムグリーンのアテンション: 最も重要なアクション（エラー解決ボタンなど）にライムグリーンを使い、画面内で圧倒的に目立たせる
アンビエントグロウ: ホバー時にアクセントカラーの淡い光をまとわせ、「これは操作できる」というフィードバックを直感的に伝える

Spotify のアプローチ -- コンテンツが色を提供する

Spotify のUIはほぼモノクロームだ。黒い背景、グレーのテキスト、最小限の装飾。だがアルバムアートが表示された瞬間、画面は一気に色彩豊かになる。これが「コンテンツが色を提供する」という設計哲学だ。

Spotify から学べるポイント:

UI自体は無彩色: フレームワークは色を主張せず、コンテンツ（ゲーム画像、カードアート）が視覚的な主役になる
強いコントラストの緑CTA: 再生ボタンの緑は画面内で唯一の彩度の高い要素であり、視線が自然と集まる
余白の活用: 情報密度を下げることで、各要素の視認性を担保する

ダッシュボードプレビュー

以下はこのテンプレートを適用したゲームダッシュボードの実例だ。ディープパープル背景、フロステッドガラスヘッダー、ライムグリーンCTA、アンビエントグロウの全てが統合されている。

ARENAHomeDecksLeaderboard

PLAY NOW

<!-- Label -->
<div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px;">FEATURED EVENT</div>

<!-- Hero Section -->
<div style="margin-bottom: 28px;">
  <div style="color: #ffffff; font-size: 36px; font-weight: 700; letter-spacing: -0.8px; margin-bottom: 8px;">SEASON 12</div>
  <div style="color: #e5e7eb; font-size: 16px; line-height: 1.5;">New ranked season begins. Climb the ladder and earn exclusive rewards.</div>
</div>

<!-- Game Cards -->
<div style="display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap;">
  <!-- Card 1 -->
  <div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.30);">
    <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px;">STANDARD</div>
    <div style="color: #ffffff; font-size: 18px; font-weight: 600; margin-bottom: 6px;">Mono Red Aggro</div>
    <div style="color: #9ca3af; font-size: 14px; margin-bottom: 12px;">Win Rate: 58.2%</div>
    <div style="display: flex; gap: 8px;">
      <span style="color: #10B981; font-size: 12px; background: rgba(16,185,129,0.15); padding: 2px 8px; border-radius: 4px;">Tier 1</span>
      <span style="color: #e5e7eb; font-size: 12px; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">60 cards</span>
    </div>
  </div>
  <!-- Card 2 (hover state with glow) -->
  <div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(124,58,237,0.30); border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.30), 0 4px 16px rgba(124,58,237,0.15);">
    <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px;">MODERN</div>
    <div style="color: #ffffff; font-size: 18px; font-weight: 600; margin-bottom: 6px;">Azorius Control</div>
    <div style="color: #9ca3af; font-size: 14px; margin-bottom: 12px;">Win Rate: 54.7%</div>
    <div style="display: flex; gap: 8px;">
      <span style="color: #F59E0B; font-size: 12px; background: rgba(245,158,11,0.15); padding: 2px 8px; border-radius: 4px;">Tier 2</span>
      <span style="color: #e5e7eb; font-size: 12px; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">75 cards</span>
    </div>
  </div>
  <!-- Card 3 -->
  <div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.30);">
    <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px;">PIONEER</div>
    <div style="color: #ffffff; font-size: 18px; font-weight: 600; margin-bottom: 6px;">Rakdos Midrange</div>
    <div style="color: #9ca3af; font-size: 14px; margin-bottom: 12px;">Win Rate: 56.1%</div>
    <div style="display: flex; gap: 8px;">
      <span style="color: #10B981; font-size: 12px; background: rgba(16,185,129,0.15); padding: 2px 8px; border-radius: 4px;">Tier 1</span>
      <span style="color: #e5e7eb; font-size: 12px; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">60 cards</span>
    </div>
  </div>
</div>

<!-- Button Row -->
<div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
  <div style="background: #c2ef4e; color: #0d0a14; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 2px 8px rgba(194,239,78,0.25);">Start Match</div>
  <div style="background: #7C3AED; color: #ffffff; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);">Build Deck</div>
  <div style="background: rgba(255,255,255,0.05); color: #e5e7eb; padding: 10px 24px; border-radius: 8px; font-size: 14px; border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);">View Stats</div>
</div>

<!-- Badges Row -->
<div style="display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; align-items: center;">
  <span style="color: #10B981; font-size: 12px; background: rgba(16,185,129,0.15); padding: 2px 8px; border-radius: 4px;">Success</span>
  <span style="color: #EF4444; font-size: 12px; background: rgba(239,68,68,0.15); padding: 2px 8px; border-radius: 4px;">Error</span>
  <span style="color: #7C3AED; font-size: 12px; background: rgba(124,58,237,0.20); padding: 2px 8px; border-radius: 4px;">Accent</span>
  <span style="color: #0d0a14; font-size: 12px; background: #c2ef4e; padding: 2px 8px; border-radius: 4px; font-weight: 600;">CTA</span>
</div>

このテンプレートの適用範囲

カテゴリ	適合度	具体例
カードゲーム（TCG/CCG）	最適	MTG、ポケモンカード、遊戯王のデッキ管理・対戦ツール
RPG / アドベンチャー	最適	キャラクター管理、インベントリ、クエストトラッカー
eスポーツプラットフォーム	最適	リーダーボード、トーナメント管理、統計ダッシュボード
音楽 / ストリーミング	適合	プレイヤー、プレイリスト管理、ディスカバリー画面
エンターテインメントダッシュボード	適合	映画レビュー、ゲーム実況管理ツール
SaaS / 開発者ツール	非推奨	DARK_THEME を使用
コーポレートサイト	非推奨	ゲーミング感が強すぎる

2. パープル x グリーン配色システム

このテンプレートのカラーシステムは、「パープルの基盤」と「グリーンの一撃」という二つの層で構成される。背景のパープルが空間全体を支配し、ライムグリーンが唯一の「声を上げる色」として機能する。

パープルの基盤 -- 4段階の深度

なぜニュートラルグレーではなくパープルなのか。理由は3つある。

温もり: 純粋なグレー（#1a1a1a 等）は無機質で冷たい。パープルを帯びた暗色は、暗さの中に感情的な温度を持つ
洗練: パープルは歴史的に高貴さ、神秘性と結びつく色だ。ゲーミングUIの「特別な空間」を演出するのに最適
連想: ゲーミングデバイス、eスポーツ、ストリーミング文化とパープルの結びつきは既に強固

背景は4段階の深度で構成される。最も暗い #0d0a14 から始まり、段階的に明るくなることで「地面から浮き上がる」感覚を生む。

PURPLE SURFACE HIERARCHY

bg-deepest#0d0a14

bg-base#150f23

bg-panel#1f1633

bg-surface#291f40

各レベルの使い分け:

Token	値	用途
bg-deepest	`#0d0a14`	ページ全体の最深背景。入力欄の背景にも使用
bg-base	`#150f23`	メインコンテンツエリアの背景
bg-panel	`#1f1633`	サイドバー、パネル、テーブルヘッダー
bg-surface	`#291f40`	カード、ドロップダウン、浮上する要素
bg-hover	`rgba(255,255,255,0.05)`	ホバー時のオーバーレイ
bg-active	`rgba(255,255,255,0.08)`	アクティブ・選択状態
bg-frosted	`rgba(21,15,35,0.80)`	フロステッドガラス効果の半透明背景

背景色選択の原則

「奥にあるものほど暗く、手前に浮くものほど明るく」。これだけ覚えれば深度の使い分けに迷わない。ページ背景は bg-base、その上に乗るカードは bg-surface。シンプルだ。

ライムグリーンCTA -- 視覚的核爆弾

ディープパープルの空間に #c2ef4e（ライムグリーン）を置くと、他のあらゆる要素を圧倒するコントラストが生まれる。これは意図的だ。この色は「画面内で最も重要な一つのアクション」だけに使う。

CTA COLOR SYSTEM

PRIMARY

#c2ef4e

HOVER

#d4f57a

TEXT

#0d0a14

Token	値	用途
cta-primary	`#c2ef4e`	メインCTAボタン。画面につき1箇所のみ
cta-hover	`#d4f57a`	CTAのホバー状態
cta-text	`#0d0a14`	CTA上のテキスト（暗色で可読性確保）

ライムグリーンの使用制限

cta-primary はCTAボタン以外に使用しない。バッジ、テキスト、背景色に流用すると、画面全体の視覚的重要度の階層が崩壊する。「1画面1ライムグリーン」を鉄則とすること。

ブランドアクセント -- パープル

パープルはCTAほど強い主張はしないが、ブランドの存在感を示すために使う色だ。ナビゲーションのアクティブ状態、セカンダリボタン、リンクなどに適用する。

Token	値	用途
accent-primary	`#7C3AED`	メインブランドカラー。ナビゲーション、ブランドボタン
accent-hover	`#9061F9`	アクセントのホバー状態
accent-active	`#6D28D9`	アクセントのアクティブ状態
accent-muted	`rgba(124,58,237,0.20)`	アクセントの背景使用（バッジ、アクティブ行など）

サブアクセント -- コーラルとピンク

メインの2色（パープルとライムグリーン）に加えて、温かみのあるサブアクセントが2色用意されている。これらはUI全体を支配する色ではなく、特定のコンテキストで控えめに使う装飾色だ。

Coral #ffb287

通知、ハイライト、温かい強調

Pink #fa7faa

実績解除、お祝い、装飾

コーラル（#ffb287）の使いどころ: 通知バッジ、新着マーク、「おすすめ」タグ、価格変動のハイライトなど、ユーザーの注意を引きたいが緊急ではない場面。

ピンク（#fa7faa）の使いどころ: 実績解除の祝福演出、レアアイテムの装飾、ソーシャル機能（いいね、フォロワー数）など、ポジティブで軽やかな印象を与えたい場面。

テキストとボーダー

テキストは4段階、ボーダーも4段階。それぞれ明確な役割を持つ。

テキスト階層:

Token	値	用途
text-primary	`#ffffff`	見出し、重要テキスト
text-secondary	`#e5e7eb`	本文テキスト
text-muted	`#9ca3af`	プレースホルダー、補助テキスト、ラベル
text-disabled	`#6b7280`	無効化テキスト

ボーダー階層:

Token	値	用途
border-subtle	`rgba(255,255,255,0.06)`	デフォルトボーダー、セパレーター
border-standard	`rgba(255,255,255,0.10)`	カード、入力欄のボーダー
border-emphasis	`rgba(255,255,255,0.15)`	強調ボーダー、フォーカス中の入力
border-glow	`rgba(124,58,237,0.30)`	ホバー時のアクセントグロウボーダー

セマンティックカラー

Token	値	用途
success	`#10B981`	成功、完了、勝利
error	`#EF4444`	エラー、削除、敗北
warning	`#F59E0B`	警告、注意、保留
info	`#3B82F6`	情報、ヒント

全色パレット一覧

#0d0a14

#150f23

#1f1633

#291f40

#7C3AED

#c2ef4e

#ffb287

#fa7faa

3. 3大シグネチャーエフェクト

このテンプレートを特徴づける3つのエフェクトがある。フロステッドガラス、アンビエントグロウ、インセット影だ。いずれも「見た目の派手さ」ではなく「機能的な意味」を持つ。

エフェクト1: フロステッドガラス（Frosted Glass）

背景をぼかして半透明にする効果。backdrop-filter: blur(18px) saturate(180%) と半透明背景色の組み合わせで実現する。

使える場所は2つだけ: ヘッダーバーとモーダルオーバーレイ。これはパフォーマンス上の制約であり、美的な判断ではない。backdrop-filter はGPU負荷が高いため、1ページ内で使う箇所を厳格に制限する必要がある。

css

/* ヘッダー */
background: rgba(21, 15, 35, 0.80);
backdrop-filter: blur(18px) saturate(180%);

/* モーダル */
background: rgba(21, 15, 35, 0.90);
backdrop-filter: blur(18px) saturate(180%);

Opaque Header

HomeDecks

Frosted Glass Header

HomeDecks

左が通常の不透明ヘッダー、右がフロステッドガラスヘッダー。フロステッドガラスは背後のコンテンツがうっすら透けることで、ヘッダーが「コンテンツの上に浮いている」感覚を生む。ページをスクロールしたとき、この効果が特に活きる。

パフォーマンス注意

フロステッドガラスは ヘッダーとモーダルに限定 すること。カード、サイドバー、ボタンなど他の要素に適用するとフレームレートが著しく低下する。モバイルでは blur(18px) を blur(8px) に軽量化すること。

エフェクト2: アンビエントグロウ（Ambient Glow）

アクセントカラーの低不透明度シャドウで要素を包み込む効果。「これは操作できる」というフィードバックを、フラットデザインの中で直感的に伝えるための手法だ。

css

/* カードのホバー状態 */
border-color: rgba(124, 58, 237, 0.30);
box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);

/* フォーカスされた入力欄 */
border-color: #7C3AED;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.20);

/* モーダルのアンビエントグロウ */
box-shadow: 0px 24px 64px rgba(0,0,0,0.50),
            0 0 40px rgba(124,58,237,0.10);

GLOW COMPARISON

DEFAULT STATE

Card Title

No glow effect

HOVER STATE

Card Title

Ambient glow active

グロウの使い方

アンビエントグロウは ホバー・フォーカス時のみ に適用する。常時表示すると効果が薄れ、全ての要素が「光っている」状態になって何が操作可能なのか分からなくなる。

エフェクト3: インセット影（Inset Shadow）

ボタンの上端に白い半透明ラインを入れる効果。inset 0 1px 0 rgba(255,255,255,0.15-0.20) で実現する。これにより、フラットなボタンに「物理的なボタン」のような立体感が生まれる。

css

/* Primary CTA -- 最も強い光沢 */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.20),
            0 2px 8px rgba(194,239,78,0.25);

/* Brand Button -- 中程度の光沢 */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

/* Secondary Button -- 控えめな光沢 */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);

INSET SHADOW COMPARISON

Without Inset

With Inset

Without Inset

With Inset

インセット影はわずかな差だが、「押せる」印象を確実に高める。特にダークUIでは、ボタンが背景に溶け込みがちなため、この1pxの光沢ラインが重要な視覚的手がかりになる。

4. タイポグラフィ -- 大胆かつ正確

フォント選択の意図

このテンプレートでは、見出しと本文でフォントを使い分ける。

種類	フォント	選定理由
Display / Heading	DM Sans	ジオメトリックなサンセリフ。直線的で力強く、ゲーミングUIの「権威」を演出する
Body / UI	Rubik	わずかに丸みを帯びたサンセリフ。DM Sans の硬さを和らげ、長文の可読性を担保する
Monospace	Monaco	コードブロック、統計値の等幅表示用

DM Sans は「大きく、太く」使ったときに真価を発揮するフォントだ。56pxのヒーロータイトルに weight 700 で配置すると、ゲームのタイトル画面のような迫力が生まれる。一方、14pxの本文には向かない。そこで Rubik が担当する。

テキスト階層

LABEL -- 11px / 500 / UPPERCASE

Display Hero

Heading 1

Heading 2

Heading 3

Body text -- The quick brown fox jumps over the lazy dog.

Caption -- Updated 5 minutes ago

詳細サイズ表

Role	Size	Weight	Line Height	Letter Spacing	Font	Transform
Display Hero	56px	700	1.00	-1.5px	DM Sans	none
Heading 1	36px	700	1.10	-0.8px	DM Sans	none
Heading 2	28px	600	1.15	-0.5px	DM Sans	none
Heading 3	22px	600	1.20	-0.3px	DM Sans	none
Heading 4	18px	600	1.25	normal	DM Sans	none
Body	16px	400	1.50	normal	Rubik	none
Body Small	14px	400	1.50	normal	Rubik	none
Caption	12px	400	1.50	normal	Rubik	none
Label	11px	500	1.00	1.5px	Rubik	uppercase
Code	14px	400	1.50	normal	Monaco	none

uppercase + letter-spacing 戦略

ラベルとカテゴリ名は全て uppercase + letter-spacing: 1.5px で統一する。これはゲーミングUIに特徴的な視覚要素で、情報のカテゴリを明確に区別する。ダッシュボードプレビューの「FEATURED EVENT」「STANDARD」「MODERN」「PIONEER」が全てこのスタイルだ。

css

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9ca3af;
}

weight 700 の使用ルール

通常のダークテーマ（DARK_THEME テンプレート）では weight の最大値は510だが、ゲーミングテンプレートでは36px以上のディスプレイサイズに限り weight 700 を許可する。大きいサイズでの太字は力強さとインパクトを生むが、小さいサイズで太字を乱用すると可読性が下がる。

5. コンポーネントパターンギャラリー

ボタン（6種）

BUTTON VARIANTS

CTA Primary

Brand

Secondary

Ghost

Destructive

各ボタンの仕様:

種類	背景	テキスト色	影	用途
CTA Primary	`#c2ef4e`	`#0d0a14`	inset + outer glow	画面内で最も重要なアクション
Brand	`#7C3AED`	`#ffffff`	inset のみ	セカンダリアクション、ブランド強調
Secondary	`rgba(255,255,255,0.06)`	`#e5e7eb`	inset（控えめ）	補助的なアクション
Ghost	transparent	`#9ca3af`	なし	キャンセル、閉じるなど目立たせない操作
Icon	`rgba(255,255,255,0.06)`	`#9ca3af`	なし	36x36px。アイコンのみの操作
Destructive	`rgba(239,68,68,0.15)`	`#EF4444`	なし	削除、破壊的な操作

カード（5種）

CARD VARIANTS

GAME CARD

Dragon Deck

64 cards / Standard

<!-- Stat Card -->
<div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.30);">
  <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px;">STAT CARD</div>
  <div style="color: #ffffff; font-size: 36px; font-weight: 700; letter-spacing: -0.8px; margin-bottom: 4px;">1,247</div>
  <div style="color: #9ca3af; font-size: 13px; margin-bottom: 8px;">Total Matches</div>
  <div style="color: #10B981; font-size: 13px;">+12.5% this week</div>
</div>

<!-- Achievement Card -->
<div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(250,127,170,0.20); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.30);">
  <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #fa7faa; margin-bottom: 8px;">ACHIEVEMENT</div>
  <div style="color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 4px;">First Victory</div>
  <div style="color: #9ca3af; font-size: 13px; margin-bottom: 8px;">Win your first ranked match</div>
  <span style="color: #fa7faa; font-size: 12px; background: rgba(250,127,170,0.15); padding: 2px 8px; border-radius: 9999px;">Unlocked</span>
</div>

PLAYER CARD

PlayerOne

Rank: Diamond III

<!-- Event Card -->
<div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(255,178,135,0.20); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.30);">
  <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #ffb287; margin-bottom: 8px;">EVENT CARD</div>
  <div style="color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 4px;">Weekend Tournament</div>
  <div style="color: #9ca3af; font-size: 13px; margin-bottom: 12px;">128 participants</div>
  <div style="color: #ffb287; font-size: 22px; font-weight: 700;">02:14:30</div>
  <div style="color: #9ca3af; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;">TIME REMAINING</div>
</div>

<!-- Hover Glow Card -->
<div style="flex: 1; min-width: 180px; background: #291f40; border: 1px solid rgba(124,58,237,0.30); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.30), 0 0 20px rgba(124,58,237,0.15);">
  <div style="font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #c2ef4e; margin-bottom: 8px;">HOVER STATE</div>
  <div style="color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 4px;">Any Card Type</div>
  <div style="color: #9ca3af; font-size: 13px;">Glow border + ambient shadow</div>
</div>

モーダル（フロステッドガラス）

CONFIRMATION

Delete Deck?

This action cannot be undone. All cards and statistics associated with this deck will be permanently removed.

Cancel

Delete

モーダルの仕様:

プロパティ	値
Overlay	`rgba(0,0,0,0.70)`
Background	`rgba(21,15,35,0.90)`
Backdrop Filter	`blur(18px) saturate(180%)`
Border	`1px solid rgba(255,255,255,0.10)`
Border Radius	`16px`
Shadow	`0px 24px 64px rgba(0,0,0,0.50), 0 0 40px rgba(124,58,237,0.10)`
Max Width	`520px`
Padding	`28px`

テーブル（リーダーボード）

LEADERBOARD TABLE

RANK

PLAYER

SCORE

TREND

DragonSlayer99

2,847

+142

NightOwlPro

2,651

+89

BoltCaster

2,498

-23

SilentStorm

2,312

テーブルの仕様:

プロパティ	値
ヘッダー背景	`#1f1633` (bg-panel)
ヘッダーテキスト	`#9ca3af` / 11px / 500 / uppercase / letter-spacing 1.5px
行背景	`#291f40` (bg-surface)
行ホバー	`rgba(255,255,255,0.05)`
ボーダー	`rgba(255,255,255,0.06)`
セルパディング	`12px 16px`

バッジ（8種）

DefaultSuccessErrorWarningAccentCTACoralPink

全バッジは border-radius: 9999px（pill形状）で統一。背景色はメインカラーの低不透明度版を使い、テキスト色にメインカラーをそのまま適用する。

タイプ	背景	テキスト色
Default	`rgba(255,255,255,0.06)`	`#e5e7eb`
Success	`rgba(16,185,129,0.15)`	`#10B981`
Error	`rgba(239,68,68,0.15)`	`#EF4444`
Warning	`rgba(245,158,11,0.15)`	`#F59E0B`
Accent	`rgba(124,58,237,0.20)`	`#7C3AED`
CTA	`#c2ef4e` (solid)	`#0d0a14`
Coral	`rgba(255,178,135,0.15)`	`#ffb287`
Pink	`rgba(250,127,170,0.15)`	`#fa7faa`

入力欄

Placeholder text...

Focused input

Error state

6. レイアウトパターン

パターン1: ゲームダッシュボード

冒頭のプレビューが示すレイアウト。フロステッドガラスヘッダー + ラベル付きヒーローセクション + カードグリッド + アクションボタン群という構成。最も汎用的なパターンであり、多くのゲーミングアプリのホーム画面に適用できる。

構成要素:

フロステッドガラスヘッダー（ナビ + CTA）
uppercase ラベル + 大型見出し + 説明文
3カラムカードグリッド（レスポンシブ対応）
アクションボタン群（CTA + Brand + Secondary）

パターン2: カードコレクション / ギャラリー

フィルターバー + グリッド表示のレイアウト。カードゲームのデッキ一覧、コレクション管理画面に最適。

Search cards...

All Types

Rarity

New Deck

Dragon Deck

64 cards

Burn Rush

60 cards

Control Blue

75 cards

構成要素:

検索バー（bg-deepest 背景）+ フィルターチップ（bg-hover 背景）
CTA ボタン（右端配置）
3カラムカードグリッド（ホバーでグロウ）
カード内: サムネイル + タイトル + メタ情報

パターン3: リーダーボード / ランキング

フルワイドテーブル形式。リーダーボードセクションで示したテーブルコンポーネントを全画面幅で展開する。1位にはライムグリーンのランク番号を使い、上昇/下降トレンドをセマンティックカラー（緑/赤/黄）で表示する。

構成要素:

uppercase ヘッダー行（bg-panel 背景）
データ行（bg-surface 背景）
ランク列: 1位 = cta-primary 色、2位以降 = text-secondary
スコア列: 右寄せ、font-weight 600
トレンド列: 上昇 = success、下降 = error、横ばい = warning

パターン4: プレイ / マッチ画面

中央にプレイエリア、下部にアクションボタンを配置するレイアウト。カードゲームの対戦画面やプレイテスト画面に最適。

Turn 5Library: 47Hand: 4

Life: 18Opp: 12

Draw

Play Card

End Turn

構成要素:

フロステッドガラスステータスバー（ターン数、ライフ、手札枚数）
中央プレイエリア（bg-base 背景、カード配置）
フロステッドガラスアクションバー（メインアクションボタン群）

7. ゲームジャンル別適用ガイド

このテンプレートのデフォルト設定はカードゲーム（TCG/CCG）に最適化されているが、アクセントカラーとレイアウトパターンを調整することで他のジャンルにも適用できる。

カードゲーム（TCG/CCG）向け

デフォルト設定をそのまま使用する。追加で以下を検討:

マナ/リソースのカラートークンを追加（MTGの場合は白/青/黒/赤/緑）
カードサムネイルの角丸は 8px（実物のカードの丸みを模倣）
レアリティバッジの色分け: Common = Default, Uncommon = Success, Rare = Accent, Mythic = Coral

CARD GAME ADAPTATION

WhiteBlueBlackRedGreen

Lightning Bolt

Counterspell

Ragavan

Mythic

RPG / アドベンチャー向け

パープルの基盤はそのまま活かし、ライムグリーンのCTAをゴールド系に変更する。

accent-primary: #7C3AED (維持)
cta-primary: #fbbf24 (ゴールド) に変更
cta-text: #0d0a14 (維持)
追加トークン: XP = success色、HP = error色

RPG ADAPTATION

Quest Log

Inventory

Lv.42 Warrior

XP: 6,500 / 10,000

HP: 240 / 300

FPS / コンペティティブ向け

アグレッシブな印象に変更。アクセントを赤またはオレンジに、UIクロームを最小限にして画面占有率を下げる。

accent-primary: #EF4444 (赤) または #f97316 (オレンジ)
cta-primary: #c2ef4e (維持 -- ゲーミングの定番)
レイアウト: ステータスはオーバーレイで最小限表示、K/D/Aは大型フォントで強調

FPS ADAPTATION

KILLS

DEATHS

ASSISTS

音楽 / ストリーミング向け

Spotify にインスパイアされたレイアウト。サイドバー + メインコンテンツ + 下部プレイヤーの3レイヤー構成。

accent-primary: ブランドカラーに変更
cta-primary: #ffffff (白) またはブランドカラー
レイアウト: 固定サイドバー + スクロール可能なメインエリア + 固定ボトムプレイヤー

Library

Playlists

Albums

Artists

NOW PLAYING

Track Title

Artist Name

Track Title

Artist

2:34 / 4:12

8. パフォーマンス最適化

ゲーミングUIはエフェクトが多い分、パフォーマンスへの注意が不可欠だ。以下のルールを守ること。

エフェクト使用予算

エフェクト	1ページあたりの上限	理由
フロステッドガラス（backdrop-filter）	最大2要素	GPU負荷が高い。ヘッダーとモーダルに限定
アンビエントグロウ	ホバー時のみ	常時表示するとGPUメモリを圧迫
グラデーション背景	最大1要素	ヒーロー背景など大面積に限定

モバイル軽量化

プロパティ	デスクトップ	モバイル
backdrop-filter blur	`18px`	`8px`
box-shadow spread	通常	軽減または削除
アニメーション	`150ms ease`	`100ms ease`
Display Hero サイズ	56px	32px

絶対に避けるべきこと

エフェクトの重ね禁止

1つの要素に3つ以上のエフェクトを重ねない。具体的に禁止する組み合わせ:

backdrop-filter + box-shadow (glow) + background: gradient
border-image: gradient + box-shadow + filter: blur
animation + backdrop-filter + transform

1要素につき最大2エフェクトまでに制限すること。

トランジション規則

全てのインタラクティブ要素のトランジションは 150ms ease で統一する。

css

.interactive {
  transition: all 150ms ease;
}

150ms は「即座に反応した」と感じられる最長の時間だ。これより長いとモッサリ感が出るし、短すぎるとユーザーが変化に気づけない。

9. Do's and Don'ts

Do（推奨）

CTAボタンにはライムグリーン #c2ef4e を使い、ページ内で最も目立たせる
インセット影でボタンに「押せる」質感を付与する
フロステッドガラス効果はヘッダーとモーダルに限定する
ゲームコンテンツ（画像、カード等）をUI色より視覚的に優先する
ラベルは uppercase + letter-spacing: 1.5px で統一する
ホバー時のアンビエントグロウで操作可能な要素を示す

Don't（禁止）

フロステッドガラスを全要素に適用しない（パフォーマンスが大幅に低下する）
ライムグリーンをCTA以外に使わない（視線誘導の意味が薄れる）
アンビエントグロウを常時表示しない（ホバー・フォーカス時のみ）
UIの装飾がゲームコンテンツより目立たないようにする
3つ以上の特殊効果を同一要素に重ねない
パープル背景の上にパープルテキストを使わない（コントラスト不足）

視覚例: 正しい使い方 vs 間違った使い方

CORRECT -- 1 CTA PER SCREEN

Play Now

Settings

Help

WRONG -- LIME EVERYWHERE

Play Now

Settings

Help

CORRECT -- TEXT CONTRAST

Heading in white

Body text in light gray

WRONG -- PURPLE ON PURPLE

Heading in purple

Body text in dark purple

10. レスポンシブ対応

ブレークポイント

名前	範囲	レイアウト
Mobile	<640px	1カラム。ボトムナビ。サイドバー非表示
Tablet	640-1024px	2カラム。折りたたみサイドバー
Desktop	>1024px	フルレイアウト。サイドバー + メイン + オプションパネル

タッチターゲット

最小タッチターゲット: 48px x 48px（ゲーミング操作は大きめ推奨）
ボタン間の最小距離: 8px

レスポンシブ縮退戦略

要素	Desktop	Tablet	Mobile
ナビゲーション	サイドバー	折りたたみ	ボトムナビ
カードグリッド	4カラム	2カラム	1カラム
Display Hero	56px	40px	32px
カード表示	グリッド	グリッド	スワイプカルーセル
backdrop-filter blur	18px	18px	8px

11. Stitch プロンプト集

以下は、このテンプレートを Stitch に投入する際のプロンプト例だ。各プロンプトにはカラーコード、フォント指定、エフェクト指示が含まれている。

ゲームダッシュボードホーム

ゲーミングダッシュボードのホーム画面を作成してください。

背景: #150f23（ディープパープル）
ヘッダー: rgba(21,15,35,0.80) 背景 + backdrop-filter: blur(18px) saturate(180%)
ヘッダー高さ: 56px、下ボーダー rgba(255,255,255,0.06)
ヘッダー左: ブランドロゴ #7C3AED + ナビリンク（#e5e7eb アクティブ、#9ca3af 非アクティブ）
ヘッダー右: #c2ef4e CTAボタン（8px角丸、inset影付き）

メインコンテンツ:
- uppercase ラベル（11px, 500, letter-spacing 1.5px, #9ca3af）
- ヒーロー見出し（36px, 700, #ffffff, letter-spacing -0.8px）
- 説明文（16px, #e5e7eb）
- 3カラムカードグリッド（#291f40 背景, 12px角丸, 1px solid rgba(255,255,255,0.10)）
- ホバー時: border rgba(124,58,237,0.30), box-shadow 0 0 20px rgba(124,58,237,0.15)

カードコレクション画面

カードコレクション管理画面を作成してください。

背景: #150f23
上部: 検索バー（#0d0a14 背景、rgba(255,255,255,0.10) ボーダー、8px角丸）
+ フィルターチップ（rgba(255,255,255,0.06) 背景）
+ "New Deck" CTAボタン（#c2ef4e）

グリッド: 3-4カラムのカードグリッド
カード: #291f40 背景、12px角丸、上部にサムネイルプレースホルダー（#1f1633, 8px角丸）
カード下部: タイトル #ffffff 15px + メタ情報 #9ca3af 12px
ホバー: グロウボーダー + アンビエントシャドウ

リーダーボード画面

リーダーボードページを作成してください。

背景: #150f23
ヘッダー: フロステッドガラス（前述の仕様）

テーブル: 全幅、12px角丸、shadow 0 4px 12px rgba(0,0,0,0.30)
テーブルヘッダー: #1f1633 背景、uppercase 11px 500 #9ca3af letter-spacing 1.5px
データ行: #291f40 背景、14px テキスト
列: RANK / PLAYER / SCORE / WIN RATE / TREND
1位のランク番号: #c2ef4e
上昇トレンド: #10B981、下降: #EF4444
行ホバー: rgba(255,255,255,0.05) 背景

マッチ / プレイ画面

カードゲームのプレイテスト画面を作成してください。

背景: #0d0a14（最深）
上部ステータスバー: フロステッドガラス。ターン数、ライブラリ残枚数、手札枚数を表示
ステータスバッジ: Life=#10B981背景, Opponent=#EF4444背景（pill形状）

中央プレイエリア: #150f23 背景
カード配置エリア: #291f40 の矩形（70x100px, 8px角丸）
選択中カード: border rgba(124,58,237,0.30) + glow shadow

下部アクションバー: フロステッドガラス
ボタン: Draw=#c2ef4e CTA, Play Card=#7C3AED Brand, End Turn=Secondary

プロフィール / 統計画面

プレイヤーのプロフィール・統計画面を作成してください。

背景: #150f23
上部: プレイヤーアバター（48px丸, #7C3AED背景） + 名前 #ffffff 22px 600 + ランク表示

統計カード（3カラム）:
各カード: #291f40 背景、12px角丸
大きい数字: #ffffff 36px 700 letter-spacing -0.8px
ラベル: #9ca3af 11px uppercase letter-spacing 1.5px
トレンド: 上昇=#10B981, 下降=#EF4444

下部: 最近の試合履歴テーブル
テーブルヘッダー: #1f1633 背景、uppercase

設定画面（トグルスイッチ付き）

設定画面を作成してください。

背景: #150f23
左サイドバー: #1f1633 背景、260px幅
アクティブ項目: rgba(124,58,237,0.20) 背景 + border-left 2px #7C3AED

メインコンテンツ:
セクション見出し: #ffffff 22px 600
セクション区切り: rgba(255,255,255,0.06) ボーダー

設定項目: ラベル #e5e7eb 16px + 説明 #9ca3af 14px
トグル: 28x16px、OFF=rgba(255,255,255,0.10)背景、ON=#7C3AED背景、つまみ#ffffff
入力欄: #0d0a14 背景、rgba(255,255,255,0.10) ボーダー、フォーカス時 #7C3AED ボーダー

保存ボタン: #c2ef4e CTA（ページ下部固定）

クイックリファレンス

Stitch に投入する際に最低限必要な値のまとめ。

Background:      #150f23
Surface:         #291f40
Panel:           #1f1633
Deepest:         #0d0a14
Text:            #ffffff
Text Secondary:  #e5e7eb
Text Muted:      #9ca3af
Accent:          #7C3AED
CTA:             #c2ef4e
CTA Text:        #0d0a14
Border:          rgba(255,255,255,0.10)
Border Glow:     rgba(124,58,237,0.30)
Frosted BG:      rgba(21,15,35,0.80)
Frosted Filter:  blur(18px) saturate(180%)
Glow Shadow:     0 0 20px rgba(124,58,237,0.15)
Inset Shadow:    inset 0 1px 0 rgba(255,255,255,0.15)
Border Radius:   8px (buttons) / 12px (cards) / 16px (modals)
Transition:      all 150ms ease

没入型ゲーミングUI設計ガイド -- "Deep Purple Theater" ​

1. デザイン哲学 -- 「ディープパープルの舞台」 ​

劇場のメタファー ​

Sentry のアプローチ -- 開発ツールに温もりを ​

Spotify のアプローチ -- コンテンツが色を提供する ​

ダッシュボードプレビュー ​

このテンプレートの適用範囲 ​

2. パープル x グリーン配色システム ​

パープルの基盤 -- 4段階の深度 ​

ライムグリーンCTA -- 視覚的核爆弾 ​

ブランドアクセント -- パープル ​

サブアクセント -- コーラルとピンク ​

テキストとボーダー ​

セマンティックカラー ​

全色パレット一覧 ​

3. 3大シグネチャーエフェクト ​

エフェクト1: フロステッドガラス（Frosted Glass） ​

エフェクト2: アンビエントグロウ（Ambient Glow） ​

エフェクト3: インセット影（Inset Shadow） ​

4. タイポグラフィ -- 大胆かつ正確 ​

フォント選択の意図 ​

テキスト階層 ​

詳細サイズ表 ​

uppercase + letter-spacing 戦略 ​

weight 700 の使用ルール ​

5. コンポーネントパターンギャラリー ​

ボタン（6種） ​

カード（5種） ​

モーダル（フロステッドガラス） ​

テーブル（リーダーボード） ​

バッジ（8種） ​

ナビゲーション ​

フロステッドガラストップバー ​

サイドバー（アクティブ状態あり） ​

ボトムナビ（モバイル） ​

入力欄 ​

6. レイアウトパターン ​

パターン1: ゲームダッシュボード ​

パターン2: カードコレクション / ギャラリー ​

パターン3: リーダーボード / ランキング ​

パターン4: プレイ / マッチ画面 ​

7. ゲームジャンル別適用ガイド ​

カードゲーム（TCG/CCG）向け ​

RPG / アドベンチャー向け ​

FPS / コンペティティブ向け ​

音楽 / ストリーミング向け ​

8. パフォーマンス最適化 ​

エフェクト使用予算 ​

モバイル軽量化 ​

絶対に避けるべきこと ​

トランジション規則 ​

9. Do's and Don'ts ​

Do（推奨） ​

Don't（禁止） ​

視覚例: 正しい使い方 vs 間違った使い方 ​

10. レスポンシブ対応 ​

ブレークポイント ​

タッチターゲット ​

レスポンシブ縮退戦略 ​

11. Stitch プロンプト集 ​

ゲームダッシュボードホーム ​

カードコレクション画面 ​

リーダーボード画面 ​

マッチ / プレイ画面 ​

プロフィール / 統計画面 ​

設定画面（トグルスイッチ付き） ​

クイックリファレンス ​

関連ページ ​

没入型ゲーミングUI設計ガイド -- "Deep Purple Theater"

1. デザイン哲学 -- 「ディープパープルの舞台」

劇場のメタファー

Sentry のアプローチ -- 開発ツールに温もりを

Spotify のアプローチ -- コンテンツが色を提供する

ダッシュボードプレビュー

このテンプレートの適用範囲

2. パープル x グリーン配色システム

パープルの基盤 -- 4段階の深度

ライムグリーンCTA -- 視覚的核爆弾

ブランドアクセント -- パープル

サブアクセント -- コーラルとピンク

テキストとボーダー

セマンティックカラー

全色パレット一覧

3. 3大シグネチャーエフェクト

エフェクト1: フロステッドガラス（Frosted Glass）

エフェクト2: アンビエントグロウ（Ambient Glow）

エフェクト3: インセット影（Inset Shadow）

4. タイポグラフィ -- 大胆かつ正確

フォント選択の意図

テキスト階層

詳細サイズ表

uppercase + letter-spacing 戦略

weight 700 の使用ルール

5. コンポーネントパターンギャラリー

ボタン（6種）

カード（5種）

モーダル（フロステッドガラス）

テーブル（リーダーボード）

バッジ（8種）

ナビゲーション

フロステッドガラストップバー

サイドバー（アクティブ状態あり）

ボトムナビ（モバイル）

入力欄

6. レイアウトパターン

パターン1: ゲームダッシュボード

パターン2: カードコレクション / ギャラリー

パターン3: リーダーボード / ランキング

パターン4: プレイ / マッチ画面

7. ゲームジャンル別適用ガイド

カードゲーム（TCG/CCG）向け

RPG / アドベンチャー向け

FPS / コンペティティブ向け

音楽 / ストリーミング向け

8. パフォーマンス最適化

エフェクト使用予算

モバイル軽量化

絶対に避けるべきこと

トランジション規則

9. Do's and Don'ts

Do（推奨）

Don't（禁止）

視覚例: 正しい使い方 vs 間違った使い方

10. レスポンシブ対応

ブレークポイント

タッチターゲット

レスポンシブ縮退戦略

11. Stitch プロンプト集

ゲームダッシュボードホーム

カードコレクション画面

リーダーボード画面

マッチ / プレイ画面

プロフィール / 統計画面

設定画面（トグルスイッチ付き）

クイックリファレンス

関連ページ