• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 福井涼/卒業研究 へ行く。
  • 1 (2026-04-10 (金) 12:29:44)
  • 2 (2026-04-10 (金) 12:29:44)
  • 3 (2026-04-10 (金) 12:29:44)
  • 4 (2026-04-10 (金) 12:29:44)
  • 5 (2026-05-22 (金) 01:08:06)
  • 6 (2026-05-22 (金) 05:36:24)
  • 7 (2026-05-22 (金) 05:36:24)
  • 8 (2026-05-22 (金) 05:36:24)
  • 9 (2026-05-22 (金) 05:36:24)
  • 10 (2026-07-10 (金) 14:21:03)
  • 11 (2026-07-10 (金) 14:21:03)
  • 12 (2026-07-10 (金) 14:21:03)
  • 13 (2026-07-10 (金) 14:21:03)

---

集中空間ラボ

集中できる環境を整えるためのwebサイト

• Fukui Suzu
• Keywords：sound, space, Immersive Websites
• https://fki-sz.github.io/sound-lab-2/

概要

これは何？

集中できる環境作りのサポートをする作業用webサイト

背景と目的

在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。
本研究の目的は、音や視覚的な刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。

コンセプト

音環境を整えることで、自分の感覚と心の余裕を作り出す

成果物の仕様

webサイト

制作ツール

HTML,CSS,JavaScript
ChatGPT
GarageBand

プロジェクトの期間

2025.09.15-

まとめ

調査

現状調査

• サウンドデザインと時間の認識
• 音の感覚の可視化表現
• 環境音楽とは？アンビエントミュージックとの違い
  
  

先行事例

• timemyflow
• nature mixer
  
  

技法・技術情報

• ボタンをクリックして背景を切り替えるJavaScript
• web制作：背景アニメーションガイド
• JavaScriptで水や波、パーティクル等の動きを表現
• CSS/JavaScriptで作られた美しいアニメーション背景8戦
• Vanta.js 公式
• JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション
• 浮遊するボタンCSS
• ピクトグラム参考
  
  
  
  

プロジェクト管理

スケジュール

ガントチャート

ToDo

-テーマ案設定
-webサイト参考調査
-ターゲット調査・分析
-サイト機能アイデア出し
-空間構成アイデア出し
-サイトマップ作成
-ワイヤーフレーム作成
-プロトタイプ作成
-サウンド参考調査
-サイト試作
-サウンド構成の決定
-機材・録音調査

• サウンド試作
• コンテンツの完成
• webサイトへコンテンツ入れ込み

---

---

2026.07.17

取り組み

• 研究テーマの整理
• サイトUIの再考・調査

現状調査

• XXXXXXXXXXXXXXXXXXX
• XXXXXXXXXXXXXXXXXXX

研究テーマの整理

• XXXXXXXXXXXXXXXXXXX
• XXXXXXXXXXXXXXXXXXX

2026.07.10

取り組み

• 最終発表好評
• 今後の流れ

好評

• 環境音の組み合わせ自体に面白さがあるため、空間ごとにページを分けるのではなく、1ページ上で音を組み合わせ、背景やアニメーションを変化させることで、多様な空間を演出できる可能性がある。
• 機能を詰め込みすぎると画面が煩雑になるため、情報整理やデザインのバランスを考慮する必要がある。
• 電車の音は「電車の中で本を読むと落ち着く」といった体験につながるように、環境音にはそれぞれ異なる心理的効果がある可能性がある。また、自然音と生活音など、一見異なる種類の音を組み合わせることで、予想以上に心地よい空間が生まれることも考えられる。
• 同じ環境音でも、例えば焚き火や雨には「激しい音」「穏やかな音」などさまざまな種類が存在するため、その違いをアイコンやビジュアルで表現できる可能性がある。
• 「集中空間ラボ」という名称に限定せず、「環境音」そのものをテーマとしたサイトとして、環境音の組み合わせが生み出す面白さや、人への影響・新たな気づきを軸に研究テーマやタイトルを再検討すると良い。

今後の流れ

• 研究テーマについて、環境音の組み合わせが生み出す空間や人への影響を軸に再検討する。
• サイト構成を見直し、1ページ上で環境音の組み合わせを楽しめるUIを検討するとともに、背景やアニメーションによって多様な空間を演出できるデザインを制作する。
• フィールドレコーディングを継続し、自然音や生活音、交通音など、さまざまな環境音を収集・整理してコンテンツを充実させる。
• 自然音×生活音、自然音×電子音など、さまざまな環境音の組み合わせを試し、それぞれが与える印象や空間の特徴について考察を行う。
• 環境音の組み合わせによる効果や特徴を成果物の仕様として整理し、研究概要集にも考察内容を反映させる。

2026.07.03

