# VOLBOXApp,ミニスペック

### プロダクトネーム　
volbox-vcapp

### VOLBOXAppとは
モバイルゲーマー向け高音質ボイスチャットApp

### Userが抱えている課題
①快適にゲームをしながらコミュニケーションできるサービスがない
・Discordを使用する場合の問題→ゲームの音が小さくなる、足音など聞こえなくなる
・LINEを使用する場合の課題→ゲーム音が小さくなる
②UIがスラックのようで使いづらい

### 現状のUserの行動
・スマホでDiscordを開き、ipadでゲームをしイヤホンを二本つける
・lineで代用するがゲームの音が小さくなる
・キャプチャーボードを使用しpcにゲーム音を入れて、pcでDiscordを開き音量調節をして聞く

---
---

## 機能一覧
### 1 起動
volboxロゴアニメーション再生

### 2 初回起動時
初期起動時のみ、スプラッシュを表示。画面はスライドでき、合計3枚の説明画面。

"①高音質な通話
音質を落とさなため、相手の声、ゲーム内の音がクリアなまま届きます。
②使いやすいデザイン
シンプルかつ直感的に使えるデザインとなっています。
③2種類のボイチャ
普段使いのためのボイチャルームと、一時的な使用のためのクイックルームがあります。"

構成は、
画面上部：見出し文
画面中部：イラスト
画面下部：説明

どの画面でもログインボタンと新規登録ボタンから離脱できる。

---

### 3 新規登録
##### 1 電話番号入力
1 電話番号条件：選択された国によって決められている桁数

1-1 国旗画像左のプルダウンボタンをタップで、国選択画面へ移動。
1-1-1 XD上では国識別番号(例：+81)と国名(英語表記)だけになっているが、国名の右に国旗画像を表示。画面は上下にスクロール可能。
1-1-2 検索フォームタップ時、USキーボードを起動。国番号、国名と両方での検索に対応。
1-1-2-1 英語で文字入力されると、その入力文字から予測される国を予測候補として表示。
1-1-2-1-1 国識別番号、国名、国旗画像の全てが国選択ボタンの役割を持っており、国が選択されると、新規登録画面へ戻る。
国選択画面への移動以前に、電話番号、ID、パスワードのフォームに情報を入力されている場合、その入力内容を保持。

1-2-1 電話番号入力フォームがタップされると、フォーム枠を紫色に切り替え、数字キーボード(番号のみのキーボード)を起動。フォーム枠の色はフォームから選択が外れると消える。
1-2-1-1 条件を満たさない入力がされた場合には、警告文表示+フォーム枠を赤色に切り替える。
エラーと警告文の種類は以下の通り。

・電話番号の条件を満たしていない場合："有効な電話番号を入力してください。"
・既に使用されている電話番号が入力された場合："この電話番号は登録済みです。"

また、条件が満たされていないにも関わらず、非選択状態になった場合には、フォーム枠の色は消えるが警告文の表示は残す。
※電話番号条件について 国によって電話番号の桁数が異なるため、警告文を表示しない桁数を、選択された国によって変更する必要がある。

また、国番号の後、70でも070でも受け入れる。

1-3 利用規約画面等から戻る際に自動入力をするため、他画面から戻った時に入力された内容を保持するような機能が必要。

##### 2 ユーザーID入力
2-1 ユーザーID条件：半角英数字と_(アンダーバー)のみ使用でき、15文字以下であり、他のユーザーが使用していないこと。

2-2 ユーザーIDフォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動。フォーム枠の色はフォームから選択が外れると消える。
2-2-1 条件を満たさない入力がされた場合には、警告文表示+フォーム枠を赤色に切り替える。
エラーと警告文の種類は以下の通り。

・16文字以上入力がされた場合："15文字以内で入力して下さい。"
・半角英数字、アンダーバー以外の入力がされた場合："半角英数字、アンダーバーのみ使用できます。"
・既に使用されているユーザーIDが入力された場合："そのIDは既に使用されています。"
また、条件が満たされていないにも関わらず、非選択状態になった場合には、フォーム枠の色は消えるが警告文の表示は残す。

2-2 他画面から戻った時に入力された内容を保持する。(利用規約画面等から戻る際に自動入力をするため)

##### 3 パスワード入力
3-1 パスワード条件：8文字以上20文字以下の半角英数字

3-2 ユーザーIDフォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動。フォーム枠の色はフォームから選択が外れると消える。
3-2-1 エラー
・20文字以上入力がされた場合："20文字以内で入力して下さい。"を表示。
・半角英数字以外の入力がされた場合："半角英数字のみ使用できます。"を表示。

上記警告文を表示し、フォーム枠を赤色に切り替える。また、条件が満たされていないにも関わらず、非選択状態になった場合は、フォーム枠の色は消えるが警告文の表示は残す。

3-3 入力されたパスワードは伏せて表示。フォーム内右のパスワード表示ボタンをタップで、パスワードを伏せずに表示し、ボタンアイコンを斜線が入ってないアイコンに切り替える。

3-4 他画面から戻った時に入力された内容を保持する。(利用規約画面等から戻る際に自動入力をするため)

##### 4 利用規約,プライバシポリシー
4-1 利用規約、プライバシポリシーの文字がボタンとなっており、タップでそれぞれ利用規約画面、プライバシーポリシー画面に移動。それぞれの画面への移動以前に、電話番号、ID、パスワードのフォームに情報を入力されている場合、その入力内容を保持する。

4-2 利用規約、プライバシポリシー左のチェックボックスをタップで、空のチェックボックスからチェック済みボックスに表示が切り替わる。
(チェックボックスは利用規約、プライバシポリシーを読まなくてもタップできる。)

##### 5 新規登録ボタン、ログインボタン
5-1 電話番号、ID、パスワード全てが正しく入力されている、かつ、同意チェックボックスに✓が入っている場合のみ、新規登録ボタンを有効にする。そうでない場合は、ボタンをグレーアウト(灰色)して、ボタンの機能を持たせない。
新規登録ボタンを押すと、入力された電話番号にSMSが送信され、SMS認証画面に移動。認証コードは数字4桁で有効期限は10分。

5-2 ログインボタンは常にボタンとして機能しており、いつでも新規登録画面から離脱できる。タップで、ログイン画面に移動。

---

##### 6 SMS認証
6-1 画面移動時に数字キーボードを起動。
6-2 コード有効期限テキスト"あと○分○秒で認証コードが無効になります"を表示。10分間のタイマー表示。

6-3 未入力かつ非選択状態のフォームは塗りつぶし(背景)をグレーアウト(灰色)にする。
選択状態のフォーム枠を紫色に切り替え、選択が外れたら元に戻す。最初から1桁目のフォームが選択されている状態で、1桁目が入力されてないのに2桁目以降を選択することはできないが、4桁入力した後に4桁目以前のフォームを選択するのは可能。

手入力にも対応するために、
・数字が入力されると自動で次のフォームを選択する機能
・4桁入力されたら自動的に(確認ボタン押さずに)正誤判断できる機能
がほしい。(アプデ実装)

6-4 コードの再送信ボタンは画面移動後から、再送信可能まで1分間(60秒)のカウントダウンタイマーを開始。
"再送信が可能になるまで　〇〇秒"を表示。

6-4-1 タイマーが終了次第、グレーアウトを解除しタッパブル(ボタンとしてタップ可能)に。
6-4-1-1 ボタンがタップされたら再度コードを送信し、1分間のカウントダウンタイマー開始、グレーアウト、非ボタンに切り替える。

6-5 戻るボタンは常にタップ可能。
6-5-1 新規登録画面に移動。入力された情報(電話番号、ID、パスワード、✓済み)を反映。

6-6 確認ボタンは4桁入力されていないとボタンとして機能しない&グレーアウト。
6-6-1 認証コードが誤っている場合、フォームの下に警告文"認証コードが正しくありません"を表示。
6-6-2 認証コードが正しい場合、プロフィール画面に移動。

---
##### 7 プロフィール設定画面

- 7-1 ユーザーアイコン
- プロフィール写真追加ボタンをタップで、カメラロールを起動。
- 画像選択後、画像編集画面(トリミング、回転)に移動。(アプデ実装)
- 画像を登録しない場合、こちらで用意した人の顔画像を勝手に設定する。(アプデ実装)

7-2 ユーザーネーム条件：1文字以上20文字以下
- 現在のルーム名をフォーム内に入力された状態にする。
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- ① フォーム枠を赤色に変更し、警告文、"20文字以内で入力してください"を表示。
- ②フォーム右下のカウント文字を赤文字に変更。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
7-3 登録ボタンはユーザーネーム条件が満たされた場合のみ、タッパブルに。

##### 8 セットアップ完了
8 セットアップ完了画面表示
設定時間経過後、ホーム画面へ移動。

---

### 4 ログイン

#### 1 ログイン画面

##### 1-1 電話番号orユーザーID選択
1-1 ログイン入力情報をユーザーID,電話番号から選択可能
切り替えはタブ式で、
・選択状態：紫の下線
・非選択状態：グレーアウト(ボタンとしては常に機能する)
となる。

##### 1-1-a 電話番号選択時
1-1-a-1 国旗画像左のプルダウンボタンをタップで、国選択画面へ移動。
1-1-a-2 XD上では国識別番号(例：+81)と国名(英語表記)だけになっているが、国名の右に国旗画像を表示。画面は上下にスクロール可能。
1-1-a-2 検索フォームタップ時、USキーボードを起動。国名での検索のみに対応。(国識別番号での検索には対応しない。)
1-1-a-2-1 英語で文字入力されると、その入力文字から予測される国を予測候補として表示。
1-1-a-2-1-1 国識別番号、国名、国旗画像の全てが国選択ボタンの役割を持っており、国が選択されると、(XD：新規登録)へ戻る。
国選択画面への移動以前に、電話番号、ID、パスワードのフォームに情報を入力されている場合、その入力内容を保持。
フォーム内の番号は、70でも070でも受け入れる。

1-1-a-3 電話番号入力フォームがタップされると、フォーム枠を紫色に切り替え、数字キーボード(番号のみのキーボード)を起動。フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* エラー処理
* 選択された国番号に対応しない桁数が入力された場合
- フォーム枠を赤色に変更し、警告文、"有効な電話番号を入力してください"を表示。
- 登録されていない電話番号が入力された場合
- "その電話番号は登録されていません"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

1-1-a-4 パスワード忘れ画面等から戻る際に自動入力をするため、他画面から戻った時に入力された内容を保持するような機能が必要。

