木村天美/卒業研究 をテンプレートにして作成

開始行:
*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：８曲　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 アプリ上にアクセス環境を構築することで、調査で明らか... ~ ***デザインガイド （１）ロゴマーク ロゴマークはジャケット画像の色から音楽を探す様子を#FD3C32... #image(findmusic_logo.jpg) （２）カラー アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9... #image(font-color2.jpg) （３）フォント スイスのデザイナー ローレンス・ブルナー氏によってデザイン... #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 ***作業メモ -前期に作成した作品概要の書き換え、添削４回、フォルダ提出 -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：８曲 -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%) -概要集修正、再提出 --図４、５、６、７を修正 ~ ~ **2023.07.14 ***作業メモ -学科サイト整理 -概要集修正 --図１、図２のグラフの色変更 |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：８曲　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 アプリ上にアクセス環境を構築することで、調査で明らか... ~ ***デザインガイド （１）ロゴマーク ロゴマークはジャケット画像の色から音楽を探す様子を#FD3C32... #image(findmusic_logo.jpg) （２）カラー アプリ内で使用する背景色は #FCFCFC、文字色は#686868、#9D9... #image(font-color2.jpg) （３）フォント スイスのデザイナー ローレンス・ブルナー氏によってデザイン... #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 ***作業メモ -前期に作成した作品概要の書き換え、添削４回、フォルダ提出 -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：８曲 -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%) -概要集修正、再提出 --図４、５、６、７を修正 ~ ~ **2023.07.14 ***作業メモ -学科サイト整理 -概要集修正 --図１、図２のグラフの色変更 |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)

ページ名: