今回は『ウマ娘 プリティーダービー』（ウマ娘）のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
| ジャンル | レース、シミュレーション |
| 対応OS | iOS/Android/Microsoft Windows |
| 開発 | Cygames、 DMM GAMES |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2021年2月24日 |
| キャラ表現 | 3D |
| UIのテイスト | フラット調のデザイン |
| キャラ獲得方法 | ガチャ |
ゲームを始め、アニメや音楽、漫画まで幅広いメディアミックスでファンを魅了する、実在する競走馬をテーマにしたコンテンツです。
ウマ娘 プリティーダービーのデザインの特徴
フォントサイズ
1080px ×2340px基準でフォントサイズを探ってみました。
実際のフォント通りではないですが、下記のサイズ感になっています。
縦持ちでキャラが縦に大きく配置できる分、UIも比率やバランスを合わせ、テキストサイズもやや大きめになりますね。
| フッターボタン | 32px | ホームサブボタン | 23〜24px |
| ヘッダー数値 | 26〜28px | 本文（小） | 28〜30px |
| メインボタン | 40〜42px | 本文（最小） | 24〜25px |
使用されているフォントは「わんぱくルイカ08」だと思われます。
ゴシック体の安定感、太さも揃っていて、少しデザインの遊びも含まれていて、元気でチャーミングなフォントがウマ娘と好相性。
使用カラー
白、やや青みを加えたグレー、をベースの色に使用しクリーンで明るい印象。
そして芝や土を思わせるサブカラー。
芝を思わせるグリーンについては明るいグラデーションやカッティングで、フレッシュな印象を与えます。
JRAのメインカラーがグリーンなのも合わさり、競馬テーマのコンテンツという印象をより強めているように感じます。
基本的にどの画面もベース・サブカラーの上にカラフルな配色のUI要素が含まれており明るく賑やか。
アクセントカラーにはバッジで使用されている色を載せてます。
キャラゲーにとって大事な要素
世の中にはキャラの魅力を売りにしたゲームがいくつかありますが、重要だと感じる点があります。
それが、キャラが必死に頑張る姿を見せること。
ウマ娘では、ダートを全速力で走り抜ける女の子の姿をしっかりと描いている点が、プレイする側の感情を揺さぶり素晴らしい。
他のコンテンツで言うと、『艦隊これくしょん -艦これ』や『刀剣乱舞ONLINE』もそれにあたり、必死で傷つきながら戦う姿に感情を大きく動かされます。
ゲーム内で普段の日常パートもしっかり見せつつ、本来の使命を全うする姿とのギャップがプレイヤーをファンにさせる仕掛けとして機能しているように感じました。
整理された情報とレイアウトのルール化
画面上部にキャラや情報欄を表示し、比較的タップやスワイプなどの操作が必要ない情報を表示。
画面下部は片手でもある程度操作できるように主要なUIが表示されています。
どの画面でも魅力あるキャラが画面を引き立て、かつ操作性にも優れたレイアウトで、機能美と装飾美を両立しているように感じます。
圧倒的な3Dキャラ演出
実際の競走馬が女の子としてレースを走る。
3Dでキャラを表現している利点と、それ以上にレースの臨場感やウマ娘たちの躍動感や懸命に走る姿をアニメーションに落とし込む技術力やこだわりがめちゃくちゃ凄いです。
実際にプレイするまで「女の子が走るのの何が良いのか想像ができない」という状態だったのですが、走るフォームや表情、目線、風を切るスピード感の表現、追い越し追い抜く臨場感などの表現が完璧で、心を動かされました。
また、そのレースの裏のドラマなども表現されるため、実際の競走馬のファンの心もしっかり掴むのも納得のクオリティです。
また、ライブパートも『アイドルマスター』で培ってきたであろうノウハウや技術力が存分に発揮されています。
揃いすぎない、でも揃って見えるダンスや動き、光の表現、カメラワーク、実際のアーティストのライブパフォーマンスを見ているかのようです。
共通して言えるのは、プレイヤーの期待値を何段階も超えるクオリティであること。
プレイする前に、「競馬テーマであれば、レースで走るんだろうな」程度のイメージの期待値をまず達成し、さらにプラスαの要素を足していくことでプレイヤーの心を一気に掴みにいっているように感じました。
『ウマ娘 プリティーダービー』の各画面を見てみる
ホーム
画面中央に3Dキャラが立っていて、基本操作に必要なUI要素は画面下部に。
縦画面なので3Dキャラが大きく、そして全身見える形で配置してあるのは体験としてとても良いですね。
各UIのアイコンはピクトではなくカラーイラスト調。
ヘッダー
TP、RPは色分けされており、＋ボタンやメニューボタンは色の統一感があります。
フッター
フッターボタンのアイコン群は、直線ではなく曲線で構成されており、ポップな印象を持たせるとともに、綺麗に整いすぎてる感も解消できる点がかなり良いです。
ウマ娘
かわいい。
中央のキャラ意外にも3D空間の奥に別キャラが立っていて、吹き出しをタップすると話を聞きに行けるのも、ウマ娘のその世界に生きてる感が感じられます。
ガチャ
ガチャ画面は、ライブシーン動画を全画面に表示して訴求するパターン。
ライブシーンで画面の色が目まぐるしく変わったり、キャラの動きも大きいので画面の賑やかさがかなり感じられます。
ガチャ演出
所謂ナビキャラのたづなさんに導かれ、ドアを開けると競馬のゲートが！
ゲートの格子の奥にガチャから手に入るウマ娘がいる感じが良いですね。
排出キャラはゲートから飛び出してきた瞬間が捉えられており、獲得時に可愛らしいポーズをとる場面にもこだわりを感じます。
今回たまたま昇格演出で、金から虹色にゲートが変わりました。
キャラが出てくる前にセリフを表示する感じがCygamesっぽさありますね。
競技場
実際の競馬中継を見ているような雰囲気を感じます。
競馬モチーフであることの期待値をしっかり超えてくる演出、実況も実際の競馬実況を聞いているような臨場感があります。
ライブシアター
ウマ娘のライブアニメーションや楽曲を楽しめる機能。
CDジャケット風のボタンがカルーセルで選択できる、これも現実の体験を踏襲できるような工夫が感じられます。
CDジャケット一つ一つもこだわって制作されていて、見ていて飽きません。
おまけ:テキストのグラデーション
左側のテキスト、Photoshopのレイヤースタイルで言うと「グラデーション」と「境界線」に、強めに差をつけたグラデーションで表現されています。（＋シャドウ内側）
これによってテキストの立体感が強調され、より前に出てくるような効果があります。
「NEW」はよりグラデーションが強調されて、強い光が当たっているかのような表現に。
そして右側のテキストは、シャドウ外側のテキスト素材に、さらにグラデーションをかけて虹色に発光させています。
少しの手間で、魅力あるテキスト表現がされていて流石です。
まとめ：期待値以上の演出と、安定のクオリティ
UIはCygames、安定したクオリティで、これだけ色を使ってもまとまりのある表現に。
画面構成もUIレイアウトもルールを整備し、プレイヤーにストレスを感じさせることなくスムーズな回遊ができるように設計されていました。
また、競技シーンやライブ演出では培われてきたノウハウがしっかりと活かされ、期待値以上の表現になっていると感じます。
そして、競走馬というすでに歴史やドラマを持ったテーマを扱うことで、ウマ娘とさらにその背後の元ネタとも言える競走馬の生き様までも楽しむことができる、とてつもない深度のあるキャラクター。
企画から実装。展開までハイクオリティのコンテンツでした。