おといろひろば
カスタムできるBGMの配布サイト
- 松本龍太郎
- Keywords：Web Design, BackGround Music, Stems
- https://otoiropark.ryukochan.com/
概要
これは何？
本研究は、映像制作者が自らの作品に合わせて細部にまでこだわって編集できるBGM素材を、手軽に入手することが困難である、入手することができる環境が無い、という課題を解決するため、ステムデータ形式のBGMを配布するwebサイトを制作するプロジェクトである。
これにより、映像制作者は今まで入手が困難であったステムデータ形式のオーディオファイルの取得が、容易になり、BGMの選定・編集における選択肢を大幅に広げることが可能となる。
ステムデータとは
楽曲を構成する、ピアノ、ドラム、ギターなどの各パートを個別のオーディオファイルに分けたものを指す。映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。
ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。例えば、セリフと歌が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムを強調して、より躍動感を出すことも可能だ。
また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。
背景と目的
テレビシリーズのアニメやドラマの制作現場では、ステムデータを活用し、セリフとの干渉を避けるため、特定の音量を下げたり、シーンの感情に合わせて特定の楽器の音を強調したりといった、演出を行っていることが多い。しかしながら、一般的に利用できるBGM素材は、通常、単一のオーディオファイルとして提供されるため、映像の内容やテンポ、感情に合わせた細やかな調整が困難である。
音楽にこだわりたいけど、どうこだわれば良いかわからない、編集の終盤にありもののBGMを当てはめるしかない。これは、こだわり方を知らないだけで、もし知っていればもっと深く関われるはず。ビジュアルとサウンドは、どちらも情報を伝えるための大切な要素であるため、その可能性を追求しないのはもったいないと考えた。
この課題を解決するため、映像制作者が自らの作品に合わせて細部にわたり自由に編集・調整できるBGMの利用環境を提供することが、本研究の目的である。
コンセプト
映像制作者にとって、ステムデータという概念は馴染みが薄く、その活用方法に戸惑う可能性が考えられる。そのため、親しみやすく、技術的なハードルを感じづらいサイトであることに重点を置く。加えて、複雑な専門知識を要することなく、手軽にステムデータを入手できる環境を提供することを目指す。
なお、サイト名の由来は「映像を彩る音素材が集まる広場」を意味しており、クリエイターにとって開かれたリソース拠点となることを示している。
成果物の仕様
webサイトのURL
- https://otoiropark.ryukochan.com/
- こちらをクリックでソースコードを表示 | OneDrive 九州産業大学のユーザー限定
- システム概要
本システムの技術的基盤は、HTMLおよびCSSによって構築されている。サーバーサイドにおける動的なコンテンツ生成にはPHPを採用し、クライアントサイド、とりわけ後述するオーディオミキサー機能の制御にはJavaScriptを実装している。各オーディオファイルに関するメタデータやパス情報はJSON形式にて一元管理を行い、データの効率的な呼び出しを実現している。
- サイトの利用者のワークフロー
利用者は、映像作品における演出意図に基づき、任意のキーワードを指定して検索を実行する。システムは入力されたキーワードを基にフィルタリング処理を行い、条件に合致するタグが付与されたコンテンツを抽出する。
本サイトのBGM素材においては、利用者が目的に沿って迅速に素材を選定できるよう、楽曲そのもののジャンルや使用が想定されるシーン、楽曲で使用されている楽器という3つの主要な軸に基づきカテゴリ分けがなされており、これらはシステム上でタグとして管理・付与されている。
検索結果の表示後、利用者はブラウザ上に実装されたオーディオミキサーを用いて、各パートのバランスや楽曲全体の雰囲気をプレビュー確認する。最終的に、利用者はパッケージ全体ではなく、自身の制作意図にとって必要となる特定のオーディオデータのみを選択し、ダウンロードすることが可能である。
- オーディオミキサー機能
主要な機能として、オーディオミキサーを模したユーザーインターフェースを実装している。これは、利用者が各楽器パートを個別に音量調整することを可能にし、サイト上で音量を調整した後の雰囲気をシミュレーションできる環境を提供する。
この機能は、JavaScriptおよびWeb Audio APIを基盤として実装されている。各トラックは独立したオーディオノードとして構成され、利用者が音量スライダーなどを操作すると、それに応じて各ノードのゲイン値がリアルタイムで変更される。
配布コンテンツまとめ
映像作品での使用を前提に、制作者が能動的に楽曲を編集できるよう設計されている。例えば、同じパーカッションでも、リバーブの強弱や、各音のデュレーションの違いでファイルを分けることにより、映像コンテンツにおける汎用性を考慮した構成を行っている。 現在は、汎用性の高い楽曲を主に配布しており、今後追加予定の楽曲もタイトルのみ表示している。
制作プロセスにおいては、デジタル・オーディオ・ワークステーションを用い、 各パートの音響処理を施した上でwebサイト上に公開される。 提供されるコンテンツはすべて24bit/48kHzのWAV形式で統一されており、 クオリティを保っている
ビジュアルまとめ
- 色彩構成
| #61ac5d | |
| #e7e7e7 |
サイト全体の色彩構成は、「おといろひろば」というサイト名の一部に基づき決定されている。基調色として、ひろばの芝生をモチーフとした緑色が採用されている。また、ユーザーインターフェースやコンテンツの背景には、ひろばの石畳を想起させる灰色が配置されており、コンセプトの一貫性を保ちつつ、可読性と視認性を確保する配色となっている。
- ヘッダーのロゴ
- favicon
- og image
- apple-touch-icon
サイズ違いで全て同じ画像です。
名称の由来（映像を彩る音素材が集まる広場）を視覚言語として具現化することに主眼を置き、音響の拡散や広がりを象徴する波紋をモチーフとして、円形のオブジェクトを採用した。これを敷き詰めることで広場の石畳を表現している。また、円形オのブジェクトが重層的に配置する構成二より、音と映像という異なる素材が相互に重なり合う様子を視覚化している
制作ツール
- html
- css
- JavaScript
- php
- Visual Studio Code
- MAMP
- Adobe illustrator
- Adobe Photoshop
- Logic Pro 11
プロジェクトの期間
プロジェクトの期間｜2025.04.11 - 2025.11.30
まとめ
映像制作者が音楽演出にも主体的に関わることができる環境を整えることを目的として、ステムデータ形式のBGMを配布するWebサイト「おといろひろば」の制作に取り組んだ。サイトでは、各楽器パートを個別に調整可能なオーディオミキサー機能と、映像の展開に合わせて柔軟に編集できるステムデータ形式のBGM素材を提供しており、従来の完成された音源を使用するよりも制作者の意図を反映した細かな編集を実現するための素材を入手できる場づくりができたと考える。
今後、配布楽曲のラインナップをさらに拡充することにより、多様な映像制作者のニーズに応えることが、より一層可能となるだろう。
調査
現状調査
日本語圏のweb空間において、ステムデータ形式によるBGMの配布を行うプラットフォームの存在は、現時点において確認されていない。
- アニメ音響の魔法 音響監督が語る、音づくりのすべて
- 劇伴音楽の作り方 | note
- 「ドラマ音楽の制作工程が知りたいです。」 | note
先行事例
海外では、ArtlistやEpidemic Soundといった著名なプラットフォームが、一部楽曲においてステムデータ形式での提供を行っている。しかし、言語や文化的な背景が異なるため、日本の制作者にとって最適な解決策とは言えない側面も存在する。
技法・技術情報
プロジェクト管理
スケジュール
ToDo
サイト名決めサイトロゴサイトチュートリアル制作サイトピクトグラムなどサイトコーディングJavaScriptプログラミングコンテンツ制作1Q審査2Q審査概要集- 最終審査
- 卒展準備
2025.12.05
2025.11.28
2025.11.21
2025.11.14
ヘッダーのキャラクターについて
トップページのみ、ヘッダーの縦幅を広げた結果、ハンバーガーメニューを押した時に不自然なマージンが発生してしまう問題が発生。モバイル表示の時はヘッダーを広げない方向性で修正した。
- 当時の映像はこちら | MP4 98kB Github Pages
概要集の編集
制作物のセクションを編集していました。完成です。
- こちらをクリックで表示 | OneDrive 6MB 九州産業大学のユーザー限定
2025.11.07
チュートリアルの更新
自動でフェーダーが動くように更新。チュートリアルの動画を更新。
- 当時の映像はこちら | MP4 410kB Github Pages
使用した動画のソースはこちら
2025.11.12
概要集の編集
制作物のセクションを編集しています。途中です。
- こちらをクリックで表示 | OneDrive 9MB 九州産業大学のユーザー限定
メインイメージ制作
前回のビジュアルから大幅に変更。
綺麗にできました。
- 当時のスクリーンショットはこちら | GitHub
- 比較用の古いメインイメージ画像はこちら | GitHub
2025.10.31
概要集の編集
サイトリンクがわからない問題の解決や、見た目の調整などを行いました。
- こちらをクリックで表示 | OneDrive 9MB 九州産業大学のユーザー限定
メインイメージの作成
- 当時のメインイメージ画像はこちら | GitHub
2025.10.24
概要集の編集
サイトリンクがわからない問題の解決や、見た目の調整などを行いました。
- こちらをクリックで表示 | OneDrive 9MB 九州産業大学のユーザー限定
2025.10.17
概要集の編集
新しくまとめ始めました。
- こちらをクリックで表示 | OneDrive 9MB 九州産業大学のユーザー限定
2025.10.10
トップページのアニメーション
目線誘導のために追加しました。
実際のサイトは更新前です。
PCのシュミレート能力が低いため、映像がカクついています。
- 当時の映像はこちら | MP4 1.1MB Github Pages
2025.10.03
チュートリアルの制作
トップページに簡単なシミュレーションができる機能を追加。
まだ公開はしていません。
- 当時の映像はこちら | MP4 4.1MB Github Pages
2025.09.26
news一覧のcssを修正
- 当時のスクリーンショットはこちら | GitHub
- 比較用の古いスクリーンショットはこちら | GitHub
ロゴタイプを変更
ゴシック体に合わせました。
- 当時のスクリーンショットはこちら | GitHub
- 比較用の古いスクリーンショットはこちら | GitHub
検索結果リストのcssを変更
細くしました。見やすいと思ったので。
- 当時のスクリーンショットはこちら | GitHub
- 比較用の古いスクリーンショットはこちら | GitHub
sidebarに背景画像を追加
統一感を出すために背景画像を追加しました。
- 当時のスクリーンショットはこちら | GitHub
お知らせページの追加
追加しました。URLはこちら↓
- https://otoiropark.ryukochan.com/news
- 当時のお知らせ一覧ページはこちら | GitHub
- 当時のお知らせ閲覧ページはこちら | GitHub
2025.09.19
検索結果のインデックス除外
検索結果の画面が全てインデックスされてしまい、わかりにくくなったため、noindex を追加
- 当時のスクリーンショットはこちら | GitHub
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更新
ステムでロードするためのボタンがわかりにくかったため更新。
- 当時のスクリーンショットはこちら | GitHub
モバイル環境で、ステムでロードするためのボタンがわかりにくかったため更新。
- 当時のスクリーンショットはこちら | GitHub
2025.07.18
ワイヤーフレーム制作
制作途中です。
ほぼ全てのページで使用される共通部分を先行して考えている。
- こちらをクリックで表示 | GitHub
webデザインの参考サイト
このサイトの斜線がかわいい。
おといろひろばにも、公園のタイルなどのモチーフを散りばめたい。
指定フォント
webフォントにIBM Plex Sans JPを使用する。
- IBM Plex Sans JP | Google Fonts
以下にそのメリットを記述する。
- 高い可読性と親しみやすさを両立したデザイン
- 完全に無料で、商用利用も可能
- Webフォントとして簡単に利用できる
- 豊富なウェイトで表現の幅が広がる
また、画像の和文フォントにもIBM Plex Sans JPを使用する。
なお、画像の欧文フォントについては検討中である。以下にその候補を記述する。
- Futura
アイデアメモ
楽曲の規模を大編成、中編成、小編成の3つで表そうと思いつきメモ。
使うかどうかは不明。多分使わない。理由は楽曲の規模をテキストから想像できる人が少ないから。
- こちらをクリックで表示 | GitHub
2025.07.11
ロゴタイプデジタル化
制作途中です。
- こちらをクリックで表示 | GitHub
2025.07.04
シンボルマークデジタル化
制作途中です。
- こちらをクリックで表示 | GitHub
概要集編集
- こちらをクリックで表示 | OneDrive 8MB 九州産業大学のユーザー限定
スケジュールをアップデート
全体的なスケジュールの見直し、調整を行いました。
2025.06.27
シンボルマークデジタル化
制作途中です。
- こちらをクリックで表示 | GitHub
概要集編集
- こちらをクリックで表示 | OneDrive 8MB 九州産業大学のユーザー限定
スケジュールをアップデート
全体的なスケジュールの見直し、調整を行いました。
2025.06.20
概要集編集
- こちらをクリックで表示 | OneDrive 1.8MB 九州産業大学のユーザー限定
シンボルマークデジタル化
制作途中です。
- こちらをクリックで表示 | GitHub
2025.06.13
ロゴの参考資料更新
- Pintrestボードへはこちらをクリック | Pintrest
2025.06.06
ロゴマークのラフ
 |  |
 | ／ |
2025.05.23
サイトマップのアップデート
- 当時のサイトマップはこちら | GitHub
ニュースカテゴリがいらないという判断をしました。
ロゴのアイデアスケッチ
- こちらをクリックで表示 | GitHub
左右反転させると、真ん中が三角になって再生ボタンに見えるかも？
ロゴの参考資料探し
- Pintrestボードへはこちらをクリック | Pintrest
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"]
プロジェクトタイトル
おといろひろばにする。
音で映像作品を彩ってほしい。その音素材が集まるひろばという意味です。
いらすとやからインスピレーションを受け、その音版をイメージしました。
mainImage.jpg
mainImageDEMO.jpg
