歌割り・音楽可視化研究

課題

グループで歌う曲では、「どこを誰が歌っているか」という歌割りが、聴く楽しみのひとつになります。 けれども、歌割りを確かめたり、誰がどれだけ歌ったかを比べたりするには、曲を何度も聴き返して手で書き出す必要がありました。 それを動画にしようとすると、さらに編集の手間がかかります。

何を作っているか

歌の「誰が・いつ・どれだけ歌っているか」を見えるようにする研究として、歌割りをタイムラインにまとめ、歌った時間のランキングや縦型のショートPVを動画として書き出す「歌割りツール」を作っています。 SONATSUKI が社内向けに開発している自作のツールで、下のメイキング動画も、このツールを操作して作りました。

使い方の流れは次のとおりです。

1. 曲を読み込みます。波形が表示されます。
2. 歌詞と、パート分け（例:「Aメロ：ひめり」「全員：コール」）を書きます。
3. 歌い手ごとの区間を並べ、画面で確かめて直します。
4. 立ち絵を登録し、レイアウト（標準・ステージ・レース・PV）を選びます。
5. 「MP4を生成」を押して、動画に書き出します。

PV のレイアウトでは、縦 9:16（1080×1920）の画面に、次のものを表示します。

• 歌っている人の立ち絵と「NOW SINGING」の表示
• 歌唱時間のランキング（順位が入れ替わります）
• 歌割りのカラーバー
• 歌い手の色で表示する歌詞
• 全員で歌う場面では、全員の絵

書き出す範囲は、小節の頭で切り出せます。

技術的アプローチ

• 画面：React 19・TypeScript・Vite で作った、手元のパソコンで動く Web アプリです。
• 画面と同じものを動画に：React で描いた画面を、そのまま MP4 に書き出します。動きはすべて「再生時刻」から計算し、CSS のアニメーションや乱数を使いません。そのため、画面で確かめたコマと、書き出した動画のコマが一致します。大きさは画面に対する割合で決めているので、横（16:9）と縦（9:16）で同じ見た目になります。
• データ：歌割りは、曲・メンバー・区間・表示の設定をまとめた1つの Timeline JSON で持ちます。作業中のデータは、シートごとにブラウザへ自動で保存します。
• ランキング：区間から歌い手ごとの累積の歌唱時間を求め、どの時刻の順位もすぐに引ける形にしています。順位の入れ替わりは補間して滑らかに動かします。曲の途中を切り出したときは、その範囲の頭から数え直します。
• テンポ：曲のテンポ（BPM）と小節の頭を求め、書き出す範囲を小節の頭にそろえます。拍に合わせて背景が明滅し、キャラクターが揺れます。
• 手元で完結：書き出しなどの処理は、自分のパソコンの上のサーバー（127.0.0.1）で動かし、外からの呼び出しは受け付けません。

現在の状態

研究開発中です。歌割りツールは社内のツールとして作っており、Webアプリとして公開する予定は今のところありません。

メイキング動画の前半は、ツールを実際に操作した画面です。後半は、ツールの「MP4を生成」で書き出した縦の PV を、手を加えずにそのまま流しています。 曲『キミの推しはワタシだけ』は、架空のユニット「Prism Heart」の歌として作った自作曲です。登場するキャラクターも架空のものです。

今後

見やすい可視化の方法を検討しながら、社内で PV や紹介動画を作るときの道具として、使いながら改善していきます。