Watch to music!
可視化によって音楽をさらに楽しめるWebサイト
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
プロジェクトの概要
これは何？
音楽を可視化し、情報量を増やすことでさらに音楽を楽しめるWebサイトの制作
背景と目的
人間はより多くの感覚器官で刺激を受けることで脳が活性化したり感性が育ったりとメリットが多いらしい。音楽という元々の情報に視覚情報を追加することで、より音楽を楽しんでもらうことを目的にこのプロジェクトを企画する。
参考事例
制作ツール
プロトタイプ: Figma, Adobe XD
成果物とその仕様
進捗記録
2025.04.21
【プロジェクテーマ変更しました！！】
プロトタイプ制作の方法
プロトタイプ制作の方法
- ワイヤーフレーム
- Figma により、ワイヤーフレームを作成。（未掲載）
- プロトタイプ（XD）
- Adobe XD により、プロトタイプを作成。
- リンク内、背景色がある箇所は動画を入れる。
- 曲は3曲制作→制作時間により1曲へ変更
以下、前回までの課題
解決すべき課題（ToDoリスト）
- 1. 各パートの形・色決め
- 2. 映像制作
- 3. サイト制作
制作上のアイデア（課題ごとに複数のアイデア）
- 1. 各パートの形・色決め
- メロディ（ボーカル）
主になる音。
色: 赤など主張が強い色？
形: 大きめ
- ギター
リードとバッキングの区別なしで作る？
色: 黄、緑（エレキ系）
形: 稲妻イメージ、とんがってる、角ばった形
- キーボード
色: ピンク、黄（橙）
形: 丸い、細い
- ドラム
色: 茶など暗い色、どっしりした色
形: 大きめ、重たい、ゆっくり
- ベース
色: くすんだ色、暗い色、目立たない色？
形: 土台→bg？一番大きい
プロジェクトのテーマ（変更）
- 音楽のイメージの可視化。0m
- モーショングラフィックスは音楽という元々の情報を映像でさらに可視化、表現している？音楽に合わせて動くのが心地よくて好き。
→映像（モーグラ）で可視化。
- ギター、ドラム、キーボードなど楽器ごとに色分け、形分けして作っても面白そう。ベースやドラムは最下層、メロディーは最上層。
2025.04.21
今回制作したプロトタイプ
プロトタイプ制作の方法
- 台割
- ロゴの試作
- Adobe Illustrator により、ロゴの試作を制作。
- 展示の映像に用いている図形・配色をつかったロゴ（右下）
2025.04.14
現状調査
解決すべき課題（ToDoリスト）
- 1. プロジェクトタイトルを考える
- 2. 成果物をどの媒体にするか&使用ソフト →PDF冊子（Illustrator）
- 3. 過程をどんなレイアウトで表現するか →時系列で繋げる
- 4. 内容決め
制作上のアイデア（課題ごとに複数のアイデア）
- 1. プロジェクトタイトルを考える
- 「inside me」展示テーマをそのまま採用する
- 「OutPut!」
- 「リバーシブル」
2. 成果物をどの媒体にするか&使用ソフト
- 冊子（Illustrator）
- 三つ折りパンフレット（Illustrator）
- Webサイト（Googleサイト）
- 映像（AfterEffects）
- PDF冊子（Illustrator）
- △ 立体物→飛び出すえほん面白そう
3. 過程をどんなレイアウトで表現するか
- 漫画風
- 雑誌風
- 時系列で繋げる（線でつなげる）
- 項目で分ける
- 4. 内容決め
- コンセプト、テーマが決まるまでの過程
- 概要を深めたことについて（深め方について？）
- 展示レイアウトを考えたこと
- 展示文章を考えたこと
- 音源制作（助っ人による→伝えたことなど）
- 映像制作
- 名刺制作
2025.04.07
プロジェクトのテーマ候補
演習テーマ「未だ情報になってないものを可視化する」
情報になっていない→（そのものに対する）感情や思考などと解釈。
興味あるものに対して思うことや考えることを可視化する！
- アートギャラリー展示に向けての思考・制作の可視化。5m
- 成果は展示本番後にまとめることになる。
- コンセプトを決めるまでの過程→決めたコンセプトを表現するために考えたこと→制作手順（企画）→実際進めていること（動画編集）｜ここまで進められる。
- 音楽のイメージの可視化。0m
- モーショングラフィックスは音楽という元々の情報を映像でさらに可視化、表現している？音楽に合わせて動くのが心地よくて好き。
→映像（モーグラ）で可視化。
- ギター、ドラム、キーボードなど楽器ごとに色分け、形分けして作っても面白そう。ベースやドラムは最下層、メロディーは最上層。
- △ 悩むということ、考えるということの可視化。0m
- 何についてとかの内容は関係なし。その行為自体の可視化。
無意識のうちに悩むこともあれば、それに意識がとらわれることもある。振り回される。そのものは大小カタチもさまざま。
- 固定の形がないから表現することはどの媒体でもしやすそう。でも煮詰める必要あり、時間が必要。
- △ 音楽の曲と歌詞の関係性を可視化。0m
- 〇〇な印象は曲によってきまる？それとも歌詞（感嘆とか）？を解決・可視化してみる。
明るい曲でも暗い歌詞、深い歌詞の曲ってある。逆もある。
- △ 〇〇な人ってなぜ〇〇と感じるのか（すごい、強いなど形容詞）0m
- 単に疑問。考えてみたい。
- 尊敬とかにつながる？人に対しての感情。「自分とは違う」から感じるものでもあると思う。
- 興味はあり、でも可視化は難しそう。
参考リンク
面白い！と思った先輩方のプロジェクト
