#author("2024-03-08T12:46:16+09:00;2024-02-15T21:44:58+09:00","default:member","member") #author("2024-03-08T12:47:17+09:00;2024-02-15T21:44:58+09:00","default:member","member") *FiND MUSiC ジャケ写の色から新たな音楽に出会うWebアプリ #image(app.jpg) -''Ami Kimura'' -'''Keywords：music, artwork, color''' -https://findmusic.ami-kimura.me ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; ジャケット写真の色から新たな音楽に出会うきっかけを提供するWebアプリ ※ジャケット写真とは・・CDやDVDなどのジャケットとして外装に使用されている写真のこと。[[wikipedia>https://ja.wikipedia.org/wiki/ディスクジャケット]] ※Webアプリとは・・動的に動き、ユーザーがリアルタイムで操作、実行可能なもの。（Webサイトは静的に動き、情報提供がメイン） ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; ''__背景__'' 近年、音楽の聴き方が急速にデジタル音源に変化し、音楽ストリーミングサービスを通じて音楽を聴く人が増加して いる。2023年5月実施のアンケート調査では、多くの人が音楽を聴く行為に満足している一方で、市場に出回る音楽のほぼ全てにジャケット写真が付いている。[[東京藝術大学アダム・ストレンジ氏の論文「デジタル楽曲配信におけるジャケット画像の関係」>https://geidai.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=572&item_no=1&page_id=13&block_id=1]]や[[東京工科大学メディア学科の論文「CDジャケットにおける曲調の色聴共感覚に関する研究」>https://www.jstage.jst.go.jp/article/wiieej/21.04/0/21.04_162/_article/-char/ja/]]からジャケット写真や写真に含まれる色は音楽体験を補完し、音楽に対する感情や意味を豊かにする要素として重要であることが示されている。 ''__目的__'' 背景に基づき、本研究では、曲を聴く前段階で受け取る視覚情報「ジャケット写真」に焦点を当てたWebアプリを制作し、音楽だけでなくジャケット写真に対する新たな魅力を発見できる機会を提供することを目指す。 //根拠として、東京藝術大学のアダム・ストレンジさんの「デジタル楽曲配信におけるジャケット画像の関係」という論文より、ジャケット画像は音楽の特性や好みを強く表象することが明らかにされている。この知見から、本プロジェクトの実施が意義を持つと考えている。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -形式：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曲 ~ #iframe(https://findmusic.ami-kimura.me,70%,160%) ~ ***アンケート調査 2023年5月12日から5月26日にかけてGoogleフォームにて「音楽やジャケット写真に関する調査」を行い、18~22歳の男女83人から回答を集めた。そのうち、レコードやCDのジャケ買いをしたことがある人が13人、したことない人が70人という結果が出た。また、ジャケ買いをした理由として「特定のアーティストが好きだ」「インテリアにしたら可愛いから「雰囲気が好きだった」といった理由があげられた。それに対し、ジャケ買いをしたことがない理由として回答者の半数が「特に理由はない」と回答し、その他に「興味がない」「金銭的余裕がない」といった理由があげられた。 #image(q1.jpg, 80%) ~ 卒業研究で制作する内容のサービスがあれば使いたいか聞いたところ、64人が「はい」 19 人が「いいえ」と回答した。 #image(q2.jpg, 80%) ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; Web アプリ上にアクセス環境を構築することで、調査で明らかになった「金銭的余裕がない」という問題を解決し、アプリの利用障壁を低減できる。このことから「レコード店でジャケ買いするようなワクワク感をスマホで手軽に。」をコンセプトに、スマートフォンや音楽ストリーミングサービスが普及する現代において「ジャケ写」という普段は注目されない部分に焦点を当て、ユーザーに新たな音楽体験を手軽かつワクワク感のある形で提供する。 ~ ***デザインガイド （１）ロゴマーク ロゴマークはジャケット画像の色から音楽を探す様子を#FD3C32、#FDC806、#3877F7、#FDFEFFの4色のグラデーションで表現している。このロゴマークはアプリ内のホーム画面遷移のボタンとfaviconに使用する。 #image(findmusic_logo.jpg) （２）カラー アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9D9D、#BCBCBCの3色を要素に合わせて使用する。 #image(font-color2.jpg) （３）フォント スイスのデザイナー ローレンス・ブルナー氏によってデザインされたジオメトリック・サンセリフ書体「Circular」を使用する。このフォントは音楽ストリーミングサービス「Spotify」で使用されているフォントである。 #image(circular-font.jpg) ~ ***サイトマップ #image(findmusic_sitemap.jpg) ~ ***FiND MUSiCの使い方 画面下のメニューからサーチ画面に移動すると12色のボタンが表示される。色ボタンをどれか１つタップするとボタンの色に関連した色のジャケット写真が色ボタンの下に表示される。表示中のジャケット写真を横スクロールすると他のジャケット写真を見ることができる。また、ジャケット写真を押すと30秒程度の試聴音源が流れる仕組みである。 また、ミュージックプレイヤーの右側にあるミートボールメニューを押した時、YouTubeやAmazonのリンクがまとめられたウィンドが表示され、聴いている曲に関連したページに飛ぶことができる。 URL：https://findmusic.ami-kimura.me #image(mainvisual5.jpg) ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ''__ハードウエア__'' -MacBook Pro -iPhone12 Pro ~ ''__ソフトウエア__'' -Spotify -Safari -Chrome -Illustrator -Figma -Visual Studio Code -Terminal -Render -Namecheap -Google Colab -Xcode ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜2023.04.14 - 2023.12.22 }; 2023.04.14 - 2023.12.22 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; Webアプリ上での環境構築により、ユーザーはネット環境と閲覧可能な媒体があれば手軽に利用でき、API の活用により著作権を守りつつ新しい価値を生み出せるようになった。 実際のアプリ利用者の感想として「ジャケ写を色で直感的に選べるのが楽しかった」「曲名が分からない時にジャケ写の雰囲気を覚えていれば検索できるため良いと思った」といったポジティブな評価を得ることができた。このことから、Webアプリを通じて、音楽、色、ジャケット写真を組み合わせた新たな音楽体験をユーザーに提供できたと考える。 ~ ~ //***現在の進行状況 //-実機（iPhone12 Pro）で確認しながらサーチ画面をブラッシュアップ中 //--曲数を増やした //--色ボタンとジャケット写真のサイズを大きくした //--ジャケット写真をクリックした際に画面最下部に表示されるオーディオプレイヤーを追加した //--ジャケット写真の表示を縦スクロールから横スクロールに変更した //-2023.10.26現在での追加した曲数は計：258曲 //--前期に計画していた200曲はクリアしている状態 //***今後について //-ジャケット写真をクリックした時に画面最下部に表示されるオーディオプレイヤーのカスタマイズを進める //-Apple MusicやSpotify、YouTube Music、Amazonなどのリンクに飛べるようにする //-ホーム画面やシェア機能は本当に必要か検証する //-ライブラリ画面は作れないので作らない **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-to/music-subscription-comparison]] -[[2022年 定額制音楽配信サービス利用動向に関する調査>https://ictr.co.jp/report/20221111.html/#:~:text=■-,定額制音楽配信サービス利用者数は2022,％増となった%E3%80%82]] -[[デジタル楽曲配信におけるジャケット画像の関係 : モバイル環境下でのクロス・モーダル研究 [要旨]>https://geidai.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=572&item_no=1&page_id=13&block_id=17]] -[[CD ジャケットにおける曲調の色聴共感覚に関する研究>https://gakuen-hachioji.jp/wp-content/themes/cuh/images/presentation-pdf/2021/2021_D125.pdf]] -[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390282680621661824]] -[[CDブックレット・デザイン考ー視覚的表現のーモデルとして>https://www.gakushuin.ac.jp/univ/g-hum/art/web_library/author/arikawa/CD_boolet/index.html]] -[[ジャケットワークを用いた意外性のある情報推薦システムの提案>https://www.ieice.org/publications/conference-FIT-DVDs/FIT2017/data/pdf/D-007.pdf]] -[[音楽 CD の文化は生き残ることができるのか>https://lab.kuas.ac.jp/~jinbungakkai/pdf/2013/m2013_06.pdf]] -[[ジャケットを活かした音楽発見サポートシステム「LOOK」デザイン>https://koara.lib.keio.ac.jp/xoonips/modules/xoonips/download.php/KO40001001-00002017-0558.pdf?file_id=131618]] -[[ネットワーク社会における音楽産業のマーケティング戦略特性にかかわる研究 >https://www.konan-u.ac.jp/bi/report/BI-mono/BI-MONO2011-002.pdf]] -[[2022年度「音楽メディアユーザー実態調査」報告書公表>https://www.riaj.or.jp/f/pdf/report/mediauser/softuser2022.pdf]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[Predominantly>https://predominant.ly]] -[[NewJeans>https://newjeans.kr/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[Expressアプリを無料のホスティングサービスRenderにデプロイする | Qiita>https://qiita.com/snyt45/items/1e14b4a41d20176749dd]] -[[MediaElement.jsでメディアプレイヤーのUIをサクッとつくる | レコチョクのエンジニアブログ>https://techblog.recochoku.jp/8102]] -[[grid-template-areasを使いこなす>https://qiita.com/kohei_abe/items/389cb1f667dc66948c2b]] -[[iPhoneアプリの初回起動時に表示したい「おもてなし」ライブラリ4選>https://dev.classmethod.jp/articles/sp10-ios-introduce-introduction-library/]] ~ ''ドメイン'' -[[カスタムドメイン用にNamecheap DNSの構成する方法>https://render.com/docs/configure-namecheap-dns]] -[[Render上でカスタムドメインを設定する方法>https://render.com/docs/custom-domains#configuring-dns-to-point-to-render]] -[[Virtual Event Kit | GitHub Education>https://education.github.com/experiences/virtual_event_kit]] -[[Namecheapのドメインにサブドメインを追加する方法>https://ja.thefilibusterblog.com/kak-dobavit-subdomen-k-domenu-v-namecheap-ja/]] ~ ''UIデザイン'' -[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp/]] -[[Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎吾 / TSUMIKI INC.>https://note.com/shingo2000/n/n7b4a5e40e86d]] ~ ''画面構成'' -[[スマートフォンのレイアウトをそのままPCに活かしたデザインまとめ>https://sancolumn.com]] --[[GREEN WISHES International Mountain Day 2022 | BOTANIST>https://sustainable.botanistofficial.com/campaign/mountainday/]] --[[泡おもい | 株式会社宇宙環境保全センター>https://uccenter.jp/awaomoi/]] -[[アプリのウォークスルー画面を考えてみる。>https://mixltd.jp/blog/design_app_ui_-walkthrough/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; %%スケジュール表%% ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%-選曲を増やす%% %%-サーチ画面の改修%% %%-見やすい色の調査%% %%-色別のプレイリスト作成%% %%-同じ曲しか流れない、曲が止められない問題を解決する%% %%-前期中間発表の準備%% %%-前期最終審査の準備%% %%-前期概要集作成%% %%-後期中間発表の準備%% %%-後期最終審査の準備%% %%-後期概要集作成%% %%-説明パネルの作成%% %%-図録データ入力%% %%-学科サイト最終整理%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.12.22 ***作業メモ -チュートリアル調整 -Home画面においてジャケット写真をタッチしても曲が再生されない問題を解消 -フッターのコピーライト編集 (© 2023-2024 FiND MUSiC) -作品概要修正、再提出 -説明パネルの添削、修正、提出 -図録のデータ入力 -学科サイト整理 ~ ~ **2023.12.15 ***作業メモ -制作に2度失敗した常時色ごとのジャケット写真が見られるHome画面が途中までできた -チュートリアルを常時確認できるようFAQ画面に設置 -Search画面の色ボタンを絵の具の形に変更、ボタンのスペース調整、色の順番入れ替え -メインビジュアル変更 #image(mainvisual5.jpg, 30%) ~ ~ **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>https://education.github.com/experiences/virtual_event_kit]] -[[Namecheapのドメインにサブドメインを追加する方法>https://ja.thefilibusterblog.com/kak-dobavit-subdomen-k-domenu-v-namecheap-ja/]] -[[カスタムドメイン用にNamecheap DNSの構成する方法>https://render.com/docs/configure-namecheap-dns]] -[[Render上でカスタムドメインを設定する方法>https://render.com/docs/custom-domains#configuring-dns-to-point-to-render]] ~ ~ **2023.11.10 ***作業メモ -ホーム画面制作を試みたができなかった -アプリ導入画面のワイヤーフレームを作成した ~ ~ **2023.10.27 ***作業メモ -中間発表をした・聞いた ~ ***後期中間審査のコメント -SpotifyAPIを使用してジャケット写真や曲名、アーティスト名などのデータを取得していることを明記する・発表時にきちんと説明する -Pythonを使用し、ジャケット写真の色を判定して、アプリに反映させる仕組みが作れるようになると尚良い -ホーム画面やシェア機能が必要か判断する方法は？ーアンケート調査を行い、意見を収集する -初めてアプリを起動した人にアプリの使い方や特徴を知ってもらうために、アプリ初期起動時に導入画面（ウォークスルー、コーチマーク）を表示させる -背景や目的の部分に「なぜ色を使うのか」「色を使うことでどうなるのか」「色がメインなのか写真がメインなのか」が書かれていない。例えば、写真がメインならジャケット写真の表示サイズを大きくする -アプリを触りたくなるような工夫をする -前半で背景や目的、コンセプトといった説明で時間を使い切っているため、 Webアプリの使い方やアプリ制作でこだわった部分を細かく説明できるように時間配分を考える ~ ***参考文献 -[[iPhoneアプリの初回起動時に表示したい「おもてなし」ライブラリ4選>https://dev.classmethod.jp/articles/sp10-ios-introduce-introduction-library/]] -[[アプリのウォークスルー画面を考えてみる。>https://mixltd.jp/blog/design_app_ui_-walkthrough/]] ~ ~ **2023.10.20 ***作業メモ -中間報告を聴いた -ジャケット写真をクリックした時に画面最下部に表示されるオーディオプレイヤーを作り込んだ -Renderにデプロイした URL：https://spotifyapi1020.onrender.com -メインビジュアルのアップデート #image(mainvisual4.jpg, 50%) ~ ***参考文献 -[[grid-template-areasを使いこなす>https://qiita.com/kohei_abe/items/389cb1f667dc66948c2b]] ~ ~ **2023.10.13 ***作業メモ -ジャケット写真の表示を縦スクロールから横スクロールに変更 -ジャケット写真の表示サイズを大きくした -Renderにデプロイした URL：https://spotifyapi1013.onrender.com -中間発表の準備 -メインビジュアルのアップデート #image(mainvisual3.jpg, 50%) ~ ***現在の進行状況 -実機（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.>https://note.com/shingo2000/n/n7b4a5e40e86d]] ~ ~ **2023.10.06 ***作業メモ -ジャケ写をクリックした時に曲が再生できるようになった -Renderにデプロイした URL：https://spotifyapi1006.onrender.com ~ ~ **2023.09.29 ***作業メモ -ジャケ写をクリックした時に、画面下にオーディオプレイヤーの枠を表示できるようにした -Renderにデプロイした URL：https://spotifyapi0929.onrender.com ~ ***展示までにやること -アプリのカタログのようなビジュアルを作る --[[Apple Store: Spotify>https://apps.apple.com/jp/app/spotify-%E6%9C%80%E6%96%B0%E3%81%AE%E9%9F%B3%E6%A5%BD%E3%82%84%E4%BA%BA%E6%B0%97%E3%81%AE%E9%9F%B3%E5%A3%B0%E9%85%8D%E4%BF%A1%E3%81%8C%E8%81%B4%E3%81%8D%E6%94%BE%E9%A1%8C/id324684580]] ~ ~ **2023.09.22 ***作業メモ -試聴音源のない曲をプレイリストから削除した -PC画面でスマホの画面を埋め込んだ構成に変更した -ジャケット写真をクリックした時にオーディオプレイヤーが画面下に出るように設計中 -Render にデプロイした URL：https://spotifyapi0922.onrender.com ~ ***参考サイト -[[MediaElement.jsでメディアプレイヤーのUIをサクッとつくる | レコチョクのエンジニアブログ>https://techblog.recochoku.jp/8102]] -[[スマートフォンのレイアウトをそのままPCに活かしたデザインまとめ>https://sancolumn.com]] --[[GREEN WISHES International Mountain Day 2022 | BOTANIST>https://sustainable.botanistofficial.com/campaign/mountainday/]] --[[泡おもい | 株式会社宇宙環境保全センター>https://uccenter.jp/awaomoi/]] ~ ~ **2023.09.15 ***作業メモ -12個のプレイリストを公開設定にした #iframe(https://open.spotify.com/embed/playlist/4r26m9rA5geexMAv8J0EqQ?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/6SWbJWn7cawJpWXAeQrq4p?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/37SENme4KIenkeKFqUtpoM?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/272riAbrd5keg8Xgaorm9H?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/6cDz1D6PHLD5W9lGVVxX2C?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/5eMS1zl2CxGhQt2kDxKzW3?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/4S7I1WC43TkkR5hkKU3NID?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/0qKenVXQ4DRqCVhPSTVZqR?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/1vsZ1aSTmCtKVGeHYF3PGp?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/3pcVRI1Vt274AOgqUkBlbo?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/19Pw7E98CCuIAP2be0dqvS?utm_source=generator&theme=0,100%,28%,frameborder="0") #iframe(https://open.spotify.com/embed/playlist/6cd3MMLEAw4XQ2KxdYWXgu?utm_source=generator&theme=0,100%,28%,frameborder="0") ~ -ボタンの色と連動したジャケット写真が表示可能になり、音源も聴けるようになった -Renderにデプロイした URL：https://spotifyapi0921.onrender.com ~ ~ **2023.07.21 ***作業メモ -学科サイト整理 -サイトマップ掲載 #image(sitemap.jpg, 50%) -概要集修正、再提出 --図４、５、６、７を修正 ~ ~ **2023.07.14 ***作業メモ -学科サイト整理 -概要集修正 --図１、図２のグラフの色変更 |49|2|49|c |#image(q1.jpg)| |#image(q2.jpg)| ~ ~ **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）>https://qiita.com/charon616/items/d710c79cd354a7c517a0]] -[[Designspiration>https://www.designspiration.com/]] ~ ~ **2023.06.16 ***作業メモ -概要集作成 -プレイリスト作成 ~ ~ **2023.06.09 ***作業メモ -中間発表を聞く -同じ曲しか流れない問題と曲の再生を止められない問題が解決した #youtube(uym9sQdwRCc,50%) ~ ~ **2023.06.02 ***作業メモ -中間発表を聞く ***参考サイト -[[Chooning | Spotifyで聴いた音楽の感想や思い出を投稿できるサービス>https://chooning.app/ja]] ~ ~ **2023.05.26 ***作業メモ -中間発表 ***試作 -中間発表時点での問題 --同じ曲しか流れない --曲が止められない ~ #youtube(irHpKeXcXtM,50%) -色のパネルをクリックしてジャケット写真と試聴音源を表示させるところまで出来た -同じ曲しか流れない、曲が止められない問題を解決しなければならない ~ ~ ***中間のまとめ ***中間のまとめ1 中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を止められない」を解決することができた。サイト上で仕組みを作ることでネット環境と媒体があれば、場所や時間帯に関係なく見ることができる。また、ジャケ買いをしたことがない理由としてあげられた「金銭的余裕がない」ことにもWebサイトであれば対応できる。前期では仕組みづくりを中心に行った。試作したサイトをホスティングサービス「Render」にデプロイし、誰でも閲覧可能な体制を整えた。後期では曲を増やすと共に、第三者にサイトを使用してもらい意見を聞きながらサイトの改善を図っていく予定だ。 ~ ***中間のまとめ ***中間のまとめ2 Spotify APIを使用してジャケット画像や曲の試聴音源を取れる状態を確認できたが、同じ曲しか流れない、曲が止められないといった問題が浮上したため、解決しなければならない。また、実施したアンケート結果を踏まえ、第３者目線からいただいた意見を元にフォントや色、サイト内の導線などのUIUX周りの設計を再度見直していきたい。 ~ ~ **2023.05.19 ***作業メモ -アンケート回収、まとめ -中間発表準備 ***Spotify APIお試し進行状況 #youtube(irHpKeXcXtM,50%) URL：https://spotifyapi0525.onrender.com ***先行事例 -https://predominant.ly ***参考文献 -[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-to/music-subscription-comparison]] -[[2022年 定額制音楽配信サービス利用動向に関する調査>https://ictr.co.jp/report/20221111.html/#:~:text=■-,定額制音楽配信サービス利用者数は2022,％増となった%E3%80%82]] -[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp/]] ~ ~ **2023.05.12 ***作業メモ -アンケート作成 --https://forms.gle/8ja4XndgiVPCnfuw6 -アンケート掲載箇所 --Iwata Lab. --Instagram(個人アカウント) ~ ~ **2023.04.28 ***作業メモ -メインタイトルとサブタイトル更新 --メインタイトル：FiND MUSiC --サブタイトル：ジャケ写の色から出会う音楽サイト -メインビジュアル掲載 #image(findmusic_mainvisual.jpg,50%) -Spotify APIの実行お試し #youtube(n_VLlBvwpM0,50%) ~ ***参考文献収集 -[[デジタル楽曲配信におけるジャケット画像の関係 : モバイル環境下でのクロス・モーダル研究 [要旨]>https://geidai.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=572&item_no=1&page_id=13&block_id=17]] -[[大ヒットアルバムの作り方 ―CD ジャケット編―>https://kozu-osaka.jp/cms/wp-content/uploads/2017/08/2016051.pdf]] -[[CD ジャケットにおける曲調の色聴共感覚に関する研究>https://gakuen-hachioji.jp/wp-content/themes/cuh/images/presentation-pdf/2021/2021_D125.pdf]] -[[3COINS | 新たなマーケティング手法！ジャケ買いを現代版にアレンジしたコラボ企画>https://www.trans.co.jp/column/trend/newmarketing/]] -[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390282680621661824]] -[[CDブックレット・デザイン考ー視覚的表現のーモデルとして>https://www.gakushuin.ac.jp/univ/g-hum/art/web_library/author/arikawa/CD_boolet/index.html]] -[[ジャケットワークを用いた意外性のある情報推薦システムの提案>https://www.ieice.org/publications/conference-FIT-DVDs/FIT2017/data/pdf/D-007.pdf]] -[[音楽 CD の文化は生き残ることができるのか>https://lab.kuas.ac.jp/~jinbungakkai/pdf/2013/m2013_06.pdf]] -[[ジャケットを活かした音楽発見サポートシステム「LOOK」デザイン>https://koara.lib.keio.ac.jp/xoonips/modules/xoonips/download.php/KO40001001-00002017-0558.pdf?file_id=131618]] -[[ネットワーク社会における音楽産業のマーケティング戦略特性にかかわる研究 >https://www.konan-u.ac.jp/bi/report/BI-mono/BI-MONO2011-002.pdf]] -[[「CDジャケットを飾れる」ワイヤレスCDプレーヤー『Instant Disk Audio CP1』>https://prtimes.jp/main/html/rd/p/000000006.000093335.html]] -[[CDが苦戦しているのに、なぜ曲を取り込む「ラクレコ」は売れているのか>https://www.itmedia.co.jp/business/articles/2112/18/news016.html]] -[[THE RECORD 2023年3・4月号>https://www.riaj.or.jp/riaj/open/open-record!file?fid=1977]] -[[2022年度「音楽メディアユーザー実態調査」報告書公表>https://www.riaj.or.jp/f/pdf/report/mediauser/softuser2022.pdf]] ~ ~ **2023.04.21 ***作業メモ -Spotify APIの実行お試し #youtube(RBKDX-rGnyk ,50%) ~ ***参考サイト -[[APIを使って音楽を聴くきっかけを作ろう>https://alis.to/yoch/articles/3VjGbNp5XnbW]] -[[サントリー｜ほろよい>https://www.suntory.co.jp/rtd/horoyoi/]] ~ ~ **2023.04.14 ***作業メモ -赤字部分のコメントアウト -情報収集 -Spotify APIの実行お試し ~ ***研究テーマ案 -Web --[[I's髪工房のサイト改修>木村天美/情報デザイン研究II]] --[[FiND MUSiCの改良>木村天美/情報デザイン演習IIA]] -グラフィックデザイン --投票済証明書のデザイン ~ ~ ~ #settableborder(none)