集中空間ラボ
集中できる環境を整えるためのwebサイト
概要
これは何？
集中できる環境作りのサポートをする作業用webサイト
背景と目的
在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。
本研究の目的は、音とビジュアルの刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。
コンセプト
作業用途に応じた作業環境を作る
成果物の仕様
webサイト
制作ツール
HTML,CSS,JavaScript
GarageBand
プロジェクトの期間
2025.09.15-
まとめ
今期はサイトの機能やUIについて体験面を考慮して試作を作ることができた。
今後は中身のコンテンツを制作するために、音と心理的な側面のつながりを調査するとともに、音を構成していく上で、録音や編集技術を学習しながら制作を進めていきたい。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ガントチャート
ToDo
-テーマ案設定
-webサイト参考調査
-ターゲット調査・分析
-サイト機能アイデア出し
-空間構成アイデア出し
-サイトマップ作成
-ワイヤーフレーム作成
-プロトタイプ作成
-サウンド参考調査
- サイトのフレーム完成
- サウンド試作
- 空間別背景アニメーションor映像作成
- コンテンツの完成
- webサイトへコンテンツ入れ込み
進捗記録
2025.12.22
取り組み
プロトタイプ
https://fki-sz.github.io/II/
サイト案
- サウンドについて
- 好きな音楽を取り込められる仕組み
- 環境音をデザインした空間構成
- ビジュアルについて
- タイトルを含めた、サイト全体の雰囲気をまとめる
- 空間に合った視覚的なエフェクト、アニメーションor映像を作成する
2025.12.15
取り組み
最終発表好評
- スマートフォンに対応したレイアウトのデザインを行う
- 基本構造の確定
- 環境音に関して、様々な場面と効果を調査
- 視覚的な演出の工夫が必要
- 先行事例との違いを確認
- 音を混ぜる、音楽とノイズを組み合わせるという点で独自性がある
- タイマー機能について、アラームはどう鳴って、知らせるかを検討する
- ノイズキャンセル的な思考がある中で、サウンドをどう活用できるか再調査
今後の方針
- サイト機能について、音楽を取り込められる仕組みを検討する
- 視覚的な演出において、抽象的なエフェクトやアニメーションにするのか、実写映像等を使用して、より没入感を作るのか、両方の効果を試す
- 環境音のデザインについて、様々な場面を調査する
- タイトルの名前、サイト全体の雰囲気を再検討する
2025.12.08
取り組み
- プロトタイプ作成
- サウンド調査
- 技法・技術調査
- 制作の現状と今後について
プロトタイプ
https://fki-sz.github.io/II/
サウンド
技法・技術調査
フリー使用サイト
制作の現状と今後について
- 現状
- ターゲット調査
- サイトの機能とUIの調整・試作
- サウンド調査・仮制作
- 今後
- サイト全体（サウンドページ＋必要な情報の記載ページ作成）の制作
- サイトコンテンツ（サウンド・情報まとめ）の作成
2025.12.01
取り組み
プロトタイプ
https://fki-sz.github.io/II/
サウンド調査
サウンド参考リンク
2025.11.24
取り組み
- プロトタイプ作成
- 調査・分析
- 空間構成アイデア出し
プロトタイプ
https://fki-sz.github.io/II/
現状調査
BGM参考
空間構成アイデア出し
- 環境音による場面分け
- 使用用途（気分）に合わせたジャンル分け
2025.11.17
取り組み
プロトタイプ
https://fki-sz.github.io/II/
技法・技術調査
2025.10.27
取り組み
- サイト機能の決定
- １空間のサウンド構成アイデア出し
- サイトマップ作成
- ワイヤーフレーム作成
サイト機能
- ポモドーロタイマー（25分→5分のサイクル）
- サウンド音量バランス調整
サウンド構成アイデア出し
- カフェ環境音
- 焚き火
- 雨の日
- 話し声（雑談、環境音、雑音）
サイトマップ
ワイヤーフレーム
2025.10.20
取り組み
- ターゲット調査・分析
- サイト機能のアイデア出し
- 現状調査
- 先行事例調査
現状調査
ターゲット調査・分析
- 課題
- 自宅で作業するが、集中できない
- 注意散漫・ADHD的傾向で、目的と違う作業をしてしまいがち
- 外部環境（誘惑・生活感）によって作業スイッチが入りづらい
- 原因
- 作業するための環境要因（視覚・聴覚）が整っていない
- 時間の感覚が曖昧で、集中のリズムが構築できない
- 目的のタスク以外に気持ちが流れやすい（刺激に弱い）
- 解決法
- 作業空間を切り替えるために、web上での音と視覚的なエフェクトを介して、集中できる空間を作る
- 活用シーン
- 自宅での作業・勉強中に
- 夜のリラックス作業・クールダウン
サイト機能アイデア出し
- ポモドーロタイマー
- セッション記録（累積時間・回数の可視化）
- 時間帯に応じて最適な音を提案or 時間帯を忘れるような空間設計の方が没入空間になって効果的であるかも
- 音とビジュアルの連動
- シーン（状況）選択（森、雨、夜の街…）
- マルチタスク抑制→全画面モード、余白を大きくしたUI
先行事例
2025.10.13
取り組み
中間発表好評
- 体験の要素を鑑みて、色んな音楽ファイルを取り込めるような仕組みを考えてみる。また、タイマーや、スクロールしたらビジュアルが変わる仕組みなど。
- 音（音楽）の用途について深ぼって考える。作業中に歌詞のある音楽を聴くのか。
- 目的に応じた体験要素を考え直す。
研究概要（改）
- これは何？
集中できる環境作りのサポートをする作業用webサイト
- 背景と目的
在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。
本研究の目的は、音とビジュアルの刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。
- コンセプト
シーンごとのサウンドに合わせて背景が変化したり、タイマー機能を効果的に使用したりすることで、自宅の中でも気分や作業内容に応じて“自分に合った作業環境”をつくれる Web 体験をデザインする。
現状調査
2025.10.06
取り組み
- webサイト試作
- 人々への影響をもたらすアンビエントミュージックの調査
- 音の可視化における波形・図形アニメーションの調査
webサイト
2Dのオーディオビジュアライザーの試作
サウンド参考
アニメーション参考
2025.09.29
取り組み
- ToDo・スケジュール作成
- サイトマップ・ワイヤーフレーム作成
スケジュール
ガントチャート
サイトマップ
ワイヤーフレーム
2025.09.22
取り組み
- テーマ案整理
- 研究目的・コンセプトの設定
- スケジュール作成
- 現状調査
- 技法・技術調査
テーマ案整理
- 環境音と映像の組み合わせ
- 自律神経を整えるwebサイト
- web上で作る没入空間
テーマ案
音とアニメーションによって感覚的UXを実現するWebサイト制作
背景・目的
- 普段、映像視聴やアプリ操作の中で、音とアニメーションが連動することで生まれる心地よさや安心感を感じる場面がある。このような聴覚と視覚の連動は、違和感のない自然な体験を生み、使用者の感情を安定させる要素として作用していると考えられる。
- 本研究では、音とアニメーションの連動によって生まれる感覚的な心地よさが、人々の没入感や集中力の向上にどのような影響を与えるかを探ることを目的とする。さらに、その効果を体験的に示すため、音とアニメーションを組み合わせたWeb上の没入空間を制作し、ユーザーが空間的な気持ちの切り替えを体験できる環境を構築する。
コンセプト
音と動きで、感覚的な没入を生むWeb体験
現状調査
先行事例
技法・技術情報
2025.09.15
取り組み
キーワード
- 音楽、楽器、環境音、光・照明、心理学、絵本、比較、個性、素材、博物館
- 教育、都市、再利用
- 映像、サウンド、web、UI/UX
テーマ案候補
- 音色の違いによる心理的効果
- サウンドアートと映像表現がもたらす心理的効果
- 絵本と音の関係性
調査
事例