取り組み

• 作品概要の作成
• 音環境の調査
• サイトアニメーションの調査

現状調査

2026.06.26

取り組み

• 作品概要の作成
• 音環境の調査
• サイトアニメーションの調査

現状調査

• XXXXXXXXXXXXXXXXXXX
• XXXXXXXXXXXXXXXXXXX

2026.06.19

取り組み

• サイト構造の修正
• 作品概要の作成

サイトマップ

サウンド構成

アイコン

試作

• https://fki-sz.github.io/sound-lab-2/
  • サイトページを増やす（集中空間以外への促し）
  • タイマーは削除（用途が明確になっていない）

2026.06.12

取り組み

• 機材選定
• 作品概要の作成
  
  

機材調査

マイク

• miduno|フィールド録音家
• 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
• naturemixer

現状調査

• 世界の調律〜サウンドスケープとは何か〜

2026.05.22

取り組み

• 中間発表
  
  

好評

• 「集中空間」以外の空間があっても良い
• サイトのページ展開＝部屋数を増やす
• 一音源は長さを30s~60sくらいに
• タイトルロゴの字並びを変更
• 何気ないものを音として探求することは面白い
• 背景のアニメーションのバリエーションを増やす
• スマホ対応
• タイマーとしての使い所の設定を考える

今後の流れ

• 集中空間に限定せず、リラックスや読書、瞑想、勉強など、さまざまな用途に対応できるサイトを目指し、タイマー機能の必要性や設置方法について見直す。
• サイト内の構成を見直し、複数の空間を体験できるようページ展開（部屋数）の拡充を行う。
• 背景アニメーションのバリエーションを増やし、それぞれの空間に適した演出を検討する。

2026.05.15

取り組み

• サイト試作
• サウンド録音技術調査
• 今後の流れ

サイト試作

• https://fki-sz.github.io/sound-lab./

現状調査

• フィールドレコーディング
• 録音方法・機材
• 環境音の作り方や実音録音の例
• 機材
  
  

今後の流れ

• サウンド構成について再検討を行う。現在使用している自然環境音だけでなく、時計の針の音や食器の重なる音などの日常生活音も取り入れ、より空間性や生活感を感じられる音環境を構築したい。また、日本特有の環境音についても調査・収集を行い、サウンドデザインへ活用していきたい。
• 実際の環境音を用いたサウンド制作を行うため、録音技術や編集方法について調査を進める。また、試験的に録音・編集を行いながら、空間の空気感や没入感を表現できるサウンドデザインについて検討していきたい。
• スマートフォンでの閲覧を想定し、レスポンシブデザインへの対応を進める。画面サイズによる操作性や視認性を考慮し、より直感的に利用できるUI設計を目指す。
• 前回の情報デザイン研究の授業での意見を踏まえ、利用者が自身の好きな音楽を取り込める仕組みについて検討する。また、利用者がより快適に空間へ没入できるよう、必要な機能や体験設計についても引き続き考察を行う。

2026.05.08

取り組み

• アイコン試作
• サイト試作

サウンドアイコン

サウンドアイコン試作

サイト試作

• https://fki-sz.github.io/sound-lab./

2026.05.01

取り組み

• サウンド仮作成
• アイコン試作

サウンド仮作成

音の特徴を言語化し、AIで生成。

• Pop Pop AI

サウンドアイコン

• 参考
• アイデアスケッチ

2026.04.24

取り組み

• 現状調査
• サウンド構成アイデア出し

現状調査

• 集中と落ち着きのための自然音
• タスクをする際に自然音をこうかについて
• 勉強効果を高める音の科学と活用
• 学びに最適な音環境とは
• ブラウンノイズとは
• ブラウンノイズの効果

サウンド構成

心情を落ち着かせ集中力を高めるために、比較的低い音域のサウンドを使用。
自然系のサウンドを多種配置することで、リラックス効果を高める。
雑音やノイズを追加し、意識的に感じることのない何気ない環境の音を再現。

• 自然系
  • 雨音
  • 流水
  • 波
  • 火
  • 森
  • 虫の音
  • 鳥
    
    
• 人的雑音系
  • 話し声
  • 紙の擦れる音
  • 外風
    
    
• ノイズ
  • ブラウンノイズ

2026.04.17

取り組み

• テーマ案決め
• ワイヤーフレーム改正

テーマ案

• 集中できる環境を整えるためのwebサイト

ワイヤーフレーム

2026.04.10

取り組み

• テーマ案の整理
• 現状調査

テーマ案候補

• 集中できる環境を整えるためのwebサイト

現状調査

• サウンドスケープ

memo

• 課題・観点
  • 環境がもたらす行動力への影響
    
    
• 興味
  • 言葉では表わせられない情報表現
  • 音の重なり