LogoMark.png

松本龍太郎/卒業研究 の履歴(No.24)


おといろひろば

カスタムできるBGMの配布サイト

mainImageDEMO.jpg


概要

これは何?

本研究は、映像制作者が自らの作品に合わせて細部にまでこだわって編集できるBGM素材を、手軽に入手することが困難である、入手することができる環境が無い、という課題を解決するために、ステムデータ形式のBGMを配布するwebサイトを制作するプロジェクトである。

ステムデータとは

楽曲を構成する、ピアノ、ドラム、ギターなどの各パートを個別のオーディオファイルに分けたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。例えば、セリフと歌が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムを強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。

背景と目的

テレビシリーズのアニメやドラマの制作現場では、ステムデータを活用し、セリフとの干渉を避けるために特定の音量を下げたり、シーンの感情に合わせて特定の楽器の音を強調したりといった、演出を行っていることが多い。しかしながら、一般的に利用できるBGM素材は、通常、単一のオーディオファイルとして提供されるため、映像の内容やテンポ、感情に合わせたきめ細やかな調整が困難である。
音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。この現状は、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素であるため、その可能性を追求しないのはもったいないと考えた。
この課題を解決するため、映像制作者が自らの作品に合わせて細部にわたり自由に編集・調整できるBGMの利用環境を提供することが、本研究の目的である。

コンセプト

映像制作者にとって、ステムデータという概念は馴染みが薄く、その活用方法に戸惑う可能性が考えらるため、親しみやすく、技術的なハードルを感じづらいサイトであることに重点を置き、複雑な専門知識を要することなく、手軽にステムデータを入手できる環境を提供することを目指す。

成果物の仕様

サイトURL



配布予定のBGMはGoogle スプレッドシートにまとめています。こちらをクリックで表示。


制作ツール

その他プラグインなどは、別のページにまとめる予定です。


プロジェクトの期間

プロジェクトの期間|2025.04.11 -

まとめ




調査

現状調査

ステムデータを編集する手法は、商業の限られた制作現場での慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、ステムで提供される音楽素材自体がほとんど存在しなかったこと、そして音楽の再構成に対する知識が共有されていなかったことである。

先行事例

ステムデータを配信しているサイト

技法・技術情報




プロジェクト管理

スケジュール

Google スプレッドシートへのリンクはこちら

ToDo





進捗記録




2025.10.03


トップページのアニメーション

目線誘導のために追加しました。
PCのシュミレート能力が低いため、映像がカクついています。


チュートリアルの制作

トップページに簡単なシミュレーションができる機能を追加。
まだ公開はしていません。




2025.09.26


news一覧のcssを修正


ロゴタイプを変更

ゴシック体に合わせました。


検索結果リストのcssを変更

細くしました。見やすいと思ったので。


sidebarに背景画像を追加

統一感を出すために背景画像を追加しました。


お知らせページの追加

追加しました。URLはこちら↓




2025.09.19


検索結果のインデックス除外

検索結果の画面が全てインデックスされてしまい、わかりにくくなったため、noindex を追加


sitemap.xmlの更新

サイトURLに間違いがあったため修正。具体的には、

https://otoiropark.ryukochan.com/

と記入しなければならないところを

https://otoiropark.ryukochan.com/index.php

と記入していた。
また、他のページも .php の記入が必要なかった。例えば、

https://otoiropark.ryukochan.com/terms

と記入しなければならないところを

https://otoiropark.ryukochan.com/terms.php

と記入していた。


検索結果リストのCSS更新

ステムでロードするためのボタンがわかりにくかったため更新。

モバイル環境で、ステムでロードするためのボタンがわかりにくかったため更新。




2025.07.18


ワイヤーフレーム制作

制作途中です。
ほぼ全てのページで使用される共通部分を先行して考えている。


webデザインの参考サイト

このサイトの斜線がかわいい。
おといろひろばにも、公園のタイルなどのモチーフを散りばめたい。


指定フォント

webフォントにIBM Plex Sans JPを使用する。

以下にそのメリットを記述する。

また、画像の和文フォントにもIBM Plex Sans JPを使用する。

なお、画像の欧文フォントについては検討中である。以下にその候補を記述する。


アイデアメモ

楽曲の規模を大編成、中編成、小編成の3つで表そうと思いつきメモ。
使うかどうかは不明。多分使わない。理由は楽曲の規模をテキストから想像できる人が少ないから。




2025.07.11

ロゴタイプデジタル化

制作途中です。




2025.07.04


