この記事はHappy Elementsカカリアスタジオ Advent Calendar 2019の17日目の記事です。

こんにちわ、HappyElements カカリアスタジオのグラフィックデザイナーです！
先日の「キャットバスターズ」のロゴ制作の記事に続き、２つ目の記事を書かせていただきました！

今回は、以前カカリアスタジオからリリースしたカジュアルゲームアプリ 『マモノチューバーズ』 のUIやロゴ制作についてお話したいと思います。

はじめに

「マモノチューバーズ」は、不思議な「マモノ」たちが流行りの動画配信アプリでチューバーとして色々な動画を配信するお手伝いをするカジュアルアプリゲームです。

近年スマートフォンゲームの開発規模が大きくなり、開発が長期化する影響で「０からゲームを作る経験」が積みづらくなっている現状があり、新規開発未経験の方に一通り流れを経験してもらため、「約１ヶ月で１本アプリを制作してみよう！」 という試みの元、制作されたゲームでした。

※ちなみに未経験メンバーはエンジニア／プランナー／イラストレーターが中心。私自身はアプリの立ち上げは沢山経験していたので、UI／グラフィックデザイン兼企画のサポートという立場で入っていました。

制作工程

こんなフローで進めていました。
実際に日付を追いながら振り返りたいと思います。

１．企画のヒアリング
２．ホワイトボードでユーザーストーリーと機能の整理
３．ダーティモックの制作
４．アートワークの方向性（トンマナ）
５．コンセプトを元にUIを作成
６．個別の画面制作
７．Unityに組み込み
８．演出／足りないところを作る
９．ロゴ制作
１０．最終調整をして申請

【１】企画のヒアリング

まずプランナーが出した企画書を元にヒアリングを行いました。
ヒアリングの後、画面の設計会議を行う前に、企画書から推測される内容で、画面を雑コラしておきました。
- 「アイテムを組み合わせて放置するゲームにしたい」ということだったので、一度企画書の内容を雑に画面に起こしました

【２】ホワイトボードでユーザーストーリーと機能の整理

チームメンバーで企画を元にホワイトボードで構造と機能を整理していくのですが、【１】で作っていた雑コラを共有しておくと、話がスムーズに進みます。

ここで大事なのは下記の２つです。

ユーザーに訴求したいこと（体験／行為）を確認する
体験／行為を元に必要な機能に落とし、ホワイトボードに書いては消して、議論しながら遷移を整理

半日ほど議論した後のホワイトボード。戦いの跡が見えます。

これをやる前までは、メンバーの中でもゲームの全体像が定まっていなかったのですが、ホワイトボードで書き出したことで何がメインのフローで何がサブのフローなのかが視覚化できました。

また、画面の場合分け（例外や重複条件）などを７〜８割洗い出せたのも良かったです。

【３】ダーティモックの制作

ホワイトボードで話したことを元にAdobeXdでダーティなモックを作り、
それを元に、ディレクター／エンジニアと一緒に再度全体の流れを読み合わせます。

ダーティモック（一部）

プロトタイプとも呼べないレベルのもの。
- 画面内の要素や遷移がわかればいい。
- 見た目の綺麗さよりも早く作って壊すことが大事

【４】アートワークの方向性ぎめ

プランナー、イラストレーターにアートの方向性についてのヒアリングを行い、それぞれが目指したい方向性を言語化、イメージ化してもらいます。

ここでは具体的なモチーフよりも、目指したい方向性を共有できるのがベターです。
このときは、メインキャラのイラストは既にありましたが、全体のイメージの方向性がプランナーとイラストレーターで違ったため、デザイナー主導でヒアリングを行いました。

出てきたキーワードを元に、でムードボードやコンセプトワードを制作／共有します。

キーワード整理

ムードボード（都合によりモザイク処理を入れています）

【５】コンセプトを元にUIを制作

ゲーム全体のビジュアルコンセプトを元に、グラフィックを作成していきます。

このときは、画面数や機能自体も多くなく、落としきりのアプリなので全体の総量をなるべく抑える前提で、UIはなるべく使いまわしが効くように設計をしました。

ある程度グラフィックが固まってきたらメンバーに確認します。
問題なさそうだったので、一旦細かいアートワークは手を止めて、アプリ全体の設計をします。

このときは最初にホーム画面から手を付けてました。

アプリ全体の画面設計を整理

