今回は「ブルーアーカイブ -Blue Archive-」（以下、ブルアカ）について記載します。
このゲームの特徴は以下。
| ジャンル | 学園×青春×物語RPG |
| 対応OS | iOS/Android |
| 開発 | Yostar、NAT Games |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2021年2月4日(木) |
| キャラ表現 | 2D&3D |
| UIのテイスト | フラットデザイン2.0風&ライトスキューモーフィック |
| キャラ獲得方法 | ガチャ |
ブルーアーカイブ -Blue Archive-のデザインの特徴
フォントサイズ
1080px ×2340px基準でフォントサイズを探ってみました。
実際のフォント通りではないですが、下記のサイズ感になっています。
| ヘッダータイトル | 44〜46px | 本文 | 34〜36px |
| ヘッダー数値 | 34〜36px | 本文（小） | 29〜31px |
| 通常ボタン | 43〜45px | 本文（最小） | 24〜26px |
この他に、大きめに使用するフォントサイズでは70px〜80pxといったジャンプ率。
使用カラー
超絶バランス感覚のゲームUIフラットデザイン
ブルアカのベースのUI表現はフラットデザイン2.0風のデザインです。
近年ではこの手のゲームUI表現はかな〜〜〜〜り増えており、広い面に単色を使いつつポイントでグラデーションや透過、シャドウの効果を加えてゲームUI感を表現するのが流行。
ブルアカではそんなフラット風のデザインの中でもクオリティが高いです。
ホーム画面のUIをみてみると、フッターボタンやヘッダーの通貨周りの素材などはフラットに単色を使っているかと思いきや、数%の透過処理を加えています。
人の目は単色使いを割とすぐ見抜けるようになっているのですが、ブルアカはこういったテクニックによって背景をすこーしだけ透過で見せることにより色の変化を加えています。
ライトなスキューモーフィックな表現がゲームUI感を加速
フラット寄りの表現でUIデザインを制作すると、各画面でもフラットなUI素材で構成しがちです。
それによって、どの画面でも単調になってしまい、画面の面白さや強度を補う要素がキャラクターや背景イラストだけになってしまったり。
それでも良いと言ってしまえたりもするのですが、ゲームUIのデザイナーとしてはもう一押し突っ込みたいところ。
ブルアカではフラットデザインの中にもスキューモーフィックな表現を取り入れていて、イラスト頼りではない画面を構成したりとデザイナーのこだわりが垣間見えます。
例えば『生徒管理』の画面。
基本的な表現はフラットデザイン風ですが、うっすらとノートの罫線のようなものが見えます。
『生徒』→『学校』→『文房具』と着想をしていったと考えられますが、安直というよりもイメージの紐付きが近い分より画面の統一感やプレイヤーからの想像の着地点が近いので好印象なデザインといえます。
たったこれだけの工夫で学校感を出せるのはナイスなアイデアです。
ここちの良いUIインタラクション
UIインタラクションや演出アニメーションもかなり秀逸です。
『ホーム』から『お仕事』に向かうときのトランジションの演出も、表現自体はシンプルなんですがアニメーションの間の取り方、スピードの緩急がめっちゃ気持ちいい。
何気に指でタップした時のエフェクトも、グルっと円を描くアニメーションが気持ちよく、しかもタップしたエリアから大袈裟に広がったりもしないのでスッキリとした印象もありちょうど良いんですよね。
要所要所でバランスの良い演出表現を加えているのは必見です。
ブルアカの各画面を見てみる
ホーム画面
すでに何度も伝えている通りですが、基本はフラットデザイン風の構成になっています。
フッターボタンで面白いのが、ボタンのエリアをラインで区切っていないこと。
適切なマージンのみでボタンの区切りを作っている思い切りが、シンプルでスッキリとしたデザインに仕上げています。
また、イラスト調のアイコンも色彩を統一することでシンプルなUIを邪魔せず、かつ密度感や色調でゲームっぽさをうまく表現できています。
モモトーク
キャラクターとの絆（好感度）をあげられる機能です。
こちらも面白いのがスマホのチャットを模したUIになっている点。
割とよく見かけるような気もするのですがベースのUIがフラットなので、こういったスマホアプリを模したデザインもすんなりと取り入れられます。
しかもクオリティ高い。
起動時の演出や、キャラとトークしている時に「書き込み中」のアニメーションを加えるなど、リアル感が没入感に繋がっています。
任務（バトル）
UIに関しては他画面と同じくフラットデザイン風のもので統一されており、色彩設計も引き継ぐ形でキレイにまとめています。
キャラクターは3DのSDキャラで、ちょこちょこと動く姿がかなりキュートです。
3Dマップの細部の情報量が多く、その世界で人が生活している感が感じられます。点字ブロックや室外機などのオブジェクト、いいですね。
フラットデザイン風の中でも、演出ではグラデーションやパターンを使い、しっかりと熱量を伝えるデザインになっています。
ショップ
オドオドしたキャラクターがかわいい。。
のは置いておいて、単純に関連のないキャラクターをただ置いてあるショップ画面とは違い、ちゃーんと店員としてキャラクターを立たせていて、しかもレジまである、この作り込みがとても良いです。
前述したのですがこの世界でちゃんと生きてる感が没入感に繋がりますし、プレイヤーがプレイする上でのクオリティ面での信頼感にも繋がります。
それでいてUIはトンマナをきちんと守っているのでメリハリが素晴らしいです。
生徒募集（ガチャ）
生徒募集という、世界観設定にそった名称がまず良きです。
そしてレア度高いキャラクターに関しては足元から頭に沿って映していく、これも割と定番ではありますがこう言ったところも抜かりなく取り入れる点がさすがだなと感じます。
まとめ：フラットデザイン風ゲームUIの真骨頂
フラットデザイン風ゲームUIが市場にはかなり多くなってきていますが、その中でもかなりクオリティの高いデザインになっていると感じます。
フラットデザインとゲームUIに必要な作り込みや熱量の取り入れ方がバランスよく、とても参考になるデザインでした。
CG WORLD (シージー ワールド) 2021年 03月号 [雑誌]