Meet YOUR Music
今の感情に寄り添った楽曲に出会える音楽サイト
概要
これは何？
サイトを見にきた人が、今の自分の感情を選び、歌詞から自分の聞きたい楽曲に巡り合うことができるサイト
背景と目的
スマホで気軽に音楽を聴けるようになり、CDを買う機会が減ったことで、
音楽を聴く私たちは、歌詞やその時の感情で楽曲を選んでいると考えた。
また、好きなアーティストや曲調以外の楽曲に出会う機会も減っている。
このことから、曲を聴く選択肢となるジャケット写真や、アーティスト情報を載せずに、今の感情に合った歌詞から楽曲に出会うことができるサイトの運用を考える。
コンセプト
感情ごとに分類された楽曲の中から、ジャケット写真やアーティストの情報を入れずに、歌詞から今の自分に寄り添った楽曲を聴くことができる。
成果物の仕様
制作ツール
ハードウエア
ソフトウエア
- Illustrator
- Figma
- Vidual Stadio Code
- Spotify
プロジェクトの期間
2024.04.09 - 2024.07.09
まとめ
・サイトを制作していく中で、さまざまな感情を４つに分類するという形で、
感情の範囲を狭めることなく、感情に合った楽曲を選べるサイトを制作することができた。
・歌詞から楽曲を選ぶという流れを実現させるため、サイトに載せる全20曲のSpotifyを1つずつモーダル表示させることが難しかった。
・歌詞の一部を載せるのは、権利的に大丈夫なのかという部分を事前に調べておくべきだった。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
スケジュール表
ToDo
スケジュール表作成サイトマップ作成ワイヤーフレーム作成メインビジュアル作成楽曲決め- サイト構築
進捗記録
2024.07.02
最終発表
- 講評
- 井上先生
キャラクターの表示の仕方
サブメニューから選ぶ形でもいいのでは？
- 永嶋先生
ボタンの表示やキャラクターの表示をきれいに並べる
- 岩田先生
歌詞の一部をサイトに載せることは権利的に大丈夫なのか
2024.06.25
作業
PLAYLIST黒で統一マウスオーバー
→最終的にはキャラに動きをつけたい
2024.06.18
作業
- サイト構築
キャラクターを押したら該当ページに行くようにするボタン横並び
2024.06.11
作業
- サイト構築
キャラクターを載せる- キャラクターを押したら該当ページに行くようにする
歌詞を載せる歌詞それぞれにSpotifyのモーダル表示PLAYLISTのリンクをサイトに載せる
- モーダル表示
- 歌詞を押してSpotifyをモーダル表示させる方法
リモーダルの設定
リンク①
リンク②
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
作業
2024.05.07
先行事例の調査
作業
- 喜怒哀楽の分け方→感情で分ける
→感情のキーワード
喜…盛り上がる、嬉しい
怒…イライラ、冷静になりたい
哀…悲しい、泣きたい、支えてほしい
楽…チル、穏やか、ゆったり
- ワイヤーフレーム作成（figma）
- ワイヤーフレーム参考資料
Pinterest
Webデザイン演習
2024.04.30
先行事例の調査
- THE VIBES
VIP ROOMページ
アルバム曲の一覧があり、クリックすると楽曲を聴くことができる
作業
サイトマップ作成- ワイヤーフレーム作成（figma）
先生からのコメント
- 楽曲の表示方法
モーダルでSpotifyを表示させると、何回もページを飛ばなくて済む。
- 喜怒哀楽の分け方
対象はどこ？
喜怒哀楽というテーマで楽曲を分けたサイトなのか、サイトに見にきた人の感情で楽曲を分けたサイトなのか
例えば…怒った時に怒った曲を聴く⁇
怒っているから気持ちを落ち着かせたい→怒というページに気持ちを落ち着かせる曲が入っている→それは怒というページか？
⇨整理する。
感情ではなく言葉にフォーカスするか？
2024.04.23
テーマ変更 ★
先行事例の調査
準備
検討内容
- Webサイトの作成は本当に目的に合っているのか？
- 九州産業大学図書館
九産大図書館HP
X (旧Twitter)
→月毎の開館時間や展示内容も記載されているが、どちらも認知率が低い。
- 先輩の事例
→サイト作成から、SNS運用に切り替えている。
→図書館が持っていないSNS（Instagram）の運用を行うか？
- 結論
展示に来てもらうには、今ある図書館のサイトやSNSの運用の再構築を検討しなけれならず、自分から別の媒体で制作することにメリットを見出せなかったためテーマを変更する。
2024.04.16
調査
研究の概要
- 学生向けwebサイト（展示のみ）を作成
→webサイトの情宣は要検討。現在あるHPからリンクを飛ばしてもらう？
- 実用化を考えると、webサイトの運用の仕方、広報等考えることが膨大になる。
→今回は学生が作る学生向けのサイトという形で進める。
→学生は情報を何で見るのか、図書館に行くか、展示を知っているか等のアンケートを取る。
2024.04.09
研究テーマ仮確定
- 図書館の展示を知ってもらえるサイトを作る。
- 絵本展に向けて、学生（アルバイター）視点でのサイトを構築
- 絵本展に合わせて、自作の絵本を作成（時間が許せば）
- 図書館にアポ取り→事務部長から許可いただいた。
調査
- ZINEとは？
- 好きなものを自由にまとめた冊子のこと→研究か？趣味で作ると良さそう
- ビブリオキッズ
- 6月から図書館で展示あり（絵本）
- 展示の存在を知らない学生が多数。もっと知って欲しい。
テーマ案
- ZINE作成
- 情報デザイン演習ⅢAのブラッシュアップ（Meet YOUR Music）
- 感情や色などでページ分け、作るならGithubで挑戦
- 九産大図書館の展示について知ってもらうサイト ★
- ６月からビブリオと共同で絵本展あり、イベント的なものしてもOK？
