LogoMark.png

木村天美/卒業研究

FiND MUSiC

ジャケ写の色から新たな音楽に出会うWebアプリ

app.jpg

概要

これは何?

ジャケット写真の色から新たな音楽に出会うきっかけを提供するWebアプリ
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装に使用されている写真のこと。wikipedia
※Webアプリとは・・動的に動き、ユーザーがリアルタイムで操作、実行可能なもの。(Webサイトは静的に動き、情報提供がメイン)

背景と目的

背景
近年、音楽の聴き方が急速にデジタル音源に変化し、音楽ストリーミングサービスを通じて音楽を聴く人が増加して いる。2023年5月実施のアンケート調査では、多くの人が音楽を聴く行為に満足している一方で、市場に出回る音楽のほぼ全てにジャケット写真が付いている。東京藝術大学アダム・ストレンジ氏の論文「デジタル楽曲配信におけるジャケット画像の関係」東京工科大学メディア学科の論文「CDジャケットにおける曲調の色聴共感覚に関する研究」からジャケット写真や写真に含まれる色は音楽体験を補完し、音楽に対する感情や意味を豊かにする要素として重要であることが示されている。

目的
背景に基づき、本研究では、曲を聴く前段階で受け取る視覚情報「ジャケット写真」に焦点を当てたWebアプリを制作し、音楽だけでなくジャケット写真に対する新たな魅力を発見できる機会を提供することを目指す。


成果物の仕様


アンケート調査

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

q1.jpg



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

q2.jpg


コンセプト

Web アプリ上にアクセス環境を構築することで、調査で明らかになった「金銭的余裕がない」という問題を解決し、アプリの利用障壁を低減できる。このことから「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」をコンセプトに、スマートフォンや音楽ストリーミングサービスが普及する現代において「ジャケ写」という普段は注目されない部分に焦点を当て、ユーザーに新たな音楽体験を手軽かつワクワク感のある形で提供する。

デザインガイド

(1)ロゴマーク
ロゴマークはジャケット画像の色から音楽を探す様子を#FD3C32、#FDC806、#3877F7、#FDFEFFの4色のグラデーションで表現している。このロゴマークはアプリ内のホーム画面遷移のボタンとfaviconに使用する。

findmusic_logo.jpg

(2)カラー
アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9D9D、#BCBCBCの3色を要素に合わせて使用する。

font-color2.jpg

(3)フォント
スイスのデザイナー ローレンス・ブルナー氏によってデザインされたジオメトリック・サンセリフ書体「Circular」を使用する。このフォントは音楽ストリーミングサービス「Spotify」で使用されているフォントである。

circular-font.jpg


サイトマップ

findmusic_sitemap.jpg


FiND MUSiCの使い方

画面下のメニューからサーチ画面に移動すると12色のボタンが表示される。色ボタンをどれか1つタップするとボタンの色に関連した色のジャケット写真が色ボタンの下に表示される。表示中のジャケット写真を横スクロールすると他のジャケット写真を見ることができる。また、ジャケット写真を押すと30秒程度の試聴音源が流れる仕組みである。
また、ミュージックプレイヤーの右側にあるミートボールメニューを押した時、YouTubeやAmazonのリンクがまとめられたウィンドが表示され、聴いている曲に関連したページに飛ぶことができる。
URL:https://findmusic.ami-kimura.me

mainvisual5.jpg


制作ツール

ハードウエア

ソフトウエア

プロジェクトの期間

2023.04.14 - 2023.12.22

まとめ

Webアプリ上での環境構築により、ユーザーはネット環境と閲覧可能な媒体があれば手軽に利用でき、API の活用により著作権を守りつつ新しい価値を生み出せるようになった。 実際のアプリ利用者の感想として「ジャケ写を色で直感的に選べるのが楽しかった」「曲名が分からない時にジャケ写の雰囲気を覚えていれば検索できるため良いと思った」といったポジティブな評価を得ることができた。このことから、Webアプリを通じて、音楽、色、ジャケット写真を組み合わせた新たな音楽体験をユーザーに提供できたと考える。



調査

現状調査

先行事例

技法・技術情報

ドメイン

UIデザイン

画面構成

プロジェクト管理

スケジュール

スケジュール表

ToDo

-選曲を増やす
-サーチ画面の改修
-見やすい色の調査
-色別のプレイリスト作成
-同じ曲しか流れない、曲が止められない問題を解決する
-前期中間発表の準備
-前期最終審査の準備
-前期概要集作成
-後期中間発表の準備
-後期最終審査の準備
-後期概要集作成
-説明パネルの作成
-図録データ入力
-学科サイト最終整理





進捗記録




2023.12.22

作業メモ

2023.12.15

作業メモ

2023.12.08

作業メモ

2023.12.01

最終審査コメント

2023.11.24

作業メモ

2023.11.17

作業メモ

参考技術

2023.11.10

作業メモ

2023.10.27

作業メモ

後期中間審査のコメント

参考文献

2023.10.20

作業メモ

参考文献

2023.10.13

作業メモ

現在の進行状況

次回までにやること

参考文献

2023.10.06

作業メモ

2023.09.29

作業メモ

展示までにやること

2023.09.22

作業メモ


参考サイト

2023.09.15

作業メモ

2023.07.21

作業メモ

2023.07.14

作業メモ

2023.07.07

作業メモ

2023.06.30

作業メモ

2023.06.23

作業メモ

参考サイト

2023.06.16

作業メモ

2023.06.09

作業メモ

2023.06.02

作業メモ

参考サイト

2023.05.26

作業メモ

試作

中間のまとめ1

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

中間のまとめ2

Spotify APIを使用してジャケット画像や曲の試聴音源を取れる状態を確認できたが、同じ曲しか流れない、曲が止められないといった問題が浮上したため、解決しなければならない。また、実施したアンケート結果を踏まえ、第3者目線からいただいた意見を元にフォントや色、サイト内の導線などのUIUX周りの設計を再度見直していきたい。



2023.05.19

作業メモ

Spotify APIお試し進行状況

URL:https://spotifyapi0525.onrender.com

先行事例

参考文献

2023.05.12

作業メモ

2023.04.28

作業メモ

参考文献収集

2023.04.21

作業メモ

参考サイト

2023.04.14

作業メモ

研究テーマ案


PAGES

GUIDE

添付ファイル: fileapp.jpg 8件 [詳細] filefindmusic_logo.jpg 9件 [詳細] filecircular-font.jpg 9件 [詳細] filefont-color2.jpg 7件 [詳細] filefindmusic_sitemap.jpg 9件 [詳細] filemainvisual5.jpg 14件 [詳細] filesitemap2.jpg 16件 [詳細] filefont.jpg 14件 [詳細] filecolor.jpg 14件 [詳細] fileapp-use.png 16件 [詳細] filelogo.jpg 14件 [詳細] filemainvisual4.jpg 18件 [詳細] filemainvisual3.jpg 18件 [詳細] filesitemap.jpg 28件 [詳細] filehome_library.jpg 24件 [詳細] filesearch2.jpg 29件 [詳細] fileq2.jpg 26件 [詳細] fileq1.jpg 24件 [詳細] filemainvisual2.jpg 23件 [詳細] fileotherpage.jpg 29件 [詳細] filesearch.jpg 29件 [詳細] filequestion2.jpg 32件 [詳細] filequestion1.jpg 25件 [詳細] filefindmusic_mainvisual.jpg 26件 [詳細]
Last-modified: 2024-02-15 (木) 21:44:58