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

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

「きららファンタジア」一括受け取りのボタン位置は揃えよう!

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

 

「きららファンタジア」にはプレゼントリストとミッションリストで一括受け取りの機能があるのですが、それぞれボタンの位置やデザイン、文字列が異なっているのが気になりました。

 

プレゼントリストはこちら。

きららファンタジアのプレゼントリストの画面です

 

こちらは画面下部にオレンジ色のボタンで「全て受け取る」とあります。

プレゼントリストの中にある、全て受け取るボタンを部分抜粋しました

 

ミッションリストはこちら。

きららファンタジアのミッションリストの画面です

 

ミッションリストのほうは画面上部に白いボタンで「まとめて受取」とあります。

ミッションリストにある、まとめて受取ボタンを部分抜粋しました

 

実際のところ、一括受け取りのボタン以外にも全体的に差異があるので、ボタンの配置だけを調整するのは簡単ではありません。

 

そうならないように、情報の取りまとめの段階からUIデザイナーが入って、仕様の取りまとめのサポートをしたいところです。

 

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

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

引き続き「妖怪ウォッチメダルウォーズ」の画面の紹介をしていきます。
フッターからアクセスできる機能を中心にまとめました。

 

 

ホーム画面の妖怪

部屋にいる妖怪を選択します。

f:id:appgameui:20190731130433p:image

 

 

 

f:id:appgameui:20190810190345p:plain


選択すると、このように妖怪が表示されます。

f:id:appgameui:20190731130459p:image

 

妖怪ごとにメッセージが用意されています。

f:id:appgameui:20190731130504p:image

 怒られた。

 

キャラ入れ替え

画面下にあるこのボタンを押すと妖怪の入れ替えができます。

f:id:appgameui:20190810190528p:plain

f:id:appgameui:20190731130516p:image

 

AR機能

f:id:appgameui:20190810192019p:plain
AR機能もあります。(省略)

f:id:appgameui:20190731130535p:image

パーン!

 

 

かばん

「かばん」画面を見てみます。

f:id:appgameui:20190810192442p:plain

 

メダルタブ

f:id:appgameui:20190731130541p:image

 

スキル表示

f:id:appgameui:20190810192543p:plain

スキル表示に切り替えるとこんな感じ

f:id:appgameui:20190731130612p:image

 

ソート項目

f:id:appgameui:20190810192616p:plain

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

f:id:appgameui:20190731130822p:image

 

スキルツリー

「 スキルツリー」のボタンをタップすると…

f:id:appgameui:20190810192641p:plain
スキルツリーが表示されます

f:id:appgameui:20190731130714p:image

 

 

また、右側の王冠と錠前はそれぞれ
プロフィールメダルとロック機能です。

f:id:appgameui:20190810192821p:plain

f:id:appgameui:20190731131120p:image

f:id:appgameui:20190731131114p:image

 

アクティブになるとこんな感じ。

f:id:appgameui:20190731131326p:image

 

装備タブ

f:id:appgameui:20190731130729p:image

 

ソート項目は「強化順」「グレード度順」「獲得順」

f:id:appgameui:20190731131148p:image

 

アイテムタブ

f:id:appgameui:20190731130733p:image

 

 

いずれかのアイテムを選択すると…

f:id:appgameui:20190810194221p:plain

f:id:appgameui:20190731130737p:image

 

この画面で直接使用できます

f:id:appgameui:20190731130804p:image

f:id:appgameui:20190731130815p:image

 

アイテムのソートは「タイプ順」「レア度順」「獲得順」の3つがあります。

f:id:appgameui:20190731131211p:image

 

かばん拡張

かばん拡張を押すと 

f:id:appgameui:20190810194737p:plain

確認のダイアログが表示されます

f:id:appgameui:20190731131433p:image

 

拡張の実行

f:id:appgameui:20190731131439p:image

 

 

 

 

メダルを売る

「売る」を選択すると所持メダルの一覧が表示されます。

f:id:appgameui:20190810194837p:plain

f:id:appgameui:20190731130838p:image

売却するには任意のメダルを選択して

f:id:appgameui:20190731130444p:image

 

実行を選択します。

f:id:appgameui:20190731130915p:image

f:id:appgameui:20190731130924p:image

以上が「かばん」のメニューです。

 

ともだち

f:id:appgameui:20190810195025p:plain

ともだちリスト

f:id:appgameui:20190731131659p:image

 

f:id:appgameui:20190810195256p:plain

 

f:id:appgameui:20190810195350p:plain



f:id:appgameui:20190731131732p:image

 

f:id:appgameui:20190810195441p:plain



f:id:appgameui:20190810195638p:plain



ともだちの部屋 

ともだちの部屋に遊びに行くことができます。

f:id:appgameui:20190810195705p:plain



f:id:appgameui:20190810195751p:plain



f:id:appgameui:20190810195817p:plain



 

 

強化

強化機能を見ていきます。 

f:id:appgameui:20190810200216p:plain

