#author("2025-12-02T17:53:10+09:00;2025-12-01T11:47:23+09:00","default:member","member") #author("2025-12-02T18:20:28+09:00;2025-12-01T11:47:23+09:00","default:member","member") *集中空間ラボ 聴覚と視覚の連動が生む感覚的な心地よさの探究 #image(mainvisual.jpg) -''Fukui Suzu'' -'''Keywords：sound, Audio Visualizer, Immersive Websites''' //-https://www.example.com //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 //-[[オーディオビジュアライザーの試作サイト>https://fki-sz.github.io/0samplesite/]] -[[プロトタイプ>https://fki-sz.github.io/II/]] ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; //没入空間を体験できるWebサイト 集中できる環境作りのサポートをする作業用webサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; //-普段、映像視聴やアプリ操作の中で、音とアニメーションが連動することで生まれる心地よさや安心感を感じる場面がある。このような聴覚と視覚の連動は、体験に一体感をもたらし、ユーザーに安心感や心地よさを与える要因の一つであると考えられる。 //-本研究では、音とアニメーションの連動によって生まれる感覚的な心地よさが、人々の没入感や自律神経にどのような影響を与えるかを探ることを目的とする。また、その効果を体験的に示すため、音とアニメーションを組み合わせたWeb上の没入空間を制作し、ユーザーが日常の中で一時的に心をリセットできるような環境を構築する。 在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。 本研究の目的は、音とビジュアルの刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; //聴覚と視覚の連動を用いた感覚的な没入体験 シーンごとのサウンドに合わせて背景が変化したり、タイマー機能を効果的に使用したりすることで、自宅の中でも気分や作業内容に応じて“自分に合った作業環境”をつくれる Web 体験をデザインする。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; webサイト ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; HTML,CSS,JavaScript GarageBand ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2025.09.15- ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[サウンドデザインと時間の認識>https://uxdesign.cc/game-audio-and-perception-of-time-9569a963772a]] -[[音の感覚の可視化表現>https://www.aichi-fam-u.ac.jp/academics/item/Mao%20ONISHI.pdf]] -[[環境音楽とは？アンビエントミュージックとの違い>https://mag.viestyle.co.jp/ambient-music/]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[Ayako Taniguchi>https://ayakotaniguchi.jp/]] //-[[Ayako Taniguchi>https://ayakotaniguchi.jp/]] -[[timemyflow>https://timemyflow.com/?utm_source=chatgpt.com]] -[[noises>https://noises.online/]] -[[nature mixer>https://naturemixer.com/?utm_source=chatgpt.com#]] -[[4 MILES PROJECT>http://4milesproject.com/#]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[Web Audio APIの周波数解析>https://ics.media/entry/230421/?utm_source=chatgpt.com]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[ガントチャート>https://docs.google.com/spreadsheets/d/1WpHPGsk0t1M8T8_iYtpuhSNU5L84SvDoTK6yJAkHOq4/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%-テーマ案設定%% %%-webサイト参考調査%% %%-サイトマップ作成%% %%-ワイヤーフレーム作成%% -webサイト試作作成 -アニメーション調査 -アニメーション試作 -音作り参考調査 -音作り試作 - //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.11.24 ***取り組み -プロトタイプ作成 -調査・分析 -概要集の作成 ~ ***プロトタイプ -[[プロトタイプ>https://fki-sz.github.io/II/]] ~ ***現状調査 - ~ ~ **2025.11.17 ***取り組み -プロトタイプ作成 ~ ***プロトタイプ -[[プロトタイプ>https://fki-sz.github.io/II/]] ~ ~ **2025.10.27 ***取り組み -サウンドの構成アイデア出し -サイトマップ作成 -ワイヤーフレーム作成 -技法・技術調査 ~ ***サウンド構成アイデア出し -自然 -アンビエント -リラックス -カフェ環境音 -焚き火 -雨の日 -話し声（雑談、環境音、雑音） ~ ***サイトマップ ~ ***ワイヤーフレーム #image(wireframe.png) ~ ***先行事例 -[[nature mixer>https://naturemixer.com/?utm_source=chatgpt.com#]] -[[timemyflow>https://timemyflow.com/?utm_source=chatgpt.com]] -[[noises>https://noises.online/]] ~ ~ **2025.10.20 ***取り組み -ターゲット調査・分析 -サイト機能のアイデア出し -現状調査 -先行事例調査 -参考技術調査 ~ ***ターゲット調査・分析 -[[リラックス法が学習時の集中力持続に与える影響>https://www.jstage.jst.go.jp/article/hakodatekosen/50/0/50_KJ00010056299/_pdf/-char/ja]] ~ ***サイト機能 -時間表記 -タイマー -日記、記録系 -ポモドーロタイマー -セッション記録（累積時間・回数の可視化） -時間帯に応じて最適な音を提案or 時間帯を忘れるような空間設計の方が没入空間になって効果的であるかも -音とビジュアルの連動 -シーン（状況）選択（森、雨、夜の街…） -マルチタスク抑制→全画面モード、余白を大きくしたUI ~ ***先行事例 -[[nature mixer>https://naturemixer.com/?utm_source=chatgpt.com#]] -[[timemyflow>https://timemyflow.com/?utm_source=chatgpt.com]] -[[noises>https://noises.online/]] ~ ~ **2025.10.13 ***取り組み -中間発表好評 -概要の再構築 -現状調査 ~ ***中間発表好評 -体験の要素を鑑みて、色んな音楽ファイルを取り込めるような仕組みを考えてみる。また、タイマーや、スクロールしたらビジュアルが変わる仕組みなど。 -音（音楽）の用途について深ぼって考える。作業中に歌詞のある音楽を聴くのか。 -目的に応じた体験要素を考え直す。 ~ ***研究概要（改） -これは何？ 集中できる環境作りのサポートをする作業用webサイト ~ -背景と目的 在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。 本研究の目的は、音とビジュアルの刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。 ~ -コンセプト シーンごとのサウンドに合わせて背景が変化したり、タイマー機能を効果的に使用したりすることで、自宅の中でも気分や作業内容に応じて“自分に合った作業環境”をつくれる Web 体験をデザインする。 ~ ***現状調査 -[[多様な音環境による心理的影響と作業パフォーマンスの影響の関連性>https://dspace.jaist.ac.jp/dspace/bitstream/10119/18395/1/1P-59.pdf]] -[[BGMが作業への印象に与える影響ーながら習慣に焦点を当てたオンライン実験による検討ー>file:///Users/suzu/Downloads/%E6%98%AD%E5%92%8C%E5%A5%B3%E5%AD%90%E5%A4%A7%E5%AD%A6-%E7%94%9F%E6%B4%BB%E5%BF%83%E7%90%86%E7%A0%94%E7%A9%B6%E6%89%80%E7%B4%80%E8%A6%81-24-10%E3%80%80%E9%AB%98%E4%B9%85%E3%83%BB%E6%B1%A0%E4%B8%8A.pdf]] ~ ~ **2025.10.06 ***取り組み -webサイト試作 -人々への影響をもたらすアンビエントミュージックの調査 -音の可視化における波形・図形アニメーションの調査 ~ ***webサイト [[2Dのオーディオビジュアライザーの試作>https://fki-sz.github.io/0samplesite/]] ~ ***サウンド参考 -[[私たちがアンビエントミュージックを求める理由と、音環境の未来。>https://fin.miraiteiban.jp/muninaritai02/]] -[[環境音楽とは？アンビエントミュージックとの違いとおすすめアーティスト10選>https://mag.viestyle.co.jp/ambient-music/]] ~ ***アニメーション参考 -[[Create an AMAZING 3D Music Visualizer With HTML and CSS And JavaScript | Web Audio API + ThreeJs>https://youtu.be/MKFRgS1-PHw?si=GRpEjt9d2D3iBFfa]] -[[3D Space Warp JavaScript Effect - Three.js Tutorial>https://youtu.be/Bed1z7f1EI4?si=adh9wH9EotWawuh2]] - ~ ~ **2025.09.29 ***取り組み -ToDo・スケジュール作成 -サイトマップ・ワイヤーフレーム作成 ~ ***スケジュール [[ガントチャート>https://docs.google.com/spreadsheets/d/1WpHPGsk0t1M8T8_iYtpuhSNU5L84SvDoTK6yJAkHOq4/edit?usp=sharing]] ~ ***サイトマップ #image(sitemap.png) ~ ***ワイヤーフレーム |#image(image01.png)|#image(image02.png)| ~ ~ **2025.09.22 ***取り組み -テーマ案整理 -研究目的・コンセプトの設定 -スケジュール作成 -現状調査 -技法・技術調査 ~ ***テーマ案整理 -環境音と映像の組み合わせ -自律神経を整えるwebサイト -web上で作る没入空間 ~ ***テーマ案 音とアニメーションによって感覚的UXを実現するWebサイト制作 ~ ***背景・目的 -普段、映像視聴やアプリ操作の中で、音とアニメーションが連動することで生まれる心地よさや安心感を感じる場面がある。このような聴覚と視覚の連動は、違和感のない自然な体験を生み、使用者の感情を安定させる要素として作用していると考えられる。 -本研究では、音とアニメーションの連動によって生まれる感覚的な心地よさが、人々の没入感や集中力の向上にどのような影響を与えるかを探ることを目的とする。さらに、その効果を体験的に示すため、音とアニメーションを組み合わせたWeb上の没入空間を制作し、ユーザーが空間的な気持ちの切り替えを体験できる環境を構築する。 ~ ***コンセプト 音と動きで、感覚的な没入を生むWeb体験 ~ ***現状調査 -[[サウンドデザインと時間の認識>https://uxdesign.cc/game-audio-and-perception-of-time-9569a963772a]] -[[身体・映像・サウンド-多摩美術大学>file:///Users/suzu/Downloads/36_Wono.pdf]] -[[音MADに対する新しい観念：関係の創造>https://note.com/133068369/n/n62c67febdf40]] -[[音の感覚の可視化表現>https://www.aichi-fam-u.ac.jp/academics/item/Mao%20ONISHI.pdf]] -[[音楽表現の可視化>https://www.ed.ehime-u.ac.jp/~kiyou/2015/pdf/05.pdf]] -[[音の視覚化>https://barbegenerativediary.com/sounds/sound-visualization-v1/]] -[[環境音楽とは？アンビエントミュージックとの違い>https://mag.viestyle.co.jp/ambient-music/]] -[[アンビエント音楽と仏教の意外な共通点>https://note.com/tasken/n/nc81f2a63d9be]] -[[アンビエントミュージックが心の健康に与える影響>https://tomkolbe.com/ja/2024/11/25/%E3%82%A2%E3%83%B3%E3%83%93%E3%82%A8%E3%83%B3%E3%83%88%E3%83%9F%E3%83%A5%E3%83%BC%E3%82%B8%E3%83%83%E3%82%AF%E3%81%8C%E5%BF%83%E3%81%AE%E5%81%A5%E5%BA%B7%E3%81%AB%E4%B8%8E%E3%81%88%E3%82%8B%E5%BD%B1/]] -[[アンビエントミュージック（環境音楽）とは>https://edyclassic.com/4351/]] ~ ***先行事例 -[[Ayako Taniguchi>https://ayakotaniguchi.jp/]] -[[4 MILES PROJECT>http://4milesproject.com/#]] -[[homunculus>https://homunculus.jp/]] ~ ***技法・技術情報 -[[After Effects Blue Glitter Particles overlay, background>https://youtu.be/WepoquT7fx0?si=ilCqGqK4DKDQ84E4]] -[[Dust Particles pack, overlay background for After Effects and Adobe Premiere v2 [FREE DOWNLOAD]>https://youtu.be/_3RZuhONWuY?si=osBeI6YkOHPAmrXy]] - ~ ~ ~ **2025.09.15 ***取り組み -キーワード出し -テーマ案候補決め -現状調査 ~ ***キーワード -音楽、楽器、環境音、光・照明、心理学、絵本、比較、個性、素材、博物館 -教育、都市、再利用 -映像、サウンド、web、UI/UX ~ ***テーマ案候補 -音色の違いによる心理的効果 -サウンドアートと映像表現がもたらす心理的効果 -絵本と音の関係性 ~ ***調査 -[[音色と視覚的形状の視聴覚的対応>https://pmc.ncbi.nlm.nih.gov/articles/PMC4038957/?utm_source=chatgpt.com]] ~ ***事例 -[[サウンドアート展>https://www.youtube.com/watch?v=8aXkHHBaBoA]] -[[インタラクティブ作品>https://www.youtube.com/watch?v=dqBzWorEDSA]] ~ ~ ~