松本龍太郎/卒業研究
をテンプレートにして作成
HOME
ABOUT
最新の更新
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
木村円香
鴻上早紀
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
江口依舞
久木田直央
本田麻緒
山田真央
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
庭瀬美来
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
佐藤美月
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
橋本音花
若狭映那
古賀莉梨香
2025
MEMBER 2025
赤星花
有薗晴己
泉百々
稲吉うた
宇都宮楓
大島詩絵里
小川眞由
源島咲太郎
櫻井風希
佐藤禾生子
友田葵
中西恋果
中山颯太
新甫楓佳
納富早希
野口瑞季
橋本京佳
東島百合子
平野雅華
深井梨々子
松本美時
丸石樹
椋本凌
村山小桜
村山優
持田真翔
吉松まなみ
浅川ひより
池光希
大崎優衣
大瀬梨乃亜
加藤虎太郎
金丸菜美
北本杏
坂本隆太朗
杉野亜子
田代夕加里
永野陽香
濱村悠伸
原凛々子
一松彩心
八木玲蓮
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2024年度卒業生
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
企画デザイン演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
SEARCH
開始行:
*おといろひろば
カスタムできるBGMの配布サイト
#image(mainImage.jpg)
-''松本龍太郎''
-'''Keywords:Web Design, BackGround Music, Stems'''
-https://otoiropark.ryukochan.com/
~
**概要
***これは何?
本研究は、映像制作者が自らの作品に合わせて細部にまでこ...
これにより、映像制作者は今まで入手が困難であったステム...
//以下に、本取り組みの背景となる根拠および、具体的な制作...
//&color(red){これは何か・・を簡潔に};
~
***ステムデータとは
楽曲を構成する、ピアノ、ドラム、ギターなどの各パートを...
ステムデータは、こうした''映像の制作手法を音楽にも適用...
また、音楽の尺を調整したいときも、パートごとに編集でき...
~
***背景と目的
テレビシリーズのアニメやドラマの制作現場では、ステムデ...
音楽にこだわりたいけど、どうこだわれば良いかわからない...
この課題を解決するため、映像制作者が自らの作品に合わせ...
//&color(red){プロジェクトの背景と目的};
~
***コンセプト
映像制作者にとって、ステムデータという概念は馴染みが薄...
なお、サイト名の由来は「映像を彩る音素材が集まる広場」...
//&color(red){基本的な考え方、枠組み、視点など};
~
***成果物の仕様
''webサイトのURL''
-https://otoiropark.ryukochan.com/
-[[こちらをクリックでソースコードを表示>https://ksumail-m...
~
-システム概要
本システムの技術的基盤は、HTMLおよびCSSによって構築され...
~
-サイトの利用者のワークフロー
利用者は、映像作品における演出意図に基づき、任意のキー...
本サイトのBGM素材においては、利用者が目的に沿って迅速に...
検索結果の表示後、利用者はブラウザ上に実装されたオーデ...
~
-オーディオミキサー機能
主要な機能として、オーディオミキサーを模したユーザーイ...
この機能は、JavaScriptおよびWeb Audio APIを基盤として実...
~
''配布コンテンツまとめ''
-[[こちらをクリックで表示>https://otoiropark.ryukochan.co...
映像作品での使用を前提に、制作者が能動的に楽曲を編集で...
制作プロセスにおいては、デジタル・オーディオ・ワークス...
~
''ビジュアルまとめ''
-色彩構成
|#61ac5d|BGCOLOR(#61ac5d):|
|#e7e7e7|BGCOLOR(#e7e7e7):|
サイト全体の色彩構成は、「おといろひろば」というサイト...
~
-ヘッダーのロゴ
#image(https://otoiropark.ryukochan.com/images/logo1.png)
RIGHT:CSSでネガポジ反転して使用しています。
~
-favicon
-og image
-apple-touch-icon
#image(https://otoiropark.ryukochan.com/images/apple-touc...
サイズ違いで全て同じ画像です。
名称の由来(映像を彩る音素材が集まる広場)を視覚言語と...
~
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
//~
//***メンバー
//&color(red){共同プロジェクトの場合のみ|メンバーと役割...
//~
***制作ツール
-html
-css
-JavaScript
-php
-Visual Studio Code
-MAMP
-Adobe illustrator
-Adobe Photoshop
-Logic Pro 11
//その他プラグインなどは、別のページにまとめる予定です。
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~
***プロジェクトの期間
プロジェクトの期間|2025.04.11 - 2025.11.30
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
~
***まとめ
映像制作者が音楽演出にも主体的に関わることができる環境...
今後、配布楽曲のラインナップをさらに拡充することにより...
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**調査
***現状調査
日本語圏のweb空間において、ステムデータ形式によるBGMの配...
-[[アニメ音響の魔法 音響監督が語る、音づくりのすべて>http...
-[[劇伴音楽の作り方>https://note.com/tenq/n/n2ebfd441768d...
-[[「ドラマ音楽の制作工程が知りたいです。」>https://note....
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
~
***先行事例
海外では、ArtlistやEpidemic Soundといった著名なプラットフ...
-[[Artlist>https://artlist.io/]]
-[[Epidemic Sound>https://www.epidemicsound.com/]]
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
~
***技法・技術情報
-[[アニメ音響の魔法 音響監督が語る、音づくりのすべて, 株...
-[[ステムデータで編集を向上させる方法>https://artlist.io/...
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
~
~
**プロジェクト管理
***スケジュール
[[Google スプレッドシートへのリンクはこちら>https://docs....
//&color(red){計画的な遂行のために、進行管理表を作成して...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-%%サイト名決め%%
-%%サイトロゴ%%
-%%サイトチュートリアル制作%%
-%%サイトピクトグラムなど%%
-%%サイトコーディング%%
-%%JavaScriptプログラミング%%
-%%コンテンツ制作%%
-%%1Q審査%%
-%%2Q審査%%
-%%概要集%%
-最終審査
-卒展準備
//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしな...
//&color(red){例:10人以上の会議には出ない。苦手なことは...
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2025.12.05
~
~
**2025.11.28
~
~
**2025.11.21
~
~
**2025.11.14
~
***ヘッダーのキャラクターについて
トップページのみ、ヘッダーの縦幅を広げた結果、ハンバーガ...
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
~
***概要集の編集
制作物のセクションを編集していました。完成です。
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
~
**2025.11.07
~
***チュートリアルの更新
自動でフェーダーが動くように更新。チュートリアルの動画を...
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
使用した動画のソースはこちら
-[[くつろぐネコ>https://video-ac.com/video/31427]] | 動画AC
-[[腹ペコの野良猫>https://video-ac.com/video/93807#goog_r...
~
~
**2025.11.12
~
***概要集の編集
制作物のセクションを編集しています。途中です。
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***メインイメージ制作
前回のビジュアルから大幅に変更。
綺麗にできました。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いメインイメージ画像はこちら>https://github....
~
~
**2025.10.31
~
***概要集の編集
サイトリンクがわからない問題の解決や、見た目の調整などを...
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***メインイメージの作成
-[[当時のメインイメージ画像はこちら>https://github.com/ry...
~
~
**2025.10.24
~
***概要集の編集
サイトリンクがわからない問題の解決や、見た目の調整などを...
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
~
**2025.10.17
~
***概要集の編集
新しくまとめ始めました。
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
~
**2025.10.10
~
***トップページのアニメーション
目線誘導のために追加しました。
実際のサイトは更新前です。
PCのシュミレート能力が低いため、映像がカクついています。
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
~
~
**2025.10.03
~
***チュートリアルの制作
トップページに簡単なシミュレーションができる機能を追加。
まだ公開はしていません。
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
~
~
**2025.09.26
~
***news一覧のcssを修正
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いスクリーンショットはこちら>https://github....
~
***ロゴタイプを変更
ゴシック体に合わせました。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いスクリーンショットはこちら>https://github....
~
***検索結果リストのcssを変更
細くしました。見やすいと思ったので。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いスクリーンショットはこちら>https://github....
~
***sidebarに背景画像を追加
統一感を出すために背景画像を追加しました。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
~
***お知らせページの追加
追加しました。URLはこちら↓
-https://otoiropark.ryukochan.com/news
-[[当時のお知らせ一覧ページはこちら>https://github.com/ry...
-[[当時のお知らせ閲覧ページはこちら>https://github.com/ry...
~
~
**2025.09.19
~
***検索結果のインデックス除外
[[検索結果>https://otoiropark.ryukochan.com/result]]の画...
-[[当時のスクリーンショットはこちら>https://github.com/ry...
~
***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更新
ステムでロードするためのボタンがわかりにくかったため更新。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
モバイル環境で、ステムでロードするためのボタンがわかりに...
-[[当時のスクリーンショットはこちら>https://github.com/ry...
~
~
**2025.07.18
~
***ワイヤーフレーム制作
制作途中です。
ほぼ全てのページで使用される共通部分を先行して考えている。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
***webデザインの参考サイト
このサイトの斜線がかわいい。
おといろひろばにも、公園のタイルなどのモチーフを散りばめ...
-[[ストックマテリアル>https://stockmaterial.net/]]
~
***指定フォント
webフォントに[[IBM Plex Sans JP>https://fonts.google.com/...
-[[IBM Plex Sans JP>https://fonts.google.com/specimen/IBM...
以下にそのメリットを記述する。
-高い可読性と親しみやすさを両立したデザイン
-完全に無料で、商用利用も可能
-Webフォントとして簡単に利用できる
-豊富なウェイトで表現の幅が広がる
また、画像の和文フォントにも[[IBM Plex Sans JP>https://fo...
なお、画像の欧文フォントについては検討中である。以下にそ...
-Futura
~
***アイデアメモ
楽曲の規模を大編成、中編成、小編成の3つで表そうと思いつき...
使うかどうかは不明。多分使わない。理由は楽曲の規模をテキ...
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
~
**2025.07.11
***ロゴタイプデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
~
**2025.07.04
~
***シンボルマークデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
***概要集編集
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***スケジュールをアップデート
全体的なスケジュールの見直し、調整を行いました。
~
~
**2025.06.27
~
***シンボルマークデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
***概要集編集
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***スケジュールをアップデート
全体的なスケジュールの見直し、調整を行いました。
~
~
**2025.06.20
~
***概要集編集
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***シンボルマークデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
~
**2025.06.13
~
***ロゴの参考資料更新
-[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ9...
~
~
**2025.06.06
~
***ロゴマークのラフ
|#image(https://ryutarodayo1234.github.io/OtoiroPark/logo...
|#image(https://ryutarodayo1234.github.io/OtoiroPark/logo...
~
~
**2025.05.23
~
***サイトマップのアップデート
-[[当時のサイトマップはこちら>https://github.com/ryutarod...
ニュースカテゴリがいらないという判断をしました。
~
***ロゴのアイデアスケッチ
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
左右反転させると、真ん中が三角になって再生ボタンに見える...
~
***ロゴの参考資料探し
-[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ9...
~
~
**2025.05.16
~
***楽曲のカテゴリ
ジャンルではなく、雰囲気やシーンで分ける方が良いと判断。
例えば
-日常1
-日常2
-怒り1
-怒り2
-コミカル
-感動
など…
~
~
**2025.05.09
~
***ロゴの参考資料探し
-[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ9...
ひろばと音が重要。ロゴマークとロゴタイプでセットにする方...
~
***ロゴのアイデアスケッチ
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
素材が置いてある場所、ひろばの木にみんなが集まるイメージ...
~
~
**2025.05.02
~
***ステムデータとは
ステムデータとは、1つの完成された音楽を、役割ごとに分けて...
映像編集では、カメラで撮影した素材をもとに、色調を整えた...
通常、私たちが聴く音楽はすべての音がミックスされて1つの音...
~
***サイトマップ制作
-[[当時のサイトマップはこちら>https://github.com/ryutarod...
~
***スケジュールをアップデート
5つの事務作業を追加
-1Q審査
-2Q審査
-概要集
-最終審査
-卒展準備
~
***必要なページのおさらい
-トップページ
--おすすめコンテンツ
--サイトの使い方
--キーワード検索窓
--ステムデータとは、使い方の説明
-コンテンツ一覧
--タグ検索できる何か
--ステムシミュレーションページ
-検索結果
-利用規約
-お問い合わせ
-プライバシーポリシー
-ニュース
~
~
**2025.04.25
~
***Artlistのステムデータ
プレビューもできました。
-[[Roll the Dice>https://artlist.io/royalty-free-music/so...
~
***Web Audio API
オーディオミキサーのプロトタイプでは、オーディオの制御をW...
-[[ウェブオーディオ API>https://developer.mozilla.org/ja/...
~
***必要なページのおさらい
-トップページ
--サイトの使い方
--ステムデータとは、使い方の説明
-コンテンツ一覧
--タグ検索できる何か
--ステムシミュレーションページ
-検索結果
-利用規約
-お問い合わせ
-プライバシーポリシー
-ニュース
~
~
**2025.04.18
~
***おといろひろばの使い方
-ジャンルやシーンなどの単語で、使いたい音を検索
-プレビューして雰囲気を確認
-ミキサーで細かいシミュレーションもできます
-ステムデータをすべてDLできる
-必要な音だけDLできる
-映像編集ソフトに取り込んで音量調整
-動画として書き出したら完成
-[[イメージ画像はこちら>https://github.com/ryutarodayo123...
~
***なぜステムデータが使われていたか
元々、ステムデータでの音楽納品は、テレビシリーズのアニメ...
たとえば、メロディだけを残して別の場面に流用する、ドラム...
しかしこの手法は、商業の限られた制作現場に閉じた慣習であ...
~
***サイトロゴについての調査
-ひろばについての調査が必要
-Wiiの似顔絵チャンネルが雰囲気の参考になるかも
--[[Mii Channel | Wii Wiki | Fandom>https://wii.fandom.co...
--[[開発スタッフが語る『似顔絵チャンネル』の話。>https://...
~
***事務作業
-Google スプレッドシートによるガントチャートを作成。
~
***参考資料
-[[劇伴音楽の作り方>https://note.com/tenq/n/n2ebfd441768d...
-[[「ドラマ音楽の制作工程が知りたいです。」>https://note....
~
~
**2025.04.11
~
***アイデア
映像制作では、作品の見た目には強いこだわりがあっても、音...
ビジュアルとサウンドは、どちらも情報を伝えるための大切な...
現状の配布データより、より細かな編集ができるようなデータ...
~
***現状の調査
-[[フェードだけじゃ芸が無い!BGMを途中で切る「7つのテクニ...
-[[Audiostock>https://audiostock.jp/]]
~
***先行事例の調査
-[[Artlist>https://artlist.io/]]
-[[Epidemic Sound>https://www.epidemicsound.com/]]
どちらもステムでの配布はしてありそうだが、ステムでのプレ...
~
***オーディオミキサーのプロトタイプ制作
-[[こちらをクリックで表示>https://ryutarodayo1234.github....
再生しているのはmp3ファイルだが、ダウンロードボタンを押す...
スマホ版では、パケット通信量の都合でダウンロードボタンを...
~
***mp3の容量と音質
-[[サウンドの比較ページはこちらをクリック>https://ryutaro...
オーディオファイルをwavからmp3の変換する際、音質を下げる...
良いバランスをとるための検証を行った結果、サンプリングレ...
-[[ソースコードはこちら>https://github.com/ryutarodayo123...
上記ソースコードのここで、可変ビットレートとサンプリング...
parameters=["-q:a", "7", "-ar", "44100"]
~
***プロジェクトタイトル
''おといろひろば''にする。
音で映像作品を彩ってほしい。その音素材が集まるひろばとい...
[[いらすとや>https://www.irasutoya.com/]]からインスピレー...
~
~
~
終了行:
*おといろひろば
カスタムできるBGMの配布サイト
#image(mainImage.jpg)
-''松本龍太郎''
-'''Keywords:Web Design, BackGround Music, Stems'''
-https://otoiropark.ryukochan.com/
~
**概要
***これは何?
本研究は、映像制作者が自らの作品に合わせて細部にまでこ...
これにより、映像制作者は今まで入手が困難であったステム...
//以下に、本取り組みの背景となる根拠および、具体的な制作...
//&color(red){これは何か・・を簡潔に};
~
***ステムデータとは
楽曲を構成する、ピアノ、ドラム、ギターなどの各パートを...
ステムデータは、こうした''映像の制作手法を音楽にも適用...
また、音楽の尺を調整したいときも、パートごとに編集でき...
~
***背景と目的
テレビシリーズのアニメやドラマの制作現場では、ステムデ...
音楽にこだわりたいけど、どうこだわれば良いかわからない...
この課題を解決するため、映像制作者が自らの作品に合わせ...
//&color(red){プロジェクトの背景と目的};
~
***コンセプト
映像制作者にとって、ステムデータという概念は馴染みが薄...
なお、サイト名の由来は「映像を彩る音素材が集まる広場」...
//&color(red){基本的な考え方、枠組み、視点など};
~
***成果物の仕様
''webサイトのURL''
-https://otoiropark.ryukochan.com/
-[[こちらをクリックでソースコードを表示>https://ksumail-m...
~
-システム概要
本システムの技術的基盤は、HTMLおよびCSSによって構築され...
~
-サイトの利用者のワークフロー
利用者は、映像作品における演出意図に基づき、任意のキー...
本サイトのBGM素材においては、利用者が目的に沿って迅速に...
検索結果の表示後、利用者はブラウザ上に実装されたオーデ...
~
-オーディオミキサー機能
主要な機能として、オーディオミキサーを模したユーザーイ...
この機能は、JavaScriptおよびWeb Audio APIを基盤として実...
~
''配布コンテンツまとめ''
-[[こちらをクリックで表示>https://otoiropark.ryukochan.co...
映像作品での使用を前提に、制作者が能動的に楽曲を編集で...
制作プロセスにおいては、デジタル・オーディオ・ワークス...
~
''ビジュアルまとめ''
-色彩構成
|#61ac5d|BGCOLOR(#61ac5d):|
|#e7e7e7|BGCOLOR(#e7e7e7):|
サイト全体の色彩構成は、「おといろひろば」というサイト...
~
-ヘッダーのロゴ
#image(https://otoiropark.ryukochan.com/images/logo1.png)
RIGHT:CSSでネガポジ反転して使用しています。
~
-favicon
-og image
-apple-touch-icon
#image(https://otoiropark.ryukochan.com/images/apple-touc...
サイズ違いで全て同じ画像です。
名称の由来(映像を彩る音素材が集まる広場)を視覚言語と...
~
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
//~
//***メンバー
//&color(red){共同プロジェクトの場合のみ|メンバーと役割...
//~
***制作ツール
-html
-css
-JavaScript
-php
-Visual Studio Code
-MAMP
-Adobe illustrator
-Adobe Photoshop
-Logic Pro 11
//その他プラグインなどは、別のページにまとめる予定です。
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~
***プロジェクトの期間
プロジェクトの期間|2025.04.11 - 2025.11.30
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
~
***まとめ
映像制作者が音楽演出にも主体的に関わることができる環境...
今後、配布楽曲のラインナップをさらに拡充することにより...
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**調査
***現状調査
日本語圏のweb空間において、ステムデータ形式によるBGMの配...
-[[アニメ音響の魔法 音響監督が語る、音づくりのすべて>http...
-[[劇伴音楽の作り方>https://note.com/tenq/n/n2ebfd441768d...
-[[「ドラマ音楽の制作工程が知りたいです。」>https://note....
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
~
***先行事例
海外では、ArtlistやEpidemic Soundといった著名なプラットフ...
-[[Artlist>https://artlist.io/]]
-[[Epidemic Sound>https://www.epidemicsound.com/]]
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
~
***技法・技術情報
-[[アニメ音響の魔法 音響監督が語る、音づくりのすべて, 株...
-[[ステムデータで編集を向上させる方法>https://artlist.io/...
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
~
~
**プロジェクト管理
***スケジュール
[[Google スプレッドシートへのリンクはこちら>https://docs....
//&color(red){計画的な遂行のために、進行管理表を作成して...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-%%サイト名決め%%
-%%サイトロゴ%%
-%%サイトチュートリアル制作%%
-%%サイトピクトグラムなど%%
-%%サイトコーディング%%
-%%JavaScriptプログラミング%%
-%%コンテンツ制作%%
-%%1Q審査%%
-%%2Q審査%%
-%%概要集%%
-最終審査
-卒展準備
//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしな...
//&color(red){例:10人以上の会議には出ない。苦手なことは...
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2025.12.05
~
~
**2025.11.28
~
~
**2025.11.21
~
~
**2025.11.14
~
***ヘッダーのキャラクターについて
トップページのみ、ヘッダーの縦幅を広げた結果、ハンバーガ...
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
~
***概要集の編集
制作物のセクションを編集していました。完成です。
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
~
**2025.11.07
~
***チュートリアルの更新
自動でフェーダーが動くように更新。チュートリアルの動画を...
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
使用した動画のソースはこちら
-[[くつろぐネコ>https://video-ac.com/video/31427]] | 動画AC
-[[腹ペコの野良猫>https://video-ac.com/video/93807#goog_r...
~
~
**2025.11.12
~
***概要集の編集
制作物のセクションを編集しています。途中です。
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***メインイメージ制作
前回のビジュアルから大幅に変更。
綺麗にできました。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いメインイメージ画像はこちら>https://github....
~
~
**2025.10.31
~
***概要集の編集
サイトリンクがわからない問題の解決や、見た目の調整などを...
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***メインイメージの作成
-[[当時のメインイメージ画像はこちら>https://github.com/ry...
~
~
**2025.10.24
~
***概要集の編集
サイトリンクがわからない問題の解決や、見た目の調整などを...
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
~
**2025.10.17
~
***概要集の編集
新しくまとめ始めました。
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
~
**2025.10.10
~
***トップページのアニメーション
目線誘導のために追加しました。
実際のサイトは更新前です。
PCのシュミレート能力が低いため、映像がカクついています。
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
~
~
**2025.10.03
~
***チュートリアルの制作
トップページに簡単なシミュレーションができる機能を追加。
まだ公開はしていません。
-[[当時の映像はこちら>https://ryutarodayo1234.github.io/O...
~
~
**2025.09.26
~
***news一覧のcssを修正
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いスクリーンショットはこちら>https://github....
~
***ロゴタイプを変更
ゴシック体に合わせました。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いスクリーンショットはこちら>https://github....
~
***検索結果リストのcssを変更
細くしました。見やすいと思ったので。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
-[[比較用の古いスクリーンショットはこちら>https://github....
~
***sidebarに背景画像を追加
統一感を出すために背景画像を追加しました。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
~
***お知らせページの追加
追加しました。URLはこちら↓
-https://otoiropark.ryukochan.com/news
-[[当時のお知らせ一覧ページはこちら>https://github.com/ry...
-[[当時のお知らせ閲覧ページはこちら>https://github.com/ry...
~
~
**2025.09.19
~
***検索結果のインデックス除外
[[検索結果>https://otoiropark.ryukochan.com/result]]の画...
-[[当時のスクリーンショットはこちら>https://github.com/ry...
~
***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更新
ステムでロードするためのボタンがわかりにくかったため更新。
-[[当時のスクリーンショットはこちら>https://github.com/ry...
モバイル環境で、ステムでロードするためのボタンがわかりに...
-[[当時のスクリーンショットはこちら>https://github.com/ry...
~
~
**2025.07.18
~
***ワイヤーフレーム制作
制作途中です。
ほぼ全てのページで使用される共通部分を先行して考えている。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
***webデザインの参考サイト
このサイトの斜線がかわいい。
おといろひろばにも、公園のタイルなどのモチーフを散りばめ...
-[[ストックマテリアル>https://stockmaterial.net/]]
~
***指定フォント
webフォントに[[IBM Plex Sans JP>https://fonts.google.com/...
-[[IBM Plex Sans JP>https://fonts.google.com/specimen/IBM...
以下にそのメリットを記述する。
-高い可読性と親しみやすさを両立したデザイン
-完全に無料で、商用利用も可能
-Webフォントとして簡単に利用できる
-豊富なウェイトで表現の幅が広がる
また、画像の和文フォントにも[[IBM Plex Sans JP>https://fo...
なお、画像の欧文フォントについては検討中である。以下にそ...
-Futura
~
***アイデアメモ
楽曲の規模を大編成、中編成、小編成の3つで表そうと思いつき...
使うかどうかは不明。多分使わない。理由は楽曲の規模をテキ...
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
~
**2025.07.11
***ロゴタイプデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
~
**2025.07.04
~
***シンボルマークデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
***概要集編集
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***スケジュールをアップデート
全体的なスケジュールの見直し、調整を行いました。
~
~
**2025.06.27
~
***シンボルマークデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
***概要集編集
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***スケジュールをアップデート
全体的なスケジュールの見直し、調整を行いました。
~
~
**2025.06.20
~
***概要集編集
-[[こちらをクリックで表示>https://ksumail-my.sharepoint.c...
~
***シンボルマークデジタル化
制作途中です。
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
~
~
**2025.06.13
~
***ロゴの参考資料更新
-[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ9...
~
~
**2025.06.06
~
***ロゴマークのラフ
|#image(https://ryutarodayo1234.github.io/OtoiroPark/logo...
|#image(https://ryutarodayo1234.github.io/OtoiroPark/logo...
~
~
**2025.05.23
~
***サイトマップのアップデート
-[[当時のサイトマップはこちら>https://github.com/ryutarod...
ニュースカテゴリがいらないという判断をしました。
~
***ロゴのアイデアスケッチ
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
左右反転させると、真ん中が三角になって再生ボタンに見える...
~
***ロゴの参考資料探し
-[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ9...
~
~
**2025.05.16
~
***楽曲のカテゴリ
ジャンルではなく、雰囲気やシーンで分ける方が良いと判断。
例えば
-日常1
-日常2
-怒り1
-怒り2
-コミカル
-感動
など…
~
~
**2025.05.09
~
***ロゴの参考資料探し
-[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ9...
ひろばと音が重要。ロゴマークとロゴタイプでセットにする方...
~
***ロゴのアイデアスケッチ
-[[こちらをクリックで表示>https://github.com/ryutarodayo1...
素材が置いてある場所、ひろばの木にみんなが集まるイメージ...
~
~
**2025.05.02
~
***ステムデータとは
ステムデータとは、1つの完成された音楽を、役割ごとに分けて...
映像編集では、カメラで撮影した素材をもとに、色調を整えた...
通常、私たちが聴く音楽はすべての音がミックスされて1つの音...
~
***サイトマップ制作
-[[当時のサイトマップはこちら>https://github.com/ryutarod...
~
***スケジュールをアップデート
5つの事務作業を追加
-1Q審査
-2Q審査
-概要集
-最終審査
-卒展準備
~
***必要なページのおさらい
-トップページ
--おすすめコンテンツ
--サイトの使い方
--キーワード検索窓
--ステムデータとは、使い方の説明
-コンテンツ一覧
--タグ検索できる何か
--ステムシミュレーションページ
-検索結果
-利用規約
-お問い合わせ
-プライバシーポリシー
-ニュース
~
~
**2025.04.25
~
***Artlistのステムデータ
プレビューもできました。
-[[Roll the Dice>https://artlist.io/royalty-free-music/so...
~
***Web Audio API
オーディオミキサーのプロトタイプでは、オーディオの制御をW...
-[[ウェブオーディオ API>https://developer.mozilla.org/ja/...
~
***必要なページのおさらい
-トップページ
--サイトの使い方
--ステムデータとは、使い方の説明
-コンテンツ一覧
--タグ検索できる何か
--ステムシミュレーションページ
-検索結果
-利用規約
-お問い合わせ
-プライバシーポリシー
-ニュース
~
~
**2025.04.18
~
***おといろひろばの使い方
-ジャンルやシーンなどの単語で、使いたい音を検索
-プレビューして雰囲気を確認
-ミキサーで細かいシミュレーションもできます
-ステムデータをすべてDLできる
-必要な音だけDLできる
-映像編集ソフトに取り込んで音量調整
-動画として書き出したら完成
-[[イメージ画像はこちら>https://github.com/ryutarodayo123...
~
***なぜステムデータが使われていたか
元々、ステムデータでの音楽納品は、テレビシリーズのアニメ...
たとえば、メロディだけを残して別の場面に流用する、ドラム...
しかしこの手法は、商業の限られた制作現場に閉じた慣習であ...
~
***サイトロゴについての調査
-ひろばについての調査が必要
-Wiiの似顔絵チャンネルが雰囲気の参考になるかも
--[[Mii Channel | Wii Wiki | Fandom>https://wii.fandom.co...
--[[開発スタッフが語る『似顔絵チャンネル』の話。>https://...
~
***事務作業
-Google スプレッドシートによるガントチャートを作成。
~
***参考資料
-[[劇伴音楽の作り方>https://note.com/tenq/n/n2ebfd441768d...
-[[「ドラマ音楽の制作工程が知りたいです。」>https://note....
~
~
**2025.04.11
~
***アイデア
映像制作では、作品の見た目には強いこだわりがあっても、音...
ビジュアルとサウンドは、どちらも情報を伝えるための大切な...
現状の配布データより、より細かな編集ができるようなデータ...
~
***現状の調査
-[[フェードだけじゃ芸が無い!BGMを途中で切る「7つのテクニ...
-[[Audiostock>https://audiostock.jp/]]
~
***先行事例の調査
-[[Artlist>https://artlist.io/]]
-[[Epidemic Sound>https://www.epidemicsound.com/]]
どちらもステムでの配布はしてありそうだが、ステムでのプレ...
~
***オーディオミキサーのプロトタイプ制作
-[[こちらをクリックで表示>https://ryutarodayo1234.github....
再生しているのはmp3ファイルだが、ダウンロードボタンを押す...
スマホ版では、パケット通信量の都合でダウンロードボタンを...
~
***mp3の容量と音質
-[[サウンドの比較ページはこちらをクリック>https://ryutaro...
オーディオファイルをwavからmp3の変換する際、音質を下げる...
良いバランスをとるための検証を行った結果、サンプリングレ...
-[[ソースコードはこちら>https://github.com/ryutarodayo123...
上記ソースコードのここで、可変ビットレートとサンプリング...
parameters=["-q:a", "7", "-ar", "44100"]
~
***プロジェクトタイトル
''おといろひろば''にする。
音で映像作品を彩ってほしい。その音素材が集まるひろばとい...
[[いらすとや>https://www.irasutoya.com/]]からインスピレー...
~
~
~
ページ名: