弊社のデザイナーのシャーロック、KM、エンジニアの重田で制作した作品が優秀賞に選ばれました。

【受賞作品詳細】

作品名：ぽつりランナー

URL：https://magicalmirai.com/2025/procon/entry_2025_app/2025_entry_006_potsuri_runner/

今回の制作では、誰もが直感的に楽しめるようなデザイン・Webアプリケーション設計にこだわっています。

夜の街を駆けるシルエット、星空に浮かぶ歌詞、流れる流星や光のきらめきが、音楽とひとつになって心に残る景色を描き出します。

ただ観るだけではなく、ミクが疲れていたら水を渡してあげるなど、小さな関わりを通じて、あなたの想いがミクに届く仕掛けをたくさん用意しました。

この経験を活かし、クライアントの皆様の課題解決に貢献できるよう、より精度の高い、心を動かすようなプロダクトを創出していきたいと考えております。

【『初音ミク「マジカルミライ」プログラミング・コンテスト』とは】

初音ミク「マジカルミライ」の楽曲コンテストの受賞曲を対象に、映像演出を制作するプログラミングを活用した創作コンテストです。

「TextAlive App API」という歌詞が音楽に合わせてタイミングよく動くWebアプリケーションを開発できるJavaScript用のライブラリを使用して開発することが条件です。

クリエイティビティ、イノベーション、完成度などの観点から審査され、入選作品が選ばれます。その後、一般投票も実施され、最終的な受賞作品が決定されます。

初音ミク「マジカルミライ 2025」プログラミング・コンテスト公式サイト

https://magicalmirai.com/2025/procon/

【エンジニアコメント（重田）】

Next.jsを基盤に実装を行い、Canvas APIやp5.jsを駆使して、美しい表現を実現しつつも動作が重くならないよう工夫しました。また、制作開始が1ヶ月遅れたため短い開発期間での挑戦となりましたが、まずは完成を優先し、その後ブラッシュアップを重ねることでクオリティを高めていきました。さらに、チーム内の多様なアイデアを積極的に取り入れることで、より表現力と完成度の高い作品へと仕上げることができました。

【クリエイティブコメント（シャーロック）】

「Webアプリケーション」として設計しており、読み込み速度や処理の複雑さといった制約を意識しつつも、インタラクションを取り入れた独自の体験をつくることを目指しました。

そこで、作品の核となる「ミクのシルエット」には、Riveを採用しました。リギングによるスムーズな動きや、複数のステージをまたぐアニメーション設計によって、自然なインタラクションや遷移を実現しています。さらに、メイン機能を補完する形で、クリックエフェクトには Lottie をはじめとした他の要素も加え、体験性を高めながら世界観を広げています。

プロセス自体も特殊でした。ビジュアルの一部はコードだけで作成しているため、デザインとコーディングが並行して進み、プログラマーもテキストアニメーションやシーン演出といったビジュアル面に大きく関与しました。その結果、私たちが目指した独特の雰囲気を形にすることができたと思います。今回得られた技術や手法の多くは今後のプロジェクトにも活かせると感じています。

【イラストレーターコメント（KM）】

キービジュアルと、SDのイラストを担当しました。キービジュアルは、作品のテーマに合わせて、どこか寂しいけど淡くて美しい夜明けをイメージしながら描きました。

SDイラストは、3~5枚くらいのイラストをGIFアニメーションにして、なるべく軽くて動きがあるイメージになるように作成しました。ミクの可愛さを感じていただけると嬉しいです。