##### 1-1-b ユーザーID選択時
1-1-b-1 ユーザーIDフォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動。フォーム枠の色はフォームから選択が外れると消える。

1-1-b-2
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に15文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が16文字以上になった場合
- ① フォーム枠を赤色に変更し、警告文、"15文字以下で入力してください"を表示。
- ②フォーム右下のカウント文字を赤文字に変更。
- 半角英数字、アンダーバー以外の入力された場合
- "半角英数字及びアンダーバーのみ使用可能です"を表示
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

1-1-b-3 利用規約画面等から戻る際に自動入力をするため、他画面から戻った時に入力された内容を保持する。(アプデ実装?)

##### 1-2 パスワード入力
1-2-1 フォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動。フォーム枠の色はフォームから選択が外れると消える。

1-2-2
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- ① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- ②フォーム右下のカウント文字を赤文字に変更。
- 半角英数字以外の入力された場合
- "半角英数字のみ使用可能です"を表示
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

1-2-3 入力されたパスワードは伏せて表示。フォーム内右のパスワード表示ボタンをタップで、パスワードを伏せずに表示し、ボタンアイコンを斜線が入ってないアイコンに切り替える。

1-2-3 ”パスワードをお忘れの方はこちら”画面等から戻る際に自動入力をするため、他画面から戻った時に入力された内容を保持する。(アプデ実装?)

##### 1-3 パスワードをお忘れの方はこちらリンク
1-3-1 常にリンクとして機能しており、タップで”パスワードをお忘れの方はこちら画面”に移動。

##### 1-4 ログインボタン、新規登録ボタン
1-4-1 電話番号orユーザーID、かつパスワードにエラーが出ていない場合のみ、ログインボタンを有効にする。そうでない場合は、ボタンをグレーアウト(灰色)して、ボタンの機能を持たせない。

1-4-2 ※電話番号/ユーザーID、パスワードのエラー時の挙動※
1-4-2-1 エラーには次のように種類があり、それぞれの警告文は以下の通り。

- (電話番号)
- 選択された国番号に対応していない桁数が入力された場合：
- "有効な電話番号を入力してください。"
- 登録されていない電話番号が入力された場合
- "登録されていない電話番号です"
- ユーザーID
- 16文字以上の入力がされた場合
- "16文字以内で入力してください"
- 半角英数字、アンダーバー以外が入力された場合
- "半角英数字及びアンダーバーのみ使用可能です"
- 登録されていないユーザーIDが入力された場合
- "登録されていないユーザーIDです"
- パスワード
- 7文字以下or21文字以上の入力がされた場合
- "8文字以上、20文字以内で入力してください。"
- 半角英数字以外の入力がされた場合
- "半角英数字及びアンダーバーのみ使用可能です"

- ログイン情報
- ログイン情報が間違っている場合
- "電話番号/ユーザーIDまたはパスワードが間違っています"

また、エラー処理が行われるたびに、パスワードを削除する。(電話番号/IDの入力情報は保持したまま。)

1-4-3 ログイン情報が正しい場合、ホーム画面に移動。

1-4-4 新規登録ボタンは常にボタンとして機能しており、いつでもログイン画面から離脱できる。タップで新規登録画面に移動。

---

#### 2 パスワード再設定
##### 2-1 電話番号入力
2-1-1 ※電話番号フォームは新規登録画面での挙動と基本的に同じ(相違点は以下の通り)※

・既に使用されている電話番号が入力された場合をエラーとせず、警告文表示+フォーム枠赤色変更をしない。
・入力情報を保持する必要はない(他画面から戻ってこない)

2-1-2 入力された電話番号が条件を満たしている場合のみ、パスワードリセットボタンを有効にする。そうでない場合は、ボタンをグレーアウト(灰色)し
て、ボタンの機能を持たせない。
2-1-2-1 ボタンタップでSMS送信。

##### 2-2 認証画面
2-2-1 ※パスワード再設定のSMS認証は、新規登録でのSMS認証での挙動と基本的に同じ(相違点は以下の通り)※

・戻るボタンをタップで、入力情報を修正しますか？の確認モーダルを表示せず、パスワードをお忘れの方画面に移動。

2-2-2 認証コードが正しい場合、パスワード再設定画面に移動。

##### 2-3 パスワード再設定画面
2-3-1 ※新しいパスワードフォームは新規登録のパスワード入力フォームの挙動と基本的に同じ(相違点は以下の通り)※

・入力されたパスワードは伏せずに表示。(パスワード表示ボタンは設置。)
・入力情報を保持する必要はない(他画面から戻ってこないため)

2-3-2　パスワードリセットボタンをタップで、再設定完了画面を表示。
設定秒数経過後、ログイン画面に移動。

---

### 5 ホーム

- 画面したナビゲーション
- ホーム
- タップでホーム画面に移動。
- チャット
- タップでチャット一覧画面に移動。
- プロフィール
- タップでプロフィール画面に移動。

※ 以下、特別な必要がなければナビゲーション(画面下のホームボタン、チャットボタン、プロフィールボタン)については記述しない。※

#### 5-1 通知

##### 5-1-1 通知ベル
5-1-1 通知ベルボタンは未読の通知がある場合はベルの右上に点がつくアイコン、未読の通知がない場合には点がないアイコンに変化する。
その他、ベルマーク自体の色変更、ベルマークから吹き出し表示をする(アプデ実装)

##### 5-1-2 通知画面
5-1-2 通知画面に届く通知の種類は以下の通り。
常にフレンドリクエスト欄が上に表示される。**フレンドリクエスト欄の最大表示数つめる**

- ①フレンドリクエスト
- 許可ボタンまたは拒否ボタンをタップで通知欄から削除。許可ボタンをタップした場合、フレンドリストに追加。
- ②アプリからのお知らせ
- 新しい通知から降順に表示。
- フレンドリクエスト以外の通知はこちらに表示される。
- **通知欄の種類詰める**
- グループへの招待
- ボイチャルーム、クイックルーム、鍵付きルーム

#### 5-2 フレンド追加
##### 5-2-1 名前・IDで検索
5-2-1 画面移動と同時にキーボードを起動。
5-2-1-1 検索フォームに入力された文字と一致するユーザーを検索候補として下に表示。

5-2-2 ユーザーアイコンをタップで、ユーザーのプロフィール画面に移動。

5-2-3
- フレンド申請ボタン
* フレンド申請ボタンをタップで、ユーザーにフレンド申請を送信し、ボタンを申請中ボタンに変更。
* 申請中ボタンを再度タップで、"フレンド申請を取り消しを取りやめますか？"モーダルを表示する。
- 取り消す
- 送信されたフレンド申請を取り消し、ボタンをフレンド申請ボタンに変更する。
- キャンセル
- グループメンバー画面に戻る。
* 既にフレンドのメンバーの場合、フレンドボタンを表示する。
* ボタンタップで、"フレンドを解除しますか？"モーダルを表示する。
* 解除する
* 対象のユーザーをフレンドリストから削除し、フレンドボタンを、フレンド申請ボタンに変更する。
* キャンセル
* グループメンバー画面に戻る。

##### 5-2-2 QRコードで追加
QRコード表示画面に移動。

**QRコード表示画面**
###### 5-2-2-1 QRコードを共有
5-2-2-1 タップでQRコード半モーダルを表示。
- IDをコピー
クリップボードにコピーし、"IDをコピーしました"ポップアップを表示
- 画像を保存
QRコードの画像を保存し、"画像を保存しました"ポップアップを表示
- LINEで共有
- LINEアプリを起動し、招待リンクを共有。
- 招待文章
- > ゲーマのためのボイスチャットアプリ『VOLBOX』で、フレンドと一緒にプレイしよう！【URL】
- LINEアプリがインストールされていない場合には、アプリストアでLINEを表示。

- その他で共有
共有先アプリを表示し選択されたアプリを起動。

- キャンセル
QRコード表示画面に戻る。また、画面(メニュー以外の場所)タップでもキャンセル可能(アプデ実装)

###### 5-2-2-2 写真から読み込む
- カメラロール起動。
- 画像が読み取れた場合
- フレンド申請画面表示。
- 申請する
- ユーザーにフレンド申請を送信。
- フレンド申請を送信しましたポップアップを表示。
- 申請しない
- QRコード追加画面に戻る。
-　画像が読み取れなかった場合
-　"QRコードが見つかりません"モーダルを表示。
-　OKボタンタップで、QRコード表示画面に戻る。

###### 5-2-2-3 カメラでスキャン
- カメラ起動し、QRコード読み取り画面に移動。
- **QRコード読み取り画面**
- 画像が読み取れた場合
- フレンド申請画面表示。
- 申請する
- ユーザーにフレンド申請を送信。
- フレンド申請を送信しましたポップアップを表示。
- 申請しない
- QRコード追加画面に戻る。
-　画像が読み取れなかった場合
-　"QRコードが見つかりません"モーダルを表示。"
-　OKボタンタップで、QRコード表示画面に戻る。

##### 5-3 グループ表示
5-3-1 参加中のグループを表示。**最大表示数を決め、それ以降はもっと見るorグループをたたむ機能(相談)**
グループアイコン、グループ名付近だけでなく、その横列どこを押しても、グループチャット画面に移動できる。
グループ名の右に(メンバー数)を表示。

5-3-2 表示順は、グループ名がアルファベット、記号、ひらがな、カタカナ、漢字、絵文字の順に優先される。

##### 5-4 フレンド表示
5-4-1 フレンドをタップで、フレンドの”プロフィール画面”に移動。ユーザーアイコン、ユーザー名,ID付近だけでなく、その横列どこを押しても移動できる。

5-4-2 表示順は、グループ名のアルファベット、記号、ひらがな、カタカナ、漢字、絵文字の順に優先される。

---

## 6 チャット

### 6-1 アクティビティ

#### 6-1-1 ユーザーアイコン
6-1-1 Instagramのストーリーのようなカラム。左にスワイプが可能。

6-1-1-2 フレンド/グループアイコンタップ時、ボイチャ入室半モーダルを表示。

6-1-1-2-1
- フレンド
- オンライン状態のユーザーアイコンを紫枠で囲い、ユーザーネームの下に”●オンライン”の文字を表示。
-　グループ
-　通話中のグループアイコンを紫枠で囲い、ユーザーネームの下に”●オンライン”の文字を表示。
6-1-1-2-1-1 表示できるユーザーネームの最大文字数は半角6文字。それ以降は...で省略。

