松本龍太郎/卒業研究 をテンプレートにして作成

開始行:
*おといろひろば カスタムできる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/]]からインスピレー... ~ ~ ~

ページ名: