🎮

ゲームコミュニティと個人開発

2022/12/25に公開

この記事は 個人開発Advent Calendar 2022 最終日の記事です。

2022年も終わりが近いですが、いかがお過ごしでしょうか?
私は普段フリーランスとしてソフトウェアを開発している @oliver と申します。

私自身、学生を卒業する2019年までは個人開発に積極的でしたが、卒業をしてからはあまり開発を出来ずにいました。
個人開発といっても様々な形態が存在していて、 「サービス開発を個人でする系」「OSS開発を個人でする系」「お金稼ぎに全力特化した開発を個人でする系」「特定コミュニティで活用できるツールを開発する系」 など、多岐にわたります。

そして、2021年の2月にリリースされた「ウマ娘 プリティーダービー」というソーシャルゲームがあるのですが、このソシャゲが私の 個人開発魂 を復活させます。

私は学生時代、 「サービス開発を個人でする系」 に特化していたのですが、ウマ娘がリリースされてからは、 「特定コミュニティで活用できるツールを開発する系」 の個人開発に注力してきました。

「サービス開発を個人でする系」 は意外と人との繋がりが広く、情報共有とかオフラインのイベントもあったりと交流が盛んなイメージがありましたが、ゲームなどの 「特定コミュニティで活用できるツールを開発する系」 は全く違う世界が広がってました。

まず開発の目的が 「自分自身がゲームをより楽しむ」 ため、そして 「みんなにももっとゲームを楽しんでもらいたいため」 が前提となって個人開発が行われるため、基本的にマネタイズはガン無視傾向です。(もちろんグレーゾーンを攻めて利用規約違反、もしくは違反ギリギリの開発者も正直なところ存在しているのが現実ですが...)

そんな私もウマ娘というゲームにとにかく没頭し、 このゲームが好き だからこそ、自分が持ってる技術でウマ娘コミュニティを盛り上げたいと思い、積極的に開発をしていました。
その結果、2021年にロイター通信からインタビューを受ける機会などもありました。
https://twitter.com/Reuters/status/1470215688333762561?s=20&t=_Y6NDR2rkoQ309_v3kRhMg

では、本記事ではそんなウマ娘のコミュニティに対して私がどんなサービスを開発しているのか、してきたのかを紹介していきます。

また、技術的な詳細は本記事には含めませんが、今後別記事として紹介する可能性はあります。
よかったらウォッチしていただけますと幸いです。(ウマ娘に関する情報発信は @oliver_uma で行ってます)

うまっちんぐ!(レート戦)



イラスト: @karory

https://umatching.kitachan.black/

はじめに紹介するのは、ウマ娘に 非公式のレート戦機能 を提供したサービスです。
ウマ娘には「ルームマッチ」と呼ばれる機能があり、ルームを作成してメンバーを募集することで育成したウマ娘同士を対戦させることができます。

この「ルームマッチ」を利用してレート戦実現したのが 「うまっちんぐ!」 です。
2022年12月現在、ベータ版を提供中で正式版リリースに向けて開発をしている最中のサービスになってます。

毎月のうち2週間を1タームとしてレート戦を開催しており、毎期の参加者はベータ版ながら1500人を超えることもあります。
また、ウマ娘本家の攻略にも使われることもあり、その影響でPVに関しても2週間で30万PVくらいになる月もあります。

「うまっちんぐ!」 の技術選定はこだわっていて、3人のマッチングシステムは様々な知見を得られたので、別途技術記事を公開する予定です。

公開時期

2022年6月

主な使用技術

Next.js, MUI, PlanetScale, Prisma, tRPC

うまっちんぐ!(大会機能)

https://ura.kitachan.black/

「うまっちんぐ!」 は大会支援のツールも存在します。
レート戦より先にこちらのサービスがリリースされており、主に大会主催者向けの支援ツールとなっています。

途中から開発のお手伝いをしてくれた @totoraj も個人開発勢であり、ウマ娘を通じてつながることができた数少ない開発者の一人です。

大会の進行が1画面でリアルタイムに状況把握できるのが特徴 で、運営と参加者の体験を最大限重視したツールになってます。

