UI/UX設計 概要
設計思想
Rift Survivors のUI/UXは「シンセウェーブの世界に没入させる」ことを最優先に設計する。 ダークな背景にネオンカラーが浮かび上がるビジュアルは、ゲーム全体の世界観——崩壊する仮想次元空間——を画面のあらゆる要素で体現する。
基本方針
| 方針 | 説明 |
|---|---|
| 即プレイ | URL を開いて3秒以内にゲーム体験が始まる。ログイン不要、ロード画面なし |
| 映える演出 | ペルソナ風カットイン、リフトエフェクト等、配信映えするビジュアル |
| 情報の階層化 | 戦闘中は必要最小限の情報だけ表示。詳細はロビーで確認 |
| モバイルファースト | バーチャルジョイスティック、タッチ対応UIでPC/モバイル両対応 |
画面一覧
| 画面 | 概要 | 詳細リンク |
|---|---|---|
| タイトル / ローディング | ゲームアクセス時の最初の画面。最小限のロード表示 | — |
| キャラクター作成 | 初回アクセス時のみ表示。名前・カラー選択 | — |
| ポータルカットイン | Vibeverse経由アクセス時に表示される2.5秒の演出 | カットイン演出 |
| ロビー | ゲームのホーム画面。装備管理、カスタマイズ、ポータル選択 | ロビー画面 |
| ダンジョン | メインゲームプレイ画面。HUDオーバーレイ付き | ダンジョンHUD |
| レベルアップ | ダンジョン中のスキル選択モーダル | ダンジョンHUD |
| リザルト | ダンジョンクリア/死亡時の結果表示 | — |
画面遷移
画面遷移の全体図は 画面遷移 を参照。
デザインシステム
ビジュアルスタイルの統一仕様は デザインシステム を参照。
カラーテーマ概要
- 背景: ディープダーク(
#0a0a0f~#1a1a2e) - プライマリ: ネオンピンク(
#ff2d75) - セカンダリ: サイバーシアン(
#00f0ff) - アクセント: エレクトリックパープル(
#a855f7)
レスポンシブ対応
| ブレークポイント | 対象 | 特記事項 |
|---|---|---|
≥ 1024px | PC(メイン) | フルUIレイアウト |
768px ~ 1023px | タブレット | サイドバー折りたたみ |
≤ 767px | モバイル | バーチャルジョイスティック表示、UIパネル最小化 |
パフォーマンス指針
| 項目 | 目標 |
|---|---|
| 初回表示 | 2秒以内(キャッシュなし) |
| 画面遷移 | 0.3秒以内(カットイン除く) |
| HUD更新 | 60fps維持(16.7ms以内) |
| カットイン演出 | 2.5秒(スキップ可能) |
| タッチ応答 | 100ms以内 |