りゅうこのにっき
卒業研究編
松本龍太郎が卒業研究の過程をまとめるページです。
後学のためやメモ代わりにもなると思ったので、進捗記録に書ききれない細かなことも含めて記録します。
2025.05.16
ステムで配布するサイトが増えてる
既存サイトと僕のサイトの違いは無料であること。
興味ない人でも始めやすいし、親しみやすいデザインにする必要がある。
ということは、ジャンル分けではなく、雰囲気やシーンの方が良いのか？(日常1、日常2、など)
2025.05.14
ロゴのアイデアスケッチ
- こちらをクリックで表示 | GitHub
素材が置いてある場所、ひろばの木にみんなが集まるイメージで。
2025.05.13
ロゴの参考資料探し
- Pintrestボードへはこちらをクリック | Pintrest
ひろばと音、彩る何かしらのものを入れたい。
NintendoのWiiやいらすとやのような親しみやすさも欲しい。
ロゴマークとロゴタイプでセットにする方が適している。
2025.05.02
ステムデータとは
ステムデータとは、1つの完成された音楽を、役割ごとに分けて書き出した音声ファイルの集まりのこと。例えば、歌、ドラム、低音楽器、弦楽器などのように、音楽の構成要素をパート別に分けて、それぞれ独立した音声ファイルにしたものを指す。
映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした映像の制作手法を音楽にも適用できるようにしたものだ。
通常、私たちが聴く音楽はすべての音がミックスされて1つの音声ファイルになっている。しかし、ステムデータではそれらが分かれているため、セリフと音楽が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムや低音楽器を強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。
サイトマップ制作
- 実際のサイトマップはこちら | GitHub
スケジュールをアップデート
5つの事務作業を追加
- 1Q審査
- 2Q審査
- 概要集
- 最終審査
- 卒展準備
必要なページのおさらい
- トップページ
- おすすめコンテンツ
- サイトの使い方
- キーワード検索窓
- ステムデータとは、使い方の説明
- コンテンツ一覧
- タグ検索できる何か
- ステムシミュレーションページ
- 検索結果
- 利用規約
- お問い合わせ
- プライバシーポリシー
- ニュース
2025.05.01
法事がありました。
作業全然できんやんけ！！！
できる時にできるだけやった方が良い。
2025.04.25
サイトマップ制作
- トップページ
- プライバシーポリシー
- ニュース
- コンテンツ一覧
- ステムシミュレーションページ
- 検索結果表示画面
- 利用規約
- お問い合わせ
- ステムデータとは、使い方の説明
Artlistのステムデータ
プレビューもできました。
- Roll the Dice | Artlist
Web Audio API
オーディオミキサーのプロトタイプでは、オーディオの制御をWeb Audio APIを使用しおこなっている。
- ウェブオーディオ API | MDN Web Docs
先行事例
BGMを作って分割してくれるAI
お互いに歩み寄る
映像側と音楽側でどちらがどのくらい編集するかを考える必要がある。
今回は映像編集者向けのサイトであるため、音楽側の編集量を少なくする必要があるだろう。
現在の問題
- ダウンロードした後どう編集するか
- ブラウザでどうやってシミュレーションさせるか
映像制作という主語が大きすぎる
例えばYouTubeでは、音が不自然にカットされていたり、映像が続いているのに曲が終わっていたり、シーンが変わっているのにBGMが変わらないなど、違和感のある編集が多々ある、という問題がある。
などなど…
サイトロゴについての調査
公園ではなくひろばでした。間違えました；；
- ひろばについての調査が必要
2025.04.24
サイトロゴについての調査
- 公園をイメージし、芝生のみどり、空の青、人工物のグレーを採用。
- 公園についての調査が必要
- Wiiの似顔絵チャンネルが雰囲気の参考になるかも
スケジュールの確認
Google スプレッドシートによるガントチャートを作成。同時に完成までに行う作業の確認。
2025.04.23
おといろひろば完成イメージ図
- ジャンルやシーンなどの単語で、使いたい音を検索
- プレビューして雰囲気を確認
- ミキサーで細かいシミュレーションもできます
- ステムデータをすべてDLできる
- 必要な音だけDLできる
- 映像編集ソフトに取り込んで音量調整
- 動画として書き出したら完成
上記説明を図にしたものはこちら | GitHub
2025.04.18
完成イメージ
映像編集者がどうやって使用するかが想像できるようにすると良い。
完成イメージがはっきりすると、作業量が明確になり、作りやすいだろう。
アイデア
ジャンルやBPM、コード進行を統一すれば、組み合わせ方でコンテンツの充実度が上がるかも…？
音源のカテゴリ分け
カテゴリの優先順位を、どの順番にするかを考える必要がある。和風や季節などのテーマや、オーケストラやジャズなどのジャンル、トランペットやギターなどの使用楽器、日常や自然などのシーン、色々な可能性が考えられる。
なぜステムデータが使われていたか
元々、ステムデータでの音楽納品は、テレビシリーズのアニメやドラマなど継続的な映像制作の現場で使われてきた手法である。これは、毎話異なる演出や尺に対応するため、編集段階で音の構成を柔軟に調整できる必要があったことに起因している。シリーズ内でのサウンドの統一感を整えるためでもある。
たとえば、メロディだけを残して別の場面に流用する、ドラムを抜いて静かなシーンにする、同じ曲を短く再構成する、といった使い方が可能になるのが、ステムデータの大きな利点だ。
しかしこの手法は、商業の限られた制作現場に閉じた慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、ステムで提供される音楽素材自体がほとんど存在しなかったこと、そして音楽の再構成に対する知識が共有されていなかったことである。現在は、ステムで音楽素材を提供するサービスも増えている。
参考資料
- 劇伴音楽の作り方 | note
- 「ドラマ音楽の制作工程が知りたいです。」 | note
2025.04.17
ステムで配信されている既存のサイト
どちらもステムでの配布がされているみたい？
プレビューには対応していないようです。
参考になりそうな記事
- ステムデータで編集を向上させる方法 | Artlist
2025.04.11
最終的なアウトプット
音源にこだわってみたらより良くなるんじゃあない？という提案を上手に見せることができれば、良い研究に近づくのではないか。
同じ映像、同じトラックを使用し、フェードアウトだけで雰囲気が変わるよ、という説明ができると良いのか？
ターゲット層
2つのアプローチがあると考えていた。
- こだわりたいけれど、色々な理由でこだわることができない人がいる界隈へのアプローチ。
- 現状以上のこだわり方を知らない人々へ、こだわり方を知らせる。
しかし、どちらも一緒にやれば良いのではないか。知っている人は説明しなくてもわかる、知らない人にはわかりやすく説明する。両方同時にできるのではないか。
2025.04.09
オーディオミキサーのアップデート
- こちらをクリックで表示 | Github Pages
プログレスバーが表示された後、オーディオファイル読み込み前の確認ボタンが表示されていた。混乱してしまうため、表示順を逆にしました。
- 当時の映像はこちら | MP4 1.6 MB
2025.04.08
オーディオミキサーのアップデート
- こちらをクリックで表示 | Github Pages
mp3を読み込む時、MB単位での通信となるため、読み込み前の確認ボタンを設置。また、読み込むmp3の合計データ容量を表示させるようにした。
- 当時のスクリーンショットはこちら | Github
2025.04.02
オーディオミキサーのプロトタイプ
- こちらをクリックで表示 | Github Pages
オーディオミキサーのプロトタイプが上手にできた。
再生しているのはmp3ファイルだが、ダウンロードボタンを押すとwavファイルがダウンロードできるようになっている。
スマホ版では、パケット通信量の都合でダウンロードボタンを消した。
- 当時の映像はこちら | MP4 6.58 MB
プロジェクト名
おといろひろばに決定。
音で映像作品を彩ってほしい。その音素材が集まるひろばという意味です。
いらすとやからインスピレーションを受け、その音版をイメージしました。
mp3の容量と音質
- サウンドの比較ページはこちらをクリック | Github Pages
オーディオファイルをwavからmp3の変換する際、音質を下げることでファイル容量を削減できる。しかし、音質を下げすぎると、映像制作者側でシミュレーションがしにくくなる。
良いバランスをとるための検証を行った結果、サンプリングレートを44.1kHzに固定し、可変ビットレートによる音質と容量のテストを行ったところ、7を指定するのが一番良いとの結論に辿り着いた。変換はpythonで行う。
- ソースコードはこちら | Github
上記コードのここを書き換え
parameters=["-q:a", "7", "-ar", "44100"]
2025.03.21
アイデアが浮かぶ
映像制作者向けにBGMをステムデータで配布するアイデアが浮かぶ。
ステムデータの説明をするため、オーディオミキサーが必要だと考えた。配布する媒体のことを考慮し、webブラウザ上で動作するようにした方が良いだろう。
既存のサイト
- Audiostock
- Artlist | ステムでの配布がされているみたい？プレビューには対応していません。
どちらもオーディオトラックを一本にまとめてある。映像編集者にとっては楽なのかもしれないが、ステムで配布すると、より詳細な編集ができるようになる。
ここ盛り上がって欲しくないのに…、リズムパートを消したい…、などの問題があった時、今までだと違う音源を探す必要があったが、フェードインアウトだけで対応ができるようになる。それにより、音源を探す手間を省ける。音源を編集する手間は増えます。
以下参考ページ