梁井英翔/卒業研究

Visual to Music

耳で聞いて、目で楽しめるWebサイト

• 梁井 英翔
• Keywords：音楽制作, AI, image,
  https://speacelenger.github.io/G-sotuken/

概要

これは何？

• 段階的に変化を加え生成したビジュアルを使い、画像のみの情報から音楽生成AIモデルで音楽を生み出し、それらを、聞くことができるWebサイト

背景

• 近年デジタル化が進む中、人工知能（AI）の進化が目まぐるしく。AIは私たちの生活のあらゆる側面に深く浸透し、その影響はクリエイティブな領域においても顕著です。特に生成AIの進化は目覚ましく、テキスト、画像、映像、音楽など多岐にわたるコンテンツを創造する能力が進化し続けています。この、技術の進化をより楽しめる形で提供できれば、生成AIは創作の入門や新たなインスピレーションになると考えた。

目的

• 本研究は、生成したビジュアルのみの情報を音楽へ変換する。技術体験を提供することで、生成AIと創作の融合によって生まれる新たな可能性に触れ、技術の進化を感じてもらう。
  
  

コンセプト

• AIの可能性と新たなツールや創作のインスピレーションとして捉えてもらうWebサイトにする。
• AI等の技術に注目される展示
  
  

成果物の仕様

• Webサイト
  
  

メンバー

制作ツール

• illustrator
• Gemini
• imageFX
• figma
• VisualStudioCode
  
  

プロジェクトの期間

まとめ

• 生成AIを使って創造活動の入門や創作の新たな刺激になる目的として、生成した音楽は、比較的画像に沿った音楽を生成した。（例：彩度が高いと、アップテンポや音が大きいなど）しかし、意図しない画像や音楽が生成がされることもある。
• Webサイトにおける今後の展望として、聴いた人の感想を共有できるシステムがあるとさらに目的に近づけると感じた。
  
  
  
  

調査

現状調査

• SOZO美術館
  • 音楽×AIを推進しているアートワークプロジェクト　
• フコウエアラタ
  • 全編AIを使った映像作品
• パルコの広告制作
  • パルコをはじめとした大手企業の広告AI活用事例

先行事例

• Kórsafn
  • 気象情報をもとにAIで曲を制作
• Sihwa Park「YouTube Mirror」
  • リアルタイムで画像や音楽を生成するパフォーマンス

技法・技術情報

プロジェクト管理

スケジュール

• ガントチャート
  
  

ToDo

ガントチャート
ワイヤーフレーム

2025.11.14

• 概要集更新
  • Webサイトモックアップの追加
  • キャプションの整列
  • 文字の行詰め
• Webサイト
  • セクションごとの空白の調整
  • UIの最適化、（マウスホバー時の色の変更や枠をつける）

2025.10.31

• 10.31日時点バックアップ
• 更新箇所
  • 書くカテゴリーの画像更新
  • セクションごとの感覚の調整
  • ロゴの挿入

2025.10.24

• 画像の生成（タイポグラフィカテゴリー）
• typography

• Webサイト
  • カテゴリーセクションのテキストに影を追加し、視認性を上げた
  • 通常時のロゴの挿入
  • タイポグラフィカテゴリー画像の挿入

2025.10.17

• 画像の生成（テクスチャカテゴリー、エフェクトカテゴリー）
• texture
• effect

2025.10.10

• 概要集
  • 画像の刷新
  • 参考情報の更新
  • 段落の修正
    
    
    
    

2025.10.03

• 現時点バックアップ
• 目的の刷新
  • 音楽や創作のインスピレーション
  • AI等の最新技術を認知してもらう
    
    
    
    

2025.09.26

• 画像の生成（カラーカテゴリー）
• color
  
  
  
  
  

2025.09.19

• Webサイト改善とプロジェクトページの細分化を減らし数を増やす
  • カラー、テクスチャ、エフェクト、文字の有無
  • AI-models削除(about等に備考として書く）
    |
    
    
    
    

2025.07.18

• 反省点
  • 全体の数を増やす
  • 制作時の時間・日付の表示
  • Webサイトの掲載方法の改善
  • 研究方法の明確化
  • 数値の変化を楽しめる提案
• ブラッシュアップ
  • aboutテキストの改善

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

• figmaでデザイン修正
  • figma
• HTMLでコーディング
  • github掲載

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)
  • 内容：画像から音楽（またはボーカル付きの歌）を作る
  • 商標不可　個人利用可能
    URL：https://melobytes.com/

• 3.image-to-music-v2
  • 内容：画像イメージから音楽を制作可能
  • 商標不可　個人利用可能
    URL 　:　https://huggingface.co/spaces/fffiloni/image-to-music-v2

• 4.TopMedia
  • 内容：画像の特性に合わせて音楽スタイルを選択可能。
  • 商標利用可能
    URL；https://jp.topmediai.com/ai-music/generate-music-from-image/

2025.04.25

• テーマ決定
  • ビジュアルからAIで音楽を生成し聴き比べできるアートワーク
• Webサイトにまとめ掲載

使うかもしれない技術

• Firebase
• Daisy Chain Studio>https://www.daisychainstudio.net/

2025.04.18

テーマの有力候補

• 声の波形を使ったデザイン
• 波形
  • 声を録音 → 波形を生成 → グラフィック素材にする
  • 聴覚は記憶に残りにくい→波形にして視覚化
  • アプリで声を集める→波形ギャラリー
• 作業工程表
  • 声を地図データのようなグラフィックに置き換える
  • 波形の色や形状で感情を表現
    
    
    
    

2025.04.11

テーマ案

• 視力が低い人が認知できるデザインの研究
• 心拍数や瞬きなどの身体から得る情報からノイズを生む
• 年齢によって感じる時間の流れの感じ方
• ゲーム内で学内ハザードマップのリアル体験
• 柄、材質に着目した触覚と視覚を感じれるアートワーク
• 声の波形を使ったデザイン
  
  

調査

• 音声波形
  • WaveVisual
• ゲーム×ハザードマップ
  • フォートナイトクリエイティブ
• メモ
  • 自分の声を「山脈」にして地形を生成。あるいは、都市の騒音データを地図に反映