カスタムできるBGMの配布サイト
本研究は、映像制作者が自らの作品に合わせて細部にまでこだわって編集できるBGM素材を、手軽に入手することが困難である、入手することができる環境が無い、という課題を解決するため、ステムデータ形式のBGMを配布するwebサイトを制作するプロジェクトである。
これにより、映像制作者は今まで入手が困難であったステムデータ形式のオーディオファイルの取得が、容易になり、BGMの選定・編集における選択肢を大幅に広げることが可能となる。
楽曲を構成する、ピアノ、ドラム、ギターなどの各パートを個別のオーディオファイルに分けたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。例えば、セリフと歌が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムを強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。
テレビシリーズのアニメやドラマの制作現場では、ステムデータを活用し、セリフとの干渉を避けるため、特定の音量を下げたり、シーンの感情に合わせて特定の楽器の音を強調したりといった、演出を行っていることが多い。しかしながら、一般的に利用できるBGM素材は、通常、単一のオーディオファイルとして提供されるため、映像の内容やテンポ、感情に合わせた細やかな調整が困難である。
音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。これは、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素であるため、その可能性を追求しないのはもったいないと考えた。
この課題を解決するため、映像制作者が自らの作品に合わせて細部にわたり自由に編集・調整できるBGMの利用環境を提供することが、本研究の目的である。
日本語圏のweb空間において、ステムデータ形式によるBGMの配布を行うプラットフォームの存在は、現時点において確認されていない。
海外では、ArtlistやEpidemic Soundといった著名なプラットフォームが、一部楽曲においてステムデータ形式での提供を行っている。しかし、言語や文化的な背景が異なるため、日本の制作者にとって最適な解決策とは言えない側面も存在する。
映像制作者にとって、ステムデータという概念は馴染みが薄く、その活用方法に戸惑う可能性が考えられる。そのため、親しみやすく、技術的なハードルを感じづらいサイトであることに重点を置く。加えて、複雑な専門知識を要することなく、手軽にステムデータを入手できる環境を提供することを目指す。
なお、サイト名の由来は「映像を彩る音素材が集まる広場」を意味しており、クリエイターにとって開かれたリソース拠点となることを示している。
webサイトのURL
本システムの技術的基盤は、HTMLおよびCSSによって構築されている。サーバーサイドにおける動的なコンテンツ生成にはPHPを採用し、クライアントサイド、とりわけ後述するオーディオミキサー機能の制御にはJavaScriptを実装している。各オーディオファイルに関するメタデータやパス情報はJSON形式にて一元管理を行い、データの効率的な呼び出しを実現している。
利用者は、映像作品における演出意図に基づき、任意のキーワードを指定して検索を実行する。システムは入力されたキーワードを基にフィルタリング処理を行い、条件に合致するタグが付与されたコンテンツを抽出する。
本サイトのBGM素材においては、利用者が目的に沿って迅速に素材を選定できるよう、楽曲そのもののジャンルや使用が想定されるシーン、楽曲で使用されている楽器という3つの主要な軸に基づきカテゴリ分けがなされており、これらはシステム上でタグとして管理・付与されている。
検索結果の表示後、利用者はブラウザ上に実装されたオーディオミキサーを用いて、各パートのバランスや楽曲全体の雰囲気をプレビュー確認する。最終的に、利用者はパッケージ全体ではなく、自身の制作意図にとって必要となる特定のオーディオデータのみを選択し、ダウンロードすることが可能である。
主要な機能として、オーディオミキサーを模したユーザーインターフェースを実装している。これは、利用者が各楽器パートを個別に音量調整することを可能にし、サイト上で音量を調整した後の雰囲気をシミュレーションできる環境を提供する。
この機能は、JavaScriptおよびWeb Audio APIを基盤として実装されている。各トラックは独立したオーディオノードとして構成され、利用者が音量スライダーなどを操作すると、それに応じて各ノードのゲイン値がリアルタイムで変更される。
配布コンテンツまとめ
映像作品での使用を前提に、制作者が能動的に楽曲を編集できるよう設計されている。例えば、同じパーカッションでも、リバーブの強弱や、各音のデュレーションの違いでファイルを分けることにより、映像コンテンツにおける汎用性を考慮した構成を行っている。 現在は、汎用性の高い楽曲を主に配布しており、今後追加予定の楽曲もタイトルのみ表示している。
制作プロセスにおいては、デジタル・オーディオ・ワークステーションを用い、 各パートの音響処理を施した上でwebサイト上に公開される。 提供されるコンテンツはすべて24bit/48kHzのWAV形式で統一されており、 クオリティを保っている
ビジュアルまとめ
| #61ac5d | |
| #e7e7e7 |
サイト全体の色彩構成は、「おといろひろば」というサイト名の一部に基づき決定されている。基調色として、ひろばの芝生をモチーフとした緑色が採用されている。また、ユーザーインターフェースやコンテンツの背景には、ひろばの石畳を想起させる灰色が配置されており、コンセプトの一貫性を保ちつつ、可読性と視認性を確保する配色となっている。
サイズ違いで全て同じ画像です。
名称の由来（映像を彩る音素材が集まる広場）を視覚言語として具現化することに主眼を置き、音響の拡散や広がりを象徴する波紋をモチーフとして、円形のオブジェクトを採用した。これを敷き詰めることで広場の石畳を表現している。また、円形オのブジェクトが重層的に配置する構成二より、音と映像という異なる素材が相互に重なり合う様子を視覚化している
プロジェクトの期間｜2025.04.11 - 2025.11.30
映像制作者が音楽演出にも主体的に関わることができる環境を整えることを目的として、ステムデータ形式のBGMを配布するWebサイト「おといろひろば」の制作に取り組んだ。サイトでは、各楽器パートを個別に調整可能なオーディオミキサー機能と、映像の展開に合わせて柔軟に編集できるステムデータ形式のBGM素材を提供しており、従来の完成された音源を使用するよりも制作者の意図を反映した細かな編集を実現するための素材を入手できる場づくりができたと考える。
今後、配布楽曲のラインナップをさらに拡充することにより、多様な映像制作者のニーズに応えることが、より一層可能となるだろう。
トップページのみ、ヘッダーの縦幅を広げた結果、ハンバーガーメニューを押した時に不自然なマージンが発生してしまう問題が発生。モバイル表示の時はヘッダーを広げない方向性で修正した。
制作物のセクションを編集していました。完成です。
自動でフェーダーが動くように更新。チュートリアルの動画を更新。
使用した動画のソースはこちら
制作物のセクションを編集しています。途中です。
前回のビジュアルから大幅に変更。
綺麗にできました。
サイトリンクがわからない問題の解決や、見た目の調整などを行いました。
サイトリンクがわからない問題の解決や、見た目の調整などを行いました。
新しくまとめ始めました。
目線誘導のために追加しました。
実際のサイトは更新前です。
PCのシュミレート能力が低いため、映像がカクついています。
トップページに簡単なシミュレーションができる機能を追加。
まだ公開はしていません。
ゴシック体に合わせました。
細くしました。見やすいと思ったので。
統一感を出すために背景画像を追加しました。
追加しました。URLはこちら↓
検索結果の画面が全てインデックスされてしまい、わかりにくくなったため、noindex を追加
サイトURLに間違いがあったため修正。具体的には、
https://otoiropark.ryukochan.com/
と記入しなければならないところを
https://otoiropark.ryukochan.com/index.php
と記入していた。
また、他のページも .php の記入が必要なかった。例えば、
https://otoiropark.ryukochan.com/terms
と記入しなければならないところを
https://otoiropark.ryukochan.com/terms.php
と記入していた。
ステムでロードするためのボタンがわかりにくかったため更新。
モバイル環境で、ステムでロードするためのボタンがわかりにくかったため更新。
制作途中です。
ほぼ全てのページで使用される共通部分を先行して考えている。
このサイトの斜線がかわいい。
おといろひろばにも、公園のタイルなどのモチーフを散りばめたい。
webフォントにIBM Plex Sans JPを使用する。
以下にそのメリットを記述する。
また、画像の和文フォントにもIBM Plex Sans JPを使用する。
なお、画像の欧文フォントについては検討中である。以下にその候補を記述する。
楽曲の規模を大編成、中編成、小編成の3つで表そうと思いつきメモ。
使うかどうかは不明。多分使わない。理由は楽曲の規模をテキストから想像できる人が少ないから。
制作途中です。
制作途中です。
全体的なスケジュールの見直し、調整を行いました。
制作途中です。
全体的なスケジュールの見直し、調整を行いました。
制作途中です。
 |  |
 | ／ |
