FiND MUSiC
ジャケ写の色から新たな音楽に出会うWebアプリ
概要
これは何？
ジャケット写真の色から新たな音楽に出会うきっかけを作るWebアプリ
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装に使用されている写真のこと。wikipedia
※Webアプリとは・・動的に動き、ユーザーがリアルタイムで操作、実行可能なもの。（Webサイトは静的に動き、情報提供がメイン）
背景と目的
背景
レコードやCDなどの媒体からネット上のデジタル音源への移行が進み、音楽の聴取方法が変化している今、ジャケット写真は未だ重要な要素である。2023年5月12日から5月26日までに実施したアンケート調査では、音楽そのものを楽しんでいるため、現状で満足しているという意見が多数寄せられた。しかし、私はジャケット写真が音楽体験を補完し、音楽に対する感情や意味を豊かにする要素として重要だと考えている。ジャケット写真には「視覚的な魅力」や「アルバムのコンセプト」といった要素があり、これらが組み合わさることで、音楽体験がより充実したものとなるのではないかと思う。
目的
このプロジェクトでは、楽曲を試聴する前段階からビジュアルといった形で情報を受け取れる「ジャケット写真」にフォーカスした音楽に出会えるWebアプリを制作し、普段とは違う角度から音楽に出会えるきっかけを提供する。
根拠として、東京藝術大学のアダム・ストレンジさんの「デジタル楽曲配信におけるジャケット画像の関係」という論文より、ジャケット画像は音楽の特性や好みを強く表象することが明らかにされている。この知見から、本プロジェクトの実施が意義を持つと考えている。
参考
コンセプト
「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」
サブスクリプションの音楽ストリーミングサービスが普及している今、「ジャケ写」という普段はあまり注目されない部分にフォーカスして新たな音楽に出会えるきっかけを作る。
成果物の仕様
- 形式：Webアプリ
- サイズ：スマートフォンの画面幅
- 曲数：200曲以上
※2023.10.26時点で258曲追加済
- 内訳：Black ：23曲 Gray：35曲 Brown：８曲 White：29曲
Beige：28 曲 Pink：16曲 Red：15曲 Orange：15曲 Yellow：16曲
Purple：7曲 Blue：47曲 Green：19曲
サイトマップ
アンケート結果
2023年5月12日から5月26日にかけてGoogleフォームにて「音楽やジャケット写真に関する調査」を行い、18~22 歳の男女 83 人から回答を集めた。そのうち、レコードやCD のジャケ買いをしたことがある人が 13人、したことない人が 70 人という結果が出た。また、ジャケ買いをした理由として「特定のアーティストが好きだ」「インテリアにしたら可愛いから「雰囲気が好きだっ た」といった理由があげられた。それに対し、ジャケ買いをしたことがない理由として回答者の半数が「特に理由はない」と回答し、その他に「興味がない」「金銭的余裕がない」といった理由があげられた。
卒業研究で制作する内容のサービスがあれば使いたいか聞いたところ、64人が「はい」 19 人が「いいえ」と回答した。
FiND MUSiCの使い方
（１）サーチ画面
サーチ画面では、画面上に表示される色のボタンをタッチし、ボタンと同じ色のジャケット写真を表示する。また、ジャケット写真を押すと 30 秒程度の試聴音源が流れる。
（２）ホーム画面
ホーム画面では色ごとにランダムにジャケット写真が表示される。画面を開き直すたびに別のジャケット写真が表示される。
（３）ライブラリ画面
気に入ったジャケット写真や曲が見つかればその都度プレイリストに入れることができる。
制作ツール
ハードウエア
ソフトウエア
- Safari
- Chrome
- Figma
- Visual Studio Code
- Terminal
- Render
- Xcode
プロジェクトの期間
2023.04.14 - 2023.12.22
まとめ
現在の進行状況
- 実機（iPhone12 Pro）で確認しながらサーチ画面をブラッシュアップ中
- 曲数を増やした
- 色ボタンとジャケット写真のサイズを大きくした
- ジャケット写真をクリックした際に画面最下部に表示されるオーディオプレイヤーを追加した
- ジャケット写真の表示を縦スクロールから横スクロールに変更した
- 2023.10.26現在での追加した曲数は計：258曲
今後について
- ジャケット写真をクリックした時に画面最下部に表示されるオーディオプレイヤーのカスタマイズを進める
- Apple MusicやSpotify、YouTube Music、Amazonなどのリンクに
飛べるようにする
- ホーム画面やシェア機能は本当に必要か検証する
- ライブラリ画面は作れないので作らない
調査
現状調査
先行事例
技法・技術情報
ドメイン
UIデザイン
画面構成
プロジェクト管理
スケジュール
スケジュール表
ToDo
- 選曲を増やす
- サーチ画面の改修
-見やすい色の調査
-色別のプレイリスト作成
-同じ曲しか流れない、曲が止められない問題を解決する
-中間発表の準備
-前期最終審査の準備
-前期概要集作成
進捗記録
2023.11.17
作業メモ
- アプリ使用に関するアンケートを取った
- 前期に作成した概要集の書き換え、フォルダ提出
- Namecheapでサブドメインの取得（GItHub Educationにてドメイン料無料）
参考技術
2023.11.10
作業メモ
- ホーム画面制作を試みたができなかった
- アプリ導入画面のワイヤーフレームを作成した
2023.10.27
作業メモ
後期中間審査のコメント
- SpotifyAPIを使用してジャケット写真や曲名、アーティスト名などのデータを取得していることを明記する・発表時にきちんと説明する
- Pythonを使用し、ジャケット写真の色を判定して、アプリに反映させる仕組みが作れるようになると尚良い
- ホーム画面やシェア機能が必要か判断する方法は？ーアンケート調査を行い、意見を収集する
- 初めてアプリを起動した人にアプリの使い方や特徴を知ってもらうために、アプリ初期起動時に導入画面（ウォークスルー、コーチマーク）を表示させる
- 背景や目的の部分に「なぜ色を使うのか」「色を使うことでどうなるのか」「色がメインなのか写真がメインなのか」が書かれていない。例えば、写真がメインならジャケット写真の表示サイズを大きくする
- アプリを触りたくなるような工夫をする
- 前半で背景や目的、コンセプトといった説明で時間を使い切っているため、 Webアプリの使い方やアプリ制作でこだわった部分を細かく説明できるように時間配分を考える
参考文献
2023.10.20
作業メモ
参考文献
2023.10.13
作業メモ
現在の進行状況
- 実機（iPhone12 Pro）で確認しながらサーチ画面をブラッシュアップ中
- Black ：23曲
- Gray：35曲
- Brown：８曲
- White：29曲
- Beige：28 曲
- Pink：16曲
- Red：15曲
- Orange：15曲
- Yellow：16曲
- Purple：7曲
- Blue：47曲
- Green：19曲
次回までにやること
- ジャケット写真をクリックした時に画面最下部に表示されるオーディオプレイヤーのカスタマイズをする
参考文献
2023.10.06
作業メモ
2023.09.29
作業メモ
展示までにやること
2023.09.22
作業メモ
参考サイト
2023.09.15
作業メモ
2023.07.21
作業メモ
- 学科サイト整理
- サイトマップ掲載
- 概要集修正、再提出
2023.07.14
作業メモ
2023.07.07
作業メモ
- HTML、CSSを使用して画面設計を行い、Node.js、Vue.js、Spotify Web APIを
使用してジャケット写真を反映させている。
※Node.js：サーバー側(SpotifyAPI)でユーザー側のJavaScriptを
実行するための環境
※Vue.js：JavaScriptフレームワークの一つ、今回はジャケット写真を
整列させるのに使用している
- 前期最終審査
コメント
- サーバー構築をして負荷をためす
- アンケート結果を引用してWebサイトにする理由が論理が通っている
- 第三者に使用してもらうことで分かることもある
- 余白が多く、白背景でスッキリしててよいが、スマホは画面が小さいのでジャケ写の色を楽しんでほしい、ワクワクしてほしいならもっとジャケ写を大きくするとよい
- 他音楽ストリーミングサービスでのジャケ写は、スマホの画面内で2枚見えている状態
- Amazonのリンクに飛んでその曲を買えるような動線にするとなおよい
- アンケート結果の全てを回答していただいた方に公開する
- Renderにデプロイした
※Render・・・無料ホスティングサービス
※デプロイ・・・構築したプログラムをユーザーがアクセスできるような本番環境に移し、意図した通りに動作する状態
URL：https://spotifyapi0708.onrender.com
2023.06.30
作業メモ
2023.06.23
作業メモ
参考サイト
2023.06.16
作業メモ
2023.06.09
作業メモ
- 中間発表を聞く
- 同じ曲しか流れない問題と曲の再生を止められない問題が解決した
2023.06.02
作業メモ
参考サイト
2023.05.26
作業メモ
試作
- 色のパネルをクリックしてジャケット写真と試聴音源を表示させるところまで出来た
- 同じ曲しか流れない、曲が止められない問題を解決しなければならない
FiND MUSiCスライド
中間のまとめ
中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を止められない」を解決することができた。サイト上で仕組みを作ることでネット環境と媒体があれば、場所や時間帯に関係なく見ることができる。また、ジャケ買いをしたことがない理由としてあげられた「金銭的余裕がない」ことにもWebサイトであれば対応できる。前期では仕組みづくりを中心に行った。試作したサイトをホスティングサービス「Render」にデプロイし、誰でも閲覧可能な体制を整えた。後期では曲を増やすと共に、第三者にサイトを使用してもらい意見を聞きながらサイトの改善を図っていく予定だ。
中間のまとめ
Spotify APIを使用してジャケット画像や曲の試聴音源を取れる状態を確認できたが、同じ曲しか流れない、曲が止められないといった問題が浮上したため、解決しなければならない。また、実施したアンケート結果を踏まえ、第３者目線からいただいた意見を元にフォントや色、サイト内の導線などのUIUX周りの設計を再度見直していきたい。
2023.05.19
作業メモ
Spotify APIお試し進行状況
URL：https://spotifyapi0525.onrender.com
先行事例
参考文献
2023.05.12
作業メモ
- アンケート作成
- アンケート掲載箇所
- Iwata Lab.
- Instagram(個人アカウント)
2023.04.28
作業メモ
- メインタイトルとサブタイトル更新
- メインタイトル：FiND MUSiC
- サブタイトル：ジャケ写の色から出会う音楽サイト
- メインビジュアル掲載
- Spotify APIの実行お試し
参考文献収集
2023.04.21
作業メモ
参考サイト
2023.04.14
作業メモ
- 赤字部分のコメントアウト
- 情報収集
- Spotify APIの実行お試し
研究テーマ案