6-1-1-3 アクティビティのユーザーアイコンの表示順は
①常にオンラインユーザーがオフラインユーザーの左に来る。
②各状態によって表示順を決める際に使用する値が若干異なる。(以下の通り)
②’-a オンラインユーザー:アプリに**ログイン(アクセス)** した時刻が浅い順に左から表示
②’-b オフラインユーザー:アプリから**ログアウト**した時刻が浅い順に左から表示
となる。

6-1-1-4 オフライン状態のユーザーアイコンには、最終ログアウトからの経過時間がユーザーネームの下に表示される。経過時間テキストカラーは灰色。
表示において、1時間経過,1日経過,7日経過時に経過時刻の単位が大きくなり、4つの単位(分,時間、日、7日以上)に区切る。
**(オンライン|1～59分前ログイン,1～23時間前ログイン,1～6日前ログイン,7日以上前ログイン)**
6-1-1-5 DMorグループで最後に送信した（された）テキストが何分前に送信されたかを表示。表示において、1時間経過,1日経過,7日経過時に経過時刻の単位が大きくなり、4つの単位(分,時間、日、7日以上)に区切る。
**(1～59分前,1～23時間前,1～6日前,7日以上前)**

#### 6-1-2 グループ作成ボタン
位置を常に左端に固定。
タップでグループ作成画面に移動。

##### 6-1-1-5 ボイチャ入室半モーダル
フレンド/グループごとの処理の違いは以下の通り。
##### ①ボイチャ入室半モーダル(フレンド)
- フレンド名を表示。
- 通話参加者(人数)
* フレンドが参加済みの場合のみユーザーアイコン、ユーザーネームを表示。
- 通話招待(人数)
* フレンドが未参加の場合に表示。フレンドが参加済みの場合、通話招待欄を削除。
- メガホンボタン
* タップでフレンドにボイスチャットへの招待を送信。フレンドの状態によって処理が異なる。(以下の通り)
- 相手がオフラインの場合
- ”○○さんからボイスチャットに招待が来ています！”通知が相手に届く(通知設定ONの場合)
- 相手がオンラインの場合
- どの画面でも、画面上部にボイチャ招待バナーを表示。バナーには”〇〇さんからボイスチャットに招待が来ています！”テキストと、参加するボタンを設置し、ボタンタップ時、招待元のボイチャ入室半モーダルを表示
- ボイチャルームに入室
* タップ時ボイチャルームへ移動。自分自身が既に参加済みの場合、ボタンを、ボイチャルームに戻るボタンに変更。**(複数ボイチャがある場合の処理詰めます)**
- キャンセル
* タップ時、チャット一覧画面に戻る。

##### ②ボイチャ入室半モーダル(グループ)
- グループ名(人数)を表示。
- 通話参加者(人数)
* 参加メンバーがいる場合はユーザーアイコン、ユーザーネームを表示。最大6人まで表示し、それ以上は左右にスクロールで表示。参加ユーザーがいない場合には、アイコン、ユーザーネームを表示する領域を縮小。
- 通話招待(人数)
* 通話に参加していないメンバーを表示。最大3人まで表示でそれ以降は上下にスクロールで表示。
- メガホンボタン
* タップで対象ユーザーにボイスチャットへの招待を送信。ユーザーの状態によって処理が異なる。(以下の通り)
* 相手がオフラインの場合：”○○さんからボイスチャットに招待が来ています！”通知が相手に届く(通知設定ONの場合)
* 相手がオンラインの場合：どの画面でも、画面上部にボイチャ招待ミニバナーを表示。ミニバナーには”〇〇さんからボイスチャットに招待が来ています！”テキストと、参加するボタンを設置し、ボタンタップ時、招待元のボイチャルームへ参加する。

- ボイチャルームに入室ボタン
* タップ時ボイチャルームへ移動。自分自身が既に参加済みの場合、ボタンをボイチャルームに戻るボタンに変更。**(複数ボイチャがある場合の処理詰めます)**

- キャンセルボタン
* タップ時、チャット一覧画面に戻る。

###### グループに招待ボタン
- メンバーリスト
* メンバーのアイコン、ユーザーネーム、ユーザーIDを表示。いずれかタップ時、対象メンバーのプロフィールページに移動。

- 検索フォーム
* 検索フォームの中に"名前・IDで検索する"テキストを表示。
* 検索フォーム選択時、"名前・IDで検索する"テキストを削除し、入力文字削除ボタンを検索フォーム右端に配置。また、フレンドリストを非表示に。
* 入力された文字から予測されるユーザーを予測候補として表示。検索対象はユーザーID,ユーザー名どちらも可能。**(どちらかだけなら、ユーザー名優先。)**

- メガホンボタン
* タップで対象ユーザーにボイスチャットへの招待を送信。ユーザーの状態によって処理が異なる。(以下の通り)
* 相手がオフラインの場合：”(招待元ユーザー名)さんから(グループ名)へ”〇〇さんからボイスチャットに招待が来ています！”招待が来ています！”通知が相手に届く(通設定ONの場合)
* 相手がオンラインの場合：どの画面でも、画面上部にボイチャ招待ミニバナーを表示。ミニバナーには”(招待元ユーザー名)さんから(グループ名)へ”〇〇さんからボイスチャットに招待が来ています！”テキストと、参加するボタンを設置し、ボタンタップ時、招待元のボイチャルームへ参加する。

**6-1-2-1 グループ作成画面**
##### 6-1-2-1-1 フレンド選択
###### 検索フォーム
6-1-2-1-1 検索フォームの中に"名前・IDで検索する"テキストを表示。
6-1-2-1-1-1 検索フォーム選択時、"名前・IDで検索する"テキストを削除し、入力文字削除ボタンを検索フォーム右端に配置。また、フレンドリストを非表示に。
6-1-2-1-1-1-1 入力された文字から予測されるユーザーを予測候補として表示。
検索対象はユーザーID,ユーザー名どちらも可能。

###### フレンド一覧表示
6-1-2-1-2 フレンドを一覧表示。表示順はグループ名のアルファベット、記号、ひらがな、カタカナ、漢字、絵文字の順に優先される。

6-1-2-1-2-1 各フレンド列の右端にチェックボタンを設置。
6-1-2-1-2-1-1 一人でもフレンドを選択すると、画面下部に”現在選択中のフレンド一覧”カラムを表示。チェックボタンで選択されるたびに、このカラムに追加され、チェックボタンを外す、またはカラム内ユーザーアイコン右上の削除ボタンによって、"現在選択中のフレンド一覧"から削除される。

###### 次へボタン
6-1-2-1-2-2 タップでグループ設定画面に移動。(フレンド未選択でも移動可能。(自分だけのプライベートグループ的な))

**6-1-2-2 グループ作成**
###### グループ画像設定
6-1-2-2-1 プロフィール写真追加ボタンをタップで、カメラロールを起動。画像選択後、画像トリミング機能、画像回転画面に移動(アプデ実装)
画像を登録しなくても、アカウント作成は可能。

###### グループ名設定
6-1-2-2-2 グループ名条件：1文字以上20文字以下
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- 半角英数字以外の入力された場合
- "半角英数字のみ使用可能です"を表示
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

###### 作成
6-1-2-2-2-3 作成ボタンはグループ名でエラーが発生していない場合のみ、タッパブルに。
6-1-2-2-2-3-1 タップで作成したグループのチャット画面に移動。

6-1-2-2-2新規グループ作成完了(XD:チャット > グループ作成 > 招待)後の動き
グループが作成された場合、ボイチャルームが一つ自動的に作成される。(Slackでいうgeneralスレッドにあたる。)
ボイチャルームの詳細
・ ボイチャルーム名: 初期ルーム
・ ルーム種類:ボイチャルーム
・ ボイチャルーム画像: VOLBOX VCの画像
・ ボイチャルーム参加人数: 1人(ボイチャルーム作成者)
・ プライベート化: しない(OFF)

プライベート化：**"文言：プライベート化をONにすることで、プライベートルームとなり、参加者は入室時にパスワード入力が求められます。また、グループのステータス(参加中のメンバー、参加人数、通話中/オフライン)が非表示になります。"**

###### 選択済みメンバー

6-1-2-2-3 テキスト”メンバー”の右隣に選択したフレンドに自分を含めた人数を表示。アイコン右上の削除ボタンのクリックにリアルタイムで対応できるようにする。

6-1-2-2-3-1
追加ボタン(招待するメンバーを追加で選択する)と自分自身のアイコンを固定で表示。

- 追加ボタン
- タップでフレンド選択画面に戻る。
- 選択済みフレンドのアイコン
- 上下にスクロール可能。
- 右上には削除ボタンを設置。
- タップで選択を解除。

#### 6-1-3 チャット一覧画面
チャット履歴のあるフレンド/グループの情報を一覧表示する。

6-1-3-1 フレンドとの個人チャット、ボイチャルームを混合に表示。
チャット欄名が18文字を超えた場合には、18文字目からは...で省略。ボイチャルームの場合には、...の後にメンバー数を表示。(グループ名...(10))
そのフレンド/ボイチャルームでメッセージが送受信された最終時間が新しい順に上から表示。

6-1-3-1-1 フレンド/ボイチャルームのアイコンを表示。

6-1-3-1-2 フレンド/ボイチャルームのフレンドネーム/ボイチャルーム名を表示。ボイチャルームには、語尾にメンバー数を()で表示。(グループA(10))

6-1-3-1-3 フレンド/ボイチャルームの最終メッセージの内容を表示。
6-1-3-1-3-1 最終メッセージが画像の場合、”画像を送信しました”テキストを表示。

6-1-3-1-4 フレンド/ボイチャルームの最終メッセージが送受信された時刻を表示。

6-2-3-1-5 未読のメッセージ数を通知アイコンの数字に反映。

#### 6-1-3-1 フレンドチャット画面
###### メッセージ
6-1-3-1-1 メッセージフォームの中に"メッセージを入力"テキストを表示。
6-1-3-1-1-1 メッセージフォーム選択時、"名前・IDで検索する"テキストを削除し、キーボードを起動。文字入力後、送信ボタンタップでメッセージ送信。
6-1-3-1-1-1-1 キーボード起動中に、メッセージフォーム、キーボード以外の画面をタップで、フォームとキーボードを縮小化。入力内容を保持(アプデ実装)

6-1-3-1-1-2 フレンドとの間で過去に送受信されたメッセージを表示。

6-1-3-1-1-2-1
- 送受信テキスト長押し
- クリップボードにコピー。(アプデ実装)
- 送信取り消し(アプデ実装)