トーナメント表も自動生成され、OBSに簡単に取り込める仕様になっています。 ゲームコミュニティは配信者が多く 、そこのケアも大事です。

他にも馬券生成機能や単発のレース募集機能、トーナメント表だけ生成される機能なども提供しているサービスになってます。

特にトーナメント表生成の部分は @spring_raining が、この機能のために開発して OSSとして公開 してくれたのも良い思い出です。
https://github.com/by-kitachan/react-tournament-board

公開時期

2021年6月

主な使用技術

Next.js, Tailwind UI, Firebase

レシート因子作成くん


https://ssc.kitachan.black/

ウマ娘関連で私が携わったツールのうち、現在一番多く利用されてるのが 「レシート因子作成くん」 です。
機能はシンプルで、 複数枚のスクリーンショットを結合してくれるツール になってます。

ウマ娘には因子という概念があり、育成終了時に複数の因子が付与されます。
その因子が一枚のスクリーンショットに収まらない場合に、このツールが重宝します。

Twitterのハッシュタグ 「#レシート因子」 で投稿してくれてる人がちらほらおり、面白いのがウマ娘以外のスクリーンショットにも利用してもらえてる点です。

また様々なオプションを手軽に適用できるのもポイントの一つになってます。

私はUI部分を主に担当しており、画像処理部分のロジックは @aoneko_uma が担当してくれています。
ポチさん(@aoneko_uma)もウマ娘がなければ知り合えなかった人であり、お互いの持ってる技術で色々開発をした仲です。

こういった繋がりがゲームコミュニティを通じて得られるのはとても新鮮でした。
コードもOSSになっています ので、興味のある方は是非ご覧ください。
https://github.com/by-kitachan/ssc.kitachan.black

公開時期

2022年5月

主な使用技術

Next.js, Tailwind UI, OpenCV

サークルページ


イラスト: @valshun1225
https://kitachan.black/

ウマ娘のゲームアプリにはサークル機能が存在します。
この機能はサークルメンバー最大30人で形成されるギルドみたいな感じで、ゲーム内で様々な役割を果たします。
私は 「きたちゃんぶらっく」 というサークルのリーダーを務めており、ほぼ最古参のサークルとなってます。

サークルとしての認知度もかなり上位に位置しており、後ほど紹介する 「きたちゃんぶっく」 もサークルメンバーが中心となって作成したものになってます。

そんなサークル活動をまとめる場として機能しているのがサークルページになってます。
現在はあまり更新できずにいますが、リリース当時はサークルの認知を高めるために積極的にコンテンツ追加を行なっていました。
このサイトのおかげで今の 「きたちゃんぶらっく」 が存在してるといっても過言ではないです。

このサークルページですが、 CMSはNotionになっており、ホスティングはWraptas というサービスを利用しています。

https://wraptas.com/

Wraptasは@nabettuさんが開発したサービスで、Notionのページ指定をするだけで簡単にWebサイトを構築できるサービスになってます。

このサービスのおかげで、サークルメンバーに記事を書いてもらいたい場合はNotionの特定のページに編集権限を渡すだけなので、とても助かりました。

公開時期

2021年4月

主な使用技術

Notion, Wraptas, CSS

チャンピオンズミーティング集計


https://cm.kitachan.black/

ウマ娘のコンテンツとして 「チャンピオンズミーティング」 が存在します。
これは月一で公式が開催している対人戦であり、ウマ娘のガチプレイヤーはここで勝利することを目指して日々プレイしています。

「うまっちんぐ!」のレート戦もこの 「チャンピオンズミーティング」 を前提としてタームを組んでいます。

そんな 「チャンピオンズミーティング」 ですが、対戦相手がどんなウマ娘を使ってくるのかが非常に重要になってきます。
その統計を取るためのツールがこのサービスになっています。

手順としては対戦相手のスクリーンショットをWebから投稿してもらい、バックエンドで画像解析のツールを実行して集計をし、最終的に 「Google Data Portal」 で統計を公開しています。

これまで公開したデータは下記にまとまっているため、興味のある人はご覧ください。
https://speakerdeck.com/kitachan_black

