ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「妖怪ウォッチメダルウォーズ」画面UIまとめ (タイトル、チュートリアル、メニュー)

こんにちは、ちょこきなこです。

 

先日リリースされた妖怪ウォッチの新作

妖怪ウォッチ メダルウォーズ」の画面をキャプチャーしました。

 

タイトル画面

まずはタイトル画面から

f:id:appgameui:20190731085005p:image

 

 

 

 

 タイトル画面には「連携」と「設定」ボタンがあります。

f:id:appgameui:20190804220725p:plain

 

設定画面

「設定」ボタン押すと…

アカウント情報/ゲームのせってい/ゲーム情報の画面があります。

「ゲームのせってい」タブはこのような画面です。

f:id:appgameui:20190731085022p:image

 

「ゲーム情報」の画面はこのようになっていました。

f:id:appgameui:20190731085035p:image

 

「連携」ボタンはアカウント連携機能です。

f:id:appgameui:20190804220845p:plain

 

連携画面 

国内で代表的なSNSプラットフォームとiOS標準機能のリーダーボードが提案されます。

f:id:appgameui:20190731085106p:image

 

 

タイトル画面に戻りまして…

f:id:appgameui:20190731085005p:image

 

 

初回起動時はデータのダウンロードが入ります。

妖怪ウォッチメダルウォーズ データダウンロード

 

データのダウンロード中は漫画でチュートリアルが表示されます。

 

 

f:id:appgameui:20190810162238p:plain

アカウント選択画面

妖怪ウォッチメダルウォーズ データ作成

 

チュートリアル

OPムービー

OPムービーが流れます。

妖怪ウォッチメダルウォーズ

 

アバター作成画面 

ムービー後、アバターを作成します。

妖怪ウォッチメダルウォーズ 性別選択

見た目をカスタマイズして…

妖怪ウォッチメダルウォーズ アバター作成

 

最後に名前を入力します。

妖怪ウォッチメダルウォーズ プレイヤー名

 

章タイトル画面

名前を入力したらゲームが始まります。

妖怪ウォッチメダルウォーズ 章タイトル


イベントシーン

妖怪ウォッチメダルウォーズ チュートリアル

 

ゲームのメインとなる戦闘パートのチュートリアルが始まります。

妖怪ウォッチメダルウォーズ チュートリアル

 

戦闘が終わり、アドベンチャーパートです。

先程のイベントシーンと異なり、上下に帯があったり、メッセージを自動で送る機能が実装されています。

妖怪ウォッチメダルウォーズ チュートリアル

 

チュートリアルが終わったらムービーで締めます。

◆できればgif

妖怪ウォッチメダルウォーズ チュートリアル


以上がチュートリアルでした。

 

f:id:appgameui:20190731085005p:image

 

アカウント選択画面(ロード)

 

さて、チュートリアルを終わらせて、改めてゲームをスタートしようとするとアカウント選択ができます。
アカウントは最大3つまで作成可能なようです。

f:id:appgameui:20190731085156p:image

 

いずれかのアカウントを選択すると、ロード画面を挟みホーム画面に遷移します。

f:id:appgameui:20190731085225p:image

 

ホーム画面

こちらがホーム画面(自分の部屋)です。

f:id:appgameui:20190731085237p:image

 

ここでお知らせがいくつか表示されることがあります。

 

f:id:appgameui:20190807235536p:plain


閉じます

さて、ホーム画面は「ニュース」「挑戦可能」「その他」などなど色々な機能があります。

 

ニュース画面


まずは「ニュース」から見ていきたいと思います。

f:id:appgameui:20190731221046p:plain

 

ここには開催中のイベントやキャンペーンなどの情報が並びます。

f:id:appgameui:20190731085331p:image

 

いずれかのバナーをタップすると、公式ページに飛んだり…

f:id:appgameui:20190731085401p:image

 

アプリ内の関連画面に遷移します。

f:id:appgameui:20190731085512p:image

ニュースの画面は以上です。

 

挑戦可能

 

次に「挑戦可能」のボタンを見てみます。

f:id:appgameui:20190731222138p:plain

 

挑戦可能のボタンをタップすると、PvPの画面に遷移します。

f:id:appgameui:20190731085617p:image

タップするとその先のページに遷移するのですが、ここから先は階層が深くなりそうなので後にします。

 

その他

f:id:appgameui:20190810125121p:plain


続いて「その他」のメニューを見てみます。

f:id:appgameui:20190731085710p:image

 

メニュー内容を紹介してみます。左上から順に

1:にっき

2:一緒に過ごす妖怪

3:模様替え

4:自分の部屋を撮る

5:せってい

6:ヘルプ

7:実績

以上の7つがならびます。

では、順に紹介します。

 

 

1「にっき」

にっき画面を見てみます。

f:id:appgameui:20190805234027p:plain

f:id:appgameui:20190731085745p:image

 

にっきの下位階層の画面です。閲覧可能なストーリーがリストで表示されます。

f:id:appgameui:20190731085835p:image

 

いずれかのストーリーを選択すると、アドベンチャーパートが始まります。

f:id:appgameui:20190731085857p:image

 

アドベンチャーパートの間に戦闘が入る場合、戦闘の代わりにこのような画面が表示されます。

f:id:appgameui:20190731085938p:image

 

 

画面が切り替わると再度アドベンチャーパートに戻ります。

f:id:appgameui:20190731090018p:image

にっきに関しては以上です。

 

 

2「一緒に過ごす妖怪」 

f:id:appgameui:20190805234103p:plain

次に2つ目の「一緒に過ごす妖怪」メニューです。
これはホーム画面に表示する妖怪を設定する機能です。

