木村天美/卒業研究

FiND MUSiC

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

• Ami Kimura
• Keywords：music, artwork, color
• https://findmusic.ami-kimura.me
  
  

概要

これは何？

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

背景と目的

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

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

成果物の仕様

• 形式：Webアプリ
  • URL：https://findmusic.ami-kimura.me
• サイズ：レスポンシブ（スマートフォン幅メイン）
• ドメイン：Namecheap
• サーバー：Render
• 曲数：257曲
  • 内訳：Black ：23曲　Gray：35曲　Brown：８曲　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 アプリ上にアクセス環境を構築することで、調査で明らかになった「金銭的余裕がない」という問題を解決し、アプリの利用障壁を低減できる。このことから「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」をコンセプトに、スマートフォンや音楽ストリーミングサービスが普及する現代において「ジャケ写」という普段は注目されない部分に焦点を当て、ユーザーに新たな音楽体験を手軽かつワクワク感のある形で提供する。

デザインガイド

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

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

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

サイトマップ

FiND MUSiCの使い方

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

制作ツール

ハードウエア

• MacBook Pro
• iPhone12 Pro
  
  

ソフトウエア

• Spotify
• Safari
• Chrome
• Illustrator
• Figma
• Visual Studio Code
• Terminal
• Render
• Namecheap
• Google Colab
• Xcode
  
  

プロジェクトの期間

2023.04.14 - 2023.12.22

まとめ

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

調査

現状調査

• 音楽サブスクサービス比較
• 2022年 定額制音楽配信サービス利用動向に関する調査
• デジタル楽曲配信におけるジャケット画像の関係 : モバイル環境下でのクロス・モーダル研究 [要旨]
• CD ジャケットにおける曲調の色聴共感覚に関する研究
• CDジャケットの感性価値
• CDブックレット・デザイン考ー視覚的表現のーモデルとして
• ジャケットワークを用いた意外性のある情報推薦システムの提案
• 音楽 CD の文化は生き残ることができるのか
• ジャケットを活かした音楽発見サポートシステム「LOOK」デザイン
• ネットワーク社会における音楽産業のマーケティング戦略特性にかかわる研究
• 2022年度「音楽メディアユーザー実態調査」報告書公表
  
  

先行事例

• Predominantly
• NewJeans
  
  

技法・技術情報

• Expressアプリを無料のホスティングサービスRenderにデプロイする | Qiita
• MediaElement.jsでメディアプレイヤーのUIをサクッとつくる | レコチョクのエンジニアブログ
• grid-template-areasを使いこなす
• iPhoneアプリの初回起動時に表示したい「おもてなし」ライブラリ4選
  
  

ドメイン

• カスタムドメイン用にNamecheap DNSの構成する方法
• Render上でカスタムドメインを設定する方法
• Virtual Event Kit | GitHub Education
• Namecheapのドメインにサブドメインを追加する方法
  
  

UIデザイン

• i3DESIGN note | UIUX Tips
• Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎吾 / TSUMIKI INC.
  
  

画面構成

• スマートフォンのレイアウトをそのままPCに活かしたデザインまとめ
  • GREEN WISHES International Mountain Day 2022 | BOTANIST
  • 泡おもい | 株式会社宇宙環境保全センター
• アプリのウォークスルー画面を考えてみる。
  
  
  
  

プロジェクト管理

スケジュール

スケジュール表

ToDo

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

2023.12.22

作業メモ

• チュートリアル調整
• Home画面においてジャケット写真をタッチしても曲が再生されない問題を解消
• フッターのコピーライト編集
  　(© 2023-2024　FiND MUSiC)
• 作品概要修正、再提出
• 説明パネルの添削、修正、提出
• 図録のデータ入力
• 学科サイト整理
  
  
  
  

2023.12.15

作業メモ

• 制作に2度失敗した常時色ごとのジャケット写真が見られるHome画面が途中までできた
• チュートリアルを常時確認できるようFAQ画面に設置
• Search画面の色ボタンを絵の具の形に変更、ボタンのスペース調整、色の順番入れ替え
• メインビジュアル変更
  
  
  
  
  

2023.12.08

作業メモ

• プレイリストの曲がアプリ内で聴けるか再調整
• ロゴ刷新
• ジャケット写真を角丸にした
• ローディング画面追加
• フッターの文字サイズを小さくした
  
  
  
  

2023.12.01

最終審査コメント

