レアゾン・ホールディングス 2024新卒エンジニアハッカソン研修 チーム4 - 『青春パレット』 絵描き心をくすぐるギャルゲー -


こんにちは！ゲーム事業部でUnityエンジニアをやっている江連です！

本記事では、24卒エンジニア研修で実施したハッカソン研修について、私たちのチームが開発したゲームについてご紹介いたします。

少しでもレアゾン・ホールディングスの新卒研修の雰囲気を知っていただけると幸いです。

## 研修の概要
研修の概要はオウンドメディアの記事で詳しく紹介していますので、こちらからご覧ください。

https://media.reazon.jp/special/NewGraduate_engineer

## ハッカソン概要

ハッカソンとは、「ハック（Hack）」と「マラソン（Marathon）」を組み合わせた言葉で、短期間でアプリケーションを開発するイベントです。通常は24時間から数日間にわたって開催されますが、今回は3週間にわたる長期間のハッカソンが行われました。

今回のテーマは「N1エンジニアリング」で、1人のユーザー（N=1）を対象に、そのニーズに応えるプロダクトを開発するというものです。プロダクトはWebアプリ開発とゲーム開発で分かれており、エンジニアだけでなく、同期の新卒デザイナーと協力して行いました。

## ゲーム紹介 -『青春パレット』-

それでは、さっそく私たちのゲーム『青春パレット』（略して青パレ）をご紹介いたします。

まずはこちらのPVをどうぞ！

<font color="IndianRed">**※動画再生時に音楽が流れますので、音量にご注意ください。**</font>

<iframe src="https://drive.google.com/file/d/1MXtagQxYYps5ionrZ9v_T4ZN6cdv5QXL/preview" width="640" height="480" allow="autoplay"></iframe>

いかがだったでしょうか？

これを見た皆さんの中には、

「女の子がすごくかわいい！！」
「ゲームのPVまで用意しているんだ」
「企業の新卒研修でギャルゲー！？」
等など

色々な感想を持っていただけたのではないでしょうか。

つまるところ私たちのチームは真面目にギャルゲーを開発していました。
今思うと他のチームと比べて色んな意味で目立っていたと思います。

そんなゲーム（ギャルゲー）の内容を簡単に説明させていただくと、

普段から絵を描く方向けに、どんな絵を描くのかをゲーム内の女の子と会話をしながらお題を決め、お題に沿った絵を完成させることで女の子の好感度をUPさせ、ストーリーを進めていくゲームとなっています。

ストーリーとしては、漫画研究部に所属している男子高校生が入部してきた後輩の女の子と力を合わせて、一流の漫画家を目指す青春ラブコメです。

今回は、そんな『青春パレット』が、どんな風に出来たのか開発の舞台裏をご紹介いたします。

## 全体の流れ

はじめに、私たちのチームは下記の日程で開発を進めていきました。

![全体スケジュール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/8992917a-26dd-4997-ad9c-028eee4983df.png)

最初にアイデア出しを行い、次にアイデアを形作る最低限の機能を洗い出し、それに基づいて開発・デザイン作成を行い、最後に発表という流れになります。

全体的な開発フローは全チーム同じですが、アイデア出しや開発期間は各チームで多少異なっていました。

特に私たちのチームは、アイデア出し等の話し合いを1週間取っていたため、その後の開発・デザイン作成はスケジュールがかなりタイトでした。

次からは各工程をご説明いたします。

# ユーザーに刺さるアイデアの出し方

ゲーム開発において、一番重要なものはアイデアです。
（※あくまで個人の意見です。）

いくら、最新技術を使用し大規模なプロモーションをしたとしても、そのアイデアがゲームのターゲットに刺さらなければ意味がありません。

そして、ターゲットに刺さるアイデアを出すためには、**ユーザー理解**が不可欠です。

今回は、ユーザー理解をするために、デプスインタビューを行いました。

デプスインタビューとは、過去の行動や事実を聞きながら、その人の価値観を客観的に把握するためのインタビューです。

デプスインタビューを通して、下記のように、とある1日のスケジュールに書き起こして価値観を見つけていきました。