###### 画像
6-1-3-1-2 画像送信ボタンタップ時、カメラロール起動。画像を選択後、画像拡大画面に移動。(アプデ実装)
**画像送信画面**
- 画像を拡大表示。(パラレル方式。)
- 送信ボタン
- タップで画像を送信。
一度に送信できるのは、1枚まで。また、画質を落とす。**(エンジニアに相談)**

送信された、画像ボタンタップ時、画像拡大画面に移動。
**画像拡大画面**
画像を拡大表示する。同じチャット内で送信された画像を左右にスクロールで見ることができる。
- 保存ボタン
- カメラロールに画像を保存する。

###### ユーザーアイコン
6-1-3-1-3-1 フレンドのユーザーアイコンタップ時、フレンドのプロフィール画面へ移動。
6-1-3-1-3-2
- フレンドがメッセージを送信した場合の、ユーザーアイコン表示方法
- 連続したメッセージを送信した場合でも、最後に送信されたメッセージのみにアイコンを表示。**(メッセージ間がどれだけ空いたら新しくアイコンを付けるのか詰める。)**

###### ボイチャ
6-1-3-1-4-1
- ボイチャボタンを設置。
- タップ時、ボイチャ入室半モーダル(フレンド)を表示。

###### 設定ボタン
6-1-3-1-5-1 タップ時、3点リーダー半モーダルから表示。
- フレンドをブロックする
- ブロックの定義：双方間でメッセージ交換不可。相手にブロックした時に通知は行かない。ブロックしたユーザーがグループにいても表示はする。
- タップ時、確認モーダル、”本当にブロックしますか？ブロックをした場合、このユーザーからのメッセージは表示されなくなります。ブロックをしても相手ユーザーには通知はされません。また、ブロックは相手ユーザーのプロフィール画面からいつでも解除できます。”を表示。
- 確定
- タップ時、フレンドとのチャットを削除し、ブロックリストに追加。
- チャット一覧画面に移動。　
- キャンセル
- フレンドチャット画面に戻る。

#### 6-1-3-2 グループチャット画面
- 3連タブ
- チャット
- タブをタップしても、動作はしない。
- ボイチャ
- タブをタップで、グループボイチャ画面に移動。
- メンバー
- タブをタップで、グループメンバー画面に移動。
###### チャット
チャットタブをタップでチャット画面を表示。
6-1-3-2-1 メッセージフォームの中に"メッセージを入力"テキストを表示。
6-1-3-2-1-1 メッセージフォーム選択時、"名前・IDで検索する"テキストを削除し、キーボードを起動。文字入力後、送信ボタンタップでメッセージ送信。
6-1-3-1-1-1-1 キーボード起動中に、メッセージフォーム、キーボード以外の画面をタップで、フォームとキーボードを縮小化。入力内容を保持(アプデ実装)

6-1-3-1-1-2 フレンドとの間で過去に送受信されたメッセージを表示。

6-1-3-1-1-2-1
- 送受信テキスト長押し
- クリップボードにコピー。(アプデ実装)
- 送信取り消し(アプデ実装)

###### 画像
6-1-3-1-2 画像送信ボタンタップ時、カメラロール起動。画像を選択後、画像拡大画面に移動。(アプデ実装)
**画像送信画面**
- 画像を拡大表示。(パラレル方式。)
- 送信ボタン
- タップで画像を送信。
一度に送信できるのは、1枚まで。また、画質を落とす。**(エンジニアに相談)**

送信された、画像ボタンタップ時、画像拡大画面に移動。
**画像拡大画面**
画像を拡大表示する。同じチャット内で送信された画像を左右にスクロールで見ることができる。
- 保存ボタン
- カメラロールに画像を保存する。

###### ユーザーアイコン
6-1-3-1-3-1 メンバーのユーザーアイコンタップ時、メンバーのプロフィール画面へ移動。
6-1-3-1-3-2
- メンバーがメッセージを送信した場合の、ユーザーアイコン表示方法
- 連続したメッセージを送信した場合でも、最後に送信されたメッセージのみにアイコンを表示。**(メッセージ間がどれだけ空いたら新しくアイコンを付けるのか詰める。)**

###### 設定ボタン
6-1-3-1-5-1 タップ時、3点リーダー半モーダルから表示。
- ボイチャルーム情報編集ボタン
- ボイチャルームアイコン
- 現在設定されているルームアイコンを表示。
- 変更ボタンタップでギャラリーを起動。
- 選択された画像編集画面(リサイズ、回転等)(アプデ実装)
- 保存ボタンタップで、選択された画像をルームアイコンに更新。
- ボイチャルーム編集画面に戻る。
- ルーム名変更フォーム
- ※ルーム名条件：20文字以下。
- 現在のルーム名をフォーム内に入力された状態にする。
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- ① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- ②フォーム右下のカウント文字を赤文字に変更。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
- 入室パスワード(鍵付きルームの場合のみ)
- **※鍵付きルームの場合のみ**、入室パスワードを表示し、タップで入室パスワード変更画面に移動。
- **入室パスワード変更画面**
- 現在の入室パスワード
- テキストで表示。
- 新しい入室パスワード入力フォーム
- ※入室パスワード入力条件：20文字以下の英数字
* フォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* フォーム枠を赤色に変更し、以下の警告文を表示。
* ①文字数が21文字以上になった場合
- 警告文、"20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- ②英数字以外の入力がされた場合
- "アルファベット、数字のみが使用できます"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
- 完了ボタン
- 押せない場合
- a 半角英数字以外の文字が使用されている場合
- 警告文、"アルファベット、数字のみが使用できます"を表示。
- b 20文字以上の入力がされた場合
- 警告文、"20文字以内で入力してください"を表示。
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- それ以外の場合、ボタンを有効化
- 完了ボタンタップで、入室パスワードを更新し、ボイチャルーム情報編集画面に戻る。

- 保存ボタン
- 押せない場合
- 20文字以上の入力がされた場合
- 警告文、"20文字以下で入力してください"を表示する。
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- それ以外の場合、ボタンを有効化
- 完了ボタンタップで、ボイチャルーム名を更新し、通話ルーム画面に戻る。

### グループボイチャ画面

(割り込みで)ボイチャ備考欄

**※ボイチャ種類表※**
| | ボイチャルーム | クイックルーム |
|:--------------------------------------------:| ------------------------------------------------------------------ | ------------------------------------------------------------------ |
| 参加方法 | 招待されたグループから参加 | URLから直接参加 |
| ルーム期限 | 削除しない限り残る | 最後のやり取りから<br>7日後に自動で削除される |
| プライベート化<br>鍵付きのルームに変更できる | 作成時に選択すれば<br>プライベート化できる <br>※作成後の変更は不可 | 作成時に選択すれば<br>プライベート化できる <br>※作成後の変更は不可 |
| 使用用途 | クラン/チーム内での通話 | コミュニティ外との通話(交流戦・スクリム・大会など) |

**※ボイチャ種類別表示表※**
| | | オンライン | オフライン |
| --- | --- |:---:|:---:|
| **ボイチャ**| 鍵なし|  |  |
| **ボイチャ**| 鍵あり |  |  |
| **クイック**| 鍵なし || 自動消滅までのカウントダウン |
| **クイック** | 鍵あり |  |  |
※まとめ※
- 鍵無しルームではオフライン時に参加者アイコン、通話中マーク、参加人数を表示し、オフライン時にオフラインマーク、"0人参加中"を表示。
- プライベートルームでは、鍵マークを表示し、グループ名以外表示しない。
- クイックルームでは、グループ画像にタイマーアイコンが付く。
- クイックの鍵なしルームでは、オフライン時に、消滅までの日数が表示される。(残り1日で24時間表示、残り1時間で60分表示。)

---

**グループボイチャ画面**
そのグループで作成されているボイチャルーム一覧を表示。

- 3連タブ
- チャット
- タブをタップで、グループチャット画面に移動。
- ボイチャ
- タブをタップしても、動作はしない。
- メンバー
- タブをタップで、グループメンバー画面に移動。

- ボイチャルーム表示
●タップでボイチャ入室半モーダル画面に移動。
- ボイチャルーム画像
* ボイチャルームごとに設定された画像。設定されていない場合はデフォルト画像を表示。**（デフォルト表示画像考える)**
* クイックルームの場合、画像にタイマーアイコンを表示。
- ボイチャルーム名
* ボイチャルーム名条件：20文字以下。
- 参加中メンバーアイコン
* 最大5人のアイコンを表示し、超過分はアイコン右に"+(人数分)"で表示。
* プライベートルームには表示しない。
- 通話中/オフライン
* 一人でも対象のボイチャルームに参加しているメンバーいれば、通話中表示、参加者0人であればオフライン表示。
* プライベートルームには表示しない。
- 参加中メンバー数
* 対象のボイチャルームに参加中の人数を表示。
* プライベートルームには表示しない。
- 鍵アイコン
- プライベートルームに鍵アイコンを表示。

- 3点リーダー
- ３点リーダー半モーダルを表示
- グループ情報を編集する
- タップでグループ編集画面に移動。
- グループを脱退する
- タップで"グループを脱退しますか?"モーダルを表示。
- 脱退
- グループから脱退し、グループチャットを削除。
- キャンセル
- ボイチャ一覧画面に戻る。

- グループ招待ボタン
タップでグループ招待画面に移動。

**グループ招待画面**
- グループ招待URL
- グループ招待URL文章：**"考える"**
- URLをコピー
- タップで、"URLをコピーしました"小ポップアップ表示。
- URLをLINEで共有
- LINE起動
- > ゲーマのためのボイスチャットアプリ『VOLBOX』で、フレンドと一緒にプレイしよう！【URL】
- URLをその他のアプリで共有
- 共有先アプリを選択
- 選択アプリを起動
- > ゲーマのためのボイスチャットアプリ『VOLBOX』で、フレンドと一緒にプレイしよう！【URL】
- フレンド招待ボタン
- タップで、グループフレンド招待画面に移動。
- **グループフレンド招待画面**
- 上部ナビゲーションタイトルの"フレンドを選択"テキストを表示。
- チェックボックスに✓が入った場合、テキストを"選択中 (選択中人数)"に変更し、✓された数にリアルタイムで対応する。
- 検索フォーム
* 検索フォームの中に"名前・IDで検索する"テキストをグレーで表示。
* 検索フォーム選択時、"名前・IDで検索する"テキストを削除し、入力文字削除ボタン(タップでフォーム内入力文字を全削除)を検索フォーム右端に配置。また、フレンド一覧を非表示にする。
* フォームに入力された文字から予測されるユーザーを予測候補として表示。検索対象はユーザーID,ユーザー名どちらも可能。
- フレンド表示
- グループ未参加のフレンドを表示。
- ユーザーアイコン、ユーザーID、ユーザーネームを表示。
- チェックボックス
- 選択された場合、チェックマークを表示。
- 選択解除された場合、チェックボックスを表示。
- 選択中フレンド半カラム
- チェックボックスが1つ以上選択されている場合、選択中のフレンドを表示する半カラムを表示。左右にスクロール可能。
- ✔が0になった場合、半カラムを非表示にする。
- ユーザーアイコン,ユーザーネーム
- 選択されたフレンドから順に左詰めで表示される。最大6人まで表示され、左右スクロール可能。
- 削除ボタン
- タップで対象ユーザーの選択を解除し、半カラムから削除
- 招待ボタン
- 押せない場合
- フレンドが一人も選択されていない。
- ボタンをグレーアウトにし、ボタンとしての機能を持たせない。
- それ以外の場合
- グレーアウトを解除し、タッパブルに。
- タップで選択されたユーザーに、"(送信元ユーザー名)さんから(グループ名)への招待が届いています！"を送信する。
- "招待が完了しました"小ポップアップを表示。
- ボイチャ一覧画面に戻る。

