#author("2025-06-13T16:42:45+09:00","default:member","member") #author("2025-06-13T17:01:09+09:00","default:member","member") #setbgcolor(white) *Visual to Music 耳で聞いて、目で楽しめるアートワークの提案 #image(visual.png) -''梁井 英翔'' -'''Keywords：音楽制作, AI, グラフィック, ''' //https://www.example.com ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; -ビジュアルをもとに、複数のAI音楽生成モデルで生み出される音楽を比較できるWebサイト ~ ***背景 -映像やグラフィックを学ぶ学生にとって、音楽制作は専門外であり、DAWソフトや音楽理論の知識が必要という印象から、手が出しにくい分野と感じられてきました。しかし、近年のAI技術の進化により、音楽制作のプロセスが直感的かつ視覚的な発想からも可能になりつつあります。 -私自身も授業でDAWソフトを触れる中で「音楽はもっと自由でいい」と気づき、テクノロジーによって表現のハードルが下がる体験を共有できればと思い。この体験を出発点に、「映像やビジュアルから音楽が生まれる」ことを感じられればと考えました。 ~ ***目的 -このWebサイトは、視覚的な素材をもとに、複数のAI音楽生成モデルで音楽を生成・比較することで、「音楽制作への入門やAIの進化」という体験を提供します。 --音楽に触れたことのない人でも、感覚的に制作プロセスを楽しめる --異なるAIモデルの出力を比較することで、多様性や可能性を理解できる(好みを知れる) --視覚から音楽へという新しい創作アプローチを発見できる //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -視覚情報を音楽に変え、聴き比べが体験ができるWebサイト -AI等の技術に注目される展示 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト（ビジュアル8案） ~ ***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -illustrator -Photoshop -html -figma ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜2025.04.11 - 2025.12.26}; ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; -Webサイトでより楽しめるデザイン（アニメーションや演出）を考える必要がある。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[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){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.06.06 -figmaデザイン制作 -Wordpress ~ ~ **2025.05.30 -Web基礎構築 -figmaでデザイン制作 [[figma>https://drive.google.com/file/d/1xgFNsaCKBymVm7no2mjIjYzxNiFvc_V9/view?usp=sharing]] ~ ~ **2025.05.23 視覚的要素による差別化の視点一覧 1. 色（Color） 色相（暖色／寒色、単色／多色） 彩度（鮮やか／くすみ） 明度（明るい／暗い） 色数（モノクロ／フルカラー／2色構成など） 2. サイズ・形状（Size / Shape） 要素の大きさ（小さなモチーフ／大きな塊） 面積の比率（空白 vs 図形） 形の鋭さ or 丸み（エッジの強さ） 対称／非対称性 3. 構成・レイアウト（Composition） 中央／左右／上下の配置 密度（スカスカ／密集） バランス（安定／不安定） 視線誘導（動きの流れがあるか） 4. テクスチャ・質感（Texture） 手描き風／デジタル／写真風 なめらか／ザラザラ／ノイズあり 立体感の強弱（シャドウやハイライトの使い方） 5. エフェクト（Effect） グリッチ、ブラー、発光、フィルターなどの加工 特殊効果（ノイズ、ハレーション、RGB分離など） 6. 文字の有無・書体（Typography） テキストの有無（文字がある／ない） 文字の内容（抽象語／具体語） フォントの種類（明朝／ゴシック／手書き風など） 文字の強調度（太字／斜体／装飾） 7. テーマ・意味性（Semantic content） 顔や人物の有無 自然／人工物 抽象画／具象画 感情を誘発するかどうか（例：悲しそうな顔 vs 笑顔） 8. 文化的／記号的意味 特定文化や時代を想起させるモチーフ（例：浮世絵、サイバーパンク） 宗教・政治的象徴の有無 ~ ~ **2025.05.16 [[ワイヤーフレームPC>https://drive.google.com/file/d/1hxCNlPOtU5TPB-AhL_hM1C_6RnIODZ7q/view?usp=sharing]] #image(top(p).png) [[ワイヤーフレーム(Smartphone)>https://drive.google.com/file/d/1MKzxJlylVhkGXfjS-L3e7r8OMgeNyOmd/view?usp=sharing]] //#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](https://melobytes.com/en/app/image2song/](https://melobytes.com/en/app/image2song/) -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]] -メモ --自分の声を「山脈」にして地形を生成。あるいは、都市の騒音データを地図に反映 ~ ~ ~