Visual to Music
耳で聞いて、目で楽しめるWebサイト
概要
これは何？
- 段階的に変化を加え生成したビジュアルを使い、画像のみの情報から音楽生成AIモデルで音楽を生み出し、それらを、聞くことができるWebサイト
背景
- 近年デジタル化が進む中、人工知能（AI）の進化が目まぐるしく。AIは私たちの生活のあらゆる側面に深く浸透し、その影響はクリエイティブな領域においても顕著です。特に生成AIの進化は目覚ましく、テキスト、画像、映像、音楽など多岐にわたるコンテンツを創造する能力が進化し続けています。この、技術の進化をより楽しめる形で提供できれば、生成AIは創作の入門や新たなインスピレーションになると考えた。
目的
- 本研究は、生成したビジュアルのみの情報を音楽へ変換する。技術体験を提供することで、生成AIと創作の融合によって生まれる新たな可能性に触れ、技術の進化を感じてもらう。
コンセプト
- AIの可能性と新たなツールや創作のインスピレーションとして捉えてもらうWebサイトにする。
- AI等の技術に注目される展示
成果物の仕様
メンバー
制作ツール
- illustrator
- Gemini
- imageFX
- figma
- VisualStudioCode
プロジェクトの期間
まとめ
- 生成AIを使って創造活動の入門や創作の新たな刺激になる目的として、生成した音楽は、比較的画像に沿った音楽を生成した。（例：彩度が高いと、アップテンポや音が大きいなど）しかし、意図しない画像や音楽が生成がされることもある。
- Webサイトにおける今後の展望として、聴いた人の感想を共有できるシステムがあるとさらに目的に近づけると感じた。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ガントチャート
ToDo
ガントチャート
ワイヤーフレーム
進捗記録
2025.11.14
- 概要集更新
- Webサイトモックアップの追加
- キャプションの整列
- 文字の行詰め
- Webサイト
- セクションごとの空白の調整
- UIの最適化、（マウスホバー時の色の変更や枠をつける）
2025.10.31
2025.10.24
- Webサイト
- カテゴリーセクションのテキストに影を追加し、視認性を上げた
- 通常時のロゴの挿入
- タイポグラフィカテゴリー画像の挿入
2025.10.17
- 画像の生成（テクスチャカテゴリー、エフェクトカテゴリー）
2025.10.10
2025.10.03
- 現時点バックアップ
- 目的の刷新
- 音楽や創作のインスピレーション
- AI等の最新技術を認知してもらう
2025.09.26
2025.09.19
- Webサイト改善とプロジェクトページの細分化を減らし数を増やす
- カラー、テクスチャ、エフェクト、文字の有無
- AI-models削除(about等に備考として書く）
|
2025.07.18
- 反省点
- 全体の数を増やす
- 制作時の時間・日付の表示
- Webサイトの掲載方法の改善
- 研究方法の明確化
- 数値の変化を楽しめる提案
- ブラッシュアップ
2025.07.11
2025.07.04
2025.06.27
2025.06.20
- 概要作成(使用資料）
- 概要集
- 実験方法まとめ
- 例えば
- color
- compositon
- Texture
- Size
- Effect
- Typography
などビジュアルの内容要素に変化
2025.06.06
- figmaデザイン制作
- HTMLコーディング
- CSSコーディング
2025.05.30
2025.05.23
ワイヤーフレーム(Smartphone)
2025.05.16
ワイヤーフレームPC
2025.05.09
試作はこちら
例:3.image-to-music-v2使用例
2025.05.02
- 1. Mubert AI (Image to Musicモードあり)
- 内容：画像の内容やタグからBGMを生成
- 商標不可 個人利用可能
- 制限：無料アカウントでは一部機能制限。ログイン必須。
URL：https://mubert.com
- 2. Melobytes (Image to Song)
2025.04.25
- テーマ決定
- ビジュアルからAIで音楽を生成し聴き比べできるアートワーク
- Webサイトにまとめ掲載
使うかもしれない技術
2025.04.18
テーマの有力候補
- 声の波形を使ったデザイン
- 波形
- 声を録音 → 波形を生成 → グラフィック素材にする
- 聴覚は記憶に残りにくい→波形にして視覚化
- アプリで声を集める→波形ギャラリー
- 作業工程表
- 声を地図データのようなグラフィックに置き換える
- 波形の色や形状で感情を表現
2025.04.11
テーマ案
- 視力が低い人が認知できるデザインの研究
- 心拍数や瞬きなどの身体から得る情報からノイズを生む
- 年齢によって感じる時間の流れの感じ方
- ゲーム内で学内ハザードマップのリアル体験
- 柄、材質に着目した触覚と視覚を感じれるアートワーク
- 声の波形を使ったデザイン
調査
- 音声波形
- ゲーム×ハザードマップ
- メモ
- 自分の声を「山脈」にして地形を生成。あるいは、都市の騒音データを地図に反映