- 新規ボイチャルーム作成
* 新規ボイチャルーム作成画面に移動。**(1グループあたりの最大ボイチャルーム数決める)**

**新規ボイチャ/クイックルーム作成画面**

### - ①ボイチャルームタブ
- ボイチャ説明
- **("ここの文言考える:クラン/チーム内での通話")**
- アイコン
- **(アイコン用意する)**
- 参加方法
- グループのボイチャ/クイックルーム一覧画面から参加
- URLから直接参加
- ルーム制限
- **(文言作成："削除しない限り残る")**
- ボイチャルーム作成ボタン
- 新規ボイチャルーム設定画面へ移動。

**新規ボイチャルーム設定画面**

#### ボイチャアイコン設定
- アイコン編集ボタン
- アイコン右下に配置。
- タップ時、カメラロールを起動し、選択された画像にユーザーアイコンを更新する。
#### ボイチャルーム名設定
ボイチャルーム名条件：1文字以上20文字以下
- ボイチャルーム名フォーム

* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー
* 文字数が21文字以上になった場合
① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
②フォーム右下のカウント文字を赤文字に変更。

- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

#### ボイチャプライベート化設定
- プライベート化ボタン
- 説明文：
"プライベート化をONにすると、鍵付きルームとなり、招待をしたユーザーのみ参加可能となります。<br>ユーザーを招待するには：<br>・ルーム入室時に必要となる、ルームパスワードを伝える。<br>・ボイチャルーム内のフレンドを招待ボタンからフレンドを招待する。<br>・ルーム招待URLを発行し、フレンドに送信する。<br>※設定後の変更はできません。
* プライベート化ボタン
* ボタンの種類：トグルスイッチ
* ボタンON:ルームをプライベート化
* プライベート化ボタンがONの場合、プライベート化設定領域の下に、入室パスワードフォームを表示。
##### ボイチャ入室パスワード設定
* 入室パスワードフォーム
●入室パスワード条件：文字以上20字以内の半角英数字
* フォームがタップされると、フォーム枠を紫色に切り替え、数字キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。色は常に紫色。
* フォームの右下に、20文字までの残り文字数を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー
* エラー時、フォーム枠を赤色に変更し、以下の警告文を表示。
* 文字数が21文字以上になった場合
- "20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- 半角英数字以外の入力がされた場合
- "半角のアルファベット、数字のみ使用できます。"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

- 保存ボタン
* 押せない場合
* ボイチャルーム名、入室パスワード(プライベート化がONの場合のみ)のどちらか、もしくは両方のフォームに情報が入力されていない。(空欄)
* どちらか、もしくは両方のフォームにエラーが発生している。
* 押せない場合には、ボタンをグレーアウトにし、ボタンとしての機能を持たせない。
- 上記以外の場合
- 保存ボタンを有効化。
- タップでグループのボイチャリストに作成したルームを追加する。
- ボイチャ一覧画面に移動。

#### 新規ボイチャルーム作成画面から離脱
- 戻るボタン
- 新規ボイチャルーム/クイックルーム作成画面に戻る

**新規クイックルーム作成画面**

### ②クイックルームタブ
- クイックルーム説明
- **("ここの文言考える:交流戦・スクリム・大会向き")**
- アイコン
- **(アイコン用意する)**
- 参加方法
- グループのボイチャ/クイックルーム一覧画面から参加
- URLから直接参加
- ルーム制限
- **(文言作成："最後のやり取りから <font color="red">7日後に自動削除(赤文字)")</font>**
- ボイチャルーム作成ボタン
- 新規ボイチャルーム設定画面へ移動。

**新規クイックルーム作成画面**
#### クイックルームアイコン設定
- アイコン編集ボタン
- アイコン右下に配置。
- タップ時、カメラロールを起動し、選択された画像にユーザーアイコンを更新する。
#### クイックルーム名設定
クイックルーム名条件：1文字以上20文字以下
- クイックルーム名フォーム

* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー
* 文字数が21文字以上になった場合
① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
②フォーム右下のカウント文字を赤文字に変更。

- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

#### クイックルームプライベート化設定
- プライベート化ボタン
- 説明文：
"プライベート化をONにすると、鍵付きルームとなり、招待をしたユーザーのみ参加可能となります。<br>ユーザーを招待するには：<br>・ルーム入室時に必要となる、ルームパスワードを伝える。<br>・ボイチャルーム内のフレンドを招待ボタンからフレンドを招待する。<br>・ルーム招待URLを発行し、フレンドに送信する。<br>※設定後の変更はできません。<br>**(推敲)**

* プライベート化ボタン
* ボタンの種類：トグルスイッチ
* ボタンON:ルームをプライベート化
* プライベート化ボタン領域の下に、入室パスワードフォームを表示。
##### プライベートクイックルーム入室パスワード設定
* 入室パスワードフォーム
●入室パスワード条件：半角英数字20字以内
* フォームがタップされると、フォーム枠を紫色に切り替え、数字キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。色は常に紫色。
* フォームの右下に、20文字までの残り文字数を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー
* エラー時、フォーム枠を赤色に変更し、以下の警告文を表示。
* 文字数が21文字以上になった場合
- "20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- 半角英数字以外の入力がされた場合
- "半角のアルファベット、数字のみ使用できます。"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
- 保存ボタン
* 押せない場合
* ボイチャルーム名、入室パスワード(プライベート化がONの場合のみ)のどちらか、もしくは両方のフォームに情報が入力されていない。(空欄)
* どちらか、もしくは両方のフォームにエラーが発生している。
* 押せない場合には、ボタンをグレーアウトにし、ボタンとしての機能を持たせない。
- 上記以外の場合
- 保存ボタンを有効化。
- タップでグループのボイチャリストに作成したルームを追加する。
- ボイチャ一覧画面に移動。

#### 新規クイックルーム作成画面から離脱
- 戻るボタン
- 新規ボイチャルーム/クイックルーム作成画面に戻る

### ボイチャ/クイックルーム入室半モーダル
ルームアイコンタップで、ボイチャ入室半モーダルを表示。

**ボイチャ入室半モーダル**
#### ①ボイチャ/クイックルーム(鍵なし)
- ルーム名表示
- ルーム名を表示。
- 通話参加中ユーザー表示
- 通話に参加しているユーザーのアイコン、ユーザーネームを表示。
- 最大6人まで表示し、それ以上は左右スクロールで表示。
- 通話招待ユーザー表示
- 通話に参加していないグループメンバーを表示。表示順はアルファベット、記号、ひらがな、カタカナ、漢字、絵文字の順に優先される。
- 最大3名まで表示し、それ以降は上下スクロールで表示。
- メンバー部分をタップでボイチャ招待半モーダルを表示。
- **ボイチャ招待半モーダル**
- ユーザーアイコン、ユーザーネーム、ユーザーID
- スタンプ招待ボタン
- 対象ユーザーに、ボイチャルームへの招待を送る。
- 対象ユーザーがオフラインの場合："(送信先)さんから(グループ名)への招待が届いています!"テキストのプッシュ通知を送る。
- 対象ユーザーがオンラインの場合：どの画面にいても、画面上部バナ-を表示。
- "(送信先)さんから(グループ名)への招待が届いています!)"テキストと参加ボタンを表示し、ボタンタップで送信元ボイチャに移動する。

- キャンセルボタン
- ボイチャ入室半モーダルに戻る。
- スタンプ招待ボタンを表示
- 対象ユーザーに、ボイチャルームへの招待を送り、"招待を送信しました"ポップアップを表示。(アプデ実装)
- 対象ユーザーがオフラインの場合："(送信先)さんから(グループ名)への招待が届いています!"テキストのプッシュ通知を送る。
- 対象ユーザーがオンラインの場合：どの画面にいても、画面上部バナーを表示する。
- "(送信先)さんから(グループ名)への招待が届いています!)"テキストと参加ボタンを表示し、ボタンタップで送信元ボイチャに移動する。

- ルーム入室ボタン表示
- ボタンタップで、通話ルーム画面に移動。
- すでにボイチャに参加している場合、ボタンをボイチャルームに戻るボタンに変更。
- キャンセルボタン
- タップでボイチャ/クイックルーム一覧画面に戻る。

#### ②ボイチャ/クイックルーム(鍵あり)
- ボイチャルーム名
- ボイチャルーム名を表示し、右に鍵アイコンを表示。
- 入室パスワード入力フォーム
●入室パスワード条件：半角英数字20字以内
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。色は常に紫色。
* エラー
* フォーム枠を赤色に変更し、以下の警告文を表示。
* 21文字以上入力された場合
* "20文字以内で入力してください"を表示。
- ②半角英数字以外の文字が入力された場合
- "半角英数字のみ使用できます"を表示。
- 入室パスワードが間違っている場合
- "パスワードが間違っています"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

- ボイチャルーム入室ボタン表示
- 入室パスワードフォームに1文字でも入力された場合
- 入室ボタンを有効化する。
- パスワードが間違っている場合
* 21文字以上入力された場合
* "20文字以内で入力してください"を表示。
- ②半角英数字以外の文字が入力された場合
- "半角英数字のみ使用できます"を表示。
- 入室パスワードが間違っている場合
- "パスワードが間違っています"を表示。
- それ以外の場合
- ボタンをグレーアウト&ボタンを無効化

