Skip to content

UI/UX設計 概要

設計思想

Rift Survivors のUI/UXは「シンセウェーブの世界に没入させる」ことを最優先に設計する。 ダークな背景にネオンカラーが浮かび上がるビジュアルは、ゲーム全体の世界観——崩壊する仮想次元空間——を画面のあらゆる要素で体現する。

基本方針

方針説明
即プレイURL を開いて3秒以内にゲーム体験が始まる。ログイン不要、ロード画面なし
映える演出ペルソナ風カットイン、リフトエフェクト等、配信映えするビジュアル
情報の階層化戦闘中は必要最小限の情報だけ表示。詳細はロビーで確認
モバイルファーストバーチャルジョイスティック、タッチ対応UIでPC/モバイル両対応

画面一覧

画面概要詳細リンク
タイトル / ローディングゲームアクセス時の最初の画面。最小限のロード表示
キャラクター作成初回アクセス時のみ表示。名前・カラー選択
ポータルカットインVibeverse経由アクセス時に表示される2.5秒の演出カットイン演出
ロビーゲームのホーム画面。装備管理、カスタマイズ、ポータル選択ロビー画面
ダンジョンメインゲームプレイ画面。HUDオーバーレイ付きダンジョンHUD
レベルアップダンジョン中のスキル選択モーダルダンジョンHUD
リザルトダンジョンクリア/死亡時の結果表示

画面遷移

画面遷移の全体図は 画面遷移 を参照。

デザインシステム

ビジュアルスタイルの統一仕様は デザインシステム を参照。

カラーテーマ概要

  • 背景: ディープダーク(#0a0a0f ~ #1a1a2e
  • プライマリ: ネオンピンク(#ff2d75
  • セカンダリ: サイバーシアン(#00f0ff
  • アクセント: エレクトリックパープル(#a855f7

レスポンシブ対応

ブレークポイント対象特記事項
≥ 1024pxPC(メイン)フルUIレイアウト
768px ~ 1023pxタブレットサイドバー折りたたみ
≤ 767pxモバイルバーチャルジョイスティック表示、UIパネル最小化

パフォーマンス指針

項目目標
初回表示2秒以内(キャッシュなし)
画面遷移0.3秒以内(カットイン除く)
HUD更新60fps維持(16.7ms以内)
カットイン演出2.5秒(スキップ可能)
タッチ応答100ms以内