ストーリーが進んでいないとロックが掛かっています。

f:id:appgameui:20190731132029p:image

f:id:appgameui:20190810200516p:plain

レベルアップ

妖怪をレベルアップさせる画面はこんな感じです。

レベルアップさせたい妖怪を選択し

f:id:appgameui:20190731132035p:image

素材となる妖怪も選択します。

f:id:appgameui:20190731132043p:image

 

経験値獲得後の予測値と必要なコインが表示されます。

f:id:appgameui:20190731132056p:image

 

レベルアップするなら通知されます。

f:id:appgameui:20190731132104p:image

 

 

f:id:appgameui:20190811082844g:plain



 

 

ソート項目は以下のものです。

レベル順/ランク順/タイプ順/獲得順

f:id:appgameui:20190731132116p:image

 

アイテムタブは強化素材が並びます

f:id:appgameui:20190810201417p:plain

f:id:appgameui:20190811090704g:plain

 

 

ランクアップ

f:id:appgameui:20190811083400p:plain

f:id:appgameui:20190811083355p:plain

 

f:id:appgameui:20190811083350p:plain

f:id:appgameui:20190811083345p:plain

 

 

 

スキルレベルアップ 

f:id:appgameui:20190811093246p:plain

f:id:appgameui:20190811093241p:plain

f:id:appgameui:20190811093236p:plain

f:id:appgameui:20190811093251p:plain

f:id:appgameui:20190811093232p:plain

 

f:id:appgameui:20190811092741g:plain

 

合成

f:id:appgameui:20190811105455p:plain

f:id:appgameui:20190811105543p:plain

f:id:appgameui:20190811105802p:plain

 

f:id:appgameui:20190811105818p:plain

f:id:appgameui:20190811105906p:plain


f:id:appgameui:20190811105227g:plain

 以上が強化メニューの主な画面です。

 

 

 

ガチャ

 

次にガチャ画面を紹介します。

f:id:appgameui:20190731132413p:image

 

ガチャの種類を紹介します。

 

f:id:appgameui:20190731132531p:image

f:id:appgameui:20190731132538p:image

f:id:appgameui:20190731132602p:image

f:id:appgameui:20190731132609p:image

 

 

?マークを押すと、ガチャ種別に説明が並びます。

f:id:appgameui:20190810203345p:plain

f:id:appgameui:20190731132420p:image

 

いずれかのガチャを選択すると、排出される妖怪メダルの一覧と…

f:id:appgameui:20190731132437p:image

それらの確率が分かる画面が表示されます。

f:id:appgameui:20190731132444p:image

 

こちらは別のガチャの説明です。

f:id:appgameui:20190731132452p:image

ガチャによってフォーマットも異なります。

f:id:appgameui:20190731132506p:image

 

 

 

ガチャをしようとしたけど、リソースが足りていない場合は

f:id:appgameui:20190731132614p:image

 

ショップの導線が用意されます。

f:id:appgameui:20190731132631p:image

 

以上がガチャです。

 

ショップ

タブが分かれています。

妖ゼニー

f:id:appgameui:20190801230110p:plain

パック

f:id:appgameui:20190801230452p:plain

 

妖怪メダル

f:id:appgameui:20190801230508p:plain

f:id:appgameui:20190801230840p:plain

f:id:appgameui:20190801230620p:plain

f:id:appgameui:20190801230639p:plain

f:id:appgameui:20190801230703p:plain

f:id:appgameui:20190801230752p:plain

 

アイテム

f:id:appgameui:20190801230529p:plain

f:id:appgameui:20190801230947p:plain

f:id:appgameui:20190801231012p:plain

以上がフッターのメニューです。

 

 

 

「きららファンタジア」倍速アイコン、スキップアイコンが似たデザイン。大事なのはわかりやすいこと。

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

 

「きららファンタジア」にてデザインが気になるアイコンがありました。

 

この「AUTO」のアイコンと

f:id:appgameui:20190519223630p:plain

 

こちらの倍速とスキップのアイコンのデザインです。
f:id:appgameui:20190519220412p:plain

f:id:appgameui:20190519220424p:plain

 

これらのアイコンですね。

f:id:appgameui:20190810182701p:plain

f:id:appgameui:20190810182723p:plain

f:id:appgameui:20190810183039p:plain

よくみると「オート」アイコン全部微妙にデザインちがうやんか…

 

まず「AUTO」に関しては更新のデザインに見えました。

 

実際「アイコン 更新」で画像検索するとこういったデザインが並びます。

f:id:appgameui:20190519220710p:plain

スキップと早送りの差別化に関しては微妙…。

 

f:id:appgameui:20190810184813p:plain



隣り合って見れば区別が付きやすいのですが、それぞれ離れた場所にあり比較できないこと、表示位置がどちらも右上なので誤認しやすいレイアウトになっています。

倍速とスキップのアイコンのデザインが似ており、位置も同じ。
なので、学習コストが少しだけ高い。

 

「妖怪ウォッチメダルウォーズ」画面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

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