#author("2026-07-23T01:05:24+09:00;2026-07-10T14:21:03+09:00","default:member","member") #author("2026-07-23T01:22:10+09:00;2026-07-10T14:21:03+09:00","default:member","member") *集中空間ラボ 集中できる環境を整えるためのwebサイト #image(banner.png) -''Fukui Suzu'' -'''Keywords：sound, space, Immersive Websites''' //-https://www.example.com //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 -[[https://fki-sz.github.io/sound-lab-2/]] ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 集中できる環境作りのサポートをする作業用webサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。 本研究の目的は、音や視覚的な刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; //作業用途に応じた作業環境を作る 音環境を整えることで、自分の感覚と心の余裕を作り出す ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; webサイト -[[https://fki-sz.github.io/sound-lab-2/]] ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; HTML,CSS,JavaScript ChatGPT GarageBand ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2025.09.15- ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 前期では、環境音を用いたWebサイトの試作を通して、サイト構成や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){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[timemyflow>https://timemyflow.com/?utm_source=chatgpt.com]] -[[nature mixer>https://naturemixer.com/?utm_source=chatgpt.com#]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[ボタンをクリックして背景を切り替える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]] [[ガントチャート>https://docs.google.com/spreadsheets/d/1HriE_KiaoYRuhTs8GYIT7DevaRu4gUxbASJjqdcjuQ8/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%-テーマ案設定%% %%-webサイト参考調査%% %%-ターゲット調査・分析%% %%-サイト機能アイデア出し%% %%-空間構成アイデア出し%% %%-サイトマップ作成%% %%-ワイヤーフレーム作成%% %%-プロトタイプ作成%% %%-サウンド参考調査%% %%-サイト試作%% %%-サウンド構成の決定%% %%-機材・録音調査%% -サウンド試作 -コンテンツの完成 -webサイトへコンテンツ入れ込み //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2026.07.17 ***取り組み -研究テーマの整理 -サイトUIの再考・調査 - ~ ***現状調査 -[[種々な環境音に対する好みとサウンドスケープ・デザインの考え方についての検討>https://ndlsearch.ndl.go.jp/books/R100000039-I10571455]] -[[環境音の 印象評価構造 に 関す る 研究>https://www.jstage.jst.go.jp/article/jasj/60/5/60_KJ00003142760/_pdf/-char/ja]] -[[サウンドスケープによる空間認知特性>https://www.jstage.jst.go.jp/article/jssd/71/0/71_30/_pdf/-char/ja]] -[[環境音を用いたサウンドスケープを立体的に表現するためのシステムの提案>https://www.interaction-ipsj.org/proceedings/2023/data/pdf/1A-12.pdf?utm_source=chatgpt.com]] -[[仮想現実における水の音圧レベルの影響：没入型自然環境を通じた若年成人の回復効果に関する研究>https://scholar.nycu.edu.tw/en/publications/the-effect-of-water-sound-level-in-virtual-reality-a-study-of-res/?utm_source=chatgpt.com]] ~ ***研究テーマの整理 -環境音の組み合わせによる空間知覚に関する研究― Webサイトを用いた音環境デザインの提案 ― -環境音の組み合わせによる新たな空間体験のデザイン -環境音を活用したWeb空間デザインの研究 -環境音と視覚表現を用いた空間体験のデザインに関する研究 ~ ~ **2026.07.10 ***取り組み -最終発表好評 -今後の流れ ~ ***好評 -環境音の組み合わせ自体に面白さがあるため、空間ごとにページを分けるのではなく、1ページ上で音を組み合わせ、背景やアニメーションを変化させることで、多様な空間を演出できる可能性がある。 -機能を詰め込みすぎると画面が煩雑になるため、情報整理やデザインのバランスを考慮する必要がある。 -電車の音は「電車の中で本を読むと落ち着く」といった体験につながるように、環境音にはそれぞれ異なる心理的効果がある可能性がある。また、自然音と生活音など、一見異なる種類の音を組み合わせることで、予想以上に心地よい空間が生まれることも考えられる。 -同じ環境音でも、例えば焚き火や雨には「激しい音」「穏やかな音」などさまざまな種類が存在するため、その違いをアイコンやビジュアルで表現できる可能性がある。 -「集中空間ラボ」という名称に限定せず、「環境音」そのものをテーマとしたサイトとして、環境音の組み合わせが生み出す面白さや、人への影響・新たな気づきを軸に研究テーマやタイトルを再検討すると良い。 ~ ***今後の流れ -研究テーマについて、環境音の組み合わせが生み出す空間や人への影響を軸に再検討する。 -サイト構成を見直し、1ページ上で環境音の組み合わせを楽しめるUIを検討するとともに、背景やアニメーションによって多様な空間を演出できるデザインを制作する。 -フィールドレコーディングを継続し、自然音や生活音、交通音など、さまざまな環境音を収集・整理してコンテンツを充実させる。 -自然音×生活音、自然音×電子音など、さまざまな環境音の組み合わせを試し、それぞれが与える印象や空間の特徴について考察を行う。 -環境音の組み合わせによる効果や特徴を成果物の仕様として整理し、研究概要集にも考察内容を反映させる。 ~ ~ **2026.07.03 ***取り組み -サイト試作 -参考調査 ~ ***現状調査 -[[mitsulab>https://mitsulab.jp/]] -[[日本音環境学会>https://otokankyo.org/]] ~ ***試作 -[[https://fki-sz.github.io/sound-lab-2/]] ~ ~ **2026.06.26 ***取り組み -サウンドスケープの調査 -サイトアニメーションの調査 ~ ***現状調査 -[[日本サウンドスケープ協会>https://www.soundscape-j.org/]] -[[サウンドスケープデザインについての論文>https://www.jstage.jst.go.jp/article/jssdj/58/2/58_KJ00007629052/_pdf/-char/ja]] -[[サウンドスケープを知る>https://note.com/connectconnect/n/n606ba97d4957]] -[[SANKOU>https://sankoudesign.com/?s=%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3]] ~ ~ **2026.06.19 ***取り組み -サイト構造の修正 -サウンドアイコンの作成 -作品概要の作成 ~ ***サイトマップ #image(sitemap.png) ~ ***サウンド構成 #image(soundmap.png) ~ ***アイコン #image(icon.png) ~ ***試作 -[[https://fki-sz.github.io/sound-lab-2/]] --サイトページを増やす（集中空間以外への促し） --タイマーは削除（用途が明確になっていない） ~ ~ **2026.06.12 ***取り組み -機材選定 -作品概要の作成 ~ ***機材調査 マイク -[[miduno|フィールド録音家>https://note.com/midunote/n/nc1ab01268c4f]] -[[https://kotarohattori.com/sound-25/]] -[[https://www.amazon.co.jp/dp/B0DTJVLCFT?tag=maftracking270905-22&linkCode=ure&creative=6339]] -[[https://www.amazon.co.jp/dp/B0CSL4PXDV?tag=maftracking270905-22&linkCode=ure&creative=6339]] -[[https://monumental-movement.jp/Column-Field-Recording/]] -[[https://eisukeyanagisawa.com/essay/equipment1/]] -[[https://barbegenerativediary.com/sounds/getting-started-with-field-recording/]] -[[https://note.com/zensounds/n/n9f6dcc3d0c32]] ~ ~ **2026.06.05 ***取り組み -サイト構造の修正 -先行事例調査 -サウンドスケープについて調査 - ~ ***試作 -[[https://fki-sz.github.io/sound-lab-2/]] --サイトページを増やす（集中空間以外への促し） --タイマーは削除（用途が明確になっていない） ~ ***先行事例 -[[4milesproject>https://4milesproject.com/#]] -[[naturemixer>https://naturemixer.com/?utm_source=chatgpt.com#]] ~ ***現状調査 -[[世界の調律〜サウンドスケープとは何か〜>https://www.amazon.co.jp/%E4%B8%96%E7%95%8C%E3%81%AE%E8%AA%BF%E5%BE%8B-%E3%82%B5%E3%82%A6%E3%83%B3%E3%83%89%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%A8%E3%81%AF%E3%81%AA%E3%81%AB%E3%81%8B-%E5%B9%B3%E5%87%A1%E7%A4%BE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BC-R-%E3%83%9E%E3%83%AA%E3%83%BC%E3%83%BB%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%95%E3%82%A1%E3%83%BC/dp/4582765750]] ~ ~ **2026.05.22 ***取り組み -中間発表 ~ ***好評 -「集中空間」以外の空間があっても良い -サイトのページ展開＝部屋数を増やす -一音源は長さを30s~60sくらいに -タイトルロゴの字並びを変更 -何気ないものを音として探求することは面白い -背景のアニメーションのバリエーションを増やす -スマホ対応 -タイマーとしての使い所の設定を考える ~ ***今後の流れ -集中空間に限定せず、リラックスや読書、瞑想、勉強など、さまざまな用途に対応できるサイトを目指し、タイマー機能の必要性や設置方法について見直す。 -サイト内の構成を見直し、複数の空間を体験できるようページ展開（部屋数）の拡充を行う。 -背景アニメーションのバリエーションを増やし、それぞれの空間に適した演出を検討する。 ~ ~ **2026.05.15 ***取り組み -サイト試作 -サウンド録音技術調査 -今後の流れ ~ ***サイト試作 -[[https://fki-sz.github.io/sound-lab./]] ~ ***現状調査 -[[フィールドレコーディング>https://www.audio-technica.co.jp/always-listening/articles/field-recording-03/]] -[[録音方法・機材>https://barbegenerativediary.com/sounds/field-recording-beginner-01/]] -[[環境音の作り方や実音録音の例>https://unicorn-blog.jp/archives/30998]] -[[機材>https://mamorio.biz/blog/field-recording]] ~ ***今後の流れ -サウンド構成について再検討を行う。現在使用している自然環境音だけでなく、時計の針の音や食器の重なる音などの日常生活音も取り入れ、より空間性や生活感を感じられる音環境を構築したい。また、日本特有の環境音についても調査・収集を行い、サウンドデザインへ活用していきたい。 -実際の環境音を用いたサウンド制作を行うため、録音技術や編集方法について調査を進める。また、試験的に録音・編集を行いながら、空間の空気感や没入感を表現できるサウンドデザインについて検討していきたい。 -スマートフォンでの閲覧を想定し、レスポンシブデザインへの対応を進める。画面サイズによる操作性や視認性を考慮し、より直感的に利用できるUI設計を目指す。 -前回の情報デザイン研究の授業での意見を踏まえ、利用者が自身の好きな音楽を取り込める仕組みについて検討する。また、利用者がより快適に空間へ没入できるよう、必要な機能や体験設計についても引き続き考察を行う。 ~ ~ ~ **2026.05.08 ***取り組み -アイコン試作 -サイト試作 ~ ***サウンドアイコン [[サウンドアイコン試作>https://drive.google.com/file/d/12KJ3dLjXDLsq6aHXJFHXdefTXC4Ew5q6/view?usp=drive_link]] ~ ***サイト試作 -[[https://fki-sz.github.io/sound-lab./]] ~ ~ **2026.05.01 ***取り組み -サウンド仮作成 -アイコン試作 ~ ***サウンド仮作成 音の特徴を言語化し、AIで生成。 -[[Pop Pop AI>https://poppop.ai/jp/]] ~ ***サウンドアイコン -[[参考>https://pin.it/16C4TgA2q]] -[[アイデアスケッチ>https://drive.google.com/drive/folders/1ZzmDLyUXjlLQf13cEuAn5mSAT0AUDkw3?usp=drive_link]] ~ ~ **2026.04.24 ***取り組み -現状調査 -サウンド構成アイデア出し ~ ***現状調査 -[[集中と落ち着きのための自然音>https://campo.jp/nature-sounds-for-focus-and-calm-ambient-noise-relaxation-aid-focus-improvement/]] -[[タスクをする際に自然音をこうかについて>http://www.hsym.lab.uec.ac.jp/contents/column/20220628_goto]] -[[勉強効果を高める音の科学と活用>https://mihata.jp/column/nature-sounds-ambient-focus]] -[[学びに最適な音環境とは>https://note.com/eps/n/n1af22286da05]] -[[ブラウンノイズとは>https://amix-design.com/tl/tool-chill/column/brown-noise-effect.html]] -[[ブラウンノイズの効果>https://nntmapp.com/ja/blog/brownnoisebasic]] ~ ***サウンド構成 心情を落ち着かせ集中力を高めるために、比較的低い音域のサウンドを使用。 自然系のサウンドを多種配置することで、リラックス効果を高める。 雑音やノイズを追加し、意識的に感じることのない何気ない環境の音を再現。 ~ -自然系 --雨音 --流水 --波 --火 --森 --虫の音 --鳥 ~ -人的雑音系 --話し声 --紙の擦れる音 --外風 ~ -ノイズ --ブラウンノイズ ~ ~ **2026.04.17 ***取り組み -テーマ案決め -ワイヤーフレーム改正 ~ ***テーマ案 -集中できる環境を整えるためのwebサイト - ~ ***ワイヤーフレーム |#image(wireframe01.png)|#image(wireframe02.png)| |#image(wireframe03.png)|#image(wireframe04.png)| ~ ~ **2026.04.10 ***取り組み -テーマ案の整理 -現状調査 ~ ***テーマ案候補 -集中できる環境を整えるためのwebサイト //-音の絵本 - ~ ***現状調査 -[[サウンドスケープ>https://www.audio-technica.co.jp/always-listening/articles/city-well-being-and-soundscape/]] //-[[音と絵本>https://pages.audiobook.jp/special/mimiehon/index.html]] ~ ***memo -課題・観点 --環境がもたらす行動力への影響 //--便利が故の想像力の低下 ~ -興味 --言葉では表わせられない情報表現 --音の重なり - ~ ~ ~