没入型ゲーミング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、アンビエントグロウの全てが統合されている。
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| カードゲーム（TCG/CCG） | 最適 | MTG、ポケモンカード、遊戯王のデッキ管理・対戦ツール |
| RPG / アドベンチャー | 最適 | キャラクター管理、インベントリ、クエストトラッカー |
| eスポーツプラットフォーム | 最適 | リーダーボード、トーナメント管理、統計ダッシュボード |
| 音楽 / ストリーミング | 適合 | プレイヤー、プレイリスト管理、ディスカバリー画面 |
| エンターテインメントダッシュボード | 適合 | 映画レビュー、ゲーム実況管理ツール |
| SaaS / 開発者ツール | 非推奨 | DARK_THEME を使用 |
| コーポレートサイト | 非推奨 | ゲーミング感が強すぎる |
2. パープル x グリーン配色システム
このテンプレートのカラーシステムは、「パープルの基盤」と「グリーンの一撃」という二つの層で構成される。背景のパープルが空間全体を支配し、ライムグリーンが唯一の「声を上げる色」として機能する。
パープルの基盤 -- 4段階の深度
なぜニュートラルグレーではなくパープルなのか。理由は3つある。
- 温もり: 純粋なグレー（#1a1a1a 等）は無機質で冷たい。パープルを帯びた暗色は、暗さの中に感情的な温度を持つ
- 洗練: パープルは歴史的に高貴さ、神秘性と結びつく色だ。ゲーミングUIの「特別な空間」を演出するのに最適
- 連想: ゲーミングデバイス、eスポーツ、ストリーミング文化とパープルの結びつきは既に強固
背景は4段階の深度で構成される。最も暗い #0d0a14 から始まり、段階的に明るくなることで「地面から浮き上がる」感覚を生む。
PURPLE SURFACE HIERARCHY
各レベルの使い分け:
| 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
| 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 | 情報、ヒント |
全色パレット一覧
3. 3大シグネチャーエフェクト
このテンプレートを特徴づける3つのエフェクトがある。フロステッドガラス、アンビエントグロウ、インセット影だ。いずれも「見た目の派手さ」ではなく「機能的な意味」を持つ。
エフェクト1: フロステッドガラス（Frosted Glass）
背景をぼかして半透明にする効果。backdrop-filter: blur(18px) saturate(180%) と半透明背景色の組み合わせで実現する。
使える場所は2つだけ: ヘッダーバーとモーダルオーバーレイ。これはパフォーマンス上の制約であり、美的な判断ではない。backdrop-filter はGPU負荷が高いため、1ページ内で使う箇所を厳格に制限する必要がある。
/* ヘッダー */
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%);左が通常の不透明ヘッダー、右がフロステッドガラスヘッダー。フロステッドガラスは背後のコンテンツがうっすら透けることで、ヘッダーが「コンテンツの上に浮いている」感覚を生む。ページをスクロールしたとき、この効果が特に活きる。
パフォーマンス注意
フロステッドガラスは ヘッダーとモーダルに限定 すること。カード、サイドバー、ボタンなど他の要素に適用するとフレームレートが著しく低下する。モバイルでは blur(18px) を blur(8px) に軽量化すること。
エフェクト2: アンビエントグロウ（Ambient Glow）
アクセントカラーの低不透明度シャドウで要素を包み込む効果。「これは操作できる」というフィードバックを、フラットデザインの中で直感的に伝えるための手法だ。
/* カードのホバー状態 */
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
グロウの使い方
アンビエントグロウは ホバー・フォーカス時のみ に適用する。常時表示すると効果が薄れ、全ての要素が「光っている」状態になって何が操作可能なのか分からなくなる。
エフェクト3: インセット影（Inset Shadow）
ボタンの上端に白い半透明ラインを入れる効果。inset 0 1px 0 rgba(255,255,255,0.15-0.20) で実現する。これにより、フラットなボタンに「物理的なボタン」のような立体感が生まれる。
/* 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
インセット影はわずかな差だが、「押せる」印象を確実に高める。特にダークUIでは、ボタンが背景に溶け込みがちなため、この1pxの光沢ラインが重要な視覚的手がかりになる。
4. タイポグラフィ -- 大胆かつ正確
フォント選択の意図
このテンプレートでは、見出しと本文でフォントを使い分ける。
| 種類 | フォント | 選定理由 |
|---|---|---|
| Display / Heading | DM Sans | ジオメトリックなサンセリフ。直線的で力強く、ゲーミングUIの「権威」を演出する |
| Body / UI | Rubik | わずかに丸みを帯びたサンセリフ。DM Sans の硬さを和らげ、長文の可読性を担保する |
| Monospace | Monaco | コードブロック、統計値の等幅表示用 |
DM Sans は「大きく、太く」使ったときに真価を発揮するフォントだ。56pxのヒーロータイトルに weight 700 で配置すると、ゲームのタイトル画面のような迫力が生まれる。一方、14pxの本文には向かない。そこで Rubik が担当する。
テキスト階層
詳細サイズ表
| 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」が全てこのスタイルだ。
.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 | #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
モーダル（フロステッドガラス）
モーダルの仕様:
| プロパティ | 値 |
|---|---|
| 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
テーブルの仕様:
| プロパティ | 値 |
|---|---|
| ヘッダー背景 | #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種）
全バッジは 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 |
ナビゲーション
フロステッドガラストップバー
サイドバー（アクティブ状態あり）
ボトムナビ（モバイル）
入力欄
6. レイアウトパターン
パターン1: ゲームダッシュボード
冒頭のプレビューが示すレイアウト。フロステッドガラスヘッダー + ラベル付きヒーローセクション + カードグリッド + アクションボタン群という構成。最も汎用的なパターンであり、多くのゲーミングアプリのホーム画面に適用できる。
構成要素:
- フロステッドガラスヘッダー（ナビ + CTA）
- uppercase ラベル + 大型見出し + 説明文
- 3カラムカードグリッド（レスポンシブ対応）
- アクションボタン群（CTA + Brand + Secondary）
パターン2: カードコレクション / ギャラリー
フィルターバー + グリッド表示のレイアウト。カードゲームのデッキ一覧、コレクション管理画面に最適。
構成要素:
- 検索バー（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: プレイ / マッチ画面
中央にプレイエリア、下部にアクションボタンを配置するレイアウト。カードゲームの対戦画面やプレイテスト画面に最適。
構成要素:
- フロステッドガラスステータスバー（ターン数、ライフ、手札枚数）
- 中央プレイエリア（bg-base 背景、カード配置）
- フロステッドガラスアクションバー（メインアクションボタン群）
7. ゲームジャンル別適用ガイド
このテンプレートのデフォルト設定はカードゲーム（TCG/CCG）に最適化されているが、アクセントカラーとレイアウトパターンを調整することで他のジャンルにも適用できる。
カードゲーム（TCG/CCG）向け
デフォルト設定をそのまま使用する。追加で以下を検討:
- マナ/リソースのカラートークンを追加（MTGの場合は白/青/黒/赤/緑）
- カードサムネイルの角丸は
8px（実物のカードの丸みを模倣） - レアリティバッジの色分け: Common = Default, Uncommon = Success, Rare = Accent, Mythic = Coral
CARD GAME ADAPTATION
RPG / アドベンチャー向け
パープルの基盤はそのまま活かし、ライムグリーンのCTAをゴールド系に変更する。
- accent-primary:
#7C3AED(維持) - cta-primary:
#fbbf24(ゴールド) に変更 - cta-text:
#0d0a14(維持) - 追加トークン: XP = success色、HP = error色
RPG ADAPTATION
FPS / コンペティティブ向け
アグレッシブな印象に変更。アクセントを赤またはオレンジに、UIクロームを最小限にして画面占有率を下げる。
- accent-primary:
#EF4444(赤) または#f97316(オレンジ) - cta-primary:
#c2ef4e(維持 -- ゲーミングの定番) - レイアウト: ステータスはオーバーレイで最小限表示、K/D/Aは大型フォントで強調
FPS ADAPTATION
音楽 / ストリーミング向け
Spotify にインスパイアされたレイアウト。サイドバー + メインコンテンツ + 下部プレイヤーの3レイヤー構成。
- accent-primary: ブランドカラーに変更
- cta-primary:
#ffffff(白) または ブランドカラー - レイアウト: 固定サイドバー + スクロール可能なメインエリア + 固定ボトムプレイヤー
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: gradientborder-image: gradient+box-shadow+filter: bluranimation+backdrop-filter+transform
1要素につき最大2エフェクトまでに制限すること。
トランジション規則
全てのインタラクティブ要素のトランジションは 150ms ease で統一する。
.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
WRONG -- LIME EVERYWHERE
CORRECT -- TEXT CONTRAST
WRONG -- PURPLE ON 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