見出し画像

20卒デザイナーがリモートでエンジニアとゲームを作った話

お久しぶりです!
サイバーエージェント2020年度新卒入社のAi3です🍧

前回書いたフルリモート研修後、SGE(ゲーム事業部)へと配属され「モックアイアンリーグ」という新卒エンジニア・デザイナー合同研修を行ってきました。

なんと この研修は19卒の先輩方が運営をしていて、リモートでもたくさん学びがあるようにといろんなコンテンツを用意してくれていました🎉


今回も「モックアイアンリーグ」で製作したゲーム紹介とともにそこで得た学びについてお話ししたいと思います💬


「モックアイアンリーグ」って何?

画像1

モックアイアンリーグとは、新卒のエンジニアとデザイナーがチームを組み、企画から実装まで2週間でゲームを開発する研修です。

各チームにはエンジニアとデザイナーのメンターがそれぞれ付き、毎日振り返りや困ったときにすぐ相談できる環境でとてもありがたかったです😊

その他にも 企画発表や中間発表といった合間合間に行われた発表会では他のチームのメンターさんからもフィードバックをいただくことのでき、勉強になることが多い研修でした!


私たちの作った「WONdaring CATch」について

アートボード 1

私たちのチームは
UIデザイナー1人、3DCGデザイナー1人、エンジニア3人(うち1人はプランナーも兼任)の合計5人で開発を行いました🎮

◆ ゲーム概要
- 1 vs 3 非対称マルチ対戦方チェイスゲーム
- ベンチマークは「ゴリラオンライン」「Identity V」

◆ コンセプト
- ポップな世界でみんなで楽しく鬼ごっこ!
🐶わんこ警察 :  3匹で協力し合う戦略性 
🐱怪盗キャット :  警察から逃げるハラハラドキドキ感

◆ ストーリー
巷を賑わすあの怪盗キャットが
ファンベリー町に現れた。
今夜の獲物は幻の大秘宝『太陽の冠』!!
(果たしてこれは怪盗キャットの求める大秘宝なのか...)
わんこ警察は厳重な警備をひくが
大秘宝を盗まれてしまう。
怪盗キャットとわんこ警察の熱き追走劇が
今、、はじまる!!!


👇実際のプレイ画面はこちら👇
チームメイトが分かりやすく動画にまとめてくれました!


ターゲットを「ソシャゲをよくやる中高生以上の男女」に設定したことにより、ルールが少し複雑になっていますので、よければこちらも目を通してみてください👀

アートボード 1


1. 世界観をつくる

チームA_トンマナ検証

まずゲームを作り始める前にこれからどういう世界観を作り上げていくのかを明確にするトンマナ検証を行いました。

警察 vs 怪盗 という一見大人びていてダークな雰囲気のある題材をカラフルでポップな色合いで表現することによって「幻想ポップ」というらしさを表現するワードを生み出すことができました...!😈

チームA_トンマナ検証 – 2
アートボード 3

次に フォルムやフォント、カラーなどを定めていきチーム内で「幻想ポップ」のイメージを膨らませていきました。

ちなみに今回はモリサワフォントを使用したのですが、実際のゲーム現場ではフォントルールに則りモリサワフォントは滅多に使用することはないそうです、、

現場に出る前に1人でこういった資料を作り検証することができ、今まですることのなかった知識を得ることができました!💡


2. フローチャートをつくる

私たちのチームは世界観やストーリーを伝えるため、アウトゲームも作り込むことになりました。

そこでUIのフローが複雑になると考え 考慮漏れを防ぐためにプロセスを一目で確認できるフローチャートと呼ばれるものを作成しました

アートボード 4

※慣れていないので間違っている部分もあるかもしれないですが多目に見てくださいmm

このフローチャートを作ったことにより全体ボリュームの把握や工数の見積もりが可能となり、その後のスケジュールが立てやすくなりました!🗓


3. ビジュアルを作る

「WONdering CATch」のUIの特徴は2つあります。

1つ目 : 3DCGを使用していること
2つ目 : インゲームが「わんこ警察ver」と「怪盗キャット」の2種類

1つ目の3DCGを使用していることに関しては、インゲームとアウトゲームでUIの透け感を変えている事です!

アートボード 5

どの画面へ導くかが重要なアウトゲームではボタンの色を不透明にしそれぞれの意味をはっきりと伝えています

反対に、3DCGがメインとなるアウトゲームではボタンの色を半透明にさせる事により必要最低限 世界観を邪魔しないように心掛けました

3DCGは「WONdering CATch」の世界観を一番具現化している部分だったのでボタン以外も少しでも3DCGが隠れぬよう工夫しています!👩‍🎨


2つ目のインゲームが「わんこ警察ver」と「怪盗キャット」の2種類ある事に関しては色と画面の情報量で差をつけました!

アートボード 7

わんこ警察は3匹おり 怪盗キャットに比べ有意な立場にあるため地図を表示せず、代わりに位置情報を共有するスタンプを導入しています

怪盗キャットは地図に怪盗キャットとわんこ警察の位置を表示させる事でレベルデザインに大きく差が出ないようにしました

これは余談ですが、それぞれのUIにある右下のボタンは肉球を意識したレイアウトになっています!🐾


アートボード 8

他にも小さなアイコンにそれぞれのキャラの要素を追加するなど、プレイヤーが常に世界観に没頭できる工夫をしています🦴


4. チームワーク

アートボード 9

フルリモートで連携の必要な開発という事で、私たちのチームは常にdiscordと呼ばれるサービスのボイスチャンネルをオンにし会話をしながらの作業を行っていました

エンジニアのメンバーたちがチーム開発に慣れていて、初期段階で上記のようなサービスの使い分けや環境を整えてくれたおかげで情報共有やコミュニケーションの部分で困る部分は少なかったです🙆‍♀️


画像13

開発中は上記のようなgifなどを使って常に小さな進捗を共有する事でチームのモチベーションが高まっていきました!

デザイナーが求めているものを先回りしてエンジニアがすでに実装していてくれたり、スキルのデザインやモデリングを作ってくれたりと 業種に囚われない動きができていたのがとても良かったです👍


アートボード 10

息抜きにおもしろキャラを生み出したり、クスって笑えるような文言を差し込んだりとチームカラーをふんだんにUIに落とし込むことができたのもコミュニケーションを工夫して密に取れたからだと思います^^


まとめ

最終日には 先輩社員さんたちにゲームを触っていただき、投票の結果 テク賞をいただくことができました👏

アートボード 11

もう本当にめちゃくちゃ嬉しかったです😭泣
先輩社員さんたちも白熱したバトルを楽しんでくれていて、感想を聞くたびに頑張って良かった...!と嬉しくなりました

実は2年前 学生インターン版のモックアイアンリーグに参加していたのですがその時はインゲームとアウトゲームの違いやリザルトの意味も知らない状態でした💦
その時の経験や内定者アルバイトで培った技術を今回のモックアイアンリーグでたくさん発揮することができ、成長も感じられる本当に良い機会でした!

何より、それらをチームのメンバーと一緒に作り上げることができ デザインの成長だけでなく コミュニケーションの勉強にもなり楽しかったです!!!


現在は新規サービスにUIデザイナーとして携わらせていただいています
今回の経験を生かし 最高のサービスを生み出せるよう頑張っていきます💪🔥

この記事が気に入ったらサポートをしてみませんか?