【UI調査】ウマ娘 プリティーダービー
ウマ娘たのしいです(ˊᗜˋ*)
育成し始めるとやめ時を見失って数時間経ってることも多いのですが、UIも本当によくできてるなぁと思ったのでちょっと調べてみました。
全体的にイラストが多く使用されているのでグラフィカルな印象ですがルール的にもしっかり整備されているように感じました。
基本ルール
カラーコードはスポイトで取ったざっくり値です。
UI全体的にイラストやゲーム的な記号としての色も多いので、ベースUIの色はしっかり管理されている印象がします。競馬らしい緑と茶色をメインにしながらその印象が強くなりすぎないようにバランスがとられていますね。
よくあるカラー割合で分けると、ベース：白（70%）、メイン：緑（25%）、アクセント：オレンジorピンク（5%）とかでしょうか（適当）
フォントは完全に勘ですけどロダンわんぱくEB…かな？けど、漢字とかなの違和感からロダン系のデザイン強めフォントかなと思います。
ベースレイアウト
システム周りは基本的にこのレイアウトと表示領域で構成されています。
ヘッダーの有無にルールが見えなかったのですが、内包されている情報が必要な時にのみ表示している？最初は第一階層のみ表示かと思ったけどそうでもなかったです。単純に縦領域を稼ぐ＆情報量の印象を抑える目的で不要なところでは非表示にしているのかも。
細かいところでマージンずれが多少気になりました。
ダイアログ
縦サイズが二種類しかない！（たぶん）
ゲームアプリのモーダルダイアログは一般的なアプリとちょっと意味合いが違って多用されがちなので、内容に合わせて縦サイズを変えるとボタンの位置ズレがストレス＆運営管理上の問題でサイズ数を絞っている…のかしら？なんにしろ2サイズで成り立つならこれはいいかも。
ボタン類
これもきっちり整備されているなと思ったのがボタンまわり。
基本的に 白＜緑で完結していて余計な色バリエーションがありません。あと（ボタンに限らず）押せるものにはドロップシャドウを徹底して入れて立体感を表現していますね。ユニークな特殊ボタンもありますが使い所を制限しています。
リスト
押せる押せないがわかりやすい。
ウマ娘ごとにUIが違う！
選択したウマ娘ごとにUIの色やちびキャラのイラストを変えているのに感動しました…。こういうのって開発コスト考えると採用されづらい気もするんですけど、キャラに愛着をもってもらうゲームってこういうのこそ大事だと思うんですよねえ。
タップエフェクトの差分
細かく見るとタップエフェクトも4種類ありました。
意思決定（緑ボタン）は蹄鉄エフェクト＋黄色のちょんちょん
もどる系（白ボタン）は蹄鉄エフェクト＋白のちょんちょん
アイコンなどは蹄鉄エフェクトのみ
タップ判定のないところを触ると星エフェクトのみ
こまか…。
ナビゲーション差分
グローバルのアクティブ差分です。
イラストがアクティブor非アクティブの二種類で常時アニメーションしています。
たづなさんが帽子をなおす！
かわいい（）
ホーム
ウマ娘たちが会話したり歩いたり生活している空間を表現しています。好き。これもしかして開放していない育成キャラはでてこないのでしょうか…？
スライドすると強化編成、ストーリー、レースに設定したキャラもちゃんと立っています。ガチャ以外の第一階層は同じ空間という設定なんでしょうね。
気になったところ
チーム競技場のフローで少し気になったのが戻る遷移。
対戦相手を選んだ時点ではリソース消費されていないはずなのに戻るを押すとチーム競技場のトップへ戻されて相手の選びなおしができない仕様になっています。
つまり相手を選んだ時点でリソース消費はおそらく確定（？）なので対戦相手を選ぶ時点で消費する記載がないとマズいかなぁと思いました。
あとは強化編成とレースからチーム編成へ行けたり（フッターのアクティブはレース）と設計まわりで少し気になるところはありましたが、ゲーム全体のコンテンツ軸が明確なのであまり迷うことがないですね。
簡単ですが調査メモとなります。
遊び始めて数日なのでまだまだ発見がありそうですね！あ～たのし