ニュースカテゴリがいらないという判断をしました。
左右反転させると、真ん中が三角になって再生ボタンに見えるかも？
ジャンルではなく、雰囲気やシーンで分ける方が良いと判断。
例えば
など…
ひろばと音が重要。ロゴマークとロゴタイプでセットにする方が適している。
素材が置いてある場所、ひろばの木にみんなが集まるイメージで。
ステムデータとは、1つの完成された音楽を、役割ごとに分けて書き出した音声ファイルの集まりのこと。例えば、歌、ドラム、低音楽器、弦楽器などのように、音楽の構成要素をパート別に分けて、それぞれ独立した音声ファイルにしたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。
通常、私たちが聴く音楽はすべての音がミックスされて1つの音声ファイルになっている。しかし、ステムデータではそれらが分かれているため、セリフと音楽が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムや低音楽器を強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。
5つの事務作業を追加
プレビューもできました。
オーディオミキサーのプロトタイプでは、オーディオの制御をWeb Audio APIを使用し行っている。
元々、ステムデータでの音楽納品は、テレビシリーズのアニメやドラマなど継続的な映像制作の現場で使われてきた手法である。これは、毎話異なる演出や尺に対応するため、編集段階で音の構成を柔軟に調整できる必要があったことに起因している。シリーズ内でのサウンドの統一感を整えるためでもある。
たとえば、メロディだけを残して別の場面に流用する、ドラムを抜いて静かなシーンにする、同じ曲を短く再構成する、といった使い方が可能になるのが、ステムデータの大きな利点だ。
しかしこの手法は、商業の限られた制作現場に閉じた慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、ステムで提供される音楽素材自体がほとんど存在しなかったこと、そして音楽の再構成に対する知識が共有されていなかったことである。現在は、ステムで音楽素材を提供するサービスも増えている。
映像制作では、作品の見た目には強いこだわりがあっても、音楽へのこだわりが後回しになるケースが少なくない。音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。この現状は、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。
ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素である。その可能性を追求しないのはもったいない、と考えた。
現状の配布データより、より細かな編集ができるようなデータ、ステムデータを作ることで、こだわり方を知ってもらい、より良い作品作りに活かしてもらう。
どちらもステムでの配布はしてありそうだが、ステムでのプレビューはできない。
再生しているのはmp3ファイルだが、ダウンロードボタンを押すとwavファイルがダウンロードできるようになっている。
スマホ版では、パケット通信量の都合でダウンロードボタンを非表示にしている。
オーディオファイルをwavからmp3の変換する際、音質を下げることでファイル容量を削減できる。しかし、音質を下げすぎると、映像制作者側でシミュレーションがしにくくなる。
良いバランスをとるための検証を行った結果、サンプリングレートを44.1kHzに固定し、可変ビットレートによる音質と容量のテストを行ったところ、7を指定するのが一番良いとの結論に辿り着いた。変換はpythonで行う。
上記ソースコードのここで、可変ビットレートとサンプリングレートの値を変更する。
parameters=["-q:a", "7", "-ar", "44100"]
おといろひろばにする。
音で映像作品を彩ってほしい。その音素材が集まるひろばという意味です。
いらすとやからインスピレーションを受け、その音版をイメージしました。
