おといろひろば
カスタムできるBGMの配布サイト
- 松本龍太郎
概要
これは何？
制作する映像に合わせてカスタムできるBGMを配布するwebサイト
背景
小さな映像制作の現場では、作品の見た目には強いこだわりがあっても、音楽へのこだわりが後回しになるケースが少なくない。
例えば個人YouTuberが制作した動画では、音が不自然にカットされていたり、映像が続いているのに曲が終わっていたり、映像の雰囲気が変わっているのにBGMが変わっていないなど、違和感のある編集が多々ある。
音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。この現状は、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素である。その可能性を追求しないのはもったいない、と考えた。
目的
おといろひろばでは、より細かな編集ができるよう音楽をステムデータで配布することにより、映像制作における音楽演出の自由度と表現力を高めることを目指す。BGMをただ当てはめる仕上げではなく、映像の内容やテンポ、感情に合わせた演出素材の一部として扱えるようにしたい。
ステムデータとは
ステムデータとは、1つの完成された音楽を、役割ごとに分けて書き出した音声ファイルの集まりのこと。例えば、歌、ドラム、低音楽器、弦楽器などのように、音楽の構成要素をパート別に分けて、それぞれ独立した音声ファイルにしたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。例えば、セリフと歌が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムを強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。
元々、ステムデータでの音楽納品は、テレビシリーズのアニメやドラマなど継続的な映像制作の現場で使われてきた手法である。これは、毎話異なる演出や尺に対応するため、編集段階で音の構成を柔軟に調整できる必要があったことに起因している。シリーズ内でのサウンドの統一感を整えるためでもある。
コンセプト
音楽を演出素材の一部として認識してもらうため、制作する映像に合わせてカスタムできるBGMを配布するwebサイト。
成果物の仕様
- webサイト
- 配布するBGM
制作ツール
- html
- css
- JavaScript
- php
- Visual Studio Code
- MAMP
- Adobe illustrator
- Adobe Photoshop
- Adobe After Effects
- Logic Pro 11
その他プラグインなどは、別のページにまとめる予定です。
プロジェクトの期間
まとめ
調査
現状調査
ステムデータを編集する手法は、商業の限られた制作現場での慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、ステムで提供される音楽素材自体がほとんど存在しなかったこと、そして音楽の再構成に対する知識が共有されていなかったことである。
- 劇伴音楽の作り方 | note
- 「ドラマ音楽の制作工程が知りたいです。」 | note
先行事例
ステムデータを配信しているサイト
技法・技術情報
- ステムデータで編集を向上させる方法 | Artlist
プロジェクト管理
スケジュール
ToDo
サイト名決め- サイトロゴ
- サイトメインイメージ
- サイトピクトグラムなど
- サイトコーディング
- JavaScriptプログラミング
- コンテンツ制作
- 1Q審査
- 2Q審査
- 概要集
- 最終審査
- 卒展準備
2025.05.16
既存サイトとおといろひろばの違い
無料であること。お試しの一歩にどうですか？
だから、興味ない人でも始めやすいし、親しみやすいデザインにする必要がある。
楽曲のカテゴリ
ジャンルではなく、雰囲気やシーンで分ける方が良いと判断。
例えば
- 日常1
- 日常2
- 怒り1
- 怒り2
- コミカル
- 感動
など…
全然進んでません
来週の目標は手を動かすことです；；
2025.05.09
ロゴの参考資料探し
- Pintrestボードへはこちらをクリック | Pintrest
ひろばと音が重要。ロゴマークとロゴタイプでセットにする方が適している。
ロゴのアイデアスケッチ
- こちらをクリックで表示 | GitHub
素材が置いてある場所、ひろばの木にみんなが集まるイメージで。
2025.05.02
ステムデータとは
ステムデータとは、1つの完成された音楽を、役割ごとに分けて書き出した音声ファイルの集まりのこと。例えば、歌、ドラム、低音楽器、弦楽器などのように、音楽の構成要素をパート別に分けて、それぞれ独立した音声ファイルにしたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。
通常、私たちが聴く音楽はすべての音がミックスされて1つの音声ファイルになっている。しかし、ステムデータではそれらが分かれているため、セリフと音楽が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムや低音楽器を強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。
サイトマップ制作
- 当時のサイトマップはこちら | GitHub
スケジュールをアップデート
5つの事務作業を追加
- 1Q審査
- 2Q審査
- 概要集
- 最終審査
- 卒展準備
必要なページのおさらい
- トップページ
- おすすめコンテンツ
- サイトの使い方
- キーワード検索窓
- ステムデータとは、使い方の説明
- コンテンツ一覧
- タグ検索できる何か
- ステムシミュレーションページ
- 検索結果
- 利用規約
- お問い合わせ
- プライバシーポリシー
- ニュース
2025.04.25
Artlistのステムデータ
プレビューもできました。
- Roll the Dice | Artlist
Web Audio API
オーディオミキサーのプロトタイプでは、オーディオの制御をWeb Audio APIを使用し行っている。
- ウェブオーディオ API | MDN Web Docs
必要なページのおさらい
- トップページ
- サイトの使い方
- ステムデータとは、使い方の説明
- コンテンツ一覧
- タグ検索できる何か
- ステムシミュレーションページ
- 検索結果
- 利用規約
- お問い合わせ
- プライバシーポリシー
- ニュース
2025.04.18
おといろひろばの使い方
- ジャンルやシーンなどの単語で、使いたい音を検索
- プレビューして雰囲気を確認
- ミキサーで細かいシミュレーションもできます
- ステムデータをすべてDLできる
- 必要な音だけDLできる
- 映像編集ソフトに取り込んで音量調整
- 動画として書き出したら完成
- イメージ画像はこちら | GitHub
なぜステムデータが使われていたか
元々、ステムデータでの音楽納品は、テレビシリーズのアニメやドラマなど継続的な映像制作の現場で使われてきた手法である。これは、毎話異なる演出や尺に対応するため、編集段階で音の構成を柔軟に調整できる必要があったことに起因している。シリーズ内でのサウンドの統一感を整えるためでもある。
たとえば、メロディだけを残して別の場面に流用する、ドラムを抜いて静かなシーンにする、同じ曲を短く再構成する、といった使い方が可能になるのが、ステムデータの大きな利点だ。
しかしこの手法は、商業の限られた制作現場に閉じた慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、ステムで提供される音楽素材自体がほとんど存在しなかったこと、そして音楽の再構成に対する知識が共有されていなかったことである。現在は、ステムで音楽素材を提供するサービスも増えている。
サイトロゴについての調査
- ひろばについての調査が必要
- Wiiの似顔絵チャンネルが雰囲気の参考になるかも
事務作業
- Google スプレッドシートによるガントチャートを作成。
参考資料
- 劇伴音楽の作り方 | note
- 「ドラマ音楽の制作工程が知りたいです。」 | note
2025.04.11
アイデア
映像制作では、作品の見た目には強いこだわりがあっても、音楽へのこだわりが後回しになるケースが少なくない。音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。この現状は、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。
ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素である。その可能性を追求しないのはもったいない、と考えた。
現状の配布データより、より細かな編集ができるようなデータ、ステムデータを作ることで、こだわり方を知ってもらい、より良い作品作りに活かしてもらう。
現状の調査
先行事例の調査
どちらもステムでの配布はしてありそうだが、ステムでのプレビューはできない。
オーディオミキサーのプロトタイプ制作
再生しているのはmp3ファイルだが、ダウンロードボタンを押すとwavファイルがダウンロードできるようになっている。
スマホ版では、パケット通信量の都合でダウンロードボタンを非表示にしている。
mp3の容量と音質
オーディオファイルをwavからmp3の変換する際、音質を下げることでファイル容量を削減できる。しかし、音質を下げすぎると、映像制作者側でシミュレーションがしにくくなる。
良いバランスをとるための検証を行った結果、サンプリングレートを44.1kHzに固定し、可変ビットレートによる音質と容量のテストを行ったところ、7を指定するのが一番良いとの結論に辿り着いた。変換はpythonで行う。
- ソースコードはこちら Github
上記ソースコードのここで、可変ビットレートとサンプリングレートの値を変更する。
parameters=["-q:a", "7", "-ar", "44100"]
プロジェクトタイトル
おといろひろばにする。
音で映像作品を彩ってほしい。その音素材が集まるひろばという意味です。
いらすとやからインスピレーションを受け、その音版をイメージしました。
mainImageDEMO.jpg
