はじめに
普段は「7g3」という名義で、作曲やMix、Masteringなどの音楽制作をしています。
音楽を作り続ける中で、音だけではなく、その曲から浮かぶ光や空間、動きまで自分で表現したいと思うようになりました。
そこからWeb Audio APIやThree.js、WebGLに触れ、現在はReact / TypeScriptを中心に、音楽・映像・3D表現を組み合わせたWebアプリケーションを開発しています。
音と一緒に動く映像を作りたかった
音楽を制作するとき、自分の頭の中には音だけでなく、色や光、空間のイメージがあります。
しかし、完成した楽曲を公開するときは、ジャケット画像と音声だけになることがほとんどです。
曲を作るたびに本格的な映像を制作するのは難しいため、音源を読み込むだけで、その音に反応する映像を作れるツールがあればいいのではないかと考えました。
そこで開発したのが、ブラウザ上で動作する「Audio Reactive 3D Visualizer」です。
音源をアップロードすると、音量や周波数を解析し、3Dオブジェクトやパーティクル、波形などがリアルタイムで変化します。作成した映像をMP4として出力できる機能も実装しました。
Audio Reactive 3D Visualizerを見る
音楽制作の経験を、実装に生かす
開発では、単に音の数値に反応させるのではなく、映像として自然に見える動きを意識しました。
すべての周波数をそのまま反映すると、動きが細かくなりすぎたり、画面全体が常に激しく動いたりします。
そのため、低音・中音・高音を分け、それぞれを異なる動きや光の変化に割り当てました。
数値として正しく反応することと、表現として心地よく見えることは、必ずしも同じではありません。
音楽を制作してきた経験は、こうした調整や判断を行ううえで生かせたと感じています。
機能だけでは、使いやすいサービスにならない
開発を進める中で難しかったのは、音声解析や3D表現だけではなく、UIの設計でした。
設定項目を増やせば細かく調整できますが、初めて使う人にとっては操作が複雑になります。一方で、操作を単純にしすぎると、表現の幅が狭くなります。
音源の読み込みから映像の調整、書き出しまでを、クリエイターが迷わず進められるようにするにはどうすればよいか。
この制作を通して、機能を実装するだけでなく、ユーザーがどのように操作するかまで考えることの大切さを学びました。
実務で学んだ、ユーザー視点のUI改善
その後、1か月間のトライアル契約として、クリエイター向けWebサービスのフロントエンド開発に携わりました。
React / TypeScriptを用いた画面実装を中心に、音声や動画を扱うプレビューUIの改善、表示バリエーションの検証、既存機能の改善提案などを担当しました。
また、クライアント側とクリエイター側の双方の視点から、プロジェクト作成、メンバー招待、契約確認、メッセージ、データ提出、進行確認などの利用導線を検証しました。
この経験から、UI/UX改善とは見た目を整えることだけではなく、ユーザーが迷う箇所や不安を感じる部分を見つけ、それを減らしていくことだと学びました。
これから作っていきたいもの
今後は、React / TypeScriptを軸に、Three.js、WebGL、Web Audio APIなども活用しながら、音楽・映像・Web技術を組み合わせたプロダクトを作っていきたいです。
特に、音楽や映像制作を支援するWebサービス、クリエイターの作品を魅力的に見せるポートフォリオ、ブラウザ上で制作から出力まで完結する表現ツールに関心があります。
音楽制作とWeb開発は、最初は別々の活動でした。
しかし、自分にとってはどちらも、頭の中にあるものを、他の人が見たり触れたりできる形にすることです。
音楽を作ってきた経験とフロントエンド開発の技術を組み合わせ、クリエイターの表現や制作を支えられるサービスを作っていきたいと考えています。