• Searchの文字列の横のロゴの中にある文字（FiND MUSiC）がほぼ見えない、せっかく作っているのでしっかり目立たせる
• 視線の動きは左が最初なのでSearchとロゴの位置を逆にした方がいい
• フッターの文字が大きい
• チュートリアルがあるのは親切だが、ユーザーの操作と吹き出しの操作が別になっていて操作しづらい、操作しないタイプのチュートリアル画面もあり
• アプリを開いた最初にロード画面があるとよい（長いと鬱陶しいので短めに）
• 色ボタンのスペースの作り方を調整するとよい
• 色ボタンは有彩色が上の方が見栄えが良い
• 色ボタンは絵の具が並んでいるみたいなパレットにするといいサービスだなと感じ取ってもらいやすいかもしれない
• デフォルトでそれぞれの色ごとにジャケ写が見える状態にするだけでも印象が変わると思う
• ロゴやアプリ画面から色々なカラーで楽しめる印象が感じられない
• 色ボタンは角丸だが、ボタンを押した後に表示されるジャケット写真が角丸になっていない
  
  
  
  

2023.11.24

作業メモ

• 前期に作成した作品概要の書き換え、添削４回、フォルダ提出
• Renderにデプロイしたアプリをサブドメインに変更
  • URL：https://findmusic.ami-kimura.me
    
    
    
    

2023.11.17

作業メモ

• アプリ使用に関するアンケートを取った
• Namecheapでサブドメインの取得（GItHub Educationにてドメイン料無料）
  • URL：https://findmusic.ami-kimura.me
    
    

参考技術

• Virtual Event Kit | GitHub Education
• Namecheapのドメインにサブドメインを追加する方法
• カスタムドメイン用にNamecheap DNSの構成する方法
• Render上でカスタムドメインを設定する方法
  
  
  
  

2023.11.10

作業メモ

• ホーム画面制作を試みたができなかった
• アプリ導入画面のワイヤーフレームを作成した
  
  
  
  

2023.10.27

作業メモ

• 中間発表をした・聞いた
  
  

後期中間審査のコメント

• SpotifyAPIを使用してジャケット写真や曲名、アーティスト名などのデータを取得していることを明記する・発表時にきちんと説明する
• Pythonを使用し、ジャケット写真の色を判定して、アプリに反映させる仕組みが作れるようになると尚良い
• ホーム画面やシェア機能が必要か判断する方法は？ーアンケート調査を行い、意見を収集する
• 初めてアプリを起動した人にアプリの使い方や特徴を知ってもらうために、アプリ初期起動時に導入画面（ウォークスルー、コーチマーク）を表示させる
• 背景や目的の部分に「なぜ色を使うのか」「色を使うことでどうなるのか」「色がメインなのか写真がメインなのか」が書かれていない。例えば、写真がメインならジャケット写真の表示サイズを大きくする
• アプリを触りたくなるような工夫をする
• 前半で背景や目的、コンセプトといった説明で時間を使い切っているため、　Webアプリの使い方やアプリ制作でこだわった部分を細かく説明できるように時間配分を考える
  
  

参考文献

• iPhoneアプリの初回起動時に表示したい「おもてなし」ライブラリ4選
• アプリのウォークスルー画面を考えてみる。
  
  
  
  

2023.10.20

作業メモ

• 中間報告を聴いた
• ジャケット写真をクリックした時に画面最下部に表示されるオーディオプレイヤーを作り込んだ
• Renderにデプロイした
  URL：https://spotifyapi1020.onrender.com
• メインビジュアルのアップデート
  
  
  

参考文献

• grid-template-areasを使いこなす
  
  
  
  

2023.10.13

作業メモ

• ジャケット写真の表示を縦スクロールから横スクロールに変更
• ジャケット写真の表示サイズを大きくした
• Renderにデプロイした
  URL：https://spotifyapi1013.onrender.com
• 中間発表の準備
• メインビジュアルのアップデート
  
  
  

現在の進行状況

• 実機（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曲
  
  

次回までにやること

• ジャケット写真をクリックした時に画面最下部に表示されるオーディオプレイヤーのカスタマイズをする
  
  

参考文献

• Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎吾 / TSUMIKI INC.
  
  
  
  

2023.10.06

作業メモ

• ジャケ写をクリックした時に曲が再生できるようになった
• Renderにデプロイした
  URL：https://spotifyapi1006.onrender.com
  
  
  
  

2023.09.29

作業メモ

• ジャケ写をクリックした時に、画面下にオーディオプレイヤーの枠を表示できるようにした
• Renderにデプロイした
  URL：https://spotifyapi0929.onrender.com
  
  

展示までにやること

• アプリのカタログのようなビジュアルを作る
  • Apple Store: Spotify
    
    
    
    