**※こちらは実際のN1のスケジュールではなく、あくまでイメージとなります。**

![1日のスケジュール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/867e4310-5fa8-4bf6-9e5b-56787485d062.png)

何度かデプスインタビューを重ねていき、N1の方の価値観を理解していきます。最終的には下記のような行動や価値観を見つけることが出来ました。

- ゲームが好き（特にノベルゲー）で、平日、休日問わず遊んでいる
- 休日の午前中はゲームをする気にもなれず、ダラダラとYoutubeを見てしまう
- 絵を描くことが好きだが、最近は描けていない

等など

そこから、いよいよN1の方に刺さる面白いゲームアイデアを考えていくのですが、特に頭を悩ませたのが、「どのタイミングで自分たちの作るゲームを遊んでもらうか」についてです。

一見、「ゲームの面白さ」と「いつ遊ぶのか」はあまり関係がないと思われるかもしれません。

ですが、N1が日々の生活の中で長く遊んでもらうことを考えると、1日のうち、どの時間で遊んでもらえるのかを考えることが大切になります。

今回のN1の方は、既に多くの時間をお気に入りのゲームに費やしており、ゲームをしていない休日の午前中は積極的にゲームをしたくない状況でした。

そのため、既に遊んでいるゲームの時間を奪う、もしくは、積極的にゲームをしたくない時間帯に遊んでもらう必要があり、かなり頭を悩ませました。

そこで、N1が抱える困りごと **「絵を描くことが好きだが、最近は絵が描けていない」** から発想を広げてアイデアを考えるようにしました。

N1の方が絵を描けていない原因をヒアリングしていくと、

**「何を描くのかお題や構図を考えることが負担になり、描き始められない」**

ということが絵を描く大きなハードルになっていることが分かりました。

![N1の悩み.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/481acdb7-f959-45b4-a81c-22868115daa0.png)

そこで、**「絵を描くハードルを下げるためにお題を提案する」** ことをゲームのメイン機能として、N1が好きなゲームジャンルと組み合わせることにしました。

そうすることで、積極的にゲームをしたくない時間帯でもクリエイティブな活動をメインにしたゲームなら遊びやすくなると考えました。

こうして、出来上がったアイデアが **『絵描き心をくすぐるギャルゲー』** です。

女の子と会話をしながらお題を決め、お題に沿った絵を完成させることで女の子の好感度UPやストーリーを進めていくゲームとなります。

ゲームの流れは以下のような感じです。

![ゲームの流れ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/843eb470-b73b-489d-b112-9fd423dd90c0.png)

アイデアが決まるまで、何度もヒアリングやアイデアの壁打ちなどを行ったため、かなり時間がかかりましたが、N1の方を深く理解することができ、チームメンバーでゲームイメージの共通認識を固めることができたため、アイデア出しに時間をかけて良かったと思います。

ここまで、長々とゲームアイデアの出し方について話していきましたが、あくまで一例ですので、ご参考程度に見ていただけると幸いです。

「もっとゲームアイデアの出し方について知りたい！」と思った方は、ゲームプランナー向けの書籍を読んでみるといいかもしれません。

個人的には、ゲームアイデアをユーザーの課題から見つけることは少ないのかなとは思いますが、なかなか面白いアイデアになったのではと自画自賛しています（笑）

# アイデアを素早く形にするために優先順位をつける

アイデアが固まったので、すぐに開発に取り掛かりたい気持ちがあるかもしれませんが、その前にやることがあります。

それは、**何から実装をするのか？** を決めることです。

特にハッカソンのような開発期間が短い場合には最低限の実装でユーザーに価値を感じてもらえるプロダクトを作り上げることが大事になります。

そこで、今回の研修では、実装する機能を「必須」、「できれば欲しい」、「将来的にほしい」の3つのレベルに分けてから開発に着手しました。

![実装の優先度.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/374b6551-dcb6-47e6-bdb7-07597bec4cc0.png)

優先度を決めるポイントとして、

- 最低限ゲームが遊べる
- N1の方が楽しいと思える瞬間がある