タップすると所持している妖怪の一覧が表示されます。

f:id:appgameui:20190731090114p:image

 

ソート項目はレベル順/ランク順/タイプ順/獲得順の4つがあります。

f:id:appgameui:20190731090236p:image

 

妖怪を選択すると、選択された妖怪がホーム画面に表示されます。

f:id:appgameui:20190731130459p:image

「一緒に過ごす妖怪」は以上です。

 

3「模様替え」 

f:id:appgameui:20190805235542p:plain

「模様替え」のメニューです。下にカテゴリが表示されています。

f:id:appgameui:20190731090320p:image

壁/床/窓/机/ベッド/本棚/クローゼット/テーブル/トロフィー棚/部屋の照明/ベッド横のライト/スタンド、12箇所がカスタム可能です。

 

f:id:appgameui:20190810131858p:plain



 

例えば、壁のカテゴリを選択すると壁のデザインの一覧が表示されます。

f:id:appgameui:20190731090404p:image

 

 

模様替えを実行するとウィスパーが変更完了を通知します。

f:id:appgameui:20190731090422p:image

 

また、この画面から未所持の家具を購入することも可能です。

f:id:appgameui:20190731090521p:image

 

 

購入完了するとウィスパーが購入完了を通知します。

f:id:appgameui:20190731090626p:image

 

 

家具が購入できない場合、必要なコインの数は赤文字で表示されます。

f:id:appgameui:20190731090653p:image

 

コインが不足している状態で「購入ボタン」を押すとショップに遷移するか聞かれます。

f:id:appgameui:20190731090701p:image

※ショップ画面も大きいので後にします。

模様替えのメニューは以上です。

 

4「自分の部屋を撮る」

f:id:appgameui:20190805235632p:plain 

次に「自分の部屋の写真を撮る」を紹介します。

機能としてはボタン画像などを表示しないで部屋の撮影を行います。

f:id:appgameui:20190731090756p:image

 

AR機能の他に、画面の縦横を入れ替えて全体を撮影することも可能です。

f:id:appgameui:20190731090811p:image

「自分の部屋を撮る」は以上です。

 

 

5「設定」

f:id:appgameui:20190810132119p:plain



「設定」はアカウント情報/ゲームのせってい/ゲーム情報の3つのタブがあります。

まずはアカウント情報画面から見ていきます。

f:id:appgameui:20190810132422p:plain

 

少し下まであります。

f:id:appgameui:20190810132853p:plain

 

登録番号などの右にあるアイコンはコピー機能を有しています。

f:id:appgameui:20190810132931p:plain



f:id:appgameui:20190810133044p:plain



 

アカウント変更のボタンを押すと…

f:id:appgameui:20190810133206p:plain
f:id:appgameui:20190810133133p:plain



タイトル画面に戻り、アカウントを切り替えることが出来ます。
f:id:appgameui:20190731085005p:image

 

さて、隣のせっていタブの中を見ていきます。

f:id:appgameui:20190731091448p:image

f:id:appgameui:20190731091452p:image

f:id:appgameui:20190731091457p:image

項目は

1:BGM

2:効果音

3:チェンジ時の震度

4:画面オフ防止

5:グラフィック品質

6:グラフィックフレーム

7:解像度

8:画面エフェクト

9:アンチエイリアシング

10:全体の通知設定

11:お知らせの通知設定

12:ゲームの通知設定

以上の12項目がサウンド、システム設定、ゲームのお知らせ、の3つのカテゴリに分類されています。

 

 

システム情報の中を見てみます。

f:id:appgameui:20190731091530p:image

 

コミュニティ、カスタマーサポート、利用規約、プライバシーポリシーの4つのメニューがあります。

コミュニティはTwitterに遷移しました。

f:id:appgameui:20190731091548p:image

 

カスタマーサポート画面。

f:id:appgameui:20190731091613p:image

 

利用規約画面。

f:id:appgameui:20190731091629p:image

 

プライバシーポリシー画面。

f:id:appgameui:20190731091635p:image

システム情報、ならびに「せってい」の画面は以上です。

 

 

6「ヘルプ画面」

f:id:appgameui:20190810133311p:plain
では「ヘルプ」を見てみます。

このように多くの見出しが並びます。全部で15項目ありました。

f:id:appgameui:20190731091741p:image

 

中をのぞいてみると、画像だけではなく、動画でゲーム内容を説明しています。

f:id:appgameui:20190731091752p:image

ヘルプは以上です。

 

7「実績」

f:id:appgameui:20190810133441p:plain



最後に実績画面です。

ストーリー、ステージ、プレイヤー、アイテム、PVP、キャラクターの6つカテゴリに分かれ、合計で187個の実績が用意されています。

f:id:appgameui:20190731092158p:image

 

中を見てみると、クエストの内容や報酬、進捗率、報酬を受け取るボタンなどがまとまったリストが並べられています。

f:id:appgameui:20190731092205p:image

 

実績のソートは全ての実績/達成した実績/進行中の実績の3つです。

f:id:appgameui:20190731092231p:image

f:id:appgameui:20190731092248p:image

f:id:appgameui:20190731092325p:image

f:id:appgameui:20190731092338p:image

長くなりましたが、実績メニュー、ならびにその他メニューは以上です。

 

次は「Mirrativ」です。

f:id:appgameui:20190810133533p:plain
あまり見慣れないかもしれませんが「Mirrativ」はゲーム配信、視聴サービスのアプリです。

f:id:appgameui:20190731091250p:image 

今回は以上です。

タイトル画面、チュートリアル、一部メニューを紹介しました。

 

一度にまとめると把握しづらかったり、閲覧性が下がったり、アクセスに時間がかかるなどするので分割しました。