シンボルマークデジタル化

制作途中です。


概要集編集


スケジュールをアップデート

全体的なスケジュールの見直し、調整を行いました。




2025.06.27


シンボルマークデジタル化

制作途中です。


概要集編集


スケジュールをアップデート

全体的なスケジュールの見直し、調整を行いました。




2025.06.20


概要集編集


シンボルマークデジタル化

制作途中です。




2025.06.13


ロゴの参考資料更新




2025.06.06


ロゴマークのラフ

rough1.jpg
rough2.jpg
rough3.jpg




2025.05.23


サイトマップのアップデート

ニュースカテゴリがいらないという判断をしました。


ロゴのアイデアスケッチ

左右反転させると、真ん中が三角になって再生ボタンに見えるかも?


ロゴの参考資料探し




2025.05.16


楽曲のカテゴリ

ジャンルではなく、雰囲気やシーンで分ける方が良いと判断。

例えば

など…




2025.05.09


ロゴの参考資料探し

ひろばと音が重要。ロゴマークとロゴタイプでセットにする方が適している。


ロゴのアイデアスケッチ

素材が置いてある場所、ひろばの木にみんなが集まるイメージで。




2025.05.02


ステムデータとは

ステムデータとは、1つの完成された音楽を、役割ごとに分けて書き出した音声ファイルの集まりのこと。例えば、歌、ドラム、低音楽器、弦楽器などのように、音楽の構成要素をパート別に分けて、それぞれ独立した音声ファイルにしたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。
通常、私たちが聴く音楽はすべての音がミックスされて1つの音声ファイルになっている。しかし、ステムデータではそれらが分かれているため、セリフと音楽が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムや低音楽器を強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。


サイトマップ制作


スケジュールをアップデート

5つの事務作業を追加


必要なページのおさらい




2025.04.25


Artlistのステムデータ

プレビューもできました。


Web Audio API

オーディオミキサーのプロトタイプでは、オーディオの制御をWeb Audio APIを使用し行っている。


必要なページのおさらい




2025.04.18


おといろひろばの使い方


なぜステムデータが使われていたか

元々、ステムデータでの音楽納品は、テレビシリーズのアニメやドラマなど継続的な映像制作の現場で使われてきた手法である。これは、毎話異なる演出や尺に対応するため、編集段階で音の構成を柔軟に調整できる必要があったことに起因している。シリーズ内でのサウンドの統一感を整えるためでもある。
たとえば、メロディだけを残して別の場面に流用する、ドラムを抜いて静かなシーンにする、同じ曲を短く再構成する、といった使い方が可能になるのが、ステムデータの大きな利点だ。
しかしこの手法は、商業の限られた制作現場に閉じた慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、ステムで提供される音楽素材自体がほとんど存在しなかったこと、そして音楽の再構成に対する知識が共有されていなかったことである。現在は、ステムで音楽素材を提供するサービスも増えている。


サイトロゴについての調査


事務作業


参考資料




2025.04.11


アイデア

映像制作では、作品の見た目には強いこだわりがあっても、音楽へのこだわりが後回しになるケースが少なくない。音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。この現状は、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。
ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素である。その可能性を追求しないのはもったいない、と考えた。
現状の配布データより、より細かな編集ができるようなデータ、ステムデータを作ることで、こだわり方を知ってもらい、より良い作品作りに活かしてもらう。


現状の調査


先行事例の調査

どちらもステムでの配布はしてありそうだが、ステムでのプレビューはできない。


オーディオミキサーのプロトタイプ制作

再生しているのはmp3ファイルだが、ダウンロードボタンを押すとwavファイルがダウンロードできるようになっている。
スマホ版では、パケット通信量の都合でダウンロードボタンを非表示にしている。


mp3の容量と音質

オーディオファイルをwavからmp3の変換する際、音質を下げることでファイル容量を削減できる。しかし、音質を下げすぎると、映像制作者側でシミュレーションがしにくくなる。
良いバランスをとるための検証を行った結果、サンプリングレートを44.1kHzに固定し、可変ビットレートによる音質と容量のテストを行ったところ、7を指定するのが一番良いとの結論に辿り着いた。変換はpythonで行う。

上記ソースコードのここで、可変ビットレートとサンプリングレートの値を変更する。

parameters=["-q:a", "7", "-ar", "44100"]


プロジェクトタイトル

おといろひろばにする。
音で映像作品を彩ってほしい。その音素材が集まるひろばという意味です。
いらすとやからインスピレーションを受け、その音版をイメージしました。