の2つを意識しました。

そのため、最低限ゲームとして遊べるように、女の子のキャラクターデザインやホーム画面、絵のお題を提案する画面などを「必須」に分類し、
N1の方が楽しんでもらえる要素として、キャラクターに動きをつけたり、会話をしながら絵のお題を決めていく機能を「できれば欲しい」に分類しました。

次の章からは、このゲームのアピールポイントである

- 魅力的なキャラクター
- 絵を完成させた後の演出
- 会話から絵のお題を決める機能

の3つについて詳しくご紹介いたします。

# 魅力的なキャラクターを作るために

「ギャルゲー」と謳っているからには、魅力的なキャラクターを作り出すことが最も重要なポイントになります。

ゲームをプレイをするN1の方が「この子ともっと話がしたい」、「この子のために絵を描きたい」と思ってもらえることが、ゲームの面白さを引き出します。

そんな魅力的なキャラクターを作り出すためには何が必要か？

答えは簡単です。

**とにかくN1の嗜好を調べ、何度もデザイン案を提示しながら、すり合わせていくことです。**

すごく泥臭く地道な方法ではありますが、この方法が一番N1の方に刺さると思いました。

今回はアイドルオーディションのように全17パターンのキャラクターラフから、N1の方に壁打ちさせていただき、最終的に2つに絞り込み、それらの要素をまとめてキャラクターデザインを作成しました。

![キャラクターデザインの検討.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/54042214-2bce-4435-8272-4e240335e578.png)

そして、よりキャラクターイメージを固めるために、名前や性格、表情差分などを作成しました。

手間はかかりますが、こういった設定があるだけで、この後の開発へのモチベーションや会話作成等にかなり役立ちました。女の子の名前を「あさみね ほたる」と名付けた理由は、特に意味はありません。

![キャラクター紹介.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/56131862-64a2-4cdb-9330-fd4153e1ca48.png)

余談ですが、キャラデザの参考資料を探すために「ギャルゲー」を検索していたときは、ブラウザを見られたらと思うと少し恥ずかしかったです。後ろで人が通るたびに、「これは仕事なのだから」と自分に言い聞かせていましたね（笑）

ここまででも十分なくらい可愛く魅力的なキャラクターになりましたが、「やっぱり動かしたい」というN1の方からの強い希望もあり、Live2Dを使ったアニメーションにも挑戦しました。

聞いたことがない方もいらっしゃるかもしれませんので、Live2Dについて簡単に説明すると、Live2Dは2Dイラストを自由に動かしてアニメーションを作成できるツールになります。身近なものだと、VTuberの表情や体の動きのアニメーション作成にも使われています。

アニメーションを作成するまでの大まかな流れは下記になります。

1. 髪や腕など動かしたいパーツごとにイラストを分ける
1. パーツ分けをしたイラストごとにメッシュを割り当てる
1. メッシュを変形させて動きをつける

実際に、Step1の「パーツごとにイラスト分ける」では下の図のように行いました。

![Live2Dにおけるイラストのパーツ分け.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/15cde30c-f28b-4dac-b70a-75fcfe4aa4f4.png)

アニメーション作成は作業コストが大きく、今回はアイドル状態のアニメーションだけの実装となりましたが、実際に動かしてみると静止画よりもゲームのクオリティがグッと良くなったことを実感しました。

<iframe src="https://drive.google.com/file/d/182SR_TlHRaTxiveOz0hl7yFR3WszC_U0/preview" width="640" height="480" allow="autoplay"></iframe>

↑呼吸するときの自然な体の動きに苦労しました。

そして、キャラクターの魅力を最大限出せるように、ボタンや好感度ゲージ等のUI、フォント、カラーリングにもこだわりました。

![ゲーム画面のUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/59ba6195-1cf8-4e26-82ef-7b72f7d1f3d3.png)

上の図のようにポップでスタイリッシュな表現を目指して、モダンなゲーム画面に仕上げました。

