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

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

「妖怪ウォッチメダルウォーズ」画面UIまとめ (ホーム)

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

 

先日の続きです。

今回は「妖怪ウォッチメダルウォーズ」のホーム画面のメニューを紹介します。ホーム画面には以下のような機能があります。

 


「模様替え」…

f:id:appgameui:20190731092537p:image

 

「カレンダー」「トロフィー棚」…

f:id:appgameui:20190731092545p:image

 

「クローゼット」「妖怪大辞典」…

f:id:appgameui:20190731092556p:image

 

「メール」「冒険」…

f:id:appgameui:20190731092603p:image

 

最後に「トレジャータワー」

f:id:appgameui:20190731092630p:image

です。

 

 

まとめると

1「模様替え」
2「カレンダー」
3「トロフィー棚」
4「クローゼット」
5「妖怪大辞典」
6「メール」
7「冒険」
8「トレジャータワー」

以上、8つの機能があります。

 

順に見ていきます。

模様替え


「模様替え」…は前回も紹介しましたが…

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

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

 

トロフィー棚

「トロフィー棚」はこんな感じです

f:id:appgameui:20190731092737p:image

獲得したアイテムを飾り付けることができる機能です。
これだけ!シンプル!

 

カレンダー

「カレンダー」はログイン報酬の確認でした。

f:id:appgameui:20190731092829p:image

 

 

 

妖怪大辞典

f:id:appgameui:20190810165856p:plain

 

「妖怪大辞典」はいわゆる図鑑画面です

f:id:appgameui:20190731092913p:image

 

f:id:appgameui:20190810165941p:plain 

虫眼鏡のボタンを選択すると、詳細が見れます。

f:id:appgameui:20190731093037p:image

 

右側の3つのアイコンは技のアイコンです。長押しすると詳細情報が表示されます。

 

f:id:appgameui:20190810170115p:plain

f:id:appgameui:20190731093017p:image

 

 

f:id:appgameui:20190810170150p:plain
「?」のマークを押すと獲得方法が表示されます。

f:id:appgameui:20190731093006p:image

以上が妖怪の詳細情報でした。

 

次にウィンドウを閉じて、先程の画面に戻りまして…

f:id:appgameui:20190731092913p:image

 

 

f:id:appgameui:20190810170240p:plain
このボタンを押してみます。

すると図鑑の末尾にジャンプします。

f:id:appgameui:20190731093157p:image

 

 

f:id:appgameui:20190810170311p:plain

「封印ページ」のボタンを押すと…

f:id:appgameui:20190731093204p:image

 

以上が「妖怪大辞典」の画面でした。

 

 

クローゼット

f:id:appgameui:20190810170340p:plain



 

「クローゼット」の画面を見ていきます。

f:id:appgameui:20190731093337p:image

 

編集できるパーツを見てみます。

 

メイクアップ

髪型

髪型のパーツはこんな感じです。

f:id:appgameui:20190731093351p:image

 

f:id:appgameui:20190731093434p:image

着替え

上着

「着替え」の上着

f:id:appgameui:20190731093459p:image

 

めがね

f:id:appgameui:20190731093632p:image

 

ズボン

f:id:appgameui:20190731093644p:image

 

 

帽子

f:id:appgameui:20190731093700p:image

 

f:id:appgameui:20190731093711p:image

1:髪型
2:顔
3:上着
4:めがね
5:ズボン
6:帽子
7:靴

以上の7か所が変更可能な仕様です。

 

 

メール

f:id:appgameui:20190810170602p:plain 

「メール」画面です。

プレゼント/ともだち/お知らせの3つで分かれています。


プレゼント

まずは「プレゼント」です。

f:id:appgameui:20190731104411p:image

 

ともだち

クローバーが届いていているとリストで表示されます。

f:id:appgameui:20190731132658p:image

 

受け取るとこんな感じです。

f:id:appgameui:20190731132709p:image

 

受け取り終わると消えます。

f:id:appgameui:20190731104418p:image

 

お知らせ

f:id:appgameui:20190731104441p:image

以上がメール機能の主な画面でした。

 

 

トレジャータワー

f:id:appgameui:20190810170722p:plain

 

「トレジャータワー」あまり聞いたことないですが、パネルミッションのようなものかな…

f:id:appgameui:20190731104452p:image

指定したミッションに応じてポイントが付与され、閾値を超えると報酬が獲得できる仕組みです。

 

トレジャー宝くじ

f:id:appgameui:20190810170807p:plain

f:id:appgameui:20190731104519p:image

 

「?」とタップすると…

f:id:appgameui:20190810170844p:plain
 

トレジャー宝くじで獲得可能なアイテムが表示されます。

f:id:appgameui:20190731104526p:image

 

 

トレジャーミッションのボタンをタップすると…

f:id:appgameui:20190810170930p:plain

 

デイリーとウィークリーとシーズンがあります。

f:id:appgameui:20190731104559p:image

 

ウィークリータブ

f:id:appgameui:20190731104607p:image

 

シーズンタブ

f:id:appgameui:20190731104620p:image

 

 枠をタップすると…

f:id:appgameui:20190810171038p:plain

ミッションの内容が見れます。

f:id:appgameui:20190731104701p:image

 

 

マンガを見る、のボタンを押すと…

f:id:appgameui:20190810171805p:plain

漫画でトレジャータワーの説明をしてくれます。
トレジャータワー画面初回遷移時にチュートリアルとしても表示されます。

f:id:appgameui:20190731104712p:image

 

スペシャルキー購入」は 

f:id:appgameui:20190810171855p:plain

 

スペシャルキー購入」の広告が表示されます。

f:id:appgameui:20190731104721p:image

 

「?」を押すと…

f:id:appgameui:20190810172445p:plain



スペシャルキーで獲得可能な報酬が表示されます

f:id:appgameui:20190731104733p:image

 

そのまま購入を進めようとするとショップ画面に遷移します。

f:id:appgameui:20190731104819p:image

 

トレジャータワーに戻りまして…

f:id:appgameui:20190731104452p:image

 

報酬のメダルを選択すると…

f:id:appgameui:20190810173125p:plain



妖怪の詳細が見れます

f:id:appgameui:20190731104837p:image

トレジャータワーは以上です。