- すでにボイチャに参加している場合、ボタンをボイチャルームに戻るボタンに変更。
- タップで、ボイチャに参加する。
- キャンセルボタン
- タップでボイチャ/クイックルーム一覧画面に戻る。

### 通話ルーム画面
- ルーム名
- ルーム名を表示。
- 鍵付きルームには、鍵アイコンを表示。
- 招待するメンバーアイコン
- Instagramのストーリーのようなカラム。右左にスワイプが可能。
- オンライン状態のユーザーアイコンを紫枠で囲う。
- 表示できるユーザーネームの最大文字数は全角6文字。
- アクティビティのユーザーアイコンの表示順は以下の通り。
- ①常にオンラインユーザーがオフラインユーザーの左に来る。
- ②各状態によって表示順を決める際に使用する値が若干異なる。(以下の通り)
- ②’-a オンラインユーザー:アプリに**ログイン(アクセス)** した時刻が浅い順に左から表示
- ②’-b オフラインユーザー:アプリから**ログアウト**した時刻が浅い順に左から表示する。
- タップ時で対象ユーザーへグループへの招待を送信。
- 対象ユーザーがオフラインの場合："(送信先)さんから(グループ名)への招待が届いています!"テキストのプッシュ通知を送る。
- 対象ユーザーがオンラインの場合：どの画面にいても、グループ招待上部バナーを表示する。
- "(送信元ユーザー)さんから(グループ名)への招待が届いています!)"テキストと参加ボタンを表示し、ボタンタップで送信元ボイチャグループに移動する。

- もっと見るボタン
- 招待するメンバー一覧画面に移動。
- **招待一覧メンバー画面**
- 検索フォーム
* 検索フォームの中に"名前・IDで検索する"テキストをグレーで表示。
* 検索フォーム選択時、"名前・IDで検索する"テキストを削除し、入力文字削除ボタン(タップでフォーム内入力文字を全削除)を検索フォーム右端に配置。また、表示しているメンバー一覧を非表示にする。
* フォームに入力された文字から予測されるユーザーを予測候補として表示。検索対象はユーザーID,ユーザー名どちらも可能。
- メンバー一覧
- ユーザーアイコン、ユーザーネーム、ユーザーIDを表示。
- メンバー部分をタップでボイチャ招待半モーダル(個人)を表示。

- **ボイチャ招待半モーダル(個人)**
- ユーザーアイコン、ユーザーネーム、ユーザーID
- スタンプ招待ボタン
- 対象ユーザーに、ボイチャルームへの招待を送る。
- 対象ユーザーがオフラインの場合："(送信先)さんから(グループ名)への招待が届いています!"テキストのプッシュ通知を送る。
- 対象ユーザーがオンラインの場合：どの画面にいても、上部モーダルを表示する。
- "(送信先)さんから(グループ名)への招待が届いています!)"テキストと参加ボタンを表示し、ボタンタップで送信元ボイチャに移動する。

- キャンセルボタン
- 通話中ルーム画面に戻る。
- 招待スタンプボタン
- 対象ユーザーがオフラインの場合
- "(送信先)さんから(グループ名)への招待が届いています!"テキストのプッシュ通知を送る。
- 対象ユーザーがオンラインの場合
- どの画面にいても、画面上部モーダルを表示する。
- "(送信先)さんから(グループ名)への招待が届いています!)"テキストと参加ボタンを表示し、ボタンタップで送信元ボイチャに移動する。
- 全体音量調節
- グループアイコン
- 全体ボリュームスライダー
- 左右にドラッグしてグループ全体の出力音量を調節。ドラッグだけでなく、ある部分をタップでも調節できる。(アプデ実装)
- ミュートアイコン
- ミュート時
- ミュートアイコンをミュート中アイコンに変更
- 全体ボリュームスライダをグレーアウト。
- グループ全体の出力音量を0にする。
- 再度タップでミュートを解除。
- ユーザーごと音量調整
- ユーザーアイコン
- ユーザーボリュームスライダー
- 左右にドラッグして対象ユーザーの出力音量を調節。
- ある部分をタップでも調節できる。(アプデ実装)
- ミュートアイコン
- ミュート時
- ミュートアイコンをミュート中アイコンに変更
- 対象ユーザーのボリュームスライダをグレーアウト。
- グループ全体の出力音量を0にする。
- 再度タップでミュートを解除。
- 3点リーダー
- グループ3点リーダー半モーダルを表示。
- **グループ3点リーダー半モーダル**
- ボイチャルーム情報編集ボタン
- ボイチャルームアイコン
- 現在設定されているルームアイコンを表示。
- 変更ボタンタップでギャラリーを起動。
- 選択された画像編集画面(リサイズ、回転等)(アプデ実装)
- 保存ボタンタップで、選択された画像をルームアイコンに更新し、ボイチャルーム編集画面に戻る。

- ルーム名変更フォーム
- ※ルーム名条件：20文字以下。
- 現在のルーム名をフォーム内に入力された状態にする。
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- ① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- ②フォーム右下のカウント文字を赤文字に変更。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

- 入室パスワード **(鍵付きルームの場合のみ)**
- ※鍵付きルームの場合のみ、入室パスワードを表示し、タップで入室パスワード変更画面に移動。
- **入室パスワード変更画面**
- 現在の入室パスワード
- テキストで表示。
- 新しい入室パスワード入力フォーム
- ※入室パスワード入力条件：20文字以内の半角英数字
* フォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* フォーム枠を赤色に変更し、以下の警告文を表示。
* 文字数が21文字以上になった場合
- 警告文、"20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- 英数字以外の入力がされた場合
- "アルファベット、数字のみが使用できます"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
- 完了ボタン
- 押せない場合
- a 半角英数字以外の文字が使用されている場合
- 警告文、"アルファベット、数字のみが使用できます"を表示。
- b 20文字以上の入力がされた場合
- 警告文、"20文字以内で入力してください"を表示。
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- それ以外の場合、ボタンを有効化
- 完了ボタンタップで、入室パスワードを更新し、ボイチャルーム情報編集画面に戻る。

- 保存ボタン
- 押せない場合
- 20文字以上の入力がされた場合
- 警告文、"20文字以下で入力してください"を表示する。
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- それ以外の場合、ボタンを有効化
- 完了ボタンタップで、ボイチャルーム名を更新し、通話ルーム画面に戻る。

- 通話中バナー
- 通話中は画面下に紫色バナーを表示。通話終了時にバナーを非表示にする。
- 退出ボタン
- タップでボイチャルームから退出。通話中バナーを非表示にする。
- ボイチャ一覧画面に移動。
- スピーカー出力ボタン
- タップで音声出力先をスピーカーにする。
- スピーカー出力が選択されている場合、アイコンをスピーカー出力中アイコンに変更。
- イヤホン出力ボタン
- タップで音声出力先をイヤホンにする。
- イヤホン出力が選択されている場合、アイコンをイヤホン出力中アイコンに変更。
- 通話時間タイマー
- 自身が通話に参加したタイミングでタイマーを開始。
- 表示形式は"00:00:00"で「時間:分:秒」。

#### メンバー
メンバータブをタップで、グループメンバー画面を表示。

**グループメンバー画面**
- 3連タブ
- チャット
- タブをタップで、グループチャット画面に移動。
- ボイチャ
- タブをタップで、グループボイチャ画面に移動。
- メンバー
- タブをタップしても、動作はしない。
- メンバーリスト
* メンバーのアイコン、ユーザーネーム、ユーザーIDを表示。
いずれかタップ時、対象メンバーのプロフィールページに移動。
- フレンド申請ボタン
* フレンド申請ボタンをタップで、ユーザーにフレンド申請を送信し、ボタンを申請中ボタンに変更。
* 申請中ボタンを再度タップで、"フレンド申請を取り消しを取りやめますか？"モーダルを表示する。
- 取り消す
- 送信されたフレンド申請を取り消し、ボタンをフレンド申請ボタンに変更する。
- キャンセル
- グループメンバー画面に戻る。
* 既にフレンドのメンバーの場合、フレンドボタンを表示する。
* ボタンタップで、"フレンドを解除しますか？"モーダルを表示する。
* 解除する
* 対象のユーザーをフレンドリストから削除し、フレンドボタンを、フレンド申請ボタンに変更する。
* キャンセル
* グループメンバー画面に戻る。
- グループ招待ボタン
- **グループ招待画面**
- グループ招待URL
- グループ招待URL文章：**"考える"**
- URLをコピー
- タップで、"URLをコピーしました"小ポップアップ表示。
- URLをLINEで共有
- LINE起動
- > ゲーマのためのボイスチャットアプリ『VOLBOX』で、フレンドと一緒にプレイしよう！【URL】
- URLをその他のアプリで共有
- 共有先アプリを選択
- 選択アプリを起動
- フレンド招待ボタン
- タップで、グループフレンド招待画面に移動。
**グループフレンド招待画面**
- 上部ナビゲーションタイトルの"フレンドを選択"テキストを表示。
- チェックボックスに✓が入った場合、テキストを"選択中 (選択中人数)"に変更し、✓された数にリアルタイムで対応する。
- 検索フォーム
* 検索フォームの中に"名前・IDで検索する"テキストをグレーで表示。
* 検索フォーム選択時、"名前・IDで検索する"テキストを削除し、入力文字削除ボタン(タップでフォーム内入力文字を全削除)を検索フォーム右端に配置。また、フレンド一覧を非表示にする。
* フォームに入力された文字から予測されるユーザーを予測候補として表示。検索対象はユーザーID,ユーザー名どちらも可能。
- フレンド表示
- グループ未参加のフレンドを表示。
- ユーザーアイコン、ユーザーID、ユーザーネームを表示。
- チェックボックス
- 選択された場合、チェックマークを表示。
- 選択解除された場合、チェックボックスを表示。
- 選択中フレンド半カラム
- チェックボックスが1つ以上選択されている場合、選択中のフレンドを表示する半カラムを表示。左右にスクロール可能。
- ✔が0になった場合、半カラムを非表示にする。
- ユーザーアイコン,ユーザーネーム
- 選択されたフレンドから順に左詰めで表示される。最大6人まで表示され、左右スクロール可能。
- 削除ボタン
- タップで対象ユーザーの選択を解除し、半カラムから削除
- 招待ボタン
- 押せない場合
- フレンドが一人も選択されていない。
- ボタンをグレーアウトにし、ボタンとしての機能を持たせない。
- それ以外の場合
- グレーアウトを解除し、タッパブルに。
- タップで選択されたユーザーに、"(送信元ユーザー名)さんから(グループ名)への招待が届いています！"を送信する。
- "招待が完了しました"小ポップアップを表示。
- ボイチャ一覧画面に戻る。

