Meet YOUR Music
今の感情に寄り添った楽曲に出会える音楽サイト
概要
これは何?
サイトを見にきた人が、今の自分の感情を選び、歌詞から自分の聞きたい楽曲に巡り合うことができるサイト
背景と目的
スマホで気軽に音楽を聴けるようになり、CDを買う機会が減ってしまった。
レコードやCDなど、音楽をモノとしても楽しんでいた時代から、聴きたい時にクリックすれば永遠に音楽を聴くことができる時代に変わった。
このことから、今の自分の感情に刺さった歌詞を選び、楽曲を聴くことができるサイトの運用を考える。
コンセプト
感情を喜怒哀楽に分け、その感情で分類された歌詞の中から、今の自分に寄り添った歌詞をクリックし楽曲を聴くことができる。
成果物の仕様
制作ツール
ハードウエア
ソフトウエア
- Illustrator
- Figma
- Vidual Stadio Code
- Spotify
プロジェクトの期間
2024.04.09 - 2024.07.09
まとめ
最終的にはサイトを完成させる。
中間発表までは、サイトに載せる楽曲の選定と、サイトマップ、ワイヤーフレームの作成を終わらせた。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
スケジュール表
ToDo
- スケジュール表作成
サイトマップ作成
ワイヤーフレーム作成
メインビジュアル作成
- 楽曲決め
- サイト構築
進捗記録
2024.05.28
作業
- 楽曲決め
曲を50曲ほど検索→各5曲ずつを選んでいく。
流れも見ていく。
- 喜
- 怒
VIP/Mrs. Green Apple
うっせぇわ/Ado
Red:birthmark/アイナ・ジ・エンド
帰ろう/藤井風
- 哀
Ocean eyes/Billy Eilish
More than words/羊文学
言って。/ヨルシカ
宝者/アイナジエンド
- 楽
- キャラクターの存在化
喜怒哀楽→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で挑戦
- 九産大図書館の展示について知ってもらうサイト ★
- 6月からビブリオと共同で絵本展あり、イベント的なものしてもOK?