細かいところだと、グラデーションを活用したり、画像右上にある2つのメインボタン（「絵のお題を出す」、「完成した絵を提出する」）を特別なデザインにしたり、ボタンを少なくすることでユーザーの選択の迷いを減らしたりと、デザイナーさんの細部のこだわりを改めて感じます。

# N1の承認欲求を満たすために

この章は、本ゲームの演出部分の実装を担当した、ゲーム事業部サーバーエンジニアの西窪が説明いたします。

今回、N1の方にお絵描きをしてもらうにあたり、どうすれば継続して絵を描いてもらえるかにも、焦点をおきました。そして、具体的な演出の仕様を決める際、

**「描いた絵を褒められると、承認欲求が満たされて嬉しくなり、また描きたい気持ちが強くなる」**

といった情報をヒアリングで聞き出していたことから、どのようにすれば、N1の方の承認欲求を満たしてあげられるかを考え、最終的に、以下の2つを意識し、演出を作るようにしました。

- 絵を描いた功績を褒め称える
- ほたるちゃんが自分を好きになってくれている感を出す

具体的には、

- パーティクルをたくさん利用して、盛り上げる
- テキストメッセージで褒める
- ハートを使い、ほたるちゃんの好感度が上がっていることを視覚的に表現する

といった演出を多く使い、ユーザーに満足してもらうような演出を実装しました。

今回は、例として3つの演出を紹介します。

1つ目は、お題クリア演出です。

<iframe src="https://drive.google.com/file/d/1Al0XcfLjWSFlKUC-v9QySXkyExYtyxpg/preview" width="640" height="480" allow="autoplay"></iframe>

こちらの演出では、CLEAR の文字が出るとともに、紙吹雪と後光のパーティクルが表示され、ハートが出てきてゲージが貯まるような仕様になっています。

2つ目は、目標達成演出です。

<iframe src="https://drive.google.com/file/d/1GubOfUw_ObB7JKlVfLB89DIRn2uIP0-v/preview" width="640" height="480" allow="autoplay"></iframe>

この演出は、ハートがドキドキした後に、画面いっぱいに広がり、 ほたるちゃんが褒めてくれる演出となっています。

3つ目は、LOVE度UP演出です。

<iframe src="https://drive.google.com/file/d/1zeblH4_w_7DvbSJyeeSpt8E1jSh2NPhl/preview" width="640" height="480" allow="autoplay"></iframe>

こちらは、『ほたるからの認識が「〇〇な先輩」に変わりました』 といったテキストメッセージが出現し、ほたるちゃんの好感度が高まっていることが、 直接的に伝わる演出となっています。

# 絵をストレスなく描き始めてもらうために

せっかくキャラクターデザインや演出を頑張って作りこんでも、最後まで遊んでもらえなければ無駄になってしまいます。

そこで、ゲームを遊んでもらうために、遊ぶハードルを出来るだけ下げるように工夫しました。

改めて整理すると、N1の方が感じていた「何を描くのかお題や構図を考えることが負担になり、描き始められない」という絵を描くハードルを下げるために「絵のお題を提案する」ことが、このゲームのアイデアでした。

そこで、ただ単に絵のお題を提案するのではなく、ほたるちゃんと話しながら、
楽しく、手間なく、想像しやすいお題を提案することで、
「少しぐらいなら絵を描いてもいいかも」と思ってもらえるように意識しました。

具体的な、お題の提案の流れを「夏休みにお出かけする」シチュエーションで説明すると、

1. まず、どこに行くか？山、海、街中等の場所を選択肢として提示します
1. 次に、その場所で何をするのか？海だったらバーベキューや水泳などを提示します
1. 最後に具体的な出来事を選択する流れになっています

![会話からお題を提案.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/8e72a59f-9261-4d6e-bf6e-2e9c20c9fefd.png)

そうすることで、絵のお題にバリエーションを持たせ、具体的な構図をイメージできるように意識しました。

少し技術的な話をさせていただくと、 こうした会話データの管理方法として、一般的にCSVやJSON、ScriptableObject等が候補として挙げられます。

今回はUnityのScriptableObjectを採用しました。採用した理由は下記の3つになります。

- CSVやJSONに比べて、データの読み込み処理が簡単にできる
- 会話データにキャラクター画像や背景画像を紐づけることを検討している
- 今回はUnity Editor外で編集をすることを想定していない

ScriptableObjectについて補足すると下記の図のようにデータをインスペクター上で追加や修正等を行うことができます。

![ScriptableObjectを用いた会話データの管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/913c4747-40f9-4567-815d-76f7e6e973f4.png)

特に苦労した点は絵のお題を提案する会話において、選択肢によって返答やその後の選択肢が変化するため、前の選択肢の情報を保持できるデータ構造を設計することが大変でした。

また、今回は締め切りの都合で省略しましたが、現状では選択肢による分岐がある場合に、どの選択肢から遷移してきたものなのかをパッと見て分からないため、選択肢や会話の流れを可視化できる機能を、時間があれば実装してみたかったです。

以上が青春パレットのこだわりポイントになります。

# 発表会

そして、迎えた発表会当日。 全6チームがプロダクトを完成させ、チームごとの個性とプロダクトの魅力を詰め込んだ発表となりました。

![発表会の様子.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3980380/72aef7e9-e71f-4ee9-b2e1-a9e37280bd80.jpeg)

発表会前日には、N1の方にも実際にゲームをプレイしていただきました。 作ったゲームを遊んでもらうだけでも嬉しいですが、一緒に感想も頂けたので一部ご紹介します。

「演出が派手で達成感がある」
「ストーリーにボリュームがあってよかった」
「キャラが動いていてよかった」
等など

特に一番うれしかったコメントは「とにかく女の子がかわいい！！」これに尽きます。

この言葉を聞けたことで、私たちのギャルゲーはN1の心に刺さったと確信しています。（たぶん）

# ハッカソン研修を終えて

3週間という短い期間ではありましたが、今回のハッカソン研修では多くのことを学ぶことができました。

その中で特に印象に残っていることは **「チームメンバーや関係者と共通認識を持つ」** ことです。

共通認識について具体例を出すと、

- ゲームの完成イメージ
- その機能やデザインを作る目的
- 着手するタスクの優先度

などが挙げられます。

そもそもゲームの完成イメージがなければ、何をすればよいのか分からず、今どれくらいまで完成しているのかが分かりませんし、その機能やデザインがなぜ必要なのかが分からずに進めてしまえば、N1の方に刺さらないゲームになってしまいます。

実際に、積極的にコミュニケーションをして認識のずれを防ごうとしても、何度も仕様を練り直していくうちに以前の仕様が頭の中に残っていたり、仕様の抜け漏れを引き起こしてしまうことがありました。

今回は研修という短期間で小さなチームでの話にはなりますが、実際の業務ではスケジュールも長く、関係者も多いため、より気を付けなければならないことは想像に難くありません。

そのため、チームメンバーや関係者と共通の認識を持つことが、プロジェクトを円滑に進めるカギになると思います。共通認識は業務をしている今でも、忘れないように意識しています。

と色々書きましたが、人間なので必ずミスはします。変に気張らず、そうしたミスを早期に見つけて、ミスをしてもチームメンバーがカバーし合える関係が大事だと思います。

学びも多くありましたが、それ以上に **「チームでゼロからゲーム作りが出来て楽しかった！」** という思いが強いです。

3週間という短い期間でしたが、チームでゼロからゲーム作りをする機会を作っていただいた研修の運営の方々や一緒に作り上げてくれたN1の方やチームメンバーの皆さんに改めて感謝申し上げます。

# 最後に

長文にも関わらず、最後までお読みいただきありがとうございました。正直なところ、まさかここまで長文になるとは思いませんでした。

何か一つでも気づきや、少しでもレアゾン・ホールディングスの新卒エンジニア研修の雰囲気を知って頂けたら幸いです。他チームのハッカソン研修記事もありますので、ぜひご覧ください。

最後に、レアゾン・ホールディングスではエンジニア採用を積極的に行っています。ご興味がありましたら、下記から、ご応募お待ちしております。それでは。

### **▼採用情報**
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。

現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。

https://recruit.reazon.jp/