FiND MUSiC
ジャケ写の色から新たな音楽に出会うWebアプリ
概要
これは何?
ジャケット写真の色から新たな音楽に出会うきっかけを作るWebアプリ
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装に使用されている写真のこと。wikipedia
※Webアプリとは・・動的に動き、ユーザーがリアルタイムで操作、実行可能なもの。(Webサイトは静的に動き、情報提供がメイン)
背景と目的
背景
近年、音楽の聴き方が急速にデジタル音源に変化し、音楽ストリーミングサービスを通じて音楽を聴く人が増加して いる。2023年5月実施のアンケート調査では、多くの人が音楽を聴く行為に満足している一方で、市場に出回る音楽のほぼ全てにジャケット写真が付いている。東京藝術大学アダム・ストレンジ氏の論文「デジタル楽曲配信におけるジャケット画像の関係」 や東京工科大学メディア学科の論文「CDジャケットにおける曲調の色聴共感覚に関する研究」 からジャケット写真や写真に含まれる色は音楽体験を補完し、音楽に対する感情や意味を豊かにする要素として重要であることが示されている。
目的
背景に基づき、本研究では、曲を聴く前段階で受け取る視覚情報「ジャケット写真」に焦点を当てたWebアプリを制作し、音楽だけでなくジャケット写真に対する新たな魅力を発見できる機会を提供することを目指す。
成果物の仕様
形式:Webアプリ
サイズ:スマートフォンの画面幅
ドメイン:Namecheap
サーバー:Render
曲数:257曲
内訳:Black :23曲 Gray:35曲 Brown:8曲 White:28曲
Beige:28 曲 Pink:16曲 Red:15曲 Orange:15曲 Yellow:16曲
Purple:7曲 Blue:47曲 Green:18曲
アンケート調査
2023年5月12日から5月26日にかけてGoogleフォームにて「音楽やジャケット写真に関する調査」を行い、18~22歳の男女83人から回答を集めた。そのうち、レコードやCDのジャケ買いをしたことがある人が13人、したことない人が70人という結果が出た。また、ジャケ買いをした理由として「特定のアーティストが好きだ」「インテリアにしたら可愛いから「雰囲気が好きだった」といった理由があげられた。それに対し、ジャケ買いをしたことがない理由として回答者の半数が「特に理由はない」と回答し、その他に「興味がない」「金銭的余裕がない」といった理由があげられた。
卒業研究で制作する内容のサービスがあれば使いたいか聞いたところ、64人が「はい」 19 人が「いいえ」と回答した。
コンセプト
Web アプリ上にアクセス環境を構築することで、調査で明らかになった「金銭的余裕がない」という問題を解決し、アプリの利用障壁を低減できる。このことから「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」をコンセプトに、スマートフォンや音楽ストリーミングサービスが普及する現代において「ジャケ写」という普段は注目されない部分に焦点を当て、ユーザーに新たな音楽体験を手軽かつワクワク感のある形で提供する。
デザインガイド
(1)ロゴマーク
ロゴマークはレコードを探して取り出す様子を表現している。ロゴマークのヒントは有名なレコード店のロゴマーク をヒントに得た。このロゴマークはアプリ内のトップ画面遷移のボタンとfaviconに使用する。
(2)カラー
アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9D9D、#BCBCBCの3色を要素に合わせて使用する。
(3)フォント
スイスのデザイナー ローレンス・ブルナー氏によってデザインされたジオメトリック・サンセリフ書体「Circular」を使用する。このフォントは音楽ストリーミングサービス「Spotify」で使用されているフォントである。
サイトマップ
FiND MUSiCの使い方
画面下のメニューからサーチ画面に移動すると12色のボタンが表示される。色ボタンをどれか1つタップするとボタンの色に関連した色のジャケット写真が色ボタンの下に表示される。表示中のジャケット写真を横スクロールすると他のジャケット写真を見ることができる。また、ジャケット写真を押すと30秒程度の試聴音源が流れる仕組みである。
また、ミュージックプレイヤーの右側にあるミートボールメニューを押した時、YouTubeやAmazonのリンクがまとめられたウィンドが表示され、聴いている曲に関連したページに飛ぶことができる。
URL:https://findmusic.ami-kimura.me
制作ツール
ハードウエア
ソフトウエア
Safari
Chrome
Figma
Visual Studio Code
Terminal
Render
Xcode
プロジェクトの期間
2023.04.14 - 2023.12.22
まとめ
Webアプリ上での環境構築により、ユーザーはネット環境と閲覧可能な媒体があれば手軽に利用でき、API の活用により著作権を守りつつ新しい価値を生み出せるようになった。 実際のアプリ利用者の感想として「ジャケ写を色で直感的に選べるのが楽しかった」「曲名が分からない時にジャケ写の雰囲気を覚えていれば検索できるため良いと思った」といったポジティブな評価を得ることができた。このことから、Webアプリを通じて、音楽、色、ジャケット写真を組み合わせた新たな音楽体験をユーザーに提供できたと考える。
調査
現状調査
先行事例
技法・技術情報
ドメイン
UIデザイン
画面構成
プロジェクト管理
スケジュール
スケジュール表
ToDo
選曲を増やす
サーチ画面の改修
-見やすい色の調査
-色別のプレイリスト作成
-同じ曲しか流れない、曲が止められない問題を解決する
-中間発表の準備
-前期最終審査の準備
-前期概要集作成
進捗記録
2023.12.15
作業メモ
制作に2度失敗した常時色ごとのジャケット写真が見られるホーム画面が途中までできた
チュートリアルが初回起動以外でも見られるようにセッティング画面を制作した
メインビジュアル変更
2023.12.08
作業メモ
プレイリストの曲がアプリ内で聴けるか再調整
ローディング画面追加
2023.12.01
最終審査コメント
Searchの文字列の横のロゴの中にある文字(FiND MUSiC)がほぼ見えない、せっかく作っているのでしっかり目立たせる
視線の動きは左が最初なのでSearchとロゴの位置を逆にした方がいい
フッターの文字が大きい
チュートリアルがあるのは親切だが、ユーザーの操作と吹き出しの操作が別になっていて操作しづらい、操作しないタイプのチュートリアル画面もあり
アプリを開いた最初にロード画面があるとよい(長いと鬱陶しいので短めに)
色ボタンのスペースの作り方を調整するとよい
色ボタンは有彩色が上の方が見栄えが良い
色ボタンは絵の具が並んでいるみたいなパレットにするといいサービスだなと感じ取ってもらいやすいかもしれない
デフォルトでそれぞれの色ごとにジャケ写が見える状態にするだけでも印象が変わると思う
ロゴやアプリ画面から色々なカラーで楽しめる印象が感じられない
色ボタンは角丸だが、ボタンを押した後に表示されるジャケット写真が角丸になっていない
2023.11.24
作業メモ
前期に作成した作品概要の書き換え、添削4回、フォルダ提出
Renderにデプロイしたアプリをサブドメインに変更
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:8曲
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
作業メモ
中間発表を聞く
同じ曲しか流れない問題と曲の再生を止められない問題が解決した
VIDEO
2023.06.02
作業メモ
参考サイト
2023.05.26
作業メモ
試作
VIDEO
色のパネルをクリックしてジャケット写真と試聴音源を表示させるところまで出来た
同じ曲しか流れない、曲が止められない問題を解決しなければならない
FiND MUSiCスライド
中間のまとめ
中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を止められない」を解決することができた。サイト上で仕組みを作ることでネット環境と媒体があれば、場所や時間帯に関係なく見ることができる。また、ジャケ買いをしたことがない理由としてあげられた「金銭的余裕がない」ことにもWebサイトであれば対応できる。前期では仕組みづくりを中心に行った。試作したサイトをホスティングサービス「Render」にデプロイし、誰でも閲覧可能な体制を整えた。後期では曲を増やすと共に、第三者にサイトを使用してもらい意見を聞きながらサイトの改善を図っていく予定だ。
中間のまとめ
Spotify APIを使用してジャケット画像や曲の試聴音源を取れる状態を確認できたが、同じ曲しか流れない、曲が止められないといった問題が浮上したため、解決しなければならない。また、実施したアンケート結果を踏まえ、第3者目線からいただいた意見を元にフォントや色、サイト内の導線などのUIUX周りの設計を再度見直していきたい。
2023.05.19
作業メモ
Spotify APIお試し進行状況
VIDEO
URL:https://spotifyapi0525.onrender.com
先行事例
参考文献
2023.05.12
作業メモ
アンケート作成
アンケート掲載箇所
Iwata Lab.
Instagram(個人アカウント)
2023.04.28
作業メモ
メインタイトルとサブタイトル更新
メインタイトル:FiND MUSiC
サブタイトル:ジャケ写の色から出会う音楽サイト
メインビジュアル掲載
Spotify APIの実行お試し
VIDEO
参考文献収集
2023.04.21
作業メモ
参考サイト
2023.04.14
作業メモ
赤字部分のコメントアウト
情報収集
Spotify APIの実行お試し
研究テーマ案