#author("2026-01-07T07:16:23+09:00;2025-12-15T04:49:44+09:00","default:member","member") #author("2026-01-07T07:21:46+09:00;2025-12-15T04:49:44+09:00","default:member","member") *集中空間ラボ 集中できる環境を整えるためのwebサイト #image(banner.jpg) -''Fukui Suzu'' -'''Keywords：sound, space, 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){基本的な考え方、枠組み、視点など}; //聴覚と視覚の連動を用いた感覚的な没入体験 作業用途に応じた作業環境を作る ~ ***成果物の仕様 //&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){プロジェクトが完結したら「まとめ」を記載して下さい。}; 今期はサイトの機能やUIについて体験面を考慮して試作を作ることができた。 今後は中身のコンテンツを制作するために、音と心理的な側面のつながりを調査するとともに、音を構成していく上で、録音や編集技術を学習しながら制作を進めていきたい。 ~ ~ **調査 ***現状調査 //&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/]] -[[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]] -[[ボタンをクリックして背景を切り替えるJavaScript>https://note.com/nowest0717/n/n85013e1e1247]] -[[web制作：背景アニメーションガイド>https://kekenta-it-blog.com/background-animation-guide-particle-effects/]] -[[JavaScriptで水や波、パーティクル等の動きを表現>https://www.webcreatorbox.com/blog/javascript-particles]] -[[CSS/JavaScriptで作られた美しいアニメーション背景8戦>https://goworkship.com/magazine/css-javascript-animated-backgrounds/]] -[[Vanta.js 公式>https://www.vantajs.com/?effect=dots]] -[[JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション>https://dubdesign.net/javascript/vantajs-animetion/]] -[[浮遊するボタンCSS>https://tabibitojin.com/css-floating-pounding-button/]] -[[ピクトグラム参考>https://pin.it/GEWXhF8Ps]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[ガントチャート>https://docs.google.com/spreadsheets/d/1WpHPGsk0t1M8T8_iYtpuhSNU5L84SvDoTK6yJAkHOq4/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%-テーマ案設定%% %%-webサイト参考調査%% %%-ターゲット調査・分析%% %%-サイト機能アイデア出し%% %%-空間構成アイデア出し%% %%-サイトマップ作成%% %%-ワイヤーフレーム作成%% %%-プロトタイプ作成%% %%-サウンド参考調査%% -サイトのフレーム完成 -サウンド試作 -空間別背景アニメーションor映像作成 -コンテンツの完成 -webサイトへコンテンツ入れ込み //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.12.22 ***取り組み -企画ブラッシュアップ ~ ***プロトタイプ [[https://fki-sz.github.io/II/]] ~ ***サイト案 -サウンドについて --好きな音楽を取り込められる仕組み --環境音をデザインした空間構成 ~ -ビジュアルについて --タイトルを含めた、サイト全体の雰囲気をまとめる --空間に合った視覚的なエフェクト、アニメーションor映像を作成する ~ ~ **2025.12.15 ***取り組み -最終発表好評 ~ ***最終発表好評 -スマートフォンに対応したレイアウトのデザインを行う -基本構造の確定 -環境音に関して、様々な場面と効果を調査 -視覚的な演出の工夫が必要 -先行事例との違いを確認 -音を混ぜる、音楽とノイズを組み合わせるという点で独自性がある -タイマー機能について、アラームはどう鳴って、知らせるかを検討する -ノイズキャンセル的な思考がある中で、サウンドをどう活用できるか再調査 ~ ***今後の方針 -サイト機能について、音楽を取り込められる仕組みを検討する -視覚的な演出において、抽象的なエフェクトやアニメーションにするのか、実写映像等を使用して、より没入感を作るのか、両方の効果を試す -環境音のデザインについて、様々な場面を調査する -タイトルの名前、サイト全体の雰囲気を再検討する ~ ~ **2025.12.08 ***取り組み -プロトタイプ作成 -サウンド調査 -技法・技術調査 -制作の現状と今後について ~ ***プロトタイプ [[https://fki-sz.github.io/II/]] ~ ***サウンド -[[Nujabes>https://music.apple.com/jp/artist/nujabes/679712483]] -[[坂本龍一>https://classical.music.apple.com/jp/artist/271593168]] //環境音の場面分けについて調査する ~ ***技法・技術調査 -[[“周波数”で考える曲づくり！with GarageBand >https://big-up.style/zine/article/column/20211005-13205]] - ~ ***フリー使用サイト -[[https://www.dova-s.jp/]] -[[環境音>https://www.d-elf.com/archives/8333.html]] -[[効果音ラボ>https://soundeffect-lab.info/]] -[[音声ファイル圧縮>https://www.youcompress.com/ja/mp3/]] ~ ***制作の現状と今後について -現状 --ターゲット調査 --サイトの機能とUIの調整・試作 --サウンド調査・仮制作 -今後 --サイト全体（サウンドページ＋必要な情報の記載ページ作成）の制作 --サイトコンテンツ（サウンド・情報まとめ）の作成 ~ ~ **2025.12.01 ***取り組み -プロトタイプ作成 -サウンド調査 ~ ***プロトタイプ [[https://fki-sz.github.io/II/]] ~ ***サウンド調査 -[[haruka nakamura（音楽家記事）>https://cado.com/pages/about-haruka_nakamura?srsltid=AfmBOoosoY0_-lJDfebBqRFXb6yZiruy4R9zsRomUwwKkReQ6S-xac16]] ~ ***サウンド参考リンク -[[Nujabes>https://music.apple.com/jp/artist/nujabes/679712483]] -[[坂本龍一>https://classical.music.apple.com/jp/artist/271593168]] ~ ~ **2025.11.24 ***取り組み -プロトタイプ作成 -調査・分析 -空間構成アイデア出し ~ ***プロトタイプ [[https://fki-sz.github.io/II/]] ~ ***現状調査 -[[webデザインーアニメーションの効果ー>https://www.prezen-square.jp/posts/animation-merit]] -[[作業用BGMのジャンルについて考えてみよう>https://www.agent-grow.com/self20percent/2024/12/27/%E4%BD%9C%E6%A5%AD%E7%94%A8bgm%E3%81%AE%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/]] -[[作業用BGM おすすめジャンル：生産性と集中力を高める音楽の選び方>https://note.com/sonnnakotonaisa/n/nd16fa8cfd24b]] -[[PC 作業やリモートワークに！作業に集中できる BGM テイストを紹介>https://www.thesijihive.com/post/background-music-for-work]] -[[やっぱりあった、作業用BGMの選び方>https://www.lifehacker.jp/article/160321perfect_playlist/]] ~ ***BGM参考 -[[youtube再生リスト>https://youtube.com/playlist?list=PLDsa_l3f6Wljy2BseuOjmrATU3nBI_G5f&si=ZgDFj3ST4XShQO7k]] ~ ***空間構成アイデア出し -環境音による場面分け -使用用途（気分）に合わせたジャンル分け //環境音の様々な場面を用意すれば、使う上で色んな組み合わせをすることができるため、サウンドの可能性は広がる。用途（気分）別だと、ユーザーが使う部分を明確に選択できる点で良い。 -- -- ~ ~ **2025.11.17 ***取り組み -プロトタイプ作成 -技法・技術調査 ~ ***プロトタイプ [[https://fki-sz.github.io/II/]] ~ ***技法・技術調査 -[[ボタンをクリックして背景を切り替えるJavaScript>https://note.com/nowest0717/n/n85013e1e1247]] -[[web制作：背景アニメーションガイド>https://kekenta-it-blog.com/background-animation-guide-particle-effects/]] -[[JavaScriptで水や波、パーティクル等の動きを表現>https://www.webcreatorbox.com/blog/javascript-particles]] -[[CSS/JavaScriptで作られた美しいアニメーション背景8戦>https://goworkship.com/magazine/css-javascript-animated-backgrounds/]] -[[Vanta.js 公式>https://www.vantajs.com/?effect=dots]] -[[JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション>https://dubdesign.net/javascript/vantajs-animetion/]] -[[浮遊するボタンCSS>https://tabibitojin.com/css-floating-pounding-button/]] -[[ピクトグラム参考>https://pin.it/GEWXhF8Ps]] ~ ~ **2025.10.27 ***取り組み -サイト機能の決定 -１空間のサウンド構成アイデア出し -サイトマップ作成 -ワイヤーフレーム作成 ~ ***サイト機能 -ポモドーロタイマー（25分→5分のサイクル） --作業の効率化 -サウンド音量バランス調整 --自分の中での心地良いサウンドバランスを設定 ~ ***サウンド構成アイデア出し -自然 -アンビエント -リラックス -カフェ環境音 -焚き火 -雨の日 -話し声（雑談、環境音、雑音） ~ ***サイトマップ #image(sitemap2.png) ~ ***ワイヤーフレーム #image(wireframe2.png) ~ ~ **2025.10.20 ***取り組み -ターゲット調査・分析 -サイト機能のアイデア出し -現状調査 -先行事例調査 ~ ***現状調査 -[[リラックス法が学習時の集中力持続に与える影響>https://www.jstage.jst.go.jp/article/hakodatekosen/50/0/50_KJ00010056299/_pdf/-char/ja]] ~ ***ターゲット調査・分析 -課題 --自宅で作業するが、集中できない --注意散漫・ADHD的傾向で、目的と違う作業をしてしまいがち --外部環境（誘惑・生活感）によって作業スイッチが入りづらい ~ -原因 --作業するための環境要因（視覚・聴覚）が整っていない --時間の感覚が曖昧で、集中のリズムが構築できない --目的のタスク以外に気持ちが流れやすい（刺激に弱い） ~ -解決法 --作業空間を切り替えるために、web上での音と視覚的なエフェクトを介して、集中できる空間を作る ~ -活用シーン --自宅での作業・勉強中に --夜のリラックス作業・クールダウン -- ~ ***サイト機能アイデア出し -時間表記 -タイマー -日記、記録系 -ポモドーロタイマー -セッション記録（累積時間・回数の可視化） -時間帯に応じて最適な音を提案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]] ~ ~ ~