QRコードでつながる

ME.PUSH.TOKYO

HARU TOJO

Frontend Engineer

QRコードを読み取る

me.push.tokyo

PLAY / 2026

ゆうあどろっぷ SEASON 3 ドパLIVE

ゆうあどろっぷSEASON 3の紹介イラスト。ライブの光と観客、合体するボイスのピースとアンコールの演出

この作品について

落ちものパズルを、 ライブ会場ごと 盛り上がるゲームへ。

「ゆうあどろっぷ SEASON 3 ドパLIVE」は、内山結愛さんの生誕記念グッズ「ボイスCD-R」をきっかけに作った非公式ファンゲームの大型アップデートです。推しを落として合体させるパズルに、アンコールや会場の成長、衣装の収集を加えました。

Claude CodeとCodexを組み合わせた開発に、「ドパガキ仕様」として合体・コンボ・音・画面の反応を盛り込んでみました。演出を盛りまくった結果、だいぶ様子のおかしいゲームに。推しの声から始まった趣味のゲームを、遊び方から見せ方まで作り直しています。

ゲームに合わせて、実プレイ映像を中心にした30秒の紹介PVと、47ページの攻略本も制作しました。このページで映像を再生し、本のページを拡大して見られます。

STORY / 01

合体を重ねると、アンコールへ

同じ推しをつなげて衣装を進化させると、VOLTAGEがたまります。ゲージが満ちるとスコア2倍のアンコールへ。さらにアンコール中に20回合体すると、スコア3倍のSHOEGAZE MODEに進みます。

アンコールを終えるたびに会場が成長し、照明や観客、音も変化します。新メンバーの「ゆき」が加わり、5人それぞれの衣装を集める「推しずかん」、物販ブース、トロフィーなど、プレイの外にも楽しみを増やしました。

STORY / 02

ゲームの判定と、派手な演出を分けて実装

物理演算にはMatter.js、描画と演出にはPixiJSを使っています。合体やスコアの判定を担うSimCoreと、光・粒子・画面の動きを担うFxDirectorを、型付きのEventBusでつなぎました。演出の設定を変えても、ゲームのルールは変わらない構成です。

物理は固定60Hzで進め、粒子は事前に用意して再利用します。端末の負荷に応じて演出の品質を調整し、画面のゆれを止める設定も用意しました。Web Audio APIでは、コンボやアンコールに合わせて音を切り替え、ボイスが鳴る間はBGMを下げています。

STORY / 03

実プレイから、30秒の紹介PVを制作

紹介PVの制作にもClaude Codeを使いました。実際のプレイを収録し、ReactとTypeScriptで動画を組み立てるRemotionで、文字・ズーム・紙吹雪・集中線などを重ねています。BGMの拍に合わせてカットを切り替え、遊び方からアンコール、会場の成長まで見せる構成です。

日本語ナレーションはIrodori-TTSで生成し、BGMと効果音を合わせました。FFmpegでクリップの速度や音量を調整し、MP4へ書き出しています。PVのナレーションは合成音声で、ゲーム内で使うメンバーのボイスとは別に制作しています。

← 作品一覧に戻る