---
# System prepended metadata

title: Cygnus UI Design

---

# Cygnus UI Design

# 一般

## 配置

表記は (x, y) の順で単位は px

## サイズ

表記は (w, h) の順で単位は px
正方形の場合は一辺の長さで表記する

## 素材のダウンロード

[Google Drive](https://drive.google.com/drive/folders/1PpuGUPjBQEiBRQiugaFTW0tOVIoHYRPC?usp=sharing) にも素材を Upload しておくので使ってください

# Select View

![](https://i.imgur.com/iGAMZon.jpg)

![](https://i.imgur.com/5QxRCCW.jpg)

## シーン遷移

- [Button Back](#Button)
    - 左上の座標 (20, 20)
    - 一辺 140
- [Button Settings](#Button)
    - 左上の座標 (140, 20)
    - 一辺 140

## キャラクタ

- [Name Plate](#Name-Plate)
    - 中央の座標 (282, 1000)
    - サイズ (320, 80)
- illust Phiro / Photh
    - 仮のデータのため保留
    - 基本的には上記画像に準ずる位置
- 左の [Arrow](#Arrow)
    - 左上の座標 (90, 1000)
    - 一辺 60
- 右の [Arrow](#Arrow)
    - 左上の座標 (470, 1000)
    - 一辺 60

## 選択曲

- Jacket
    - 画面の中央
    - 一辺 360
- [Text](#Text) BPM 表記
    - 左上の座標 (780, 320)
    - サイズ (360, 40)
    - 左揃え
    - 24 pt
- [Text](#Text) 曲名
    - 左上の座標 (780, 720)
    - サイズ (360, 80)
    - 左揃え
    - 48 pt
- [Text](#Text) 制作者
    - 左上の座標 (780, 800)
    - サイズ (360, 40)
    - 右揃え
    - 24 pt
- [Line L](#Line)
    - 左上の座標 (770, 790)
    - サイズ (380, 20)

## 難易度

- [Difficulty Symbo](#Difficulty-Symbol)
    - 左上の座標 (810, 0)
    - 一辺 300
- 左の [Arrow](#Arrow)
    - 左上の座標 (780, 120)
    - 一辺 60
- 右の [Arrow](#Arrow)
    - 左上の座標 (1140, 120)
    - 一辺 60

## 曲リスト

- 上の [Arrow](#Arrow)
    - 左上の座標 (1570, 120)
    - 一辺 60
- 下の [Arrow](#Arrow)
    - 左上の座標 (1490, 900)
    - 一辺 60
- リスト
    - [Music Element](#Music-Element)
        - 中央の要素
            - 中央の座標 (1560, 540)
            - サイズ (780, 180)
                - その他の要素の 9 / 8 倍拡大
        - その他の要素
            - 上下の要素に対して相対座標 (-120, 140)
            - サイズ (640, 160)
    - [Text](#Text) 曲名
        - 通常サイズの要素
            - [Music Element](#Music-Element) に対する左上の相対座標 (300, 40)
            - サイズ (300, 70)
            - 左揃え
            - 28 pt
        - 中央の要素
            - その他の要素の 9 / 8 倍拡大
    - [Text](#Text) レベル
        - 通常サイズの要素
            - [Music Element](#Music-Element) に対する左上の相対座標 (30, 30)
            - サイズ (100, 100)
            - 中央揃え
            - 72 pt
        - 中央の要素
            - その他の要素の 9 / 8 倍拡大

## ランキング

- [Record 1](#Record)
    - 左上の座標 (810, 860)
    - サイズ (300, 70)
- [Record 2](#Record)
    - 左上の座標 (790, 920)
    - サイズ (300, 70)
- [Record 3](#Record)
    - 左上の座標 (770, 980)
    - サイズ (300, 70)
- [Text](#Text) プレイヤー名
    - Record に対する左上の相対座標 (80, 10)
    - サイズ (270, 30)
    - 左揃え
    - 28 pt
- [Text](#Text) スコア
    - Record に対する左上の相対座標 (80, 40)
    - サイズ (270, 20)
    - 右揃え
    - 16 pt

## 背景

- [選択曲](#選択曲) の Jacket
    - 画面の中央に配置
    - 一辺 1920
- [Background](#Background)
    - Jacket の前面に配置

# Load View

![](https://i.imgur.com/3M133Ek.jpg)

## 選択曲

- [Select View](#Select-View) の [選択曲](#選択曲) に準じる
- BPM 表記は消す

## イラスト制作者の情報

- [Text](#Text) 「illustration」
    - 左上の座標 (1240, 590)
    - サイズ (220, 20)
    - 左揃え
    - 16 pt
- [Line M](#Line)
    - 左上の座標 (1230, 600)
    - サイズ (240, 20)
- [Text](#Text) イラストレータ名
    - 左上の座標 (1240, 610)
    - サイズ (220, 30)
    - 右揃え
    - 28 pt

## 譜面制作者の情報

- [Text](#Text) 「Note Design」
    - 左上の座標 (1240, 670)
    - サイズ (220, 20)
    - 左揃え
    - 16 pt
- [Line M](#Line)
    - 左上の座標 (1230, 680)
    - サイズ (240, 20)
- [Text](#Text) 譜面制作者
    - 左上の座標 (1240, 690)
    - サイズ (220, 30)
    - 右揃え
    - 28 pt

## 背景

- [Select View](#Select-View) の [背景](#背景) に準じる
- Cinema Scope を前面に配置する

![](https://i.imgur.com/rHtfBrw.png)

# Play View

![](https://i.imgur.com/vjNrIEN.png)

## 曲名

- [Music Title Background]

# Result View

![](https://i.imgur.com/uJKSp5G.jpg)

## シーン遷移

- [Button Back](#Button)
    - 左上の座標 (20, 20)
    - 一辺 140
- [Button Retry](#Button)
    - 左上の座標 (140, 20)
    - 一辺 140
- [Button Share](#Button)
    - 左上の座標 (260, 20)
    - 一辺 140

## リザルト

- [Text](#Text) アルファベットであらわされるリザルト
    - 左上の座標 (220, 200)
    - サイズ (360, 420)
    - 中央揃え
    - 360 pt
- [Line L](#Line-L)
    - 左上の座標 (210, 550)
    - サイズ (380, 20)
    - 
- [Text](#Text) 難易度レベル表記
    - 左上の座標 (220, 560)
    - サイズ (360, 60)
    - 左揃え
    - 36 pt
- [Text](#Text) アルファベットであらわされるリザルト
    - 左上の座標 (220, 560)
    - サイズ (360, 60)
    - 右揃え
    - 36 pt

## Combo

- [Text](#Text) 「Combo」
    - 左上の座標 (220, 660)
    - サイズ (160, 20)
    - 左揃え
    - 16 pt
- [Line S](#Line)
    - 左上の座標 (210, 670)
    - サイズ (180, 20)
- [Text](#Text) 回数
    - 左上の座標 (220, 680)
    - サイズ (160, 30)
    - 右揃え
    - 28 pt

## Perfect

- [Text](#Text) 「Perfect」
    - 左上の座標 (420, 660)
    - サイズ (160, 20)
    - 左揃え
    - 16 pt
- [Line S](#Line)
    - 左上の座標 (410, 670)
    - サイズ (180, 20)
- [Text](#Text) 回数
    - 左上の座標 (420, 680)
    - サイズ (160, 30)
    - 右揃え
    - 28 pt

## Good

- [Text](#Text) 「Good」
    - 左上の座標 (420, 730)
    - サイズ (160, 20)
    - 左揃え
    - 16 pt
- [Line S](#Line)
    - 左上の座標 (410, 740)
    - サイズ (180, 20)
- [Text](#Text) 回数
    - 左上の座標 (420, 750)
    - サイズ (160, 30)
    - 右揃え
    - 28 pt

## Bad

- [Text](#Text) 「Miss」
    - 左上の座標 (420, 800)
    - サイズ (160, 20)
    - 左揃え
    - 16 pt
- [Line S](#Line)
    - 左上の座標 (410, 810)
    - サイズ (180, 20)
- [Text](#Text) 回数
    - 左上の座標 (420, 820)
    - サイズ (160, 30)
    - 右揃え
    - 28 pt

## 選択曲

- Jacket
    - 画面の中央
    - 一辺 360
- [Text](#Text) 曲名
    - 左上の座標 (780, 720)
    - サイズ (360, 80)
    - 左揃え
    - 48 pt
- [Text](#Text) 制作者
    - 左上の座標 (780, 800)
    - サイズ (360, 40)
    - 右揃え
    - 24 pt
- [Line L](#Line)
    - 左上の座標 (770, 790)
    - サイズ (380, 20)

## キャラクタ

- illust Phiro / Photh
    - 仮のデータのため保留
    - 基本的には上記画像に準ずる位置

## 背景

- [Select View](#Select-View) の [背景](#背景) に準じる
- Result Background を前面に配置する

![](https://i.imgur.com/yTesve8.png)

# Background

1. 難易度 Easy 時の背景
![](https://i.imgur.com/2Zu9Teg.png)

2. 難易度 Hard 時の背景
![](https://i.imgur.com/B8eJV1m.png)

# Button

![](https://i.imgur.com/QX2yZxR.png)
![](https://i.imgur.com/no2fwDI.png)
![](https://i.imgur.com/Iv90cB7.png)
![](https://i.imgur.com/tt0cKEN.png)

# Music Element

## 見本

![](https://i.imgur.com/5SFDP3y.png)

## 素材

1. 背景
↓ 画像あり
![](https://i.imgur.com/qjtb2Qg.png)
↑ 画像あり

2. ジャケット
↓ 画像あり
![](https://i.imgur.com/TnWSCVU.png)
↑ 画像あり

3. 難易度 Easy 時の背景
![](https://i.imgur.com/BKcuemM.png)

4. 難易度 Hard 時の背景
![](https://i.imgur.com/ZidLL9W.png)

## 配置

2 番の画像を用いてジャケットをマスクしてください
それを 1 番の画像の上に配置し、その上に 3 or 4 番の画像を配置してください
画像のサイズはすべて同じなので位置を合わせればきれい位置が揃うと思います

# Record

![](https://i.imgur.com/WdkjX22.png)
![](https://i.imgur.com/fd9lcgm.png)
![](https://i.imgur.com/ODNW7DS.png)

# Difficulty Symbol

![](https://i.imgur.com/KaG77Ye.png)
![](https://i.imgur.com/x5cDnK3.png)

# Name Plate

![](https://i.imgur.com/JwoyQL8.png)
![](https://i.imgur.com/MEiOrtJ.png)

# Arrow

![](https://i.imgur.com/SQHOde7.png)

- ほかの方向は素材を回転させることで対応してください
- 回転に伴って座標の基準点が移動するかもしれないので柔軟に対応してください
- リストの端に到達しこれ以上移動ができない場合は不透明度が 25 % になるようにしてください

# Line

1. Line L 
![](https://i.imgur.com/UpWJ0DR.png)

2. Line M
![](https://i.imgur.com/VPHRXjB.png)


3. Line S
![](https://i.imgur.com/cIAjg0n.png)

# Judge

![](https://i.imgur.com/ZXEqqn7.png)
![](https://i.imgur.com/A5ueEYx.png)
![](https://i.imgur.com/waeupIj.png)

# Text

- 素材にないテキストは Unity 側で実装してください
- 以下のフォントをダウンロードし利用してください
    - 和文フォント : [Noto Sans JP](https://fonts.google.com/specimen/Noto+Sans+JP)
    - 欧文フォント : [Jost](https://fonts.google.com/specimen/Jost)

