#author("2026-07-10T14:51:01+09:00;2026-07-10T14:21:03+09:00","default:member","member") #author("2026-07-17T17:08:49+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サイト ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; HTML,CSS,JavaScript ChatGPT 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){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[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]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%-テーマ案設定%% %%-webサイト参考調査%% %%-ターゲット調査・分析%% %%-サイト機能アイデア出し%% %%-空間構成アイデア出し%% %%-サイトマップ作成%% %%-ワイヤーフレーム作成%% %%-プロトタイプ作成%% %%-サウンド参考調査%% -サイトのフレーム完成 -サウンド試作 -コンテンツの完成 -webサイトへコンテンツ入れ込み //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2026.06.26 ***取り組み -作品概要の作成 -音環境の調査 -サイトアニメーションの調査 ~ ***現状調査 - ~ ~ **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://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]] ~ ***先行事例 -[[4milesproject>https://4milesproject.com/#]] -[[naturemixer>https://naturemixer.com/?utm_source=chatgpt.com#]] ~ ***サイトマップ -用途別のページ -タイマーの設定 -サウンドの構成 -サイトグラフィック ~ ~ **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 -課題・観点 --環境がもたらす行動力への影響 //--便利が故の想像力の低下 ~ -興味 --言葉では表わせられない情報表現 --音の重なり - ~ ~ ~