木村天美/卒業研究
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
山口恵
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
中川飛鳥
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*FiND MUSiC
ジャケ写の色から新たな音楽に出会うWebアプリ
#image(app.jpg)
-''Ami Kimura''
-'''Keywords:music, artwork, color'''
-https://findmusic.ami-kimura.me
~
**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
ジャケット写真の色から新たな音楽に出会うきっかけを提供す...
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装...
※Webアプリとは・・動的に動き、ユーザーがリアルタイムで操...
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
''__背景__''
近年、音楽の聴き方が急速にデジタル音源に変化し、音楽スト...
''__目的__''
背景に基づき、本研究では、曲を聴く前段階で受け取る視覚情...
//根拠として、東京藝術大学のアダム・ストレンジさんの「デ...
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-形式:Webアプリ
--URL:https://findmusic.ami-kimura.me
-サイズ:レスポンシブ(スマートフォン幅メイン)
-ドメイン:Namecheap
-サーバー:Render
-曲数:257曲
--内訳:Black :23曲 Gray:35曲 Brown:8曲 White:28曲
Beige:28 曲 Pink:16曲 Red:15曲 Orange:15曲 Yellow...
Purple:7曲 Blue:47曲 Green:18曲
~
#iframe(https://findmusic.ami-kimura.me,70%,160%)
~
***アンケート調査
2023年5月12日から5月26日にかけてGoogleフォームにて「音楽...
#image(q1.jpg, 80%)
~
卒業研究で制作する内容のサービスがあれば使いたいか聞いた...
#image(q2.jpg, 80%)
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
Web アプリ上にアクセス環境を構築することで、調査で明らか...
~
***デザインガイド
(1)ロゴマーク
ロゴマークはジャケット画像の色から音楽を探す様子を#FD3C32...
#image(findmusic_logo.jpg)
(2)カラー
アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9...
#image(font-color2.jpg)
(3)フォント
スイスのデザイナー ローレンス・ブルナー氏によってデザイン...
#image(circular-font.jpg)
~
***サイトマップ
#image(findmusic_sitemap.jpg)
~
***FiND MUSiCの使い方
画面下のメニューからサーチ画面に移動すると12色のボタンが...
また、ミュージックプレイヤーの右側にあるミートボールメニ...
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アプリ上での環境構築により、ユーザーはネット環境と閲覧...
~
~
//***現在の進行状況
//-実機(iPhone12 Pro)で確認しながらサーチ画面をブラッシ...
//--曲数を増やした
//--色ボタンとジャケット写真のサイズを大きくした
//--ジャケット写真をクリックした際に画面最下部に表示され...
//--ジャケット写真の表示を縦スクロールから横スクロールに...
//-2023.10.26現在での追加した曲数は計:258曲
//--前期に計画していた200曲はクリアしている状態
//***今後について
//-ジャケット写真をクリックした時に画面最下部に表示される...
//-Apple MusicやSpotify、YouTube Music、Amazonなどのリン...
//-ホーム画面やシェア機能は本当に必要か検証する
//-ライブラリ画面は作れないので作らない
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
-[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-t...
-[[2022年 定額制音楽配信サービス利用動向に関する調査>http...
-[[デジタル楽曲配信におけるジャケット画像の関係 : モバイ...
-[[CD ジャケットにおける曲調の色聴共感覚に関する研究>http...
-[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390...
-[[CDブックレット・デザイン考ー視覚的表現のーモデルとして...
-[[ジャケットワークを用いた意外性のある情報推薦システムの...
-[[音楽 CD の文化は生き残ることができるのか>https://lab.k...
-[[ジャケットを活かした音楽発見サポートシステム「LOOK」デ...
-[[ネットワーク社会における音楽産業のマーケティング戦略特...
-[[2022年度「音楽メディアユーザー実態調査」報告書公表>htt...
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
-[[Predominantly>https://predominant.ly]]
-[[NewJeans>https://newjeans.kr/]]
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-[[Expressアプリを無料のホスティングサービスRenderにデプ...
-[[MediaElement.jsでメディアプレイヤーのUIをサクッとつく...
-[[grid-template-areasを使いこなす>https://qiita.com/kohe...
-[[iPhoneアプリの初回起動時に表示したい「おもてなし」ライ...
~
''ドメイン''
-[[カスタムドメイン用にNamecheap DNSの構成する方法>https:...
-[[Render上でカスタムドメインを設定する方法>https://rende...
-[[Virtual Event Kit | GitHub Education>https://education...
-[[Namecheapのドメインにサブドメインを追加する方法>https:...
~
''UIデザイン''
-[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp...
-[[Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎...
~
''画面構成''
-[[スマートフォンのレイアウトをそのままPCに活かしたデザイ...
--[[GREEN WISHES International Mountain Day 2022 | BOTANI...
--[[泡おもい | 株式会社宇宙環境保全センター>https://uccen...
-[[アプリのウォークスルー画面を考えてみる。>https://mixlt...
~
~
**プロジェクト管理
***スケジュール
//&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度失敗した常時色ごとのジャケット写真が見られるHom...
-チュートリアルを常時確認できるようFAQ画面に設置
-Search画面の色ボタンを絵の具の形に変更、ボタンのスペース...
-メインビジュアル変更
#image(mainvisual5.jpg, 30%)
~
~
**2023.12.08
***作業メモ
-プレイリストの曲がアプリ内で聴けるか再調整
-ロゴ刷新
-ジャケット写真を角丸にした
-ローディング画面追加
-フッターの文字サイズを小さくした
~
~
**2023.12.01
***最終審査コメント
-Searchの文字列の横のロゴの中にある文字(FiND MUSiC)がほ...
-視線の動きは左が最初なのでSearchとロゴの位置を逆にした方...
-フッターの文字が大きい
-チュートリアルがあるのは親切だが、ユーザーの操作と吹き出...
-アプリを開いた最初にロード画面があるとよい(長いと鬱陶し...
-色ボタンのスペースの作り方を調整するとよい
-色ボタンは有彩色が上の方が見栄えが良い
-色ボタンは絵の具が並んでいるみたいなパレットにするといい...
-デフォルトでそれぞれの色ごとにジャケ写が見える状態にする...
-ロゴやアプリ画面から色々なカラーで楽しめる印象が感じられ...
-色ボタンは角丸だが、ボタンを押した後に表示されるジャケッ...
~
~
**2023.11.24
***作業メモ
-前期に作成した作品概要の書き換え、添削4回、フォルダ提出
-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...
-[[Namecheapのドメインにサブドメインを追加する方法>https:...
-[[カスタムドメイン用にNamecheap DNSの構成する方法>https:...
-[[Render上でカスタムドメインを設定する方法>https://rende...
~
~
**2023.11.10
***作業メモ
-ホーム画面制作を試みたができなかった
-アプリ導入画面のワイヤーフレームを作成した
~
~
**2023.10.27
***作業メモ
-中間発表をした・聞いた
~
***後期中間審査のコメント
-SpotifyAPIを使用してジャケット写真や曲名、アーティスト名...
-Pythonを使用し、ジャケット写真の色を判定して、アプリに反...
-ホーム画面やシェア機能が必要か判断する方法は?ーアンケー...
-初めてアプリを起動した人にアプリの使い方や特徴を知っても...
-背景や目的の部分に「なぜ色を使うのか」「色を使うことでど...
-アプリを触りたくなるような工夫をする
-前半で背景や目的、コンセプトといった説明で時間を使い切っ...
~
***参考文献
-[[iPhoneアプリの初回起動時に表示したい「おもてなし」ライ...
-[[アプリのウォークスルー画面を考えてみる。>https://mixlt...
~
~
**2023.10.20
***作業メモ
-中間報告を聴いた
-ジャケット写真をクリックした時に画面最下部に表示されるオ...
-Renderにデプロイした
URL:https://spotifyapi1020.onrender.com
-メインビジュアルのアップデート
#image(mainvisual4.jpg, 50%)
~
***参考文献
-[[grid-template-areasを使いこなす>https://qiita.com/kohe...
~
~
**2023.10.13
***作業メモ
-ジャケット写真の表示を縦スクロールから横スクロールに変更
-ジャケット写真の表示サイズを大きくした
-Renderにデプロイした
URL:https://spotifyapi1013.onrender.com
-中間発表の準備
-メインビジュアルのアップデート
#image(mainvisual3.jpg, 50%)
~
***現在の進行状況
-実機(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曲
~
***次回までにやること
-ジャケット写真をクリックした時に画面最下部に表示されるオ...
~
***参考文献
-[[Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎...
~
~
**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/sp...
~
~
**2023.09.22
***作業メモ
-試聴音源のない曲をプレイリストから削除した
-PC画面でスマホの画面を埋め込んだ構成に変更した
-ジャケット写真をクリックした時にオーディオプレイヤーが画...
-Render にデプロイした
URL:https://spotifyapi0922.onrender.com
~
***参考サイト
-[[MediaElement.jsでメディアプレイヤーのUIをサクッとつく...
-[[スマートフォンのレイアウトをそのままPCに活かしたデザイ...
--[[GREEN WISHES International Mountain Day 2022 | BOTANI...
--[[泡おもい | 株式会社宇宙環境保全センター>https://uccen...
~
~
**2023.09.15
***作業メモ
-12個のプレイリストを公開設定にした
#iframe(https://open.spotify.com/embed/playlist/4r26m9rA5...
#iframe(https://open.spotify.com/embed/playlist/6SWbJWn7c...
#iframe(https://open.spotify.com/embed/playlist/37SENme4K...
#iframe(https://open.spotify.com/embed/playlist/272riAbrd...
#iframe(https://open.spotify.com/embed/playlist/6cDz1D6PH...
#iframe(https://open.spotify.com/embed/playlist/5eMS1zl2C...
#iframe(https://open.spotify.com/embed/playlist/4S7I1WC43...
#iframe(https://open.spotify.com/embed/playlist/0qKenVXQ4...
#iframe(https://open.spotify.com/embed/playlist/1vsZ1aSTm...
#iframe(https://open.spotify.com/embed/playlist/3pcVRI1Vt...
#iframe(https://open.spotify.com/embed/playlist/19Pw7E98C...
#iframe(https://open.spotify.com/embed/playlist/6cd3MMLEA...
~
-ボタンの色と連動したジャケット写真が表示可能になり、音源...
-Renderにデプロイした
URL:https://spotifyapi0921.onrender.com
~
~
**2023.07.21
***作業メモ
-学科サイト整理
-サイトマップ掲載
#image(sitemap.jpg, 50%)
-概要集修正、再提出
--図4、5、6、7を修正
~
~
**2023.07.14
***作業メモ
-学科サイト整理
-概要集修正
--図1、図2のグラフの色変更
|49|2|49|c
|#image(q1.jpg)| |#image(q2.jpg)|
~
~
**2023.07.07
***作業メモ
-HTML、CSSを使用して画面設計を行い、Node.js、Vue.js、Spot...
使用してジャケット写真を反映させている。
※Node.js:サーバー側(SpotifyAPI)でユーザー側のJavaScriptを
実行するための環境
※Vue.js:JavaScriptフレームワークの一つ、今回はジャケット...
整列させるのに使用している
~
-前期最終審査
''__コメント__''
-サーバー構築をして負荷をためす
-アンケート結果を引用してWebサイトにする理由が論理が通っ...
-第三者に使用してもらうことで分かることもある
-余白が多く、白背景でスッキリしててよいが、スマホは画面が...
-他音楽ストリーミングサービスでのジャケ写は、スマホの画面...
-Amazonのリンクに飛んでその曲を買えるような動線にするとな...
-アンケート結果の全てを回答していただいた方に公開する
~
-Renderにデプロイした
※Render・・・無料ホスティングサービス
※デプロイ・・・構築したプログラムをユーザーがアクセスでき...
URL:https://spotifyapi0708.onrender.com
~
~
**2023.06.30
***作業メモ
-概要集修正
-学科サイト整理
-審査準備
~
~
**2023.06.23
***作業メモ
-概要集作成
-プレイリスト追加
~
***参考サイト
-[[Spotifyの歌詞カードっぽく画像に応じたいい感じの背景色...
-[[Designspiration>https://www.designspiration.com/]]
~
~
**2023.06.16
***作業メモ
-概要集作成
-プレイリスト作成
~
~
**2023.06.09
***作業メモ
-中間発表を聞く
-同じ曲しか流れない問題と曲の再生を止められない問題が解決...
#youtube(uym9sQdwRCc,50%)
~
~
**2023.06.02
***作業メモ
-中間発表を聞く
***参考サイト
-[[Chooning | Spotifyで聴いた音楽の感想や思い出を投稿でき...
~
~
**2023.05.26
***作業メモ
-中間発表
***試作
-中間発表時点での問題
--同じ曲しか流れない
--曲が止められない
~
#youtube(irHpKeXcXtM,50%)
-色のパネルをクリックしてジャケット写真と試聴音源を表示さ...
-同じ曲しか流れない、曲が止められない問題を解決しなければ...
~
~
***中間のまとめ1
中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を...
~
***中間のまとめ2
Spotify APIを使用してジャケット画像や曲の試聴音源を取れる...
~
~
**2023.05.19
***作業メモ
-アンケート回収、まとめ
-中間発表準備
***Spotify APIお試し進行状況
#youtube(irHpKeXcXtM,50%)
URL:https://spotifyapi0525.onrender.com
***先行事例
-https://predominant.ly
***参考文献
-[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-t...
-[[2022年 定額制音楽配信サービス利用動向に関する調査>http...
-[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp...
~
~
**2023.05.12
***作業メモ
-アンケート作成
-アンケート掲載箇所
--Iwata Lab.
--Instagram(個人アカウント)
~
~
**2023.04.28
***作業メモ
-メインタイトルとサブタイトル更新
--メインタイトル:FiND MUSiC
--サブタイトル:ジャケ写の色から出会う音楽サイト
-メインビジュアル掲載
#image(findmusic_mainvisual.jpg,50%)
-Spotify APIの実行お試し
#youtube(n_VLlBvwpM0,50%)
~
***参考文献収集
-[[デジタル楽曲配信におけるジャケット画像の関係 : モバイ...
-[[大ヒットアルバムの作り方 ―CD ジャケット編―>https://koz...
-[[CD ジャケットにおける曲調の色聴共感覚に関する研究>http...
-[[3COINS | 新たなマーケティング手法!ジャケ買いを現代版...
-[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390...
-[[CDブックレット・デザイン考ー視覚的表現のーモデルとして...
-[[ジャケットワークを用いた意外性のある情報推薦システムの...
-[[音楽 CD の文化は生き残ることができるのか>https://lab.k...
-[[ジャケットを活かした音楽発見サポートシステム「LOOK」デ...
-[[ネットワーク社会における音楽産業のマーケティング戦略特...
-[[「CDジャケットを飾れる」ワイヤレスCDプレーヤー『Instan...
-[[CDが苦戦しているのに、なぜ曲を取り込む「ラクレコ」は売...
-[[THE RECORD 2023年3・4月号>https://www.riaj.or.jp/riaj/...
-[[2022年度「音楽メディアユーザー実態調査」報告書公表>htt...
~
~
**2023.04.21
***作業メモ
-Spotify APIの実行お試し
#youtube(RBKDX-rGnyk ,50%)
~
***参考サイト
-[[APIを使って音楽を聴くきっかけを作ろう>https://alis.to/...
-[[サントリー|ほろよい>https://www.suntory.co.jp/rtd/hor...
~
~
**2023.04.14
***作業メモ
-赤字部分のコメントアウト
-情報収集
-Spotify APIの実行お試し
~
***研究テーマ案
-Web
--[[I's髪工房のサイト改修>木村天美/情報デザイン研究II]]
--[[FiND MUSiCの改良>木村天美/情報デザイン演習IIA]]
-グラフィックデザイン
--投票済証明書のデザイン
~
~
~
#settableborder(none)
終了行:
*FiND MUSiC
ジャケ写の色から新たな音楽に出会うWebアプリ
#image(app.jpg)
-''Ami Kimura''
-'''Keywords:music, artwork, color'''
-https://findmusic.ami-kimura.me
~
**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
ジャケット写真の色から新たな音楽に出会うきっかけを提供す...
※ジャケット写真とは・・CDやDVDなどのジャケットとして外装...
※Webアプリとは・・動的に動き、ユーザーがリアルタイムで操...
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
''__背景__''
近年、音楽の聴き方が急速にデジタル音源に変化し、音楽スト...
''__目的__''
背景に基づき、本研究では、曲を聴く前段階で受け取る視覚情...
//根拠として、東京藝術大学のアダム・ストレンジさんの「デ...
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-形式:Webアプリ
--URL:https://findmusic.ami-kimura.me
-サイズ:レスポンシブ(スマートフォン幅メイン)
-ドメイン:Namecheap
-サーバー:Render
-曲数:257曲
--内訳:Black :23曲 Gray:35曲 Brown:8曲 White:28曲
Beige:28 曲 Pink:16曲 Red:15曲 Orange:15曲 Yellow...
Purple:7曲 Blue:47曲 Green:18曲
~
#iframe(https://findmusic.ami-kimura.me,70%,160%)
~
***アンケート調査
2023年5月12日から5月26日にかけてGoogleフォームにて「音楽...
#image(q1.jpg, 80%)
~
卒業研究で制作する内容のサービスがあれば使いたいか聞いた...
#image(q2.jpg, 80%)
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
Web アプリ上にアクセス環境を構築することで、調査で明らか...
~
***デザインガイド
(1)ロゴマーク
ロゴマークはジャケット画像の色から音楽を探す様子を#FD3C32...
#image(findmusic_logo.jpg)
(2)カラー
アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9...
#image(font-color2.jpg)
(3)フォント
スイスのデザイナー ローレンス・ブルナー氏によってデザイン...
#image(circular-font.jpg)
~
***サイトマップ
#image(findmusic_sitemap.jpg)
~
***FiND MUSiCの使い方
画面下のメニューからサーチ画面に移動すると12色のボタンが...
また、ミュージックプレイヤーの右側にあるミートボールメニ...
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アプリ上での環境構築により、ユーザーはネット環境と閲覧...
~
~
//***現在の進行状況
//-実機(iPhone12 Pro)で確認しながらサーチ画面をブラッシ...
//--曲数を増やした
//--色ボタンとジャケット写真のサイズを大きくした
//--ジャケット写真をクリックした際に画面最下部に表示され...
//--ジャケット写真の表示を縦スクロールから横スクロールに...
//-2023.10.26現在での追加した曲数は計:258曲
//--前期に計画していた200曲はクリアしている状態
//***今後について
//-ジャケット写真をクリックした時に画面最下部に表示される...
//-Apple MusicやSpotify、YouTube Music、Amazonなどのリン...
//-ホーム画面やシェア機能は本当に必要か検証する
//-ライブラリ画面は作れないので作らない
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
-[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-t...
-[[2022年 定額制音楽配信サービス利用動向に関する調査>http...
-[[デジタル楽曲配信におけるジャケット画像の関係 : モバイ...
-[[CD ジャケットにおける曲調の色聴共感覚に関する研究>http...
-[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390...
-[[CDブックレット・デザイン考ー視覚的表現のーモデルとして...
-[[ジャケットワークを用いた意外性のある情報推薦システムの...
-[[音楽 CD の文化は生き残ることができるのか>https://lab.k...
-[[ジャケットを活かした音楽発見サポートシステム「LOOK」デ...
-[[ネットワーク社会における音楽産業のマーケティング戦略特...
-[[2022年度「音楽メディアユーザー実態調査」報告書公表>htt...
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
-[[Predominantly>https://predominant.ly]]
-[[NewJeans>https://newjeans.kr/]]
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-[[Expressアプリを無料のホスティングサービスRenderにデプ...
-[[MediaElement.jsでメディアプレイヤーのUIをサクッとつく...
-[[grid-template-areasを使いこなす>https://qiita.com/kohe...
-[[iPhoneアプリの初回起動時に表示したい「おもてなし」ライ...
~
''ドメイン''
-[[カスタムドメイン用にNamecheap DNSの構成する方法>https:...
-[[Render上でカスタムドメインを設定する方法>https://rende...
-[[Virtual Event Kit | GitHub Education>https://education...
-[[Namecheapのドメインにサブドメインを追加する方法>https:...
~
''UIデザイン''
-[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp...
-[[Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎...
~
''画面構成''
-[[スマートフォンのレイアウトをそのままPCに活かしたデザイ...
--[[GREEN WISHES International Mountain Day 2022 | BOTANI...
--[[泡おもい | 株式会社宇宙環境保全センター>https://uccen...
-[[アプリのウォークスルー画面を考えてみる。>https://mixlt...
~
~
**プロジェクト管理
***スケジュール
//&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度失敗した常時色ごとのジャケット写真が見られるHom...
-チュートリアルを常時確認できるようFAQ画面に設置
-Search画面の色ボタンを絵の具の形に変更、ボタンのスペース...
-メインビジュアル変更
#image(mainvisual5.jpg, 30%)
~
~
**2023.12.08
***作業メモ
-プレイリストの曲がアプリ内で聴けるか再調整
-ロゴ刷新
-ジャケット写真を角丸にした
-ローディング画面追加
-フッターの文字サイズを小さくした
~
~
**2023.12.01
***最終審査コメント
-Searchの文字列の横のロゴの中にある文字(FiND MUSiC)がほ...
-視線の動きは左が最初なのでSearchとロゴの位置を逆にした方...
-フッターの文字が大きい
-チュートリアルがあるのは親切だが、ユーザーの操作と吹き出...
-アプリを開いた最初にロード画面があるとよい(長いと鬱陶し...
-色ボタンのスペースの作り方を調整するとよい
-色ボタンは有彩色が上の方が見栄えが良い
-色ボタンは絵の具が並んでいるみたいなパレットにするといい...
-デフォルトでそれぞれの色ごとにジャケ写が見える状態にする...
-ロゴやアプリ画面から色々なカラーで楽しめる印象が感じられ...
-色ボタンは角丸だが、ボタンを押した後に表示されるジャケッ...
~
~
**2023.11.24
***作業メモ
-前期に作成した作品概要の書き換え、添削4回、フォルダ提出
-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...
-[[Namecheapのドメインにサブドメインを追加する方法>https:...
-[[カスタムドメイン用にNamecheap DNSの構成する方法>https:...
-[[Render上でカスタムドメインを設定する方法>https://rende...
~
~
**2023.11.10
***作業メモ
-ホーム画面制作を試みたができなかった
-アプリ導入画面のワイヤーフレームを作成した
~
~
**2023.10.27
***作業メモ
-中間発表をした・聞いた
~
***後期中間審査のコメント
-SpotifyAPIを使用してジャケット写真や曲名、アーティスト名...
-Pythonを使用し、ジャケット写真の色を判定して、アプリに反...
-ホーム画面やシェア機能が必要か判断する方法は?ーアンケー...
-初めてアプリを起動した人にアプリの使い方や特徴を知っても...
-背景や目的の部分に「なぜ色を使うのか」「色を使うことでど...
-アプリを触りたくなるような工夫をする
-前半で背景や目的、コンセプトといった説明で時間を使い切っ...
~
***参考文献
-[[iPhoneアプリの初回起動時に表示したい「おもてなし」ライ...
-[[アプリのウォークスルー画面を考えてみる。>https://mixlt...
~
~
**2023.10.20
***作業メモ
-中間報告を聴いた
-ジャケット写真をクリックした時に画面最下部に表示されるオ...
-Renderにデプロイした
URL:https://spotifyapi1020.onrender.com
-メインビジュアルのアップデート
#image(mainvisual4.jpg, 50%)
~
***参考文献
-[[grid-template-areasを使いこなす>https://qiita.com/kohe...
~
~
**2023.10.13
***作業メモ
-ジャケット写真の表示を縦スクロールから横スクロールに変更
-ジャケット写真の表示サイズを大きくした
-Renderにデプロイした
URL:https://spotifyapi1013.onrender.com
-中間発表の準備
-メインビジュアルのアップデート
#image(mainvisual3.jpg, 50%)
~
***現在の進行状況
-実機(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曲
~
***次回までにやること
-ジャケット写真をクリックした時に画面最下部に表示されるオ...
~
***参考文献
-[[Spotifyのプロダクト戦略をUIの変化から読み解く | 鈴木慎...
~
~
**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/sp...
~
~
**2023.09.22
***作業メモ
-試聴音源のない曲をプレイリストから削除した
-PC画面でスマホの画面を埋め込んだ構成に変更した
-ジャケット写真をクリックした時にオーディオプレイヤーが画...
-Render にデプロイした
URL:https://spotifyapi0922.onrender.com
~
***参考サイト
-[[MediaElement.jsでメディアプレイヤーのUIをサクッとつく...
-[[スマートフォンのレイアウトをそのままPCに活かしたデザイ...
--[[GREEN WISHES International Mountain Day 2022 | BOTANI...
--[[泡おもい | 株式会社宇宙環境保全センター>https://uccen...
~
~
**2023.09.15
***作業メモ
-12個のプレイリストを公開設定にした
#iframe(https://open.spotify.com/embed/playlist/4r26m9rA5...
#iframe(https://open.spotify.com/embed/playlist/6SWbJWn7c...
#iframe(https://open.spotify.com/embed/playlist/37SENme4K...
#iframe(https://open.spotify.com/embed/playlist/272riAbrd...
#iframe(https://open.spotify.com/embed/playlist/6cDz1D6PH...
#iframe(https://open.spotify.com/embed/playlist/5eMS1zl2C...
#iframe(https://open.spotify.com/embed/playlist/4S7I1WC43...
#iframe(https://open.spotify.com/embed/playlist/0qKenVXQ4...
#iframe(https://open.spotify.com/embed/playlist/1vsZ1aSTm...
#iframe(https://open.spotify.com/embed/playlist/3pcVRI1Vt...
#iframe(https://open.spotify.com/embed/playlist/19Pw7E98C...
#iframe(https://open.spotify.com/embed/playlist/6cd3MMLEA...
~
-ボタンの色と連動したジャケット写真が表示可能になり、音源...
-Renderにデプロイした
URL:https://spotifyapi0921.onrender.com
~
~
**2023.07.21
***作業メモ
-学科サイト整理
-サイトマップ掲載
#image(sitemap.jpg, 50%)
-概要集修正、再提出
--図4、5、6、7を修正
~
~
**2023.07.14
***作業メモ
-学科サイト整理
-概要集修正
--図1、図2のグラフの色変更
|49|2|49|c
|#image(q1.jpg)| |#image(q2.jpg)|
~
~
**2023.07.07
***作業メモ
-HTML、CSSを使用して画面設計を行い、Node.js、Vue.js、Spot...
使用してジャケット写真を反映させている。
※Node.js:サーバー側(SpotifyAPI)でユーザー側のJavaScriptを
実行するための環境
※Vue.js:JavaScriptフレームワークの一つ、今回はジャケット...
整列させるのに使用している
~
-前期最終審査
''__コメント__''
-サーバー構築をして負荷をためす
-アンケート結果を引用してWebサイトにする理由が論理が通っ...
-第三者に使用してもらうことで分かることもある
-余白が多く、白背景でスッキリしててよいが、スマホは画面が...
-他音楽ストリーミングサービスでのジャケ写は、スマホの画面...
-Amazonのリンクに飛んでその曲を買えるような動線にするとな...
-アンケート結果の全てを回答していただいた方に公開する
~
-Renderにデプロイした
※Render・・・無料ホスティングサービス
※デプロイ・・・構築したプログラムをユーザーがアクセスでき...
URL:https://spotifyapi0708.onrender.com
~
~
**2023.06.30
***作業メモ
-概要集修正
-学科サイト整理
-審査準備
~
~
**2023.06.23
***作業メモ
-概要集作成
-プレイリスト追加
~
***参考サイト
-[[Spotifyの歌詞カードっぽく画像に応じたいい感じの背景色...
-[[Designspiration>https://www.designspiration.com/]]
~
~
**2023.06.16
***作業メモ
-概要集作成
-プレイリスト作成
~
~
**2023.06.09
***作業メモ
-中間発表を聞く
-同じ曲しか流れない問題と曲の再生を止められない問題が解決...
#youtube(uym9sQdwRCc,50%)
~
~
**2023.06.02
***作業メモ
-中間発表を聞く
***参考サイト
-[[Chooning | Spotifyで聴いた音楽の感想や思い出を投稿でき...
~
~
**2023.05.26
***作業メモ
-中間発表
***試作
-中間発表時点での問題
--同じ曲しか流れない
--曲が止められない
~
#youtube(irHpKeXcXtM,50%)
-色のパネルをクリックしてジャケット写真と試聴音源を表示さ...
-同じ曲しか流れない、曲が止められない問題を解決しなければ...
~
~
***中間のまとめ1
中間発表時にあげた問題「同じ曲しか流れない」「曲の再生を...
~
***中間のまとめ2
Spotify APIを使用してジャケット画像や曲の試聴音源を取れる...
~
~
**2023.05.19
***作業メモ
-アンケート回収、まとめ
-中間発表準備
***Spotify APIお試し進行状況
#youtube(irHpKeXcXtM,50%)
URL:https://spotifyapi0525.onrender.com
***先行事例
-https://predominant.ly
***参考文献
-[[音楽サブスクサービス比較>https://mag.digle.tokyo/how-t...
-[[2022年 定額制音楽配信サービス利用動向に関する調査>http...
-[[i3DESIGN note | UIUX Tips>https://note.com/i3design_jp...
~
~
**2023.05.12
***作業メモ
-アンケート作成
-アンケート掲載箇所
--Iwata Lab.
--Instagram(個人アカウント)
~
~
**2023.04.28
***作業メモ
-メインタイトルとサブタイトル更新
--メインタイトル:FiND MUSiC
--サブタイトル:ジャケ写の色から出会う音楽サイト
-メインビジュアル掲載
#image(findmusic_mainvisual.jpg,50%)
-Spotify APIの実行お試し
#youtube(n_VLlBvwpM0,50%)
~
***参考文献収集
-[[デジタル楽曲配信におけるジャケット画像の関係 : モバイ...
-[[大ヒットアルバムの作り方 ―CD ジャケット編―>https://koz...
-[[CD ジャケットにおける曲調の色聴共感覚に関する研究>http...
-[[3COINS | 新たなマーケティング手法!ジャケ買いを現代版...
-[[CDジャケットの感性価値>https://cir.nii.ac.jp/crid/1390...
-[[CDブックレット・デザイン考ー視覚的表現のーモデルとして...
-[[ジャケットワークを用いた意外性のある情報推薦システムの...
-[[音楽 CD の文化は生き残ることができるのか>https://lab.k...
-[[ジャケットを活かした音楽発見サポートシステム「LOOK」デ...
-[[ネットワーク社会における音楽産業のマーケティング戦略特...
-[[「CDジャケットを飾れる」ワイヤレスCDプレーヤー『Instan...
-[[CDが苦戦しているのに、なぜ曲を取り込む「ラクレコ」は売...
-[[THE RECORD 2023年3・4月号>https://www.riaj.or.jp/riaj/...
-[[2022年度「音楽メディアユーザー実態調査」報告書公表>htt...
~
~
**2023.04.21
***作業メモ
-Spotify APIの実行お試し
#youtube(RBKDX-rGnyk ,50%)
~
***参考サイト
-[[APIを使って音楽を聴くきっかけを作ろう>https://alis.to/...
-[[サントリー|ほろよい>https://www.suntory.co.jp/rtd/hor...
~
~
**2023.04.14
***作業メモ
-赤字部分のコメントアウト
-情報収集
-Spotify APIの実行お試し
~
***研究テーマ案
-Web
--[[I's髪工房のサイト改修>木村天美/情報デザイン研究II]]
--[[FiND MUSiCの改良>木村天美/情報デザイン演習IIA]]
-グラフィックデザイン
--投票済証明書のデザイン
~
~
~
#settableborder(none)
ページ名: