あんさんぶるスターズ！！のUIデザインについて
この記事は「Happy Elements カカリアスタジオ デザイナーアドベントカレンダー2020」の3日目の記事です
こんにちは！
あんさんぶるスターズ！！チーム、グラフィックデザイナーの S.T です。
主にゲームのUIや演出、ロゴ、バナーなどの制作／監修をしています。
今回は 「あんさんぶるスターズ！！Basic/Music」のUI制作事例と、
カカリアスタジオのUIデザイナーがどんな仕事をしているのかをご紹介させていただきます。
「あんさんぶるスターズ！！ Basic/Music」とは？
「あんさんぶるスターズ！！」（以下・あんスタ！！）は、
2015年リリースのアイドル育成ゲーム「あんさんぶるスターズ！」（以下・あんスタ！）を元に開発された、２つのアプリの総称です。
約５年続いた「あんスタ！」をリニューアルしたものが「Basic」、新しくリズムゲームとして開発されたものが「Music」です。
今回はこの２つのアプリを同時並行で開発を行いました
私自身は2015年に「あんスタ！」の初期UIデザインを担当した後、別のプロジェクトチームに所属していたのですが、今回「あんスタ！！」を制作するにあたって再びプロジェクトに戻ってきました。
この「あんスタ！！」のUIデザインを、どういう考えのもとで作っていったかをご紹介します。
--
今回は以下の４つの工程で制作を進めました
■ ヒアリング・UIコンセプトの策定
■ UIデザイン - ビジュアルの方針
■ UIデザイン - 設計の方針
■ Unityでの組み込み -２つのアプリを揃えるために
【ヒアリング・UIコンセプトの策定】
まず「あんスタ！！」のUIデザインをはじめるにあたり、プランナーさんが制作した企画書・仕様書を読み込みながら、並行して新しい「あんスタ！！」のUIとして求められていることをチームにヒアリングしました。
チームリーダー、プランナー、アートディレクターなどからの大小色々な意見・要望を整理し、大きく以下の４つの点が重要と考えました。
【１】「ここまでやってもあんスタなんだ」と思えるような、
あんスタの世界を拡張するような表現
【２】「！」より作中時間が１年進み、芸能界が舞台になるため、
少し年齢を上げたスタイリッシュな印象
【３】ゲームにあまり馴染みがない人でも、悩まず使える優しいUI
【４】Basic/MusicのUIは基本的にほぼ同じものにしてほしい
これらを解決するために、
UI制作の考え方の中心に「次元を0.5上げる」というキーワードを設定しました。
これは「２次元のアイドルとしてスタートしたあんスタのアイドルたちを、より『実在』して魅せる」ことや、アプリ全体の没入感コントロールにおいて、「あんスタ！」ではアプリ内への没入感を強くするために、意識がゲーム側に向くように設計していた部分を、「現実の隣にあんスタの世界が存在する」ぐらいの距離感になるよう設計するためです。
でもそれって具体的にどういうことでしょうか？
上記の要件に対し、【１】【２】はビジュアル面から、【３】【４】は設計や開発手法で解決する方針で検討しました。それぞれのアプローチをご紹介します。
【UIデザイン - ビジュアルの方針】
前作「あんスタ！」のUIは学生らしさや、イラストの印象にあわせた明るめの配色／角丸で柔らかいイメージで画面を制作していました。今回「あんスタ！！」になるにあたり、前作の配色などを根底に置きつつも、強めの配色と直線的なグラフィックを採用し、トンマナをアップデートしました。
ただあまりに明後日の方向へ行ってしまっても「あんスタらしさ」という部分が失われてしまうため、サンプルを制作し、「これは「！」っぽさが強い」や「もっと画面全体から強い印象を出してほしい」など、チームメンバーから意見を引き出しながらトンマナや装飾のバランスを検討しました。
トンマナの策定においては、市場の色々なジャンルのアプリや実在する雑誌などの配色／装飾を比較・調査。
いわゆる「ソシャゲっぽい」と言われるビジュアルではなく、アイドルとしての実在感を出せる配色や表現を検討しています。
最終的には白や青みがかった薄いブルーといった繊細な配色と、大胆で強い色を組み合わせたフラットベースのデザインを採用することで、ゲームという枠組みを超えて、アイドルとしての実在感が上がったと考えています。
アニメーション演出などもUIに合わせ、フラットなモーショングラフィック系で制作しています。
■ UIデザイン - 設計の方針
要件の３つ目である「ゲームにあまり馴染みがない人でも、悩まず使える優しいUI」に対しては、設計面から以下のアプローチを行いました。
▼「お約束」を取り入れるバランス
あんスタ！！の各画面は、基本的には左側にアプリ側が提示する情報（イラストや選択肢）を表示し、右側・特に右下に「決定UI」を配置しています。
「決定」などのボタン以外に、リストなども「その画面の最終意思決定」が右側に来るよう構成されています。
これは人の感覚として、時系列のある情報は左から出現し右で完結する事が多いというメンタルモデルを考慮した配置です。
多くのアプリでも取り入れられていますが、こういった「お約束UI」（デファクトスタンダード）を踏襲することは、ユーザーの学習コストを下げるのはもちろん、アプリ全体の一貫性を保つという意味で非常に大切です。
あんスタ！ユーザーの中には普段他のゲームアプリをあまり遊ばない方も多く、「いっぱいボタンがあって、次に何を押したら良いのかわからない」という状況も懸念されました。
そういった状況を少しでも減らすために、ゲームの中心的な流れの中では画面内で「これさえタップすれば次に進むボタン」は必ず右下に大きく目立つように配置しています。
他にも、昨今スマートフォンの画面自体が大きくなる傾向がありますが、作り手がそれに甘えてボタンや文字を小さくしてしまうと、（一見画面がスッキリしてオシャレには見えるのですが）当然ながら平均より小さい端末では使いづらいUIになってしまいますので、あんスタ！！では、特に大事なボタンはできるだけ大きく・分かりやすく、テキストも可能な限り小さくしないようにしています。
UIのデザインシステムにおいて、他にも大小さまざまなルールがある中で、一番単純ながら一番重要なルールです。
▼モーダル／モードレスの切り分け
その他の工夫として、単体の情報で完結する画面については、いわゆるハーフモーダルと呼ばれるUIなどを採用しています。
これは、画面の遷移を少なくし、現在の立ち位置を混乱させないような体験設計のためです。
モーダル／モードレスの切り分けに関しては今後のUI開発全般についてまわる課題だと思うので、引き続き検討していきたいところです。
---
▼色覚特性を意識した配色
先程のトンマナの話ともリンクするのですが、画面の設計をする際は「色覚特性」を意識した情報設計を行っています。
色覚特性とは？
目の特性の一つ。 色を識別する錐体細胞が色の認識・識別が多数派と違うタイプだということです。 一般的に赤緑色弱といわれているのは赤と緑の区別がつきにくいタイプで、世界的にはおよそ2億5000万人の色覚特性を持つ者が存在するといわれています。
出典：「色覚特性について｜メガネスーパー」
画面を制作する際に、C型／P型／D型／白黒での見え方も確認しています。
そこまで厳格でなくとも、ある程度カラーユニバーサルデザインを意識しておくことで、どんな色覚特性を持っていても、ぼんやりと画面を見ても何となく情報を受け取りやすいよう工夫しています。
ユニバーサルデザインというと、公的なもので検討されるイメージがありますが、ゲームでもある程度意識するに越したことは無いと考えています。
【 Unityでの組み込み - ２つのアプリを揃えるために】
課題の４つ目「Basic/MusicのUIは基本的にほぼ同じものにしてほしい」の解決については、UI制作の効率化に関する話です。
記事冒頭でもお伝えしましたが、Basicは「！」のリニューアルアプリ、Musicはリズムゲームを中心とした完全新規アプリです。
実はこの２つのアプリは、開発を担当するエンジニアメンバーが違い、ゲーム内のカメラサイズや色空間などの環境も違います。
２つのアプリを別々のメンバーと開発するというのも大変ですが、単純に１つのアプリで考えた場合でも設計段階で約160以上、合計300以上の画面が必要でした。
あんスタ！！ではUIデザイナーがUnity上でUIの配置や演出付けまでを行っており、「爆速で大量の画面を作る」という課題を解決するために、エンジニアと一緒に「PSDファイルをUnityのuGUIに変換できる社内ツール」を開発しました。
詳細は割愛しますが、PSD上のレイヤーをhierarchy構造や9sliceまで、８０％以上再現出来るツールです。
こういった形で、各画面ごとに情報を整理し、デザイン／設計を行った結果、あんさんぶるスターズ！！Basic/MusicのUIは完成しました。
---
おまけ - 具体的なUIデザイナーの仕事の流れ。
というわけで「あんスタ！！」のUIデザインコンセプトについてお話しましたが、カカリアスタジオでUIデザイナーがどういった仕事をしているのかを、もう少しだけ具体的に紹介したいと思います。
【デザイナーの開発体制】
その前に。先程Basic/Musicの開発体制の話が出たので、デザイナーの制作体制についても軽くご紹介します。
※イラスト、アニメーション、３Dなどはまた別チームです。そちらのチームのメンバーの記事も後日アップされますので、お楽しみに！
あんスタ！！のグラフィックデザイナーチームは、リリース前／リリース後で少し編成が違います。
開発中（リリース前）のメンバー構成
開発中は（時期にもよりますが）、リードUIデザイナーの私を中心に、オフィスやスカウトといった独立した機能を専任のデザイナーが制作するという体制を取っていました。
※ちなみに、アプリタイトルロゴやユニットロゴのリニューアルは社内の複数のデザイナーが分担して担当しています。
リリース後のメンバー構成
リリース後は、UIは1人で担当し新機能や既存UIのブラッシュアップなどを行っています。
また、イベント系のグラフィック（ロゴ、バナーなど）は3人（＋私）でローテーションする形で担当しています。
※イベントロゴの制作については12月後半の記事で詳しくご紹介予定です。
※Webサイト、グッズなどに関しては外部チーム、協力会社様での制作が主になっています。
---
UIデザイナーのお仕事 具体例
では改めて、あんスタチームのUIデザイナーが普段どういった仕事をしているのかを、ハーフアニバーサーリーに併せて追加された「スタートダッシュミッション」という機能を例にご紹介します。
あんスタ！！は2020年９月にリニューアルからハーフアニバーサリーを迎えました。それにあわせて、新機能として「スタートダッシュミッション」という機能を追加しました。
これはハーフアニバーサリーを記念して登場した、通称「光るスバル」くんと一緒に、プロデューサーの基本を順番に学んでいくための機能です。
デザイナーが関係する工程は大きく以下の５つに分かれます。
１．企画コンセプトの共有
２．イメージの提案、モックの制作
３．画面仕様書の作成
４．グラフィック制作
５．UI配置、アニメーション、演出制作
１．企画コンセプトの共有
あんスタ！！で新機能を開発する際は、まずキックオフミーティングが立ち上がり、プランナーから企画案の共有が行われます。ここでは、プランナー／デザイナー／エンジニアで企画の目標や具体的な内容を詰めていきます。
今回の企画の目的は「新しく始めたプロデューサーさんが、スムーズにアイドルをプロデュース出来るように、一番最初のお手伝いをする」というものでした。共有された企画を元に一度それぞれの職種が持ち帰って検討します。
２．モックの制作、演出の提案
共有された内容を元に、一度デザイナーの方でも情報を整理し、簡単にモックを作ってみます。
今回は初回のキックオフの際にまだ関係者の中でゴールイメージが具体的に共有できていない感覚があったため、２度目のミーティングのタイミングでデザイナー側からイメージ動画でモックを共有しました。
▲実際は動画です。仮画像で一度すべての流れや機能を網羅してみます
いわゆる「ダーティプロト」と呼ばれるようなもので、こういったモックは開発をスムーズに進めるために度々制作します。モックを作ることで、全員の中でゴールが共通化でき、またシナリオやイラストも何をどれくらい用意すればよいのか早めに確認できます。
ちなみに、このとき制作しながら「ミッションを進めると、他のアイドルとのストーリーが見れるようにしたい」というアイデアが浮かんだので、UIデザイナー側から提案しました。職種を問わずアイデアを提案できるのはあんスタチームの良いチーム文化だと思います♪
３．画面仕様書の制作
モックによってイメージのすり合わせができたので、それを元に画面の仕様書を作成します。画面仕様書はプランナーが制作する場合もあれば、複雑なものであればデザイナーが用意する場合もあります。仕様書と一緒に演出のフローチャートを書いたりする場合もあります。
４．グラフィックの制作
ある程度構造が固まったので、UIのグラフィックや、ロゴ、関連するスカウトの画像などを制作していきます。
今回は「光るスバル」と、デフォルメされたイラストがメインの機能のため、ロゴなども虹色をキーカラーとして、キラキラかわいいイメージで制作しています。
チームにもよりますが、あんスタチームの場合この辺りのグラフィック表現は比較的グラフィックデザイナーに裁量が与えられています。
５．UI配置、アニメーション、演出制作
グラフィックが出来たら、実際にUnityに配置し、アニメーションや演出などを制作していきます。
カカリアスタジオには「アニメーションデザイナー」職が存在しますが、どちらかというとキャラクターを動かすのが主な仕事で、UIアニメーションなどはグラフィックデザイナーの職務領域になります。
※アニメーションについては後日「カカリアスタジオのアニメーションデザイナーの仕事について」という記事が公開される予定です。こうご期待！
Basic/Musicそれぞれで制作が完了したら、それぞれのアプリの担当エンジニアと連携し、細かい部分のすり合わせや、構造の調整、アセットの切り分けについてなどを相談しながら完成に向かいます。
このような工程を経て、無事にユーザーのみなさまに遊んでいただけるものとしてリリースすることができました。
---
最後に
以上があんスタ！！チームのUIデザイナーの仕事となります。
UIデザインの仕事は単にビジュアルを作るだけではなく、企画〜実装までを意識しながら実際にユーザーの方に触れて遊んでいただく部分を作れる、とてもやりがいと責任のある仕事です。
カカリアスタジオではコンテンツを魅力的に見せ、ゲームを形作っていきたいUIデザイナーを募集中です！
京都で働くことに興味のあるUIデザイナーのみなさま、ゲームのUIデザイナーを目指されているみなさま、あんスタ！！のお仕事に興味をもっていただけましたら、ぜひ下記の採用ページについてもぜひご覧ください♪
---
Happy Elements カカリアスタジオでは
いっしょに「熱狂的に愛されるコンテンツ」をつくっていただけるメンバーを大募集中です！
もし弊社にご興味持っていただけましたら、是非一度
下記採用サイトをご覧ください！