画像解析に関しては友人の @mitu217 に依頼して作成してもらいました。
そして、当時サークルメンバーだった @aoneko_uma が高速化をした流れになってます。

「ゲームコミュニティを盛り上げたい!」という思いは、人を動かす原動力になる と感じており、みんな積極的に協力してくれたことはとても感謝しています。

公開時期

2021年10月

主な使用技術

Next.js, Tailwind UI, Firebase

競技場シミュレーターβ


https://ts.kitachan.black/

ウマ娘には「チーム競技場」と呼ばれるコンテンツがあります。
「チーム競技場」は自分が育成した15人のウマ娘で編成し、レース内の様々な条件で得られるポイントの総合点を他のトレーナーと競うコンテンツになってます。

「競技場シミュレーターβ」 を利用することで、総合点の最大値を出せるようなスキル取得や編成を算出してくれるツールとなっています。

そして、このツールは 「GameWith攻略ツール開発コンテスト」 に提出したサービスになっており、特別賞をいただいてます。
その時に提出した資料も下記にまとめてあります。
https://pitch.com/public/f19edd0f-927e-4eb4-a0b9-ecc16002f819

攻略にあたってのデータ及び計算式の作成に関しては、サークルメンバーである @o_TeT_o が用意し、私がツールのUIとロジックのプログラミングを行いました。

公開時期

2021年11月

主な使用技術

Next.js, Tailwind UI

日中交流戦投票サイト


イラスト: @aprikose_0312
https://vote.kitachan.black/

2022年の年始に 「日中交流戦」 を企画し開催をしました。
その際に用意した特設サイトになってます。

当日はYouTubeで配信したり、 誰が優勝するかを予想したリアルタイム投票機能 も動いていました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/@kitachan

最近はこういった国際交流もできていないので、2023年以降は企画していきたいですね。

公開時期

2022年1月

主な使用技術

Next.js, NextUI, Firebase

きたちゃんぶっく


イラスト: @karory デザイン: @KmGraph
https://book.kitachan.black/

最後に紹介するのは 「きたちゃんぶっく」 です。
「きたちゃんぶっく」 は2021年の冬コミ(C99)にて頒布した同人誌になってます。
総勢30人以上を巻き込んで制作した一冊で、ウマ娘のサークルコンテンツとしては、かなり大きなものとなりました。

コミケサークル初参加ながら、当日と通販含め1000冊以上を売り上げました。
電子版の頒布も行い、出た利益に関しては全て 「認定NPO法人引退馬協会」へ寄付 しました。

https://twitter.com/oliver_uma/status/1513783734801100801?s=20&t=OqbGkoAeoAOfl6oncZQBgg

その特設サイトですが、デザインは@KmGraph、コーディング及びアニメーションは普段一緒にフリーランス活動をしている @yui540 に依頼し、制作してもらいました。

Webアニメーションを適用してもらい、リッチ感のあるLPに仕上がっていると思います。
個人的な依頼だったのにも関わらず、引き受けてくれたこと感謝いたします。

公開時期

2021年12月

主な使用技術

Next.js, styled-components

ふりかえり

ウマ娘がリリースされてから2年弱で制作したものを簡単に紹介させていただきました。

これまで行なっていた学生時代の個人開発よりも、明確な理由・目的で、強い意志で開発をする場面がとても多かったと思っています。

また、目的が一緒の人が多いので手伝ってくれる人も多く、コミュニティを大いに盛り上げようという意思が開発においても垣間見れ、とても刺激になりました。

今後もウマ娘関連のツールはどんどん開発していこうと思っています。
もしウマ娘に興味があって暇している開発者の人がいたら、ご一報ください。まだまだたくさん作りたいものはあるので、一緒にコミュニティを盛り上げましょう。

各種リンク

https://kitachan.black/
YouTubeのvideoIDが不正ですhttps://www.youtube.com/@kitachan
https://github.com/by-kitachan
https://umatching.kitachan.black/
https://ura.kitachan.black/
https://ssc.kitachan.black/
https://cm.kitachan.black/
https://ts.kitachan.black/
https://vote.kitachan.black/
https://book.kitachan.black/

Discussion