# UI設計
##### 2020/07/20
###### tags: `UI`

---
## 概要
- 運指設定画面
- キーバインド設定画面

## 運指設定画面
### 画面要素
- 上部：説明
- 説明下：ゲーム選択
- 中央：キーボード、指
- 中央２：マウス
- 下部：次へボタン

### 機能
- 指をタップして選択後、対象のキーをタップすることで色が変わる
- マウスも同様
- 元に戻すもあればよい

## キーバインド設定画面
- 上部：説明
- 説明下：ゲーム選択
- 中央：キーバインド表
- 下部：戻るボタン
- 下部２：結果ボタン

### 機能
- D&Dで入れ替え
- 入力もできたらよい
- 既に使用されているキーが入力されたら外す
- 実際のゲームのキーバインド設定みたいに

## 特記事項
- 結果画面は後々
- 入力結果を表示して共有するボタンがあるだけの予定
- 画面どっちが先かは要検討

## 参考
- [ゲームプルダウン](https://www.mousesensitivity.net/)
- [キーボードと指](https://happylilac.net/sy-keyboard03.html)