2023.09.22

作業メモ

• 試聴音源のない曲をプレイリストから削除した
• PC画面でスマホの画面を埋め込んだ構成に変更した
• ジャケット写真をクリックした時にオーディオプレイヤーが画面下に出るように設計中
• Render にデプロイした
  URL：https://spotifyapi0922.onrender.com

参考サイト

• MediaElement.jsでメディアプレイヤーのUIをサクッとつくる | レコチョクのエンジニアブログ
• スマートフォンのレイアウトをそのままPCに活かしたデザインまとめ
  • GREEN WISHES International Mountain Day 2022 | BOTANIST
  • 泡おもい | 株式会社宇宙環境保全センター
    
    
    
    

2023.09.15

作業メモ

• 12個のプレイリストを公開設定にした
  
  

• ボタンの色と連動したジャケット写真が表示可能になり、音源も聴けるようになった
• Renderにデプロイした
  URL：https://spotifyapi0921.onrender.com
  
  
  
  

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

作業メモ

• 概要集作成
• プレイリスト追加
  
  

参考サイト

• Spotifyの歌詞カードっぽく画像に応じたいい感じの背景色と文字色を設定する（Vue.js）
• Designspiration
  
  
  
  

2023.06.16

作業メモ

• 概要集作成
• プレイリスト作成
  
  
  
  

2023.06.09

作業メモ

• 中間発表を聞く
• 同じ曲しか流れない問題と曲の再生を止められない問題が解決した
  
  
  
  

2023.06.02

作業メモ

• 中間発表を聞く

参考サイト

• Chooning | Spotifyで聴いた音楽の感想や思い出を投稿できるサービス
  
  
  
  

2023.05.26

作業メモ

• 中間発表

試作

• 中間発表時点での問題
  • 同じ曲しか流れない
  • 曲が止められない
    
    

• 色のパネルをクリックしてジャケット写真と試聴音源を表示させるところまで出来た
• 同じ曲しか流れない、曲が止められない問題を解決しなければならない
  
  
  
  

中間のまとめ1

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

中間のまとめ2

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

2023.05.19

作業メモ

• アンケート回収、まとめ
• 中間発表準備

Spotify APIお試し進行状況

URL：https://spotifyapi0525.onrender.com

先行事例

• https://predominant.ly

参考文献

• 音楽サブスクサービス比較
• 2022年 定額制音楽配信サービス利用動向に関する調査
• i3DESIGN note | UIUX Tips
  
  
  
  

2023.05.12

作業メモ

• アンケート作成
• アンケート掲載箇所
  • Iwata Lab.
  • Instagram(個人アカウント)
    
    
    
    

2023.04.28

作業メモ

• メインタイトルとサブタイトル更新
  • メインタイトル：FiND MUSiC
  • サブタイトル：ジャケ写の色から出会う音楽サイト
• メインビジュアル掲載
  
• Spotify APIの実行お試し
  
  

参考文献収集

• デジタル楽曲配信におけるジャケット画像の関係 : モバイル環境下でのクロス・モーダル研究 [要旨]
• 大ヒットアルバムの作り方 ―CD ジャケット編―
• CD ジャケットにおける曲調の色聴共感覚に関する研究
• 3COINS | 新たなマーケティング手法！ジャケ買いを現代版にアレンジしたコラボ企画
• CDジャケットの感性価値
• CDブックレット・デザイン考ー視覚的表現のーモデルとして
• ジャケットワークを用いた意外性のある情報推薦システムの提案
• 音楽 CD の文化は生き残ることができるのか
• ジャケットを活かした音楽発見サポートシステム「LOOK」デザイン
• ネットワーク社会における音楽産業のマーケティング戦略特性にかかわる研究
• 「CDジャケットを飾れる」ワイヤレスCDプレーヤー『Instant Disk Audio CP1』
• CDが苦戦しているのに、なぜ曲を取り込む「ラクレコ」は売れているのか
• THE RECORD 2023年3・4月号
• 2022年度「音楽メディアユーザー実態調査」報告書公表
  
  
  
  

2023.04.21

作業メモ

• Spotify APIの実行お試し
  
  

参考サイト

• APIを使って音楽を聴くきっかけを作ろう
• サントリー｜ほろよい
  
  
  
  

2023.04.14

作業メモ

• 赤字部分のコメントアウト
• 情報収集
• Spotify APIの実行お試し
  
  

研究テーマ案

• Web
  • I's髪工房のサイト改修
  • FiND MUSiCの改良
• グラフィックデザイン
  • 投票済証明書のデザイン