- 3点リーダー
- グループ3点リーダー半モーダルを表示する。
- **グループ3点リーダー半モーダル**
- ①グループ情報を編集する
- ボイチャルーム情報編集ボタン
- ボイチャルームアイコン
- 現在設定されているルームアイコンを表示。
- 変更ボタンタップでギャラリーを起動。
- 選択された画像編集画面(リサイズ、回転等)(アプデ実装)
- 保存ボタンタップで、選択された画像をルームアイコンに更新。
- ボイチャルーム編集画面に戻る。
- ルーム名変更フォーム
- ※ルーム名条件：20文字以下。
- 現在のルーム名をフォーム内に入力された状態にする。
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- ① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- ②フォーム右下のカウント文字を赤文字に変更。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
- 入室パスワード(鍵付きルームの場合のみ)
- **※鍵付きルームの場合のみ**、入室パスワードを表示する。
- ユーザーが鍵付きボイチャルーム作成者、グループ作成者、権限が付与されたユーザー(アプデ実装)の場合
- タップで入室パスワード変更画面に移動。
- **入室パスワード変更画面**
- 現在の入室パスワード
- テキストで表示。
- 新しい入室パスワード入力フォーム
- ※入室パスワード入力条件：20文字以下の英数字
* フォームがタップされると、フォーム枠を紫色に切り替え、USキーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示し、色は常に紫色。
* フォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* フォーム枠を赤色に変更し、以下の警告文を表示。
* ①文字数が21文字以上になった場合
- 警告文、"20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- ②英数字以外の入力がされた場合
- "アルファベット、数字のみが使用できます"を表示。
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。
- 完了ボタン
- 押せない場合
- a 半角英数字以外の文字が使用されている場合
- 警告文、"アルファベット、数字のみが使用できます"を表示。
- b 20文字以上の入力がされた場合
- 警告文、"20文字以内で入力してください"を表示。
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- それ以外の場合、ボタンを有効化
- 完了ボタンタップで、入室パスワードを更新し、ボイチャルーム情報編集画面に戻る。

- 保存ボタン
- 押せない場合
- 20文字以上の入力がされた場合
- 警告文、"20文字以下で入力してください"を表示する。
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- それ以外の場合、ボタンを有効化
- 完了ボタンタップで、ボイチャルーム名を更新し、通話ルーム画面に戻る。
- ②グループから脱退する
- "グループから脱退しますか？"モーダルを表示する。
- 脱退
- 対象グループから退出し、チャット一覧画面に移動する。
- キャンセル
- グループメンバー画面に戻る。

---

# 7 プロフィール

## 7-1 プロフィール画面

### 7-1-1 ユーザーアイコン
ユーザーアイコンを表示。表示は角丸。
タップでアイコンを拡大表示。
ここにアイコン変更できるボタンを配置。(アプデ後実装?)
### 7-1-2 ユーザーネーム
ユーザーネームを表示。
### 7-1-3 ユーザーID
ユーザーIDを表示。フォントカラー：グレー
### 7-1-4 自己紹介文
自己紹介文を表示。
自己紹介文条件：200文字以内
### 7-1-5 プロフィール編集ボタン
タップでプロフィール編集画面に移動。

**プロフィール編集画面**
#### 7-1-5-1 ユーザーアイコン変更
- アイコン編集ボタン
- アイコン右下に配置。
- タップ時、カメラロールを起動し、選択された画像にユーザーアイコンを更新する。
#### 7-1-5-2 ユーザーネーム変更
ユーザーネーム条件：1文字以上20文字以下
- ユーザーネーム入力フォーム
- フォームは現在のユーザーネームが入力されている状態。
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。
* ユーザーネームフォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー
* 文字数が21文字以上になった場合
① フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
②フォーム右下のカウント文字を赤文字に変更。

- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

#### 7-1-5-3 自己紹介文変更
- 自己紹介文フォーム
- 自己紹介文フォーム条件：200文字以下
- フォームには現在の自己紹介文が入力されている状態。
* 自己紹介文フォームの右下に200文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動。フォーム枠の色はフォームから選択が外れると消える。
* エラー
* 文字数が201文字以上になった場合
　① フォーム枠を赤色に変更し、警告文、"200文字以下で入力してください"を表示。
　②フォーム右下のカウント文字を赤文字に変更。

- 条件が満たされていないにも関わらず、非選択状態になった場合
　 ①フォーム枠の紫色は消し、警告文の表示を残す。

#### 7-1-5-4 プロフィール編集を保存
- 保存ボタン
* 押せない場合
* 従来のユーザーネーム、自己紹介文から変更がされていない。
* どちらか、もしくは両方のフォームがエラー状態にある。
* 押せない場合、ボタンをグレーアウト&ボタン機能を無効化する。
*　それ以外の場合
*　ボタンを有効化
*　タップで情報を更新し、プロフィール画面に戻る。

#### 7-1-5-5 プロフィール編集画面から離脱
- 戻るボタン
- プロフィール画面に戻る
- エラー
- ユーザーアイコン、ユーザーネーム、自己紹介文の情報が1つ以上変更されいる場合、"変更を破棄しますか?"モーダルを表示。
- 破棄
- 変更を破棄し、プロフィール画面に戻る。
- キャンセル
- プロフィール編集画面に留まる。

### 7-1-6 QRコード表示
- QRコード表示ボタン
- QRコード半モーダルを表示
- **QRコード半モーダル**
- #### 7-1-6-1 QRコード
- ユーザーID情報を含んだQRコードを表示。
- 中央は円状にくり抜き、QRコード中心アイコンを表示。
- #### 7-1-6-2 ユーザーID表示
- 「ID:"ユーザーID"」のフォーマットでユーザーIDを表示。
- #### 7-1-6-3 IDコピーボタン
- タップでユーザーIDをクリップボードにコピーする。
- "IDをコピーしました"ポップアップを表示。
- #### 7-1-6-4 画像保存ボタン
- タップで自身のQRコード画像を保存する。
- "画像を保存しました"ポップアップを表示。
- #### 7-1-6-5 ラインで共有ボタン
- LINEアプリを起動。
- 招待リンクを共有。
- > ゲーマのためのボイスチャットアプリ『VOLBOX』で、フレンドと一緒にプレイしよう！【URL】
- LINEが未インストールの場合：アプリストアでLINEを表示。**(調べます)**
- #### 7-1-6-6 その他で共有ボタン
- 共有先アプリを表示
- > ゲーマのためのボイスチャットアプリ『VOLBOX』で、フレンドと一緒にプレイしよう！【URL】
- #### 7-1-6-7 キャンセルボタン
- 半モーダルを閉じる。モーダル外の画面をタップでも半モーダルを閉じられる。

### 7-1-7 設定ボタン
タップで設定画面に移動。

#### 設定画面
各ボタンの範囲は横一列。(アイコン、テキスト以外の部分をタップしても反応する。)
#### 7-1-7-1 通知設定
タップで通知設定画面に移動
- ##### 通知設定画面
各設定項目のボタン種類：トグルスイッチ

- フレンド申請通知
- 説明文："フレンド申請が届いたときや承認されたときに通知します"
- メッセージ通知
- 説明文："フレンドやグループからメッセージが届いた時に通知します"
- ボイスチャット入室通知
- 説明文："フレンドやグループメンバーがボイスチャットに入室したときに通知します"
- スタンプ招待通知
- 説明文："フレンドやグループメンバーからボイスチャットへのスタンプ招待が届くと通知します"

#### 7-1-7-2 ブロックリスト
ブロックしたユーザーを表示。
- ブロック解除ボタン
- ボタンタップで、"(ユーザー名)さんのブロックを解除しますか?"モーダルを表示。
- 解除する
- ”ブロックを解除しました"ポップアップを表示。
- 取り消す
- ブロックし直す。
- 取り消すを押さない
- ブロックを解除し、ブロックリストから削除する。
- 画面に移動。
- キャンセル
- ブロックリスト画面に戻る。

#### 7-1-7-3 アカウント情報
タップでアカウント情報画面に移動。

**アカウント情報画面**
##### 7-1-7-3-1 ユーザーID
ユーザーIDを「@(ユーザーID)」の形式で表示。
- ユーザーID変更ボタン
- ボタンタップでユーザーID変更画面に移動。
- ①現在のユーザーID
- 現在のユーザーIDをテキスト表示。
- ②新しいユーザーID
- ユーザーID条件：半角英数字と_(アンダーバー)のみ使用でき、15文字以下であり、他のユーザーが使用していないこと。
- 入力フォーム内に"@"をテキスト表示。

* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。
* ユーザーネームフォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が16文字以上になった場合
- フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- 半角英数字と_(アンダーバー)以外の文字が使用されている場合
- 半角英数字、およびアンダーバーのみ使用可能できます。
- 条件が満たされていないにも関わらず、非選択状態になった場合
→フォーム枠の紫色は消し、警告文の表示を残す。
- ③登録(次へ/保存?)ボタン
- 押せない場合
- a 半角英数字と_(アンダーバー)以外の文字が使用されている場合
- "半角英数字、およびアンダーバー(_)のみ使用可能です。"
- b 16文字以上の入力がされた場合
- "15文字以内で入力してください"
- c 他のユーザーが使用しているIDが入力された場合
- "このIDは既に使用されています"
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- 上記以外の場合
- ボタンを有効化
- 登録ボタンタップで、新ユーザーIDに更新し、アカウント設定画面に移動。

##### 7-1-7-3-2 電話番号
電話番号を「+(国番号) (電話番号)」での形式で表示。
- 電話番号変更ボタン
- ボタンタップで電話番号変更画面に移動。
##### 電話番号変更画面
●電話番号条件：選択された国番号と対応する桁の数字
- 現在の電話番号
「+(国番号) (電話番号)」での形式でテキスト表示。
- 新しい電話番号入力フォーム
- ①新電話番号入力フォーム
* フォームがタップされると、フォーム枠を紫色に切り替え、数字キーボードを起動。
* フォームから選択が外れた場合、フォームの枠色を削除する。
* カーソルバーを表示。
- エラー時、警告文表示+フォーム枠を赤色に切り替える。
- 選択された国番号と対応する桁数でない場合
- "有効な電話番号を入力してください。"
- 既に使用されている電話番号が入力された場合
- "この電話番号は登録済みです。"
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠色は消し、警告文の表示を残す。
- ②国旗画像
選択された国番号に対応する国旗画像を表示。
- ③国旗選択(プルダウン式)ボタン
タップで国番号選択画面へ移動。
##### 国選択画面
- 国旗画像
- 国番号
- 国名
- 検索フォーム
- 検索フォームタップ時、USキーボードを起動。国名での検索のみに対応。(国識別番号での検索には対応しない。)
- 文字入力時、その入力から予測される国を予測候補として表示。
- 国旗画像、国番号、国名だけでなく各横一列の領域がボタンの機能を持ち、国が選択されると、電話番号選択画面に戻る。
　国選択画面への移動以前に、新電話番号入力フォームに情報を入力されている場合、その入力内容を保持。

