#author("2023-07-27T23:17:34+09:00;2023-07-27T23:05:47+09:00","default:member","member")
*FiND MUSiC
ジャケ写の色から新たな音楽に出会うWebサイト
#image(findmusic_mainvisual.jpg)
-''Ami Kimura''
-'''Keywords：music, artwork, color'''
-https://spotifyapi0708.onrender.com
-[[ソースコード>https://github.com/Ami-Kimura/findmusic_sample]]
-[[FiND MUSiCスライド>https://drive.google.com/file/d/1WxdB5sVqDk5Y_yQBEfSpLmme1QsJ_ug8/view?usp=sharing]]
//-https://www.example.com
//-__[[アンケート実施中>https://forms.gle/8ja4XndgiVPCnfuw6]]__ ← ご協力よろしくお願いいたします！
~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
ジャケット写真の色から新たな音楽に出会うきっかけを作るサイト
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装に使用されている写真のこと。[[wikipedia>https://ja.wikipedia.org/wiki/ディスクジャケット]]
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
''__背景__''
レコードやCDなどの媒体からネット上のデジタル音源への移行が進み、音楽の聴取方法が変化している今、ジャケット写真は未だ重要な要素である。2023年5月12日から5月26日までに実施したアンケート調査では、音楽そのものを楽しんでいるため、現状で満足しているという意見が多数寄せられた。しかし、私はジャケット写真が音楽体験を補完し、音楽に対する感情や意味を豊かにする要素として重要だと考えている。ジャケット写真には「視覚的な魅力」や「アルバムのコンセプト」といった要素があり、これらが組み合わさることで、音楽体験がより充実したものとなるのではないかと思う。
''__目的__''
このプロジェクトでは、楽曲を試聴する前段階からビジュアルといった形で情報を受け取れる「ジャケット写真」にフォーカスした音楽に出会えるサービスを制作し、普段とは違う角度から音楽に出会えるきっかけを提供する。
根拠として、東京藝術大学のアダム・ストレンジさんの「デジタル楽曲配信におけるジャケット画像の関係」という論文より、ジャケット画像は音楽の特性や好みを強く表象することが明らかにされている。この知見から、本プロジェクトの実施が意義を持つと考えている。
[[__参考__>https://geidai.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=572&item_no=1&page_id=13&block_id=17]]
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」
サブスクリプションの音楽ストリーミングサービスが普及している今、「ジャケ写」という普段はあまり注目されない部分にフォーカスして新たな音楽に出会えるきっかけを作る。
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
''__形式__''
-Webサイト
※最終的には200曲以上登録する（曲は手作業で入れる）
URL：https://spotifyapi0708.onrender.com
#iframe(https://spotifyapi0708.onrender.com,70%,160%)
~
***サイズ
-スマートフォンの画面サイズ
~
***サイトマップ
#image(sitemap.jpg, 80%)
~
***アンケート結果
2023年5月12日から5月26日にかけてGoogleフォームにて「音楽やジャケット写真に関する調査」を行い、18~22 歳の男女 83 人から回答を集めた。そのうち、レコードやCD のジャケ買いをしたことがある人が 13人、したことない人が 70 人という結果が出た。また、ジャケ買いをした理由として「特定のアーティストが好きだ」「インテリアにしたら可愛いから「雰囲気が好きだっ た」といった理由があげられた。それに対し、ジャケ買いをしたことがない理由として回答者の半数が「特に理由はない」と回答し、その他に「興味がない」「金銭的余裕がない」といった理由があげられた。
#image(q1.jpg, 80%)
~
卒業研究で制作する内容のサービスがあれば使いたいか聞いたところ、64人が「はい」 19 人が「いいえ」と回答した。
#image(q2.jpg, 80%)
~
***FiND MUSiCの使い方
（１）サーチ画面
サーチ画面では、画面上に表示される色のボタンをタッチし、ボタンと同じ色のジャケット写真を表示する。また、ジャケット写真を押すと 30 秒程度の試聴音源が流れる。
#image(search2.jpg, 80%)
~
（２）ホーム画面
ホーム画面では色ごとにランダムにジャケット写真が表示される。画面を開き直すたびに別のジャケット写真が表示される。
（３）ライブラリ画面
気に入ったジャケット写真や曲が見つかればその都度プレイリストに入れることができる。
#image(home_library.jpg, 80%)
~
***試作
-中間発表時点での問題
--同じ曲しか流れない
--曲が止められない
#youtube(irHpKeXcXtM,50%)
~
-同じ曲しか流れない問題と曲の再生を止められない問題が解決した
#youtube(uym9sQdwRCc,50%)
HTML、CSSを使用して画面設計を行い、Node.js、Vue.js、Spotify Web APIを使用してジャケット写真を反映させている。
※Node.js：サーバー側(SpotifyAPI)でユーザー側のJavaScriptを実行するための環境
※Vue.js：JavaScriptフレームワークの一つ、今回はジャケット写真を整列させるのに使用している
[[ソースコード>https://github.com/Ami-Kimura/findmusic_sample]]
~
//#youtube(irHpKeXcXtM,50%)
//-色のパネルをクリックしてジャケット写真と試聴音源を表示させるところまで出来た
//-同じ曲しか流れない、曲が止められない問題を解決しなければならない
//[[FiND MUSiCスライド>https://drive.google.com/drive/folders/1FM2QFDMuISIEsQ-O1rNpTT3e7PB-5jPS?usp=sharing]]
~
//***メンバー
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
~
***制作ツール
//&color(red){使用するツール｜ハードウエア・ソフトウエア};
''__ハードウエア__''
-MacBook Pro
-iPhone12 Pro
~
''__ソフトウエア__''
-Safari
-Chrome
-Figma
-Visual Studio Code
-Terminal
-Render
~
***プロジェクトの期間
//&color(red){プロジェクトの期間｜2023.04.14 - 2023.12.22 };
2023.04.14 - 2023.12.22
~
***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を止められない」を解決することができた。サイト上で仕組みを作ることでネット環境と媒体があれば、場所や時間帯に関係なく見ることができる。また、ジャケ買いをしたことがない理由としてあげられた「金銭的余裕がない」ことにもWebサイトであれば対応できる。前期では仕組みづくりを中心に行った。試作したサイトをホスティングサービス「Render」にデプロイし、誰でも閲覧可能な体制を整えた。後期では曲を増やすと共に、第三者にサイトを使用してもらい意見を聞きながらサイトの改善を図っていく予定だ。
//中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を止められない」を解決することができた。サイト上で仕組みを作ることでネット環境と媒体があれば、場所や時間帯に関係なく見ることができる。また、ジャケ買いをしたことがない理由としてあげられた「金銭的余裕がない」ことにもWebサイトであれば対応できる。前期では仕組みづくりを中心に行い、現在は本番環境にあげるにあたり、どのサービスが最適か模索しており、前期の終わりまでには誰でも閲覧できる体制を整えていきたい。後期では曲を増やすと共に、第三者にサイトを使用してもらい意見を聞きながらサイトの改善を図っていく予定だ。
//''__中間のまとめ__''
//Spotify APIを使用してジャケット画像や曲の試聴音源を取れる状態を確認できたが、同じ曲しか流れない、曲が止められないといった問題が浮上したため、解決しなければならない。また、実施したアンケート結果を踏まえ、第３者目線からいただいた意見を元にフォントや色、サイト内の導線などのUIUX周りの設計を再度見直していきたい。
~
~
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-to/music-subscription-comparison]]
-[[2022年 定額制音楽配信サービス利用動向に関する調査>https://ictr.co.jp/report/20221111.html/#:~:text=■-,定額制音楽配信サービス利用者数は2022,％増となった%E3%80%82]]
-[[デジタル楽曲配信におけるジャケット画像の関係 : モバイル環境下でのクロス・モーダル研究 [要旨]>https://geidai.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=572&item_no=1&page_id=13&block_id=17]]
-[[CD ジャケットにおける曲調の色聴共感覚に関する研究>https://gakuen-hachioji.jp/wp-content/themes/cuh/images/presentation-pdf/2021/2021_D125.pdf]]
-[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390282680621661824]]
-[[CDブックレット・デザイン考ー視覚的表現のーモデルとして>https://www.gakushuin.ac.jp/univ/g-hum/art/web_library/author/arikawa/CD_boolet/index.html]]
-[[ジャケットワークを用いた意外性のある情報推薦システムの提案>https://www.ieice.org/publications/conference-FIT-DVDs/FIT2017/data/pdf/D-007.pdf]]
-[[音楽 CD の文化は生き残ることができるのか>https://lab.kuas.ac.jp/~jinbungakkai/pdf/2013/m2013_06.pdf]]
-[[ジャケットを活かした音楽発見サポートシステム「LOOK」デザイン>https://koara.lib.keio.ac.jp/xoonips/modules/xoonips/download.php/KO40001001-00002017-0558.pdf?file_id=131618]]
-[[ネットワーク社会における音楽産業のマーケティング戦略特性にかかわる研究 >https://www.konan-u.ac.jp/bi/report/BI-mono/BI-MONO2011-002.pdf]]
-[[2022年度「音楽メディアユーザー実態調査」報告書公表>https://www.riaj.or.jp/f/pdf/report/mediauser/softuser2022.pdf]]
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-[[Predominantly>https://predominant.ly]]
-[[NewJeans>https://newjeans.kr/]]
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-[[Expressアプリを無料のホスティングサービスRenderにデプロイする | Qiita>https://qiita.com/snyt45/items/1e14b4a41d20176749dd]]
-[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp/]]
~
~
**プロジェクト管理
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール表>https://docs.google.com/spreadsheets/d/19mEg9QOG8eqUkFtmIw0B8LvkrLq4Q1iajUmuPekcN_Q/edit?usp=sharing]]
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-選曲を増やす
-サーチ画面の改修
%%-見やすい色の調査%%
%%-色別のプレイリスト作成%%
%%-同じ曲しか流れない、曲が止められない問題を解決する%%
%%-中間発表の準備%%
%%-前期最終審査の準備%%
%%-前期概要集作成%%
//***NotToDo
//&color(red){やらないこと：何をするかではなく「何をしないか」を考える};
//&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・};
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2023.07.21
***作業メモ
-学科サイト整理
-サイトマップ掲載
#image(sitemap.jpg, 50%)
-概要集修正、再提出
--図４、５、６、７を修正
[[修正画像はこちらから>https://drive.google.com/drive/folders/1Cg14VUgNqD-2knkXXtcD0tQDJ0PzcKev?usp=sharing]]
~
~
**2023.07.14
***作業メモ
-学科サイト整理
-概要集修正
--図１、図２のグラフの色変更
|49|2|49|c
|#image(q1.jpg)| |#image(q2.jpg)|
~
~
**2023.07.07
***作業メモ
-前期最終審査
''__コメント__''
-サーバー構築をして負荷をためす
-アンケート結果を引用してWebサイトにする理由が論理が通っている
-第三者に使用してもらうことで分かることもある
-余白が多く、白背景でスッキリしててよいが、スマホは画面が小さいのでジャケ写の色を楽しんでほしい、ワクワクしてほしいならもっとジャケ写を大きくするとよい
-他音楽ストリーミングサービスでのジャケ写は、スマホの画面内で2枚見えている状態
-Amazonのリンクに飛んでその曲を買えるような動線にするとなおよい
-アンケート結果の全てを回答していただいた方に公開する
~
-Renderにデプロイした
※Render・・・無料ホスティングサービス
※デプロイ・・・構築したプログラムをユーザーがアクセスできるような本番環境に移し、意図した通りに動作する状態
URL：https://spotifyapi0708.onrender.com
~
~
**2023.06.30
***作業メモ
-概要集修正
-学科サイト整理
-審査準備
~
~
**2023.06.23
***作業メモ
-概要集作成
-プレイリスト追加
~
***参考サイト
-[[Spotifyの歌詞カードっぽく画像に応じたいい感じの背景色と文字色を設定する（Vue.js）>https://qiita.com/charon616/items/d710c79cd354a7c517a0]]
-[[Designspiration>https://www.designspiration.com/]]
~
~
**2023.06.16
***作業メモ
-概要集作成
-プレイリスト作成
~
~
**2023.06.09
***作業メモ
-中間発表を聞く
-同じ曲しか流れない問題と曲の再生を止められない問題が解決した
#youtube(uym9sQdwRCc,50%)
~
~
**2023.06.02
***作業メモ
-中間発表を聞く
***参考サイト
-[[Chooning | Spotifyで聴いた音楽の感想や思い出を投稿できるサービス>https://chooning.app/ja]]
~
~
**2023.05.26
***作業メモ
-中間発表
~
~
**2023.05.19
***作業メモ
-アンケート回収、まとめ
-中間発表準備
***Spotify APIお試し進行状況
#youtube(irHpKeXcXtM,50%)
***先行事例
-https://predominant.ly
***参考文献
-[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-to/music-subscription-comparison]]
-[[2022年 定額制音楽配信サービス利用動向に関する調査>https://ictr.co.jp/report/20221111.html/#:~:text=■-,定額制音楽配信サービス利用者数は2022,％増となった%E3%80%82]]
-[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp/]]
~
~
**2023.05.12
***作業メモ
-アンケート作成
--https://forms.gle/8ja4XndgiVPCnfuw6
-アンケート掲載箇所
--Iwata Lab.
--Instagram(個人アカウント)
~
~
**2023.04.28
***作業メモ
-メインタイトルとサブタイトル更新
--メインタイトル：FiND MUSiC
--サブタイトル：ジャケ写の色から出会う音楽サイト
-メインビジュアル掲載
#image(findmusic_mainvisual.jpg,50%)
-Spotify APIの実行お試し
#youtube(n_VLlBvwpM0,50%)
~
***参考文献収集
-[[デジタル楽曲配信におけるジャケット画像の関係 : モバイル環境下でのクロス・モーダル研究 [要旨]>https://geidai.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=572&item_no=1&page_id=13&block_id=17]]
-[[大ヒットアルバムの作り方 ―CD ジャケット編―>https://kozu-osaka.jp/cms/wp-content/uploads/2017/08/2016051.pdf]]
-[[CD ジャケットにおける曲調の色聴共感覚に関する研究>https://gakuen-hachioji.jp/wp-content/themes/cuh/images/presentation-pdf/2021/2021_D125.pdf]]
-[[3COINS | 新たなマーケティング手法！ジャケ買いを現代版にアレンジしたコラボ企画>https://www.trans.co.jp/column/trend/newmarketing/]]
-[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390282680621661824]]
-[[CDブックレット・デザイン考ー視覚的表現のーモデルとして>https://www.gakushuin.ac.jp/univ/g-hum/art/web_library/author/arikawa/CD_boolet/index.html]]
-[[ジャケットワークを用いた意外性のある情報推薦システムの提案>https://www.ieice.org/publications/conference-FIT-DVDs/FIT2017/data/pdf/D-007.pdf]]
-[[音楽 CD の文化は生き残ることができるのか>https://lab.kuas.ac.jp/~jinbungakkai/pdf/2013/m2013_06.pdf]]
-[[ジャケットを活かした音楽発見サポートシステム「LOOK」デザイン>https://koara.lib.keio.ac.jp/xoonips/modules/xoonips/download.php/KO40001001-00002017-0558.pdf?file_id=131618]]
-[[ネットワーク社会における音楽産業のマーケティング戦略特性にかかわる研究 >https://www.konan-u.ac.jp/bi/report/BI-mono/BI-MONO2011-002.pdf]]
-[[「CDジャケットを飾れる」ワイヤレスCDプレーヤー『Instant Disk Audio CP1』>https://prtimes.jp/main/html/rd/p/000000006.000093335.html]]
-[[CDが苦戦しているのに、なぜ曲を取り込む「ラクレコ」は売れているのか>https://www.itmedia.co.jp/business/articles/2112/18/news016.html]]
-[[THE RECORD 2023年3・4月号>https://www.riaj.or.jp/riaj/open/open-record!file?fid=1977]]
-[[2022年度「音楽メディアユーザー実態調査」報告書公表>https://www.riaj.or.jp/f/pdf/report/mediauser/softuser2022.pdf]]
~
~
**2023.04.21
***作業メモ
-Spotify APIの実行お試し
#youtube(RBKDX-rGnyk ,50%)
~
***参考サイト
-[[APIを使って音楽を聴くきっかけを作ろう>https://alis.to/yoch/articles/3VjGbNp5XnbW]]
-[[サントリー｜ほろよい>https://www.suntory.co.jp/rtd/horoyoi/]]
~
~
**2023.04.14
***作業メモ
-赤字部分のコメントアウト
-情報収集
-Spotify APIの実行お試し
~
***研究テーマ案
-Web
--[[I's髪工房のサイト改修>木村天美/情報デザイン研究II]]
--[[FiND MUSiCの改良>木村天美/情報デザイン演習IIA]]
-グラフィックデザイン
--投票済証明書のデザイン
~
~
~
#settableborder(none)