ある程度アートの方向性が固まったら、アプリ全体を通して、各画面の情報設計を行います。（ワイヤーを元に、画面内での優先度付け。構造化。）
画面遷移、モーダル、ダイアログ、アクションシートなど、遷移を整理してパターン化
- このあたりは改めてMaterial Designなどのガイドなどを読み返すといい復習になるかもしれません。
大きめのアプリだとここに多めに時間を取ります。

汎用的なUIパーツを制作

【６】個別の画面制作

先の設計を元に画面を制作していきます。
個人的な感覚ですが、サブ機能系の画面をまず幾つか作る事が多いです。

というのも、サブ機能（いわゆるメインではないストリームの画面）は、キャラクターなどよりも、UIパーツの印象がそのまま出る画面が多く、作っていく上でデザイン上の落とし穴に気づきやすいです。

また、基本的な要素の組み合わせなので、モジュール化をし易い（簡易的なAtomic Designのような感覚で作っていける）というのもあります。
あと、大体サブ機能は仕様が決まってないことが多いので、画面を作りながらプランナーやエンジニアに確認し、仕様を決めていく感じです。

それをしながら、メインストリームのデザインのアイデアを頭の隅で考えます。

メインの方も設計はできているので、このときはどうやったら面白い感じになるかを考える事が多いです。

ちなみにこのアプリだとメイン機能は殆ど背景とSDキャラがドーン！という感じだったので、イラストがもっとできてからでいいや。ぐらいのぼんやりした感覚でした。

Yのつく動画配信サイトのパロディや、ネットミームが散りばめられたアプリなので、UIとしてもそのあたりを小ネタに持ってこれたらなーという感じでデザインしていました。

画面を作りながらXDをアップデートしていくことで、進捗がビジュアルで分かりやすいです。

AdobeXd（作った画面からアップデート）

【７】Unityに組み込み

【６】と並行してではあるのですが、ある程度仕様が決まっている画面のデザインができたら、Unityに実装していきます。
特にこのときは、少量のパーツを使いまわす想定のUIだったので、9sliceやtile処理がちゃんと機能するかの確認も込めて、早めにUnity上に実装していきました。

デザイナーが配置までしていくと細かい調整とかできるので楽です。
この時にボタンのアニメーションなどもつけながら確認するイメージです。

【８】演出／足りないところを作る

ちょうど３月に入った頃、そろそろリリースが見えてきます。
各画面を作っている頃にメインのイラスト等が完成してくるので、ホーム画面などを完成に進めます。
アニメーションや演出をつけつつ、画面をブラッシュアップしていきます。
リリースが近づくにつれ、機能を削ったりなどで仕様変更が行われたり、仕様漏れが出てくるのでその辺りを補完して作っていきます。

演出系

ランクアップやキャラ入手の演出周りの仕様が決まってなかったので、この時点で改めて確認して作りました。
演出を出すタイミングや、仕組みも実装がしやすいようモーダル（ポップアップと同じ仕組み）で出せるようにしておくなどの工夫をしたりしました。
メイン機能が最後になったのでエンジニアとの調整は残っているものの、この時点で演出含めたUIがほぼ完成しています

【９】ロゴ制作

ロゴを作るタイミングはプロジェクトにより様々ですが、今回はスケジュールの都合もあり、一番最後に制作しました。ギリギリまでタイトルが決まらなかったこともあり、実質１日程度での制作です。

【４】で決めたトンマナを元に、キャラクターたちのドタバタ感、コミカル感を意識しながら「動画配信サイト」というモチーフを用いて制作しています。

ピンク／紫系だけだとこのゲーム特有の「明るさ」「軽さ」みたいなのが出なかったので、水色の照り返しなどを用いて明るい印象を作っています。

【１０】完成！配信へ！

細々とした最終調整を経て、無事にリリースすることができました。

私自身は、このプロジェクトとは別の業務も並行して行っていたため、実際の作業工数としては１３〜４日ぐらいで、設計／グラフィック制作／Unityに配置など、純粋な制作の期間は合計７〜８人日程度かなと思います。

最後に

ここまで読んでいただき、ありがとうございます！
HappyElements カカリアスタジオでは大規模なゲームからカジュアルなゲームまで、色んなものを楽しく作りたい！という方を絶賛募集しています！

ご興味がある方は、是非サイトから応募をいただければ幸いです。

HappyElements カカリアスタジオ採用特設サイト

カカリアスタジオのAdvent Calendar 2019はまだまも続きますので、明日以降も是非ご期待ください♪