#author("2024-06-18T13:51:01+09:00","default:member","member")
*Meet YOUR Music
今の感情に寄り添った楽曲に出会える音楽サイト
#image(きどあいらく_サイトサイズ.jpg)
//メインビジュアル、あるいは
//プロジェクトの最新の状態を視覚的に掲載
-''宮路 咲希''
-'''Keywords：website, music,word, emotion'''
-[[ワイヤーフレーム完成（figma）>https://www.figma.com/design/OlTstIAGz4KxPs8nGVdgSz/Figma%E6%95%99%E6%9D%90%2FLP%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-(Community)?node-id=0%3A1&t=q4UY7PNwqOvLxoeY-1]]
-現時点でのサイト
https://skmyj.github.io/MeetYourMusic/
//-GitHubマイページ
//https://github.com/skmyj/MeetYourMusic
//-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。
//#setbgcolor(#dddcd6)
~
~
**概要
***これは何？
サイトを見にきた人が、今の自分の感情を選び、歌詞から自分の聞きたい楽曲に巡り合うことができるサイト
//&color(red){これは何か・・を簡潔に};
~
***背景と目的
スマホで気軽に音楽を聴けるようになり、CDを買う機会が減ってしまった。
レコードやCDなど、音楽をモノとしても楽しんでいた時代から、聴きたい時にクリックすれば永遠に音楽を聴くことができる時代に変わった。
このことから、今の自分の感情に刺さった歌詞を選び、楽曲を聴くことができるサイトの運用を考える。
//&color(red){プロジェクトの背景と目的};
~
***コンセプト
感情を喜怒哀楽に分け、その感情で分類された歌詞の中から、今の自分に寄り添った歌詞をクリックし楽曲を聴くことができる。
//&color(red){基本的な考え方、枠組み、視点など};
~
***成果物の仕様
-webサイト
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
~
//***メンバー
//-宮路咲希
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
~
***制作ツール
ハードウエア
-MacBook Air
ソフトウエア
-Illustrator
-Figma
-Vidual Stadio Code
-Spotify
//&color(red){使用するツール｜ハードウエア・ソフトウエア};
~
***プロジェクトの期間
2024.04.09 - 2024.07.09
//&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX };
~
***まとめ
最終的にはサイトを完成させる。
中間発表までは、サイトに載せる楽曲の選定と、サイトマップ、ワイヤーフレームの作成を終わらせた。
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~
**調査
***現状調査
-[[音楽業界の変化についての調査>https://prtimes.jp/main/html/rd/p/000000037.000044989.html]]
-[[音楽のヒット法則の変化>https://tokion.jp/2021/04/22/yuki-taniguchi-from-hakuhodo/]]
-[[心と体を癒す「音楽」の力>https://kenko.sawai.co.jp/theme/202011.html]]
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~
***先行事例
-[[木村天美 卒業研究>木村天美/卒業研究]]
-[[THE VIBES>https://www.sonymusic.co.jp/Music/Info/SixTONES/THEVIBES/]]
-[[ことば社会年表>https://www.hakuhodo.co.jp/news/newsrelease/21509/]]
-[[Human X（ヒューマンクロス）>https://prtimes.jp/main/html/rd/p/000000575.000008062.html]]
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
~
***技法・技術情報
-figma
-モーダル
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
~
~
**プロジェクト管理
***スケジュール
[[スケジュール表>https://docs.google.com/spreadsheets/d/1BztpuWBEKGUTtO4u8BIEt7nXQY0sveiCwKv3aN5bMQM/edit?usp=sharing]]
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~
***ToDo
-スケジュール表作成
-%%サイトマップ作成%%
-%%ワイヤーフレーム作成%%
-%%メインビジュアル作成%%
-%%楽曲決め%%
-サイト構築
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2024.06.18
***作業
-サイト構築
--キャラクターを押したら該当ページに行くようにする
--ボタン横並び
--サイト制作者のページ作成
~
~
**2024.06.11
***作業
-サイト構築
--%%キャラクターを載せる%%
--キャラクターを押したら該当ページに行くようにする
--%%歌詞を載せる%%
--%%歌詞それぞれにSpotifyのモーダル表示%%
--%%PLAYLISTのリンクをサイトに載せる%%
~
-モーダル表示
--歌詞を押してSpotifyをモーダル表示させる方法
リモーダルの設定
[[リンク①>https://weblasts.com/javascript/remodal-basic]]
[[リンク②>https://125naroom.com/web/3202]]
~
~
**2024.06.04
***作業
-サイト構築
-Spotify
PLAYLIST作成
-楽曲決め
曲を50曲ほど検索→各5曲ずつを選んでいく。（前回の続き）
サイトに載せる歌詞選び（各曲の下に随時追加）
--喜
ダンスホール/Mrs. Green Apple
『あなたが主役のダンスホール』
気分上々↑↑/mihimaru GT
『シャレてるビートに乗って 感じる体揺らそうよ』
新宝島/サカナクション
『次の目的地を 目的地を描くんだ』
Sugar/Maroon 5
『I need your loving, loving, I need it now』
君の愛が必要なんだ 今すぐに
Dynamite/BTS
『Cause ah, ah, I’m in the stars tonight
So watch me bring the fire and set the night』
今夜僕は星の中にいるから だから僕の火花で夜を照らすのを見ていて
--楽
夏夜のマジック/Indigo la End
『今なら君のことがわかるような気がする』
不思議/星野源
『孤独の側にある 勇気に足るもの』
東京フラッシュ/Vaundy
『君の目が覚めたら
何処へ行こう 何処へ行こうかわらないよ』
fake face dance music/音田雅則
『あなたにこの心をハイジャックされた』
Imagine if/Gnash
『Imagine if I knew how to turn back time』
僕が時間を戻せたらなって思うよ
~
~
**2024.05.28
***作業
-楽曲決め
曲を50曲ほど検索→各5曲ずつを選んでいく。
流れも見ていく。
--怒
うっせぇわ/Ado
『正しさとは 愚かさとは』
Cry Baby/Official髭男disc
『土砂降りの夜に 誓ったリベンジ』
Red:birthmark/アイナ・ジ・エンド
『ねえ 許してよ このナイフは美しい君の未来なのに』
偽物勇者 703号室
『偽物勇者は僕だった』
帰ろう/藤井風
『ああ 全て忘れて帰ろう』
--哀
Ocean eyes/Billy Eilish
『No fair You really know how to make cry』
フェアじゃない 私の泣かせ方をよくわかっている
More than words/羊文学
『彼が言った言葉 何度も思い返して
上手く返事できたか グルグルグルする』
ヒッチコック/ヨルシカ
『先生、人生相談です。この先どうなら楽ですか。』
Nobody/OneRepublic
『Nobody got you the way I do』
僕ほど君を理解している人なんていない
宝者/アイナジエンド
『あなたいつも そばにいてくれたね』
~
-キャラクターの存在化
喜怒哀楽→4つの感情に分ける点は変えない
~
~
**2024.05.21
***中間発表
-講評
--井上先生
感情から楽曲を選ぶことは最近よくすることなのか？
--永嶋先生
歌詞の一部を載せる
→引用元の記載等をサイトに組み込む必要あり
PLAYLISTの配置は2•2でおくか4つ並べるかにすると綺麗
--岩田先生
感情に寄り添う
→怒りや悲しみを想像。喜怒哀楽に分けなくても良いのでは
感情に寄り添う≠マイナスな感情
→そのことが伝わるコンセプトの設定。サイト上に記載する内容をもっと詳しく。
喜怒哀楽のキャラクターを意味づける
→そのキャラクターと音楽を選ぶような流れ
~
-今後の流れ
--次の対面授業（6月11日/第10回授業）まで
サイト上に載せるキャラクターの存在化。
楽曲選び
サイト構築（枠組み、動き）
~
~
**2024.05.14
***作業
-中間報告 発表準備
--サイトマップ完成
#image(情報デザイン研究Ⅰサイトマップ.jpg)
--[[ワイヤーフレーム完成（figma）>https://www.figma.com/design/OlTstIAGz4KxPs8nGVdgSz/Figma%E6%95%99%E6%9D%90%2FLP%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-(Community)?node-id=0%3A1&t=q4UY7PNwqOvLxoeY-1]]
//--[[サイト作成（枠組み）>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as028_st_kyusan-u_ac_jp/EjmeMZ17iYxMhRaTHyUjFLYBeHsnmjbXFb55nFZYK_ANbw?e=kwgVhK]]
--zoom接続確認
~
~
**2024.05.07
***先行事例の調査
-[[ことば社会年表>https://www.hakuhodo.co.jp/news/newsrelease/21509/]]
言葉に注目したWebサイト
-[[Human X（ヒューマンクロス）>https://prtimes.jp/main/html/rd/p/000000575.000008062.html]]
クロスモーダル知覚 おいしさと聴覚
~
***作業
-喜怒哀楽の分け方→感情で分ける
→感情のキーワード
喜…盛り上がる、嬉しい
怒…イライラ、冷静になりたい
哀…悲しい、泣きたい、支えてほしい
楽…チル、穏やか、ゆったり
-ワイヤーフレーム作成（figma）
-ワイヤーフレーム参考資料
[[Pinterest>https://www.pinterest.jp/miyamiya384saki/lpデザイン集/]]
[[Webデザイン演習>宮路咲希/Webデザイン演習]]
~
~
**2024.04.30
***先行事例の調査
-[[THE VIBES>https://www.sonymusic.co.jp/Music/Info/SixTONES/THEVIBES/]]
VIP ROOMページ
アルバム曲の一覧があり、クリックすると楽曲を聴くことができる
~
***作業
-%%サイトマップ作成%%
-ワイヤーフレーム作成（figma）
***先生からのコメント
-楽曲の表示方法
モーダルでSpotifyを表示させると、何回もページを飛ばなくて済む。
-喜怒哀楽の分け方
対象はどこ？
喜怒哀楽というテーマで楽曲を分けたサイトなのか、サイトに見にきた人の感情で楽曲を分けたサイトなのか
例えば…怒った時に怒った曲を聴く⁇
怒っているから気持ちを落ち着かせたい→怒というページに気持ちを落ち着かせる曲が入っている→それは怒というページか？
⇨整理する。
感情ではなく言葉にフォーカスするか？
~
~
**2024.04.23
***テーマ変更 ★
-[[情報デザイン演習ⅢAのブラッシュアップ（Meet YOUR Music）>宮路咲希/情報デザイン演習IIIA]]
--音楽の聴き方が変わっている。
--スマホから流し、イヤホンで聴く。
→今の気分や感情で曲を聴くことができるサイトの運用を考える。
~
***先行事例の調査
-[[木村天美 卒業研究>木村天美/卒業研究]]
ジャケット写真の色から新たな音楽に出会うWebアプリ
-[[音楽業界の変化についての調査>https://prtimes.jp/main/html/rd/p/000000037.000044989.html]]
楽曲の入手方法が、CDを購入する→楽曲をダウンロードするに変化した。
-[[音楽のヒット法則の変化>https://tokion.jp/2021/04/22/yuki-taniguchi-from-hakuhodo/]]
楽曲の新旧という概念が薄まってきた。
プレイリストマーケティング→プレイリストを使って新たなリスナーを獲得。
-[[心と体を癒す「音楽」の力>https://kenko.sawai.co.jp/theme/202011.html]]
音楽が心身に及ぼす影響
①直接的な影響 ②間接的な影響 ③人々をつなぐ社会的側面
~
***準備
-スケジュール表作成
[[スケジュール表>https://docs.google.com/spreadsheets/d/1BztpuWBEKGUTtO4u8BIEt7nXQY0sveiCwKv3aN5bMQM/edit?usp=sharing]]
~
***検討内容
-Webサイトの作成は本当に目的に合っているのか？
--九州産業大学図書館
[[九産大図書館HP>https://libwww2.kyusan-u.ac.jp/news/002579.html]]
[[X (旧Twitter)>https://twitter.com/kyusan_lib]]
→月毎の開館時間や展示内容も記載されているが、どちらも認知率が低い。
--先輩の事例
→サイト作成から、SNS運用に切り替えている。
→図書館が持っていないSNS（Instagram）の運用を行うか？
-結論
展示に来てもらうには、今ある図書館のサイトやSNSの運用の再構築を検討しなけれならず、自分から別の媒体で制作することにメリットを見出せなかったためテーマを変更する。
~
~
**2024.04.16
***調査
-[[2017年度情報デザイン演習ⅡA 図書館共同プロジェクト>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=情報デザイン演習IIA%2F2017&word=図書館]]
--この時はポスターの作成。（現在も貼ってある）
--今はポスター等の紙媒体を見る機会が減った。
→webサイト構築 or SNSアカウント運用
-[[九産大図書館HP>https://libwww2.kyusan-u.ac.jp/news/002579.html]]
--現在ある図書館HPの認知率低い。
→HPに来てもらうように誘導するには？
~
***研究の概要
-学生向けwebサイト（展示のみ）を作成
→webサイトの情宣は要検討。現在あるHPからリンクを飛ばしてもらう？
--実用化を考えると、webサイトの運用の仕方、広報等考えることが膨大になる。
→今回は学生が作る学生向けのサイトという形で進める。
→学生は情報を何で見るのか、図書館に行くか、展示を知っているか等のアンケートを取る。
~
~
**2024.04.09
***研究テーマ仮確定
-図書館の展示を知ってもらえるサイトを作る。
--絵本展に向けて、学生（アルバイター）視点でのサイトを構築
--絵本展に合わせて、自作の絵本を作成（時間が許せば）
--図書館にアポ取り→事務部長から許可いただいた。
~
***調査
-[[ZINEとは？>https://media.thisisgallery.com/20211759]]
--好きなものを自由にまとめた冊子のこと→研究か？趣味で作ると良さそう
-[[ビブリオキッズ>http://bibliokids.jp]]
--6月から図書館で展示あり（絵本）
--展示の存在を知らない学生が多数。もっと知って欲しい。
~
***テーマ案
-ZINE作成
--絵本(自作もあり)、コラージュ
-情報デザイン演習ⅢAのブラッシュアップ（Meet YOUR Music）
--感情や色などでページ分け、作るならGithubで挑戦
-九産大図書館の展示について知ってもらうサイト ★
--６月からビブリオと共同で絵本展あり、イベント的なものしてもOK？
~
~
~
