はじめに
マジカルミライのプログラミングコンテストにて提出した 「ぽつりランナー」 が優秀賞を受賞しました。
このコンテストは TextAlive API（歌詞データを取得できるAPI）を使った Web アプリケーションを制作し、作品のクオリティを競うものです。
エンジニア人生で初めて外部の方々から評価をいただけたので、本当に嬉しかったです。優秀賞受賞のメールが届いた日の夜は、思わずくら寿司で爆食いしてしまいました。
実装はすべて自分で行いましたが、デザインやイラスト、アイデア出しなどは周りの方の協力があって初めて実現できたことでした。まずは会社の仲間に感謝を伝えたいです。
細かい技術的な話は今回はあまり触れず全体としてどんな体験をしたのかをフォーカスして記事を書こうと思います。
また、作品はこちらから触っていただけます。PCのみの実装で1200px以上の幅で正常に動きます。
👉 ぽつりランナー
なぜ出場したのか
きっかけは、会社のデザイナーの後輩から「こういうコンテストがあるんですが、一緒に出ませんか？」と声をかけてもらったことでした。
もともとボカロが好きだったのと、これまで培ってきたフロントエンドのスキルでどこまでやれるのか試したい気持ちがあり、即答で「やろう」と返事をしました。
また、当時は転職も少し視野に入れていたので、実績になればという思いもありました。
アイデア出し
まず「どんな作品を作るか」を決める必要がありました。その上で話し合った結果、最初に方針として下記が決まりました。
- 開始が遅れて実質2か月間しかなかったので、キャッチアップが必要な技術（3Dエフェクトやモデル実装）は避ける判断をした
- 自社には強力なクリエイティブユニットがいるので、構成や演出で魅せるリリックアプリケーションを目指すことにした
過去作品を調べると「複数曲対応型」と「1曲特化型」がありました。表現力を高めるなら後者が有効と判断し、最終的に 「ロンリーラン」 を題材の曲として選びました。
とても良い曲なのでぜひ聞いてみてください。
イメージは 「夜にミクが孤独に走っている姿を応援できるアプリケーション」。 この方向性で進めることにしました。
実装・工夫した技術的ポイント
技術スタック
- フレームワーク: Next.js（React, TypeScript/JavaScript）
- アニメーション: Rive / Lottie / p5.js
- スタイル: Sass
- 音楽連携: TextAlive API
もっとも時間を要したのは p5.js を用いた歌詞演出 でした。
- 夜空の星が集まってテキストを形成するアニメーション
- 花火が打ち上がって文字が出るアニメーション
これらの表現を実装する必要がありました。
今回のコンテストでは AI の使用が認められていたため、生成AI「V0」を活用してコーディングを行いました。
生成AIを使った経験がある方なら分かると思いますが、やり取りを重ねるほどコードは膨大になり、可読性が下がっていきます。また、他のデータやファイルとの整合性を考慮しないまま生成されることも多いため、そのままでは扱いづらいコードになりがちです。
そのため逐一リファクタリングを行い、変数化やコンポーネント化を進め、後から細かい調整がしやすい形へ整理しました。特に TextAlive API の値や他のコンポーネントとの連携、 パーティクルに対する変更のしやすさを意識し、拡張・修正しやすい構造に整備しました。
最終的にはV0と朝から晩まで 300回近いやり取り を繰り返しながら、ようやく完成にたどり着きました。
最後のブラッシュアップ
私はもともとクリエイティブ領域で動画制作をしていた経験があり、その知識を活かして作品の最終調整（ブラッシュアップ）を行いました。
たとえば、
- 最後に登場する日の出シーンでは、画像を点滅させることで光のきらめきを演出
- 遠近感を強調するために、背景の街並みをぼかす処理を追加
- 手前に電柱を配置して構図に奥行きを持たせる工夫
といった細かな提案を重ね、それを実際にコーディングへ反映しました。小さな工夫の積み重ねですが、全体の完成度を一段階引き上げられたと感じています。
自分は「神は細部に宿る」という言葉が好きで、こだわって作品作りに取り組むことで全体のクオリティが上がる経験を何度もしてます。エンジニアになってからそういった体験をすることは少なくなっていたのですが、今回はそれを感じることができて嬉しかったです。
コンテスト提出・審査までの流れ
2か月かけてコーディングを終え、いよいよ提出段階に。
しかし直前に大きな問題に気づきました。
応募要項には次の記載があり...
HTTPサーバ上に設置するだけで動作する静的アプリケーションのみとします
（PHP、Ruby、Node.js などを利用した動的なレスポンスを返すサーバアプリケーションは不可）
私は Next.js を使っており npm に依存していたため、「規約違反になるのでは？」と不安になり慌てました。
結果的には問題なく受理されましたが、応募要件を事前に確認してから取り組む大切さを痛感しました。
結果と感想
提出後から締め切りまでの3週間、毎日朝昼晩とメールを確認しました。発表予定1週間前になっても連絡がなく、半ば諦めかけていました。
そんなある日、別の用事で Gmail を開くと「マジカルミライ」という件名のメールが。
不備の連絡かと思いきや、そこには 入選のお知らせ と、今後の一般投票に関する説明が記されていました。
すぐに Slack で仲間に報告し、大いに盛り上がりました。
入選10作品の中から一般投票が行われ、最終的に優秀作品3点・最優秀作品1点が選ばれる仕組みです。
投票のお願いを周囲にしながら3週間を過ごし、ある晩、ついに 「優秀賞選出」メールを受け取りました。
もちろんすぐにメンバーにも共有しました。
お祝いに高めのランチにもいきましたw
今後の展望
今回のコンペを通じて、JavaScript を使って美しい表現を作り出すための知見を多く得ることができました。特に演出や見せ方の工夫が作品の印象を大きく左右することを実感しました。
次のステップとしては、これまでの経験を活かしつつ、3D表現や VR 体験を取り入れた作品づくりにも挑戦してみたいと考えています。より没入感のある表現を探求し、ユーザーに新しい体験を届けられるようなプロジェクトに取り組んでいきたいです。