音とアニメーションの同期による没入型web体験
聴覚と視覚の連動が生む感覚的な心地よさの探究
- Fukui Suzu
- Keywords：sound, Audio Visualizer, Immersive Websites
- プロトタイプ
概要
これは何？
集中できる環境作りのサポートをする作業用webサイト
背景と目的
在宅環境では、空間が変わらない・生活との区切りが曖昧・時間的制約がないなどの理由で、集中力の低下や先延ばしが起こりやすい。
本研究の目的は、音とビジュアルの刺激によって“環境を切り替える感覚”をつくり出し、自宅でも作業に没入しやすい状態を作ることである。
コンセプト
シーンごとのサウンドに合わせて背景が変化したり、タイマー機能を効果的に使用したりすることで、自宅の中でも気分や作業内容に応じて“自分に合った作業環境”をつくれる Web 体験をデザインする。
成果物の仕様
webサイト
制作ツール
HTML,CSS,JavaScript
GarageBand
プロジェクトの期間
2025.09.15-
まとめ
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ガントチャート
ToDo
-テーマ案設定
-webサイト参考調査
-サイトマップ作成
-ワイヤーフレーム作成
- webサイト試作作成
- アニメーション調査
- アニメーション試作
- 音作り参考調査
- 音作り試作
進捗記録
2025.11.24
取り組み
プロトタイプ
現状調査
2025.11.17
取り組み
プロトタイプ
2025.10.27
取り組み
- サウンドの構成アイデア出し
- サイトマップ作成
- ワイヤーフレーム作成
- 技法・技術調査
サウンド構成アイデア出し
- カフェ環境音
- 焚き火
- 雨の日
- 話し声（雑談、環境音、雑音）
サイトマップ
ワイヤーフレーム
先行事例
2025.10.20
取り組み
- ターゲット調査・分析
- サイト機能のアイデア出し
- 現状調査
- 先行事例調査
- 参考技術調査
ターゲット調査・分析
サイト機能
- ポモドーロタイマー
- セッション記録（累積時間・回数の可視化）
- 時間帯に応じて最適な音を提案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
テーマ案候補
- 音色の違いによる心理的効果
- サウンドアートと映像表現がもたらす心理的効果
- 絵本と音の関係性
調査
事例
