#author("2025-10-31T13:42:56+09:00","default:member","member") #author("2025-11-21T11:27:31+09:00","default:member","member") RIGHT:[[Edit>https://design.kyusan-u.ac.jp/socialdesign/?cmd=edit&page=%E6%9D%BE%E6%9C%AC%E9%BE%8D%E5%A4%AA%E9%83%8E/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6/%E6%97%A5%E8%A8%98]] *りゅうこのにっき 卒業研究編 ~ 松本龍太郎が卒業研究の過程をまとめるページです。 後学のためやメモ代わりにもなると思ったので、進捗記録に書ききれない細かなことも含めて記録します。 ~ ~ **2025.11.20 ~ ***チュートリアルの更新 チュートリアルの動画を更新。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/webPageDesign/tutorial/SC1120.mp4]] | MP4 815kB Github Pages 使用した動画のソースはこちら -[[くつろぐネコ>https://video-ac.com/video/31427]] | 動画AC ~ ~ **2025.11.19 ~ ***概要集の編集 制作物のセクションを編集していました。完成です。 -[[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/IQDlffzNR9mXRoV1Z3AEYrkRAfiM-iW99KCqPY3aP5gAYNw?e=i3Ygaz]] | OneDrive 6MB 九州産業大学のユーザー限定 ~ ~ **2025.11.15 ~ ***ヘッダーのキャラクターについて 前回、ヘッダーの縦幅による問題の解決のためにキャラクターを設置したが、問題が発生しているのがモバイル表示の時のみだったため、モバイル表示の時はヘッダーを広げない方向性で修正した。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/webPageDesign/mainImages/SC1115.mp4]] | MP4 98kB Github Pages ~ ~ **2025.11.14 ~ ***ヘッダーのキャラクターについて トップページのみ、ヘッダーの縦幅を広げた結果、ハンバーガーメニューを押した時に不自然なマージンが発生してしまう問題が発生。修正するのが大変だったため、ヘッダーの裏にキャラクターを設置してみました。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/webPageDesign/mainImages/video1114.mp4]] | MP4 1.1MB Github Pages ~ ***概要集の編集 制作物のセクションを編集しています。途中です。 -[[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/IQDf7qxvSoAaQ5iMlU5F6BlHAYWntXHqTfwS0PiV6DScXBE?e=rzaLeF]] | OneDrive 9MB 九州産業大学のユーザー限定 ~ ~ **2025.11.13 ~ ***チュートリアルの更新 自動でフェーダーが動くように更新。チュートリアルの動画を更新。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/webPageDesign/tutorial/SC1113.mp4]] | MP4 410kB Github Pages 使用した動画のソースはこちら -[[くつろぐネコ>https://video-ac.com/video/31427]] | 動画AC -[[腹ペコの野良猫>https://video-ac.com/video/93807#goog_rewarded]] | 動画AC ~ ~ **2025.11.12 ~ ***概要集の編集 制作物のセクションを編集しています。途中です。 -[[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/IQBh1eW3ZiBtQZFelt06b8ciAY7S48izaowx3hBU8acK_MA?e=LRF58y]] | OneDrive 9MB 九州産業大学のユーザー限定 ~ ~ **2025.10.31 ~ ***メインイメージ制作 前回のビジュアルから大幅に変更。 綺麗にできました。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/mainImages/SS1031.jpg]] | GitHub -[[比較用の古いメインイメージ画像はこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/mainImages/mainImage.jpg]] | GitHub ~ ~ **2025.10.30 ~ ***概要集の編集 サイトリンクがわからない問題の解決や、見た目の調整などを行いました。 -[[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/Ec9UPQiA_m5Jo6PEhcmpNg0BZzYh4wE9j7DGe5QQfD1Ysw?e=xfHU10]] | OneDrive 9MB 九州産業大学のユーザー限定 ~ ***メインイメージの作成 -リンクは準備中です。 -[[当時のメインイメージ画像はこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/mainImages/mainImage.jpg]] | GitHub ~ ~ **2025.10.24 ~ ***概要集の編集 新しくまとめ始めました。 -[[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/EQlFroV6-05CqTGoowrBXH8BDLXIyuAs0OYitR9uXGSXzQ?e=vXvTw6v]] | OneDrive 9MB 九州産業大学のユーザー限定 ~ ~ **2025.10.20 ~ ***概要集の編集 -リンクは準備中です -途中保存してませんでした。 ~ ~ **2025.10.18 ~ ***概要集の編集 -リンクは準備中です -途中保存してませんでした。 ~ ~ **2025.10.10 ~ ***トップページのアニメーション 目線誘導のために追加しました。 PCのシュミレート能力が低いため、映像がカクついています。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/siteCoding/SC1010.mp4]] | MP4 1.1MB Github Pages ~ ~ **2025.10.03 ~ ***チュートリアルの制作 トップページに簡単なシミュレーションができる機能を追加。 まだ公開はしていません。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/siteCoding/SC1003.mp4]] | MP4 4.1MB Github Pages ~ ~ **2025.09.27 ~ ***news一覧のcssを修正 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0927-2.jpg]] | GitHub -[[比較用の古いスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0927-1.jpg]] | GitHub ~ ~ **2025.09.26 ~ ***ロゴタイプを変更 ゴシック体に合わせました。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/SS0926-1.jpg]] | GitHub -[[比較用の古いスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/photoshop/logo1_0817.png]] | GitHub ~ ***再生リストのcssを変更 細くしました。見やすいと思ったので。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0926-5.jpg]] | GitHub -[[比較用の古いスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0926-6.jpg]] | GitHub ~ ***sidebarに背景画像を追加 統一感を出すために背景画像を追加しました。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0926-4.jpg]] | GitHub ~ ***お知らせページの追加 追加しました。URLはこちら↓ -https://otoiropark.ryukochan.com/news -[[当時のお知らせ一覧ページはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0926-2.jpg]] | GitHub -[[当時のお知らせ閲覧ページはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0926-3.jpg]] | GitHub ~ ***検索結果リストのCSS更新 モバイル環境で、ステムでロードするためのボタンがわかりにくかったため更新。モバイル環境のみ180度回転させました。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0926-1.jpg]] | GitHub ~ ***検索結果のインデックス除外 [[検索結果>https://otoiropark.ryukochan.com/result]]の画面が全てインデックスされてしまい、わかりにくくなったため、noindex を追加 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/others/SS0926-1.jpg]] | 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 と記入していた。 ~ ~ **2025.09.19 ~ ***検索結果リストのCSS更新 ステムでロードするためのボタンがわかりにくかったため更新。 180度回転させました。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0919-1.jpg]] | GitHub ~ ~ **2025.09.15 ~ ***サイト公開 公開しました。↓サイトはこちら↓ https://otoiropark.ryukochan.com/ 修正点や改善点などがあれば教えてくださるとありがたいです。 特に利用規約とプライバシーポリシー。 -[[利用規約 | おといろひろば>https://otoiropark.ryukochan.com/terms]] -[[プライバシーポリシー | おといろひろば>https://otoiropark.ryukochan.com/privacy]] 今後はコンテンツを追加やチュートリアルの設置などを行います。 ~ ***プライバシーポリシーと利用規約 プライバシーポリシーと利用規約の見直しをしました。 ~ ~ **2025.09.12 ~ ***配布コンテンツ制作 -comical4が完成しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.11 ~ ***配布コンテンツ制作 -comical4を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.09 ~ ***プライバシーポリシーと利用規約 プライバシーポリシーと利用規約の見直しをしました。 ~ ~ **2025.09.08 ~ ***楽器アイコン制作 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/icons/SS0908-1.jpg]] | GitHub ~ ***配布コンテンツ制作 -comical1が完成しました。 -comical2が完成しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.07 ~ ***配布コンテンツ制作 -comical1を更新しました。 -comical2を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ***楽曲管理用ID変更 楽曲管理用IDは、ジャンルで分ける必要がなかった。 以前の楽曲管理用IDは、仮タイトルへと変更。 [[楽曲管理用IDが記載されているGoogle スプレッドシートへのリンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.06 ~ ***配布コンテンツ制作 -nichijo1が完成しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.05 ~ ***配布コンテンツ制作 -nichijo1を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.04 ~ ***配布コンテンツ制作 -nichijo1を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.03 ~ ***配布コンテンツ制作 -nichijo1を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.02 ~ ***配布コンテンツ制作 -nichijo1を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.09.01 ~ ***配布コンテンツ制作 -comical3を更新しました。 -impressed1を更新しました。 -nichijo2を更新しました。 -nichijo3を更新しました。 -positive1を更新しました。 -positive2を更新しました。 -positive3を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] リメイクできそうな昔の未使用曲も含まれます。 参考曲も更新しています。 ~ ~ **2025.08.31 ~ ***配布コンテンツ制作 -nichijo1を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] 参考曲も更新しています。 ~ ~ **2025.08.28 ~ ***配布コンテンツ制作 -positive2を更新しました。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.08.27 ~ ***配布コンテンツ制作 -nichijo2を更新しました。 -positive2を更新しました。 二つとも、昔の未使用曲がいい感じで、今回の企画ともマッチしているため、リメイクして使おうと思う。 [[Google スプレッドシートにまとめています。リンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.08.25 ~ ***配布コンテンツ一覧 -[[Google スプレッドシートへのリンクはこちら>https://docs.google.com/spreadsheets/d/1IMI_0YHSbhugHjKhgXLC-jm9p2LzeCjMGa0A7beSO50/edit?usp=sharing]] ~ ~ **2025.08.24 ~ ***CSS調整 少し改変しました。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/siteCoding/SC0824.mp4]] | MP4 8.2MB Github Pages ~ ~ **2025.08.23 ~ ***JavaScriptプログラミング 完了！嬉しい！！ 今後はサイトデザイン、CSSコーディングと並行し、コンテンツ（BGM）制作を行う。 プライバシーポリシーや利用規約ももう少し考える。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/siteCoding/SC0823.mp4]] | MP4 23.8MB Github Pages ~ ***インデックス登録 完了！！！！URLはこちら👇 https://otoiropark.ryukochan.com/ -[[当時のスクリーンショットはこちら（Google Search）>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/others/SS0823-1.jpg]] | GitHub -[[当時のスクリーンショットはこちら（Google Search Console）>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/others/SS0823-2.jpg]] | GitHub ~ ~ **2025.08.22 ~ ***楽曲リスト制作 楽曲のリストが表示されるようになりました。 20秒から30秒のデモが再生できます。 現在は全て同じ曲ですが、今後アップデート予定。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/siteCoding/SC0822.mp4]] | MP4 4.9MB Github Pages ~ ~ **2025.08.21 ~ ***CSSのコーディング 音楽リストがしたから上へ展開するような、コードを書いていた。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/siteCoding/SC0821.mp4]] | MP4 702kB Github Pages ~ ~ **2025.08.19 ~ ***システム先行ビジュアル後考 よく考えると、システム先行でビジュアルを考えるのが最適じゃないか！！！！！！ なんで気づかなかったんだ；；笑える。 ~ ~ **2025.08.17 ~ ***ロゴ修正 よく考えたら過度な装飾が無いのが一番だと気づいた。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/photoshop/logo1_0817.png]] | GitHub ~ ~ **2025.08.08 ~ ***サイトコーディング 一度コーディングしてみないと、デザインがわかりづらかったため、少し先行してコーディングしてみることにした。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/siteCoding/SS0808.jpg]] | GitHub ~ ***サイトデザイン デザインを考えているが、その前にコーディングする手法が得意であるため、悩む。同時並行でコーディングしながら進めても良いと思う。 -[[当時のサイトデザインはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/designMockups/playback0808.jpg]] | GitHub ~ ***ロゴ完成 一旦完成とする。要調整。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/photoshop/logo1_0808.png]] | GitHub ~ ***ワイヤーフレーム完成 ヘッダーはトップページのみ拡張する仕様にする。 BGMを視聴するページは大体このままで良いと思う。 ニュースヤプラーバシーポリシーは、ベーシックページにそのまま文字を書き込むだけでも良いだろう。 -[[拡張したヘッダーはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/wireFrame/header_expanded_frontpage0808.jpg]] | GitHub -[[通常時のヘッダーはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/wireFrame/header_compress0808.jpg]] | GitHub -[[BGMを視聴するページはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/wireFrame/result0808.jpg]] | GitHub -[[ベーシックページはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/wireFrame/basic0721.jpg]] | GitHub ~ ~ **2025.07.21 ~ ***ワイヤーフレーム制作 制作途中です。 ほぼ全てのページで使用される共通部分を先行して考えている。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/wireFrame/basic0721.jpg]] | GitHub ~ ***webデザインの参考サイト このサイトの斜線がかわいい。 おといろひろばにも、公園のタイルなどのモチーフを散りばめたい。 -[[ストックマテリアル>https://stockmaterial.net/]] ~ ***指定フォント webフォントに[[IBM Plex Sans JP>https://fonts.google.com/specimen/IBM+Plex+Sans+JP]]を使用する。 -[[IBM Plex Sans JP>https://fonts.google.com/specimen/IBM+Plex+Sans+JP]] | Google Fonts 以下にそのメリットを記述する。 -高い可読性と親しみやすさを両立したデザイン -完全に無料で、商用利用も可能 -Webフォントとして簡単に利用できる -豊富なウェイトで表現の幅が広がる また、画像の和文フォントにも[[IBM Plex Sans JP>https://fonts.google.com/specimen/IBM+Plex+Sans+JP]]を使用する。 なお、画像の欧文フォントについては検討中である。以下にその候補を記述する。 -Futura ~ ~ **2025.07.18 ~ ***アイデアメモ 楽曲の規模を大編成、中編成、小編成の3つで表そうと思いつきメモ。 使うかどうかは不明。多分使わない。理由は楽曲の規模をテキストから想像できる人が少ないから。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/ideaBox/instrumentation0718.jpg]] | GitHub ~ ~ **2025.07.17 ~ ***ロゴタイプデジタル化 制作途中です。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/illustrator/0717-2.jpg]] | GitHub -[[途中のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/illustrator/0717-1.jpg]] | GitHub ~ ~ **2025.07.03 ~ ***シンボルマークデジタル化 制作途中です。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/illustrator/0703.jpg]] | GitHub ~ ***概要集編集 [[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/ES4mYJEZEGNKo3-eAOSVaCsBGis1H1N5uSboY7zSyYXx6A?e=rYx2pv]] | OneDrive 8MB 九州産業大学のユーザー限定 ~ ***スケジュールをアップデート 全体的なスケジュールの見直し、調整を行いました。 ~ ~ **2025.06.27 ~ ***概要集編集 [[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/Ea9BX0soVF5Em2A5caqZFkoBL41JazR9ugCSxpbI1SNNVw?e=exbEGr]] | OneDrive 1.8MB 九州産業大学のユーザー限定 ~ ~ **2025.06.26 ~ ***概要集編集 [[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/EcSEMSRTo3FAszgxofn7FT8BYJOtAlKusBbfqb68SxXaaw?e=1ii7NN]] | OneDrive 1.8MB 九州産業大学のユーザー限定 ~ ~ **2025.06.20 ~ ***概要集編集 [[こちらをクリックで表示>https://ksumail-my.sharepoint.com/:u:/g/personal/k22as602_st_kyusan-u_ac_jp/EaH12CEnOa9Crchb5fR7-mcBef8lLRByNsw0Y5e8bg4tqg?e=oyXH4l]] | OneDrive 1.9MB 九州産業大学のユーザー限定 ~ ***シンボルマーク改善案 -波紋が3つの意味 -映像制作で使用するサイトだとわかるとより良い --シンボルマークはこのままで、gifで映像を表現しても良いのでは ~ ***シンボルマークデジタル化 制作途中です。 -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/illustrator/0620.jpg]] | GitHub ~ ~ **2025.06.13 ~ ***ロゴの参考資料更新 -[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ92Sxh0]] | Pintrest ~ ~ **2025.06.06 ~ ***ロゴマークのラフ -[[ラフ1枚目>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/rough/rough1.jpg]] | GitHub -[[ラフ2枚目>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/rough/rough2.jpg]] | GitHub -[[ラフ3枚目>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/rough/rough3.jpg]] | GitHub ~ ~ **2025.05.23 ~ ***サイトマップのアップデート -[[当時のサイトマップはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/sitemap/0523.jpg]] | GitHub ニュースカテゴリがいらないという判断をしました。 ~ ***ロゴのアイデアスケッチ -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/sketch/0523.jpg]] | GitHub 左右反転させると、真ん中が三角になって再生ボタンに見えるかも？ ~ ***ロゴの参考資料探し -[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ92Sxh0]] | Pintrest ~ ***全然進んでません 来週の目標は手を動かすことです；； ~ ~ **2025.05.16 ~ ***ステムで配布するサイトが増えてる 既存サイトとおといろひろばの違いは無料であること。 だから、興味ない人でも始めやすいし、親しみやすいデザインにする必要がある。 ということは、ジャンル分けではなく、雰囲気やシーンの方が良いのか？(日常1、日常2、など) ~ ***楽曲のカテゴリ ジャンルではなく、雰囲気やシーンで分ける方が良いと判断。 例えば -日常1 -日常2 -怒り1 -怒り2 -コミカル -感動 など… ~ ~ **2025.05.14 ~ ***ロゴのアイデアスケッチ -[[こちらをクリックで表示>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/logo/sketch/0514.jpg]] | GitHub 素材が置いてある場所、ひろばの木にみんなが集まるイメージで。 ~ ~ **2025.05.13 ~ ***ロゴの参考資料探し -[[Pintrestボードへはこちらをクリック>https://pin.it/7CZ92Sxh0]] | Pintrest ひろばと音、彩る何かしらのものを入れたい。 NintendoのWiiやいらすとやのような親しみやすさも欲しい。 ロゴマークとロゴタイプでセットにする方が適している。 ~ ~ **2025.05.02 ~ ***ステムデータとは ステムデータとは、1つの完成された音楽を、役割ごとに分けて書き出した音声ファイルの集まりのこと。例えば、歌、ドラム、低音楽器、弦楽器などのように、音楽の構成要素をパート別に分けて、それぞれ独立した音声ファイルにしたものを指す。 映像編集では、カメラで撮影した素材をもとに、色調を整えたり、エフェクトを加えたり、不要な部分をカットしたりと、さまざまな工程を経て最終的な映像を作る。ステムデータは、こうした''映像の制作手法を音楽にも適用できるようにしたもの''だ。 通常、私たちが聴く音楽はすべての音がミックスされて1つの音声ファイルになっている。しかし、ステムデータではそれらが分かれているため、セリフと音楽が重なって聞き取りづらいときには、歌の音量だけを下げるなど、映像制作の現場で音楽を柔軟に扱うことができる。逆に、迫力のあるシーンではドラムや低音楽器を強調して、より躍動感を出すことも可能だ。また、音楽の尺を調整したいときも、パートごとに編集できるため、自然な仕上がりになる。 ~ ***サイトマップ制作 -[[当時のサイトマップはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/webPageDesign/sitemap/0502.jpg]] | GitHub ~ ***スケジュールをアップデート 5つの事務作業を追加 -1Q審査 -2Q審査 -概要集 -最終審査 -卒展準備 ~ ***必要なページのおさらい -トップページ --おすすめコンテンツ --サイトの使い方 --キーワード検索窓 --ステムデータとは、使い方の説明 -コンテンツ一覧 --タグ検索できる何か --ステムシミュレーションページ -検索結果 -利用規約 -お問い合わせ -プライバシーポリシー -ニュース ~ ~ **2025.05.01 ~ ***法事がありました。 作業全然できんやんけ！！！ できる時にできるだけやった方が良い。 ~ ~ **2025.04.25 ~ ***サイトマップ制作 -トップページ -プライバシーポリシー -ニュース -コンテンツ一覧 --ステムシミュレーションページ -検索結果表示画面 -利用規約 -お問い合わせ -ステムデータとは、使い方の説明 ~ ***Artlistのステムデータ プレビューもできました。 -[[Roll the Dice>https://artlist.io/royalty-free-music/song/roll-the-dice/135537?stems=135537]] | Artlist ~ ***Web Audio API オーディオミキサーのプロトタイプでは、オーディオの制御をWeb Audio APIを使用しおこなっている。 -[[ウェブオーディオ API>https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API]] | MDN Web Docs ~ ***先行事例 BGMを作って分割してくれるAI -[[Evoke Music>https://evokemusic.ai/en/music]] ~ ***お互いに歩み寄る 映像側と音楽側でどちらがどのくらい編集するかを考える必要がある。 今回は映像編集者向けのサイトであるため、音楽側の編集量を少なくする必要があるだろう。 ~ ***現在の問題 -ダウンロードした後どう編集するか -ブラウザでどうやってシミュレーションさせるか ~ ***映像制作という主語が大きすぎる 例えばYouTubeでは、音が不自然にカットされていたり、映像が続いているのに曲が終わっていたり、シーンが変わっているのにBGMが変わらないなど、違和感のある編集が多々ある、という問題がある。 などなど… ~ ***サイトロゴについての調査 公園ではなくひろばでした。間違えました；； -ひろばについての調査が必要 ~ ~ **2025.04.24 ~ ***サイトロゴについての調査 -公園をイメージし、芝生のみどり、空の青、人工物のグレーを採用。 -公園についての調査が必要 -Wiiの似顔絵チャンネルが雰囲気の参考になるかも --[[Mii Channel | Wii Wiki | Fandom>https://wii.fandom.com/wiki/Mii_Channel#Screenshots]] --[[開発スタッフが語る『似顔絵チャンネル』の話。>https://www.nintendo.co.jp/wii/staff/mii-channel/articles/index.html]] | 任天堂ホームページ ~ ***スケジュールの確認 Google スプレッドシートによるガントチャートを作成。同時に完成までに行う作業の確認。 ~ ~ **2025.04.23 ~ ***おといろひろば完成イメージ図 -ジャンルやシーンなどの単語で、使いたい音を検索 -プレビューして雰囲気を確認 -ミキサーで細かいシミュレーションもできます -ステムデータをすべてDLできる -必要な音だけDLできる -映像編集ソフトに取り込んで音量調整 -動画として書き出したら完成 [[上記説明を図にしたものはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/others/howToUse/demo/howToUseDemo.jpg]] | GitHub ~ ~ **2025.04.18 ~ ***完成イメージ 映像編集者がどうやって使用するかが想像できるようにすると良い。 完成イメージがはっきりすると、作業量が明確になり、作りやすいだろう。 ~ ***アイデア ジャンルやBPM、コード進行を統一すれば、組み合わせ方でコンテンツの充実度が上がるかも…？ ~ ***音源のカテゴリ分け カテゴリの優先順位を、どの順番にするかを考える必要がある。和風や季節などのテーマや、オーケストラやジャズなどのジャンル、トランペットやギターなどの使用楽器、日常や自然などのシーン、色々な可能性が考えられる。 ~ ***なぜステムデータが使われていたか 元々、ステムデータでの音楽納品は、テレビシリーズのアニメやドラマなど継続的な映像制作の現場で使われてきた手法である。これは、毎話異なる演出や尺に対応するため、編集段階で音の構成を柔軟に調整できる必要があったことに起因している。シリーズ内でのサウンドの統一感を整えるためでもある。 たとえば、メロディだけを残して別の場面に流用する、ドラムを抜いて静かなシーンにする、同じ曲を短く再構成する、といった使い方が可能になるのが、ステムデータの大きな利点だ。 しかしこの手法は、商業の限られた制作現場に閉じた慣習であり、小規模な映像制作ではあまり一般的ではなかった。その理由のひとつが、''ステムで提供される音楽素材自体がほとんど存在しなかった''こと、そして''音楽の再構成に対する知識が共有されていなかった''ことである。現在は、ステムで音楽素材を提供するサービスも増えている。 ~ ***参考資料 -[[劇伴音楽の作り方>https://note.com/tenq/n/n2ebfd441768d]] | note -[[「ドラマ音楽の制作工程が知りたいです。」>https://note.com/scatgoto/n/nab308ce898fb]] | note ~ ~ **2025.04.17 ~ ***ステムで配信されている既存のサイト -[[Artlist>https://artlist.io/]] -[[Epidemic Sound>https://www.epidemicsound.com/]] どちらもステムでの配布がされているみたい？ プレビューには対応していないようです。 ~ ***参考になりそうな記事 -[[ステムデータで編集を向上させる方法>https://artlist.io/blog/ja/what-are-music-stems/]] | Artlist ~ ~ **2025.04.11 ~ ***最終的なアウトプット 音源にこだわってみたらより良くなるんじゃあない？という提案を上手に見せることができれば、良い研究に近づくのではないか。 同じ映像、同じトラックを使用し、フェードアウトだけで雰囲気が変わるよ、という説明ができると良いのか？ ~ ***ターゲット層 2つのアプローチがあると考えていた。 -こだわりたいけれど、色々な理由でこだわることができない人がいる界隈へのアプローチ。 -現状以上のこだわり方を知らない人々へ、こだわり方を知らせる。 しかし、どちらも一緒にやれば良いのではないか。知っている人は説明しなくてもわかる、知らない人にはわかりやすく説明する。両方同時にできるのではないか。 ~ ~ **2025.04.09 ~ ***オーディオミキサーのアップデート -[[こちらをクリックで表示>https://ryutarodayo1234.github.io/OtoiroPark/audioMixerPrototype/app/]] | Github Pages プログレスバーが表示された後、オーディオファイル読み込み前の確認ボタンが表示されていた。混乱してしまうため、表示順を逆にしました。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/audioMixerPrototype/timemachine/screenCapture0409.mp4]] | MP4 1.6 MB Github Pages ~ ~ **2025.04.08 ~ ***オーディオミキサーのアップデート -[[こちらをクリックで表示>https://ryutarodayo1234.github.io/OtoiroPark/audioMixerPrototype/app/]] | Github Pages mp3を読み込む時、MB単位での通信となるため、読み込み前の確認ボタンを設置。また、読み込むmp3の合計データ容量を表示させるようにした。 -[[当時のスクリーンショットはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/audioMixerPrototype/timemachine/screenshot0408.jpg]] | Github ~ ~ **2025.04.02 ~ ***オーディオミキサーのプロトタイプ -[[こちらをクリックで表示>https://ryutarodayo1234.github.io/OtoiroPark/audioMixerPrototype/app/]] | Github Pages オーディオミキサーのプロトタイプが上手にできた。 再生しているのはmp3ファイルだが、ダウンロードボタンを押すとwavファイルがダウンロードできるようになっている。 スマホ版では、パケット通信量の都合でダウンロードボタンを消した。 -[[当時の映像はこちら>https://ryutarodayo1234.github.io/OtoiroPark/audioMixerPrototype/timemachine/screenCapture.mp4]] | MP4 6.58 MB Github Pages ~ ***プロジェクト名 ''おといろひろば''に決定。 音で映像作品を彩ってほしい。その音素材が集まるひろばという意味です。 [[いらすとや>https://www.irasutoya.com/]]からインスピレーションを受け、その音版をイメージしました。 ~ ***mp3の容量と音質 -[[サウンドの比較ページはこちらをクリック>https://ryutarodayo1234.github.io/OtoiroPark/audioMixerPrototype/testSoundQuolity/index.html]] | Github Pages オーディオファイルをwavからmp3の変換する際、音質を下げることでファイル容量を削減できる。しかし、音質を下げすぎると、映像制作者側でシミュレーションがしにくくなる。 良いバランスをとるための検証を行った結果、サンプリングレートを44.1kHzに固定し、可変ビットレートによる音質と容量のテストを行ったところ、7を指定するのが一番良いとの結論に辿り着いた。変換はpythonで行う。 -[[ソースコードはこちら>https://github.com/ryutarodayo1234/OtoiroPark/blob/main/audioMixerPrototype/wavToMp3.ipynb]] | Github 上記コードのここを書き換え parameters=["-q:a", "7", "-ar", "44100"] ~ ~ **2025.03.21 ~ ***アイデアが浮かぶ 映像制作者向けにBGMをステムデータで配布するアイデアが浮かぶ。 ステムデータの説明をするため、オーディオミキサーが必要だと考えた。配布する媒体のことを考慮し、webブラウザ上で動作するようにした方が良いだろう。 ~ ***既存のサイト -[[Audiostock>https://audiostock.jp/]] -[[Artlist>https://artlist.io/]] | ステムでの配布がされているみたい？%%プレビューには対応していません。%%後日、ステムでのプレビューに対応していることが判明しました。 どちらもオーディオトラックを一本にまとめてある。映像編集者にとっては楽なのかもしれないが、ステムで配布すると、より詳細な編集ができるようになる。 ここ盛り上がって欲しくないのに…、リズムパートを消したい…、などの問題があった時、今までだと違う音源を探す必要があったが、フェードインアウトだけで対応ができるようになる。それにより、音源を探す手間を省ける。音源を編集する手間は増えます。 以下参考ページ -[[フェードだけじゃ芸が無い！BGMを途中で切る「7つのテクニック」>https://vook.vc/n/2424]] | Vook ~ ~