コロプラ｜コミュニティサービス『白猫サークル』の開発支援
2008年の設立以来、コロプラは「最新のテクノロジーと、独創的なアイデアで”新しい体験”を届ける」というビジョンのもと、独自の世界観を持つ新作スマートフォン向けゲームを次々とリリースし、片手だけの簡単操作で本格的なアクションRPGが楽しめる『白猫プロジェクト NEW WORLD’S（以下、白猫）』や『クイズRPG 魔法使いと黒猫のウィズ』など数多くのヒットタイトルを創出しています。また、『白猫プロジェクト』をIPとして活用した対戦コンテンツも展開し、『白猫テニス』や『白猫GOLF』といったスポーツジャンルのタイトルもリリースしています。
さらに、近年ではゲームタイトルを軸としたコミュニティの運営にも注力し、このたび『白猫』シリーズの対戦コンテンツのファンに向けたコミュニティサービス『白猫サークル』をリリース。そこでは自分たちのルールで、みんなと対戦を楽しめる新たな体験を届けています。
ゆめみはコロプラ様の開発プロジェクトチームと一体となり、同サービスのUX/UIデザインから開発までを支援しました。
＜クライアント＞
＜プロジェクト詳細＞
2024年に10周年を迎える『白猫プロジェクト NEW WORLD’S』は、その圧倒的な世界観やコンテンツの魅力、片手での簡単な操作で本格アクションRPGが楽しめる独自のユーザー体験で熱狂的な支持を集め、シリーズを通していまなお多くのファンに愛され続けています。
またコロプラはタイトルの運用・開発だけではなく、イベントの開催やTVアニメ化など多様な展開でユーザーを飽きさせず、近年ではゲームタイトルを軸としたコミュニティの運営にも注力。ユーザー同士はもちろんユーザーと運営チームが気軽に対話・交流できる場づくりでファンエンゲージメントを高めています。
さらに『白猫テニス』や『白猫GOLF』など『白猫』シリーズの対戦コンテンツにおいて、ユーザー相互の交流を通してみんなで盛り上がりながらゲームを楽しんでもらえる新たなコミュニティの開発をめざし、ゆめみとの共創がスタートしました。
ゆめみはUX/UIデザインから開発までを支援し、ゲームの世界観はそのままにファン同士の交流がより気軽に楽しめるコミュニティサイトと、ユーザー主導で対戦イベントをつくって相互に参加できるアプリ機能をひとつのシステムで実現。このたび新たなコミュニティサービス『白猫サークル』としてリリースされることが決定しました。
第一弾として『白猫テニス』ファンに向けてBETA版をオープンいたしました。
コミュニティサイトとゲーム機能を融合し、ひとつのシステムとして実現するという、これまでにない特殊な開発プロジェクトは、ゆめみにとっても非常に大きなチャレンジとなりました。リリースまでの期間が限られるなか、アーキテクト・クリエイティブ・エンジニアなど役割やチーム間での壁なく、またコロプラ様とも社内外の別なく連携し、細かく議論して理解を深めあいながらチーム全体が一体となって取り組めたことが迅速な開発につながりました。
＜具体的な実施内容＞
〇デザイン
『白猫』シリーズのタイトルが持つ独特の世界観をデザインにどう組み込んでいくのか。コメント欄での交流やイベントの主催・参加など、複数の権限を持つユーザーの複雑な体験をどう設計するか。さらに限られた開発期間で膨大な画面数をつくるという三つの大きな課題に対し、以下のように解決していきました。
＜業務の効率化＞
サービスコンセプトの整理や個々の明確な作業分担など、適切なスコープ選定で効率化を図るとともに、UIライブラリにMantineを活用することでさらなる時間短縮につなげました。
＜ゲームの世界観の反映＞
グラフィックにかけられる時間が限られるなか、Mantineを活用しながらも『白猫』シリーズの特徴的なグラデーションや配色を意識し、さらにゲーム内で使われる画像やアイコンをうまくUIに落とし込むなど、随所にゲームらしい表現を施しました。動的なアクションを増やし、ユーザーが楽しみながら迷うことなく利用できる工夫したほか、UIコンセプトやライティングルールなど、見た目以外の部分においても同様にゲーム独自の世界観を盛り込みました。
＜正常系テストによるユーザー体験の整理＞
複数の権限を持つユーザーの体験やゲーム本体との行き来など、サービス利用におけるさまざまなシナリオを想定。実際にゆめみメンバーで模擬トーナメントを実施するなど、あまたの実体験を踏まえて課題を抽出しながら、複雑な体験設計を整理しました。
〇Webフロント開発
これまでの多様な実績や知見を活かし、適切な技術を選定。ここでも豊富なコンポーネントを有するMantine UIをフル活用し、テーマでまとめて定義することを通して開発スピード向上につなげました。
〇サーバーサイド開発
＜ドメイン駆動設計(DDD)の採用＞
最初にドメインモデリングを行ってから設計・開発していくことにより、品質の高いコードを安定して実装することができました。総合テストにおいてもロジック周りにほとんどバグが発生しないなど、開発期間の短縮にも貢献しました。
＜モノレポ化＞
プロジェクトをレイヤーごとにパッケージ化して管理するMonorepo（モノレポ）を導入することで、マイクロサービス化を見越した拡張性の高いアーキテクチャを構築することができました。これにより今後別タイトルでのサービスを開発する際に、本プロジェクトのパッケージを活かし、より効率的に開発することが可能となります。
＜インフラアーキテクチャ＞
AWS IAM（アクセス管理）の設定によって本番環境とそれ以外とでそれぞれ使える機能を制限し、コンソール上で誤操作が発生しないよう設計しました。またTerraformを用いてIaCを実現することで開発の効率化に寄与しました。
◆ご担当者様からいただいたコメント
広報マーケティング本部戦略部
藤本 周 様本プロジェクトはコロプラにとっても新しい試みであり、明確な答えがない中で始まったプロジェクトでした。そのような中で、弊社のユーザー様ファーストの考え方を上手く咀嚼しつつ、Web開発の知見をもってプロダクトに落とし込んでいただけました。
ゆめみ様の解釈力や柔軟性に非常に助けられましたし、フラットな立場でコンセプト体現に向けた議論ができたのも本プロジェクトにとっては大きかったと思います。
ゆめみ様とのこのチームでなければ実現しなかったと強く感じており、非常に感謝しております。
◆ゆめみ担当者の声
ゆめみはどのようなプロジェクトにおいてもパートナー企業の皆さまとのフラットなワンチーム体制を意識していますが、今回のコロプラ様との密な連携はそれらを超えた一体感がありました。
機能やサービス、日程やコストなど、率直な意見で細かく議論を重ねながら、決して一方的に要求を押し付けるのでなく、ゆめみメンバーの意見も丁寧に拾ったうえでスコープを調整し、共にゴールをめざせたこと、リモート環境の制限はもちろん社内外やチーム間の垣根を取り払い、同じ目線というかもはや全員「コロプラ社員」の気持ちでプロジェクトに臨めたことは、かつてゲーム業界にいた私にとっても〝新しい体験〟となりました。
そしてこのチーム体制があったからこそ、予定どおりにリリースが実現したのだと「ゆめみメンバー」として感謝しています。（PM）
もともとユーザーとして長く親しんできた『白猫』シリーズに関連したサービスのUIにかかわれることや、エンタメ性の高いクリエイティブな表現ができることがとても光栄で、貴重な体験になりました。
ゆめみ内にもファンが多く、実際開発チームのメンバーはほぼヘビーユーザーだったので、体験設計の際にはメンバーで本気のトーナメント戦を開催して課題を抽出し、リリース後にもユーザーレビューと称して再度トーナメント戦を行う予定など、日々作業に追われながらも終始モチベーション高めにチームで協力しながら取り組むことができました。（デザイナー）
今回のプロジェクトにおいては、コロプラ様の熱量が高く、プロダクトに対して非常に真摯に向き合っておられたように思います。
我々もそれに応えるために、将来的な拡張性とコストやスケジュールを比較検討しながら、最大限に品質が高く、ご満足いただけるようなものを提供できるよう努めさせていただきました。
その過程でコロプラ様と共にサービスに向き合えたことは、弊社のメンバーとしてもたくさんの学びを得る事ができたと感じています。（サーバーサイドエンジニア）
＜サービス分類＞
- サービスデザインならびにコンセプト策定支援
- コンセプトサービス設計
- UIデザイン
- UX設計
- 開発プロジェクトマネジメント支援
- WEBサービスサイト構築
- WEBアプリ開発
- 販促用ツール開発
<ソリューション>
開発言語：PHP(Laravel), TypeScript(React)
デザインツール：Figma
AWS：Amazon ECS, ALB, AuroraRDS, Amazon ElastiCache (Redis), CodeDeploy, Amazon EC2, Amazon S3, AWS Systems Manager Automation, AWS Step Functions
©COLOPL, Inc.
©Yumemi inc. All right reserved.
