LogoMark.png

木村天美/卒業研究 のバックアップ(No.26)


FiND MUSiC

ジャケ写の色から新たな音楽に出会うWebサイト

mainvisual2.jpg


概要

これは何?

ジャケット写真の色から新たな音楽に出会うきっかけを作るサイト
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装に使用されている写真のこと。wikipedia

背景と目的

背景
レコードやCDなどの媒体からネット上のデジタル音源への移行が進み、音楽の聴取方法が変化している今、ジャケット写真は未だ重要な要素である。2023年5月12日から5月26日までに実施したアンケート調査では、音楽そのものを楽しんでいるため、現状で満足しているという意見が多数寄せられた。しかし、私はジャケット写真が音楽体験を補完し、音楽に対する感情や意味を豊かにする要素として重要だと考えている。ジャケット写真には「視覚的な魅力」や「アルバムのコンセプト」といった要素があり、これらが組み合わさることで、音楽体験がより充実したものとなるのではないかと思う。

目的
このプロジェクトでは、楽曲を試聴する前段階からビジュアルといった形で情報を受け取れる「ジャケット写真」にフォーカスした音楽に出会えるサービスを制作し、普段とは違う角度から音楽に出会えるきっかけを提供する。

根拠として、東京藝術大学のアダム・ストレンジさんの「デジタル楽曲配信におけるジャケット画像の関係」という論文より、ジャケット画像は音楽の特性や好みを強く表象することが明らかにされている。この知見から、本プロジェクトの実施が意義を持つと考えている。
参考

コンセプト

「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」
サブスクリプションの音楽ストリーミングサービスが普及している今、「ジャケ写」という普段はあまり注目されない部分にフォーカスして新たな音楽に出会えるきっかけを作る。

成果物の仕様

形式

サイズ

アンケート結果

2023年5月12日から5月26日にかけてGoogleフォームにて「音楽やジャケット写真に関する調査」を行い、18~22 歳の男女 83 人から回答を集めた。そのうち、レコードやCD のジャケ買いをしたことがある人が 13人、したことない人が 70 人という結果が出た。また、ジャケ買いをした理由として「特定のアーティストが好きだ」「インテリアにしたら可愛いから「雰囲気が好きだっ た」といった理由があげられた。それに対し、ジャケ買いをしたことがない理由として回答者の半数が「特に理由はない」と回答し、その他に「興味がない」「金銭的余裕がない」といった理由があげられた。

question1.jpg



卒業研究で制作する内容のサービスがあれば使いたいか聞いたところ、64人が「はい」 19 人が「いいえ」と回答した。

question2.jpg


FiND MUSiCの使い方

(1)サーチ画面
サーチ画面では、画面上に表示される色のボタンをタッチし、ボタンと同じ色のジャケット写真を表示する。また、ジャケット写真を押すと 30 秒程度の試聴音源が流れる。

search.jpg


(2)ホーム画面
ホーム画面では色ごとにランダムにジャケット写真が表示される。画面を開き直すたびに別のジャケット写真が表示される。
(3)ライブラリ画面
気に入ったジャケット写真や曲が見つかればその都度プレイリストに入れることができる。

otherpage.jpg


試作



mainvisual2.jpg

ボタンをクリックすると押したボタンと同じ色のジャケット写真が画面上に表示されるよう試作した。HTML、CSSを使用して画面設計を行い、Node.js、Vue.js、Spotify Web APIを使用してジャケット写真を反映させている。
※Node.js:サーバー側(SpotifyAPI)でユーザー側のJavaScriptを実行するための環境
※Vue.js:JavaScriptフレームワークの一つ、今回はジャケット写真を整列させるのに使用している



制作ツール

ハードウエア

ソフトウエア

プロジェクトの期間

2023.04.14 - 2023.12.22

まとめ

中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を止められない」を解決することができた。サイト上で仕組みを作ることでネット環境と媒体があれば、場所や時間帯に関係なく見ることができる。また、ジャケ買いをしたことがない理由としてあげられた「金銭的余裕がない」ことにもWebサイトであれば対応できる。前期では仕組みづくりを中心に行い、現在は本番環境にあげるにあたり、どのサービスが最適か模索しており、前期の終わりまでには誰でも閲覧できる体制を整えていきたい。後期では曲を増やすと共に、第三者にサイトを使用してもらい意見を聞きながらサイトの改善を図っていく予定だ。




調査

現状調査

先行事例

技法・技術情報




プロジェクト管理

スケジュール

スケジュール表

ToDo





進捗記録




2023.07.14

作業メモ

2023.07.07

作業メモ

2023.06.30

作業メモ

2023.06.23

作業メモ

参考サイト

2023.06.16

作業メモ

2023.06.09

作業メモ

2023.06.02

作業メモ

参考サイト

2023.05.26

作業メモ

2023.05.19

作業メモ

Spotify APIお試し進行状況

先行事例

参考文献

2023.05.12

作業メモ

2023.04.28

作業メモ

参考文献収集

2023.04.21

作業メモ

参考サイト

2023.04.14

作業メモ

研究テーマ案