- ④登録(次へ/保存?)ボタン
- 押せない場合
- a 選択された国番号と対応する桁数でない場合
- b 既に使用されている電話番号が入力された場合
- 押せない場合には、ボタンをグレーアウトさせ、ボタンの機能を持たせない。
- 上記以外の場合
- ボタンを有効化
- 登録ボタンタップで、入力された電話番号宛に認証コードをSMSで送信し、認証画面に移動。

##### 電話番号認証画面
画面移動時に数字キーボードを起動。
- コード有効期限タイマー
- コード有効期限(10分)のカウントダウンタイマーを"あと○分○秒でコードが無効になります。"を表示。
- 認証コード入力フォーム
- 未入力かつ非選択状態のフォームは塗りつぶし(背景)をグレーアウト(灰色)にする。
- 選択状態のフォーム枠を紫色に切り替え、選択が外れたら元に戻す。
- 最初から1桁目のフォームが選択されている状態で、1桁目が未入力の場合、2桁目以降を選択することはできないが、4桁入力した後に4桁目以前のフォームを選択するのは可能

- 確認ボタン
- 4桁入力されていないとボタンとして機能しない&グレーアウト。
- 認証コードが誤っている場合
- フォームの下に警告文"認証コードが正しくありません"を表示。
- 認証コードが正しい場合
- 新しい電話番号に更新し、アカウント情報設定画面に移動。
- 再送信ボタン
- 画面移動後から、再送信可能まで1分間(60秒)のカウントダウンタイマーを開始し、カウントダウン中はボタンをグレーアウト、ボタンを無効化。
- タイマーが終了次第、グレーアウトを解除しボタンを有効化。
- ボタンがタップで再度コードを送信し、1分間のカウントダウンタイマー開始する。
- グレーアウト、ボタン無効化。
- 戻るボタン
- 戻るボタンは常にタップ可能。タップで、入力情報を修正しますか？の確認モーダルを表示。
- 電話番号変更画面に移動。新電話番号入力フォームに入力された情報を反映。

##### 7-1-7-3-3 パスワード
パスワードを表示。
- 現在のパスワードをテキスト表示。
- 新しいパスワードを入力するフォーム
　パスワード条件：20文字以内の半角英数文字
* フォームがタップされると、フォーム枠を紫色に切り替え、キーボードを起動し、フォーム枠の色はフォームから選択が外れると消える。
* カーソルバーを表示。
* ユーザーネームフォームの右下に20文字までの残り文字数、を表示し、文字入力がされるごとにリアルタイムで残り文字数表示を反映させる。
* エラー処理
* 文字数が21文字以上になった場合
- フォーム枠を赤色に変更し、警告文、"20文字以下で入力してください"を表示。
- フォーム右下のカウント文字を赤文字に変更。
- 半角英数文字以外が入力された場合
- "半角英数文字のみ使用できます"
- 条件が満たされていないにも関わらず、非選択状態になった場合
- フォーム枠の紫色は消し、警告文の表示を残す。

#### 7-1-7-4 利用規約
タップで利用規約画面に移動。**(文章作成)**

#### 7-1-7-5 プライバシーポリシー
タップでプライバシーポリシー画面に移動。**(文章作成)**

#### 7-1-7-5 ログアウト
タップで、"本当にログアウトしますか?"モーダルを表示。
- ログアウト
- ログイン画面へ移動。
- キャンセル
- 設定画面に戻る。
---

## プロフィール画面(相手)

### ①フレンド時プロフィール画面
#### ユーザーアイコン
相手のユーザーアイコンを表示。表示は角丸。
タップでアイコンを拡大表示。
#### ユーザーネーム
相手のユーザーネームを表示。
#### ユーザーID
相手のユーザーIDを表示。フォントカラー：グレー
#### 自己紹介文
相手の自己紹介文を表示。
#### チャットボタン
タップで相手とのチャット画面に移動。
#### フレンドボタン
- タップで、"フレンドを解除しますか?"モーダルを表示する。
- 解除
- フレンドリストから削除し、フレンドとのチャットルームを削除。未フレンド時プロフィール画面に移動。
- キャンセル："フレンド時プロフィール画面"に戻る。
#### 設定ボタン
- ユーザーを通報する
- 通報用Google Formへ移動。(**フォーム作成する**)
- ユーザーをブロックする
- ブロックの定義：双方間でメッセージ交換不可。相手にブロックした時に通知は行かない。ブロックしたユーザーがグループにいても表示はする。
- ”本当にブロックしますか？ブロックをした場合、このユーザーからのメッセージは表示されなくなります。ブロックをしても相手ユーザーには通知はされません。また、ブロックは相手ユーザーのプロフィール画面からいつでも解除できます。"モーダルを表示する。
- ブロック
- "ブロックしました"ポップアップを表示。
- フレンドリストから削除
- フレンドとのチャットルームを削除
- ブロックリストに追加
- ブロック時プロフィール画面に移動。
- キャンセル
- フレンド時プロフィール画面に戻る。

### ②未フレンド時プロフィール画面
#### ユーザーアイコン
相手のユーザーアイコンを表示。表示は角丸。
タップでアイコンを拡大表示。
#### ユーザーネーム
相手のユーザーネームを表示。
#### ユーザーID
相手のユーザーIDを表示。フォントカラー：グレー
#### 自己紹介文
相手の自己紹介文を表示。
#### フレンド申請ボタン
- ”フレンド申請を送信しました”ポップアップを表示”
- フレンド申請を送信する。
- フレンド申請中プロフィール画面に移動する。
#### 設定ボタン
- ユーザーを通報する
- 通報用Google Formへ移動。(**フォーム作成する**)
- ユーザーをブロックする
- ブロックの定義：双方間でメッセージ交換不可。相手にブロックした時に通知は行かない。ブロックしたユーザーがグループにいても表示はする。
- ”本当にブロックしますか？ブロックをした場合、このユーザーからのメッセージは表示されなくなります。ブロックをしても相手ユーザーには通知はされません。また、ブロックは相手ユーザーのプロフィール画面からいつでも解除できます。”モーダルを表示する。
- ブロックする
- "(ユーザーネーム)さんをブロックしました"ポップアップを表示
- 取り消す
- ブロックを解除する
- 取り消すを押さない
- フレンドリストから削除
- フレンドとのチャットルームを削除
- ブロックリストに追加
- ブロック時プロフィール画面に移動。
- キャンセルする
- 未フレンド時プロフィール画面に戻る。
### ③フレンド申請中プロフィール画面
#### ユーザーアイコン
相手のユーザーアイコンを表示。表示は角丸。
タップでアイコンを拡大表示。
#### ユーザーネーム
相手のユーザーネームを表示。
#### ユーザーID
相手のユーザーIDを表示。フォントカラー：グレー
#### 自己紹介文
相手の自己紹介文を表示。
#### フレンド申請中ボタン
タップで、"フレンド申請を取り消しますか?"モーダルを表示。
- 取り消す
- フレンド申請を取り消す。
- 未フレンド時画面に移動。
- キャンセル：
- フレンド申請中プロフィール画面に移動する。
#### 設定ボタン
- ユーザーを通報する
- 通報用Google Formへ移動。(**フォーム作成する**)
- ユーザーをブロックする
- ブロックの定義：双方間でメッセージ交換不可。相手にブロックした時に通知は行かない。ブロックしたユーザーがグループにいても表示はする。
- ”本当にブロックしますか？ブロックをした場合、このユーザーからのメッセージは表示されなくなります。ブロックをしても相手ユーザーには通知はされません。また、ブロックは相手ユーザーのプロフィール画面からいつでも解除できます。”モーダルを表示する。
- ブロックする
- "ブロックしました"ポップアップを表示
- 取り消す
- ブロックを解除する
- 取り消すを押さない
- フレンドリストから削除
- フレンドとのチャットルームを削除
- ブロックリストに追加
- ブロック時プロフィール画面に移動。
- キャンセルする
- フレンド申請中プロフィール画面に戻る。
### ④ブロック時
#### ユーザーアイコン
相手のユーザーアイコンを表示。表示は角丸。
タップでアイコンを拡大表示。
#### ユーザーネーム
相手のユーザーネームを表示。
#### ユーザーID
相手のユーザーIDを表示。フォントカラー：グレー
#### 自己紹介文
相手の自己紹介文を表示。
#### ブロック中ボタン
タップで、"ブロックを解除しますか?"モーダルを表示。
- 解除する
- ”ブロックを解除しました"ポップアップを表示。
- 取り消す
- ブロックし直す。
- 取り消すを押さない
- ブロックを解除し、ブロックリストから削除する。
- 未フレンド時画面に移動。
- キャンセル
- ブロック中プロフィール画面に戻る。
#### 設定ボタン
- ユーザーを通報する
- 通報用Google Formへ移動。(**フォーム作成する**)
- ユーザーのブロックを解除する
- "ユーザーのブロックを解除しますか?"モーダルを表示
- 解除する
- ”ブロックを解除しました"ポップアップを表示。
- 取り消す
- ブロックし直す。
- 取り消すを押さない
- ブロックを解除し、ブロックリストから削除する。
- 未フレンド時画面に移動。
- キャンセル
- ブロック中プロフィール画面に戻る。

---

$

### ポップアップ

QRコード追加時:〇〇へフレンド申請を送信しました。

- フレンド申請取り消し
- (ユーザーネーム)さんへのフレンド申請を取り消しますか？

- ブロック
- ”本当にブロックしますか？ブロックをした場合、このユーザーからのメッセージは表示されなくなります。ブロックをしても相手ユーザーには通知はされません。また、ブロックは相手ユーザーのプロフィール画面からいつでも解除できます。”
- (ユーザーネーム)さんをブロックしました。
- 取り消す
- ブロックを解除。

(ユーザーネーム)のブロックを解除しますか？
→(ユーザーネーム)のブロックを解除しました。(取り消す)

QRコードが見つかりません。
IDをコピーしました

スタンプ招待送信時：(ユーザーネーム)へ(グループ名)への招待を送信しました