#author("2025-11-28T15:12:46+09:00;2025-11-21T15:30:09+09:00","default:member","member") #author("2025-11-28T15:13:09+09:00;2025-11-21T15:30:09+09:00","default:member","member") #setbgcolor(white) *Visual to Music 耳で聞いて、目で楽しめるWebサイト #image(visual.png) -''梁井 英翔'' -'''Keywords：音楽制作, AI, image, ''' https://speacelenger.github.io/G-sotuken/ //__[[概要集>https://drive.google.com/file/d/1EZIa3Zk-ZbJmEBLQMLNs_tW1QwIC9bxN/view?usp=sharing]] ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; -段階的に変化を加え生成したビジュアルを使い、画像のみの情報から音楽生成AIモデルで音楽を生み出し、それらを、聞くことができるWebサイト ~ ***背景 -近年デジタル化が進む中、人工知能（AI）の進化が目まぐるしく。AIは私たちの生活のあらゆる側面に深く浸透し、その影響はクリエイティブな領域においても顕著です。特に生成AIの進化は目覚ましく、テキスト、画像、映像、音楽など多岐にわたるコンテンツを創造する能力が進化し続けています。この、技術の進化をより楽しめる形で提供できれば、生成AIは創作の入門や新たなインスピレーションになると考えた。 ~ ***目的 -本研究は、生成したビジュアルのみの情報を音楽へ変換する。技術体験を提供することで、生成AIと創作の融合によって生まれる新たな可能性に触れ、技術の進化を感じてもらう。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -AIの可能性と新たなツールや創作のインスピレーションとして捉えてもらうWebサイトにする。 -AI等の技術に注目される展示 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト ~ ***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -illustrator -Gemini -imageFX -figma -VisualStudioCode ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜2025.04.11 - 2025.12.26}; ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; -生成AIを使って創造活動の入門や創作の新たな刺激になる目的として、生成した音楽は、比較的画像に沿った音楽を生成した。（例：彩度が高いと、アップテンポや音が大きいなど）しかし、意図しない画像や音楽が生成がされることもある。 -Webサイトにおける今後の展望として、聴いた人の感想を共有できるシステムがあるとさらに目的に近づけると感じた。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; __-[[SOZO美術館>https://kaiba.company/58556/?utm_source=chatgpt.com]]__ -__[[SOZO美術館>https://kaiba.company/58556/?utm_source=chatgpt.com]]__ --音楽×AIを推進しているアートワークプロジェクト -__[[フコウエアラタ>https://cgworld.jp/article/Fukoe-AI-MV.html?utm_source=chatgpt.com]]__ --全編AIを使った映像作品 -__[[パルコの広告制作>https://metaversesouken.com/ai/generative_ai/design/?utm_source=chatgpt.com]]__ --パルコをはじめとした大手企業の広告AI活用事例 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -__[[Kórsafn>https://hypebeast.com/jp/2020/1/bjork-microsoft-ai-powered-soundtrack-sister-city-hotel]]__ --気象情報をもとにAIで曲を制作 -__[[Sihwa Park「YouTube Mirror」>https://sihwapark.com/Selected_Works]]__ --リアルタイムで画像や音楽を生成するパフォーマンス ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; -__[[ガントチャート>https://docs.google.com/spreadsheets/d/11gQ7nVk6bRFcAo9VYV_1ANBcQNTCLqDw/edit?usp=sharing&ouid=112698087870753374399&rtpof=true&sd=true]]__ ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%ガントチャート%% %%ワイヤーフレーム%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; **2025.11.14 -概要集更新 --Webサイトモックアップの追加 --キャプションの整列 --文字の行詰め -Webサイト --セクションごとの空白の調整 --UIの最適化、（マウスホバー時の色の変更や枠をつける） ~ ~ **2025.10.31 -__[[10.31日時点バックアップ>https://drive.google.com/drive/folders/1rmU79eJXvBpk9S2OG4nDURjbwz7KZXhq?usp=sharing]]__ -更新箇所 --書くカテゴリーの画像更新 --セクションごとの感覚の調整 --ロゴの挿入 ~ ~ **2025.10.24 -画像の生成（タイポグラフィカテゴリー） -__[[typography>https://drive.google.com/drive/folders/1QrqkSvHvZwGqPNzHwYLHxZcTxBiXECwP?usp=sharing]]__ -Webサイト --カテゴリーセクションのテキストに影を追加し、視認性を上げた --通常時のロゴの挿入 --タイポグラフィカテゴリー画像の挿入 ~ ~ **2025.10.17 -画像の生成（テクスチャカテゴリー、エフェクトカテゴリー） -__[[texture>https://drive.google.com/drive/folders/1-mNvRf7WGzaR3nUf4BWGKsLSzu5cwviz?usp=sharing]]__ -__[[effect>https://drive.google.com/drive/folders/1QvQaCfPi2FtrSHxFQktBqyib7AgcRQ5U?usp=sharing]]__ ~ ~ **2025.10.10 -概要集 --画像の刷新 --参考情報の更新 --段落の修正 ~ ~ **2025.10.03 -__[[現時点バックアップ>https://drive.google.com/drive/folders/1N0y5GQ-cze5nfTpkaeWN8XSHZfQa9WDM?usp=sharing]]__ -目的の刷新 --音楽や創作のインスピレーション --AI等の最新技術を認知してもらう ~ ~ **2025.09.26 -画像の生成（カラーカテゴリー） -__[[color>https://drive.google.com/drive/folders/1raG1_OJ6V74xGu2oHKpsVI9Go-gD5MPg?usp=sharing]]__ #image(ss.png) ~ ~ **2025.09.19 -Webサイト改善とプロジェクトページの細分化を減らし数を増やす --カラー、テクスチャ、エフェクト、文字の有無 --AI-models削除(about等に備考として書く） &image(ss2.png,,49%);|&image(ss1.png,,49%); ~ ~ **2025.07.18 -反省点 --全体の数を増やす --制作時の時間・日付の表示 --Webサイトの掲載方法の改善 --研究方法の明確化 --数値の変化を楽しめる提案 -ブラッシュアップ --aboutテキストの改善 -- ~ ~ **2025.07.11 #image(pro.png) ~ ~ **2025.07.04 #image(1home.png) #image(2cotgly.png) ~ ~ **2025.06.27 -__[[前期概要集最終>https://drive.google.com/file/d/1fZkWn-gTMyj49ZRjgNFF2tGHPcCb2jW5/view?usp=sharing]]__ -__[[ビジュアル（仮）>https://drive.google.com/drive/folders/1MPO-5oHxA_sl2C_Nf2bPPglIsVncBdMu?usp=sharing]]__ ~ ~ **2025.06.20 -概要作成(使用資料） -__[[概要集>https://drive.google.com/file/d/1nfcpQikMQX0W3fx5aHz_F1edl0dgLWmn/view?usp=sharing]]__ -実験方法まとめ -例えば --color --compositon --Texture --Size --Effect --Typography などビジュアルの内容要素に変化 ~ ~ **2025.06.06 -figmaデザイン制作 #image(About.png) #image(Ai-Models.png) -HTMLコーディング -CSSコーディング ~ ~ **2025.05.30 -figmaでデザイン修正 --__[[figma>https://drive.google.com/file/d/1xgFNsaCKBymVm7no2mjIjYzxNiFvc_V9/view?usp=sharing]]__ -HTMLでコーディング --__[[github掲載>https://speacelenger.github.io/K-test/]]__ ~ ~ **2025.05.23 -__[[ワイヤーフレーム(Smartphone)>https://drive.google.com/file/d/1MKzxJlylVhkGXfjS-L3e7r8OMgeNyOmd/view?usp=sharing]]__ //[[ビジュアル<https://drive.google.com/drive/folders/1MPO-5oHxA_sl2C_Nf2bPPglIsVncBdMu?usp=sharing>]] ~ ~ **2025.05.16 -__[[ワイヤーフレームPC>https://drive.google.com/file/d/1hxCNlPOtU5TPB-AhL_hM1C_6RnIODZ7q/view?usp=sharing]]__ #image(top(p).png) //#image(tops.png) ~ ~ **2025.05.09 #image(moz (1).png) -__[[試作はこちら>https://drive.google.com/drive/folders/13j1IsO2WJ7Fnvr5btt6WH31VlixH_qsl?usp=sharing]]__ -__[[例:3.image-to-music-v2使用例>https://drive.google.com/file/d/1pm8VbA2lq0TijqhiO1wNtZRwQUhwZHFG/view?usp=sharing]]__ ~ ~ **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 ***テーマの有力候補 -''声の波形を使ったデザイン'' -波形 --声を録音 → 波形を生成 → グラフィック素材にする --聴覚は記憶に残りにくい→波形にして視覚化 --アプリで声を集める→波形ギャラリー -[[作業工程表>https://drive.google.com/file/d/1KAwxbXiuDEcOej_AZ-8NV33uHdv8jUIo/view?usp=sharing]] --声を地図データのようなグラフィックに置き換える --波形の色や形状で感情を表現 ~ ~ **2025.04.11 ***テーマ案 -視力が低い人が認知できるデザインの研究 -心拍数や瞬きなどの身体から得る情報からノイズを生む -年齢によって感じる時間の流れの感じ方 -ゲーム内で学内ハザードマップのリアル体験 -柄、材質に着目した触覚と視覚を感じれるアートワーク -''声の波形を使ったデザイン'' ~ ***調査 -音声波形 --[[WaveVisual>https://wavevisual.com/]] -ゲーム×ハザードマップ --[[フォートナイトクリエイティブ>https://www.fortnite.com/create?lang=ja]] -メモ --自分の声を「山脈」にして地形を生成。あるいは、都市の騒音データを地図に反